feat: update docs toc

Author: ducksoupdev

package-lock.json

@@ -34,7 +34,7 @@
     "npm-run-all": "4.1.5",
     "open-cli": "6.0.1",
     "replace-in-file": "6.2.0",
-    "rollup": "2.45.2",
+    "rollup": "2.46.0",
     "rollup-plugin-terser": "7.0.2",
     "standard": "16.0.3",
     "start-server-and-test": "1.12.1"

package.json

@@ -39,7 +39,7 @@ module.exports = function(eleventyConfig) {
     let newStr = String(s).replace(/New\ in\ v\d+\.\d+\.\d+/, "")
     newStr = newStr.replace(/Coming\ soon\ in\ v\d+\.\d+\.\d+/, "")
     newStr = newStr.replace(/⚠️/g, "")
-    newStr = newStr.replace(/[?!]/g, "")
+    newStr = newStr.replace(/[?!#]/g, "")
     newStr = newStr.replace(/<[^>]*>/g, "")
     return newStr;
   }
@@ -56,8 +56,8 @@ module.exports = function(eleventyConfig) {
       permalink: true,
       slugify: markdownItSlugify,
       permalinkBefore: false,
-      permalinkClass: "direct-link",
-      permalinkSymbol: "",
+      permalinkClass: "fd-direct-link",
+      permalinkSymbol: "#",
       level: [1,2,3,4,5]
     })
     .use(markdownItToc, {
@@ -78,6 +78,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginTOC, {
     tags: ['h2', 'h3', 'h4', 'h5'],
     wrapperClass: 'toc__nav',
-    ul: true
+    ul: true,
+    ignoredElements: ['.fd-direct-link']
   })
 }

site/.eleventy.js

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{title}}</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="icon" href="/favicon.ico">
     <link rel="icon" href="/img/logo.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@@ -47,7 +46,7 @@
           <img id="ficus-logo-white" src="/assets/img/ficus-script-logo-white.svg" height="32" alt="FicusJS Components">
         </nav>
 
-        <button type="button" class="fc-navbar__toggler">
+        <button type="button" class="fc-navbar__toggler" aria-label="Navbar toggle button">
           <svg>
             <use xlink:href="#menu" href="#menu"></use>
           </svg>

site/src/_includes/main.njk

@@ -0,0 +1,8 @@
+['https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&display=swap'].forEach(function (f) {
+  const gf = document.createElement('link')
+  gf.rel = 'stylesheet'
+  gf.href = f
+  gf.type = 'text/css'
+  const gd = document.getElementsByTagName('link')[0]
+  gd.parentNode.insertBefore(gf, gd)
+})

site/src/assets/js/fonts.mjs

@@ -2,6 +2,7 @@ import { use } from 'https://cdn.skypack.dev/ficusjs@3'
 import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'
 import { module as navbarModule } from 'https://cdn.skypack.dev/@ficusjs/components/custom-elements/navbar'
 import { module as dropdownModule } from 'https://cdn.skypack.dev/@ficusjs/components/custom-elements/dropdown'
+import './fonts.mjs'
 import './sidebar-details.mjs'
 import './theme.mjs'
 import './adaptive-tables.mjs'