Merge pull request #19 from jbltx/develop

Version 0.5
jbltx · Jul 30, 2022 · f209cd7 · f209cd7
2 parents ac96cd3 + e151b5c
commit f209cd7
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 44 deletions.
diff --git a/.github/workflows/release-with-artifact.yml b/.github/workflows/release-with-artifact.yml
@@ -1,40 +1,27 @@
-name: Create release when pushing tag
+name: Archive & upload template without demo
 
 on:
-  push:
-    tags:
-      - v*
+  release:
+    types:
+      - created
 
 jobs:
   build:
-    name: Create Release
+    name: Archive & upload template without demo
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-      - name: Put tag in environment variable
+      - name: Archive template and license
         run: |
-          echo "HEAD_TAG=$(git tag --points-at HEAD)" >> $GITHUB_ENV
-      - name: Build project # This would actually build your project, using zip for an example artifact
-        run: |
-          zip -r discordfx-${{ env.HEAD_TAG }}.zip README.md LICENSE discordfx
-      - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ env.HEAD_TAG }}
-          release_name: Release ${{ env.HEAD_TAG }}
-          draft: false
-          prerelease: false
-      - name: Upload Release Asset
+          zip -r discordfx-${{ github.event.release.tag_name }}.zip README.md LICENSE discordfx
+      - name: Upload archive
         id: upload-release-asset 
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          upload_url: ${{ steps.create_release.outputs.upload_url }} # This pulls from the CREATE RELEASE step above, referencing it's ID to get its outputs object, which include a `upload_url`. See this blog post for more info: https://jasonet.co/posts/new-features-of-github-actions/#passing-data-to-future-steps 
-          asset_path: ./discordfx-${{ env.HEAD_TAG }}.zip
-          asset_name: discordfx-${{ env.HEAD_TAG }}.zip
+          upload_url: ${{ github.event.release.upload_url }} 
+          asset_path: ./discordfx-${{ github.event.release.tag_name }}.zip
+          asset_name: discordfx-${{ github.event.release.tag_name }}.zip
           asset_content_type: application/zip
diff --git a/README.md b/README.md
@@ -35,7 +35,6 @@ To change it, just override the value in your own `styles/main.css` file for exa
 ## Todos
 
 - [ ] Add documentation versioning
-- [ ] Support of TOC searching/filtering
 
 ## Disclaimer
 

diff --git a/demo/docfx.json b/demo/docfx.json
@@ -26,8 +26,9 @@
       "_appTitle": "ACME Documentation",
       "_enableSearch": true,
       "_disableAffix": true,
+      "_enableNewTab": true,
       "_appFooter": "ACME Inc.<br/>Generated by <b>DocFX</b>",
-      "_disableSideFilter": true,
+      "_disableSideFilter": false,
       "_gitContribute": {
         "repo": "https://github.com/jbltx/DiscordFX"
       },

diff --git a/discordfx/layout/_master.tmpl b/discordfx/layout/_master.tmpl
@@ -13,7 +13,7 @@
   <body>
         <div class="top-navbar">
 
-            <a href="javascript:void(0);" class="burger-icon" onclick="toggleMenu()">
+            <a class="burger-icon" onclick="toggleMenu()">
                 <svg name="Hamburger" 
                     style="vertical-align: middle;"
                     width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20 6H4V9H20V6ZM4 10.999H20V13.999H4V10.999ZM4 15.999H20V18.999H4V15.999Z"></path></svg>
@@ -47,7 +47,11 @@
 
             <main class="main-panel">
 
-                <div role="main" class="hide-when-search" >
+                {{#_enableSearch}}
+                    {{>partials/searchResults}}
+                {{/_enableSearch}}
+
+                <div role="main" class="main-panel-content hide-when-search" >
 
                     {{^_disableBreadcrumb}}
                         {{>partials/breadcrumb}}

diff --git a/discordfx/partials/head.tmpl.partial b/discordfx/partials/head.tmpl.partial
@@ -10,7 +10,7 @@
   {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
   <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/night-owl.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/night-owl.min.css">
   <link rel="stylesheet" href="{{_rel}}styles/colors.css">
   <link rel="stylesheet" href="{{_rel}}styles/discord.css">
   <link rel="stylesheet" href="{{_rel}}styles/main.css">

diff --git a/discordfx/partials/navbar.tmpl.partial b/discordfx/partials/navbar.tmpl.partial
@@ -1,12 +1,20 @@
 {{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
 
-
-
 <div>
-  {{>partials/logo}}
+  <div class="mobile-hide">
+    {{>partials/logo}}
+  </div>
 
-  <div id="navbar">
+  {{#_enableSearch}}
+      <div class="sidesearch">
+          <form id="search" role="search" class="search">
+              <svg width="20" height="20" class="search-icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              <input type="text" id="search-query" placeholder="{{__global.search}}" autocomplete="off">
+          </form>
+      </div>
+  {{/_enableSearch}}
 
+  <div id="navbar">
   </div>
 
 </div>

diff --git a/discordfx/partials/scripts.tmpl.partial b/discordfx/partials/scripts.tmpl.partial
@@ -3,7 +3,7 @@
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
 <script type="text/javascript" src="{{_rel}}styles/jquery.twbsPagination.js"></script>
 <script type="text/javascript" src="{{_rel}}styles/url.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>

diff --git a/discordfx/partials/searchResults.tmpl.partial b/discordfx/partials/searchResults.tmpl.partial
@@ -0,0 +1,9 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div id="search-results" class="main-panel-content" style="display: none;">
+  <h1 class="search-list">{{__global.searchResults}} <span></span></h1>
+  <div class="sr-items">
+    <p><svg class="index-loading" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></p>
+  </div>
+  <ul id="pagination" data-first={{__global.pageFirst}} data-prev={{__global.pagePrev}} data-next={{__global.pageNext}} data-last={{__global.pageLast}}></ul>
+</div>
diff --git a/discordfx/styles/colors.css b/discordfx/styles/colors.css
@@ -14,7 +14,7 @@
     --link-color: #00b0f4;
     --link-hover-color: #4bd5ff;
     --link-active-color: #fff;
-    --link-active-bg-color: #7289da;
+    --link-active-bg-color: #5468ff;
     --h3-color: #ffffff85;
     --h4-color: #ffffffeb;
     --h5-color: #ffffffd1;

diff --git a/discordfx/styles/discord.css b/discordfx/styles/discord.css
@@ -23,6 +23,10 @@
     text-align-last: start !important;
 }
 
+:focus-visible {
+    outline-color: var(--link-active-bg-color);
+}
+
 *, :after, :before
 {
     -webkit-box-sizing: border-box;
@@ -125,11 +129,59 @@ ul.level2, ul.level3
     font-size: .9em;
 }
 
+input[type="text"] {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0 36px;
+    height: 36px;
+    font-size: 15px;
+    background: none;
+    border: 1px solid var(--topbar-bg-color);
+    border-radius: 4px;
+    color: var(--sidebar-item-color);
+}
+
+input[type="text"]:hover {
+    border-color: var(--link-active-bg-color);
+}
+
+.search,
+.toc-filter {
+    position: relative;
+    margin: 1em;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.filter-icon {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 8px;
+}
+
+.clear-icon {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    right: 8px;
+}
+
+.search-icon {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 8px;
+}
+
 a 
 {
     color: var(--link-color);
     text-decoration: none;
     transition: color .25s;
+    cursor: pointer;
 }
 
 a:focus, a:hover 
@@ -138,8 +190,13 @@ a:focus, a:hover
     text-decoration: underline;
 }
 
+a.anchorjs-link {
+    color: var(--sidebar-item-color);
+}
+
 a.anchorjs-link:hover {
     text-decoration: none;
+    color: var(--link-active-color);
 }
 
 a.active, a:active
@@ -170,8 +227,7 @@ nav
     top: 40px;
     bottom: 0;
     background-color: var(--sidebar-bg-color);
-    overflow-y: auto;
-
+    overflow-y: overlay;
     display: flex;
     flex-direction: column;
 
@@ -186,7 +242,7 @@ h1:first-child
 
 .sidebar
 {
-    padding: 32px 17px 32px 32px;
+    padding: 32px;
     flex: 1;
 }
 
@@ -249,7 +305,12 @@ span.sidebar-item
     background-color: var(--main-bg-color);
     flex: 1;
     overflow-y: auto;
+}
+
+.main-panel-content {
     padding: 20px 40px;
+    max-width: 1440px;
+    margin: auto;
 }
 
 .top-navbar 
@@ -295,6 +356,20 @@ span.sidebar-item
     padding: 0 .5em;
     font-size: .9em;
     color: var(--link-active-color);
+    font-weight: 500;
+}
+
+.brand:hover > .brand-title, 
+.brand:focus > .brand-title 
+{
+    text-decoration: underline;
+    color: var(--sidebar-item-2nd-color);
+}
+
+.brand:hover > .logomark,
+.brand:focus > .logomark
+{
+    opacity: 0.5;
 }
 
 .footer 
@@ -551,16 +626,16 @@ code
     float: right;
 }
 
-.mobile-hide 
+.hide 
 {
-    visibility: hidden;
+    display: none;
 }
 
-@media (min-width: 1024px) 
+@media (max-width: 1023.98px) 
 {
     .mobile-hide 
     {
-        visibility: visible;
+        display: none;
     }
 }
 
@@ -594,7 +669,7 @@ ul.level1 > li > .expand-stub
     top: 5px;
     left: 5px;
     background-repeat: no-repeat;
-    background: url(/styles/down-arrow.svg);
+    background: url(down-arrow.svg);
 }
 
 .toc .nav > li.active > .expand-stub::before, .toc .nav > li.in > .expand-stub::before, .toc .nav > li.in.active > .expand-stub::before, .toc .nav > li.filtered > .expand-stub::before
@@ -678,4 +753,49 @@ ul.level3 > li > a.sidebar-item.active
 
 .inheritance .level5 {
     margin-left: 5em;
+}
+
+.pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+}
+
+li.page-item {
+    height: 36px;
+    min-width: 36px;
+    line-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 8px;
+}
+
+li.page-item.active {
+    background-color: var(--link-active-bg-color);
+}
+
+li.page-item > a.page-link {
+    color: var(--sidebar-item-color);
+}
+
+li.page-item.active > a.page-link {
+    color: var(--link-active-color);
+}
+
+li.page-item.disabled > a.page-link {
+    color: var(--sidebar-item-2nd-color);
+    cursor: not-allowed;
+}
+
+li.page-item > a.page-link:hover {
+    color: var(--link-active-color);
+    text-decoration: none;
+}
+
+li.page-item.disabled > a.page-link:hover {
+    color: var(--sidebar-item-2nd-color);
+    text-decoration: none;
 }
diff --git a/discordfx/styles/main.js b/discordfx/styles/main.js
@@ -17,4 +17,13 @@ function toggleMenu() {
         b.classList.remove("hideThat");
         b.classList.add("showThat");
     }
-}
+}
+
+(function () {
+    anchors.options = {
+      placement: 'right',
+      visible: 'hover'
+    };
+    anchors.removeAll();
+    anchors.add('article h2:not(.no-anchor), article h3:not(.no-anchor), article h4:not(.no-anchor)');
+})();