Allow config options & dynamic text

Allows skip link text to be updated dynamically based on the route path. See docisfy site’s “Translations” menu as an example of why this is necessary.
docsifyjs · Oct 7, 2023 · 14c4641 · 14c4641
1 parent d9ca92b
commit 14c4641
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -89,6 +89,12 @@
           },
           pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn'],
         },
+        skipLink: {
+          '/es/': 'Saltar al contenido principal',
+          '/de-de/': 'Ga naar de hoofdinhoud',
+          '/ru-ru/': 'Перейти к основному содержанию',
+          '/zh-cn/': '跳到主要内容',
+        },
         vueComponents: {
           'button-counter': {
             template: /* html */ `<button @click="count += 1">You clicked me {{ count }} times</button>`,

diff --git a/src/core/render/index.js b/src/core/render/index.js
@@ -242,6 +242,26 @@ export function Render(Base) {
         el.setAttribute('href', nameLink[match]);
       }
     }
+
+    #renderSkipLink(vm) {
+      const { skipLink } = vm.config;
+
+      if (skipLink !== false) {
+        const el = dom.getNode('#skip-to-content');
+        const text =
+          typeof skipLink === 'string'
+            ? skipLink
+            : skipLink?.[vm.route.path] || 'Skip to main content';
+
+        if (el) {
+          el.innerHTML = text;
+        } else {
+          const html = `<button id="skip-to-content">${text}</button>`;
+          dom.body.insertAdjacentHTML('afterbegin', html);
+        }
+      }
+    }
+
     _renderTo(el, content, replace) {
       const node = dom.getNode(el);
       if (node) {
@@ -396,6 +416,9 @@ export function Render(Base) {
     _updateRender() {
       // Render name link
       this.#renderNameLink(this);
+
+      // Render skip link
+      this.#renderSkipLink(this);
     }
 
     initRender() {
@@ -414,8 +437,6 @@ export function Render(Base) {
       if (el) {
         let html = '';
 
-        html += tpl.skipLink();
-
         if (config.repo) {
           html += tpl.corner(config.repo, config.cornerExternalLinkTarget);
         }
@@ -450,8 +471,7 @@ export function Render(Base) {
         if (isMergedSidebar) {
           dom.find('.sidebar').prepend(navEl);
         } else {
-          dom.find('#skip-to-content').after(navEl);
-
+          dom.body.prepend(navEl);
           navEl.classList.add('app-nav');
           navEl.classList.toggle('no-badge', !config.repo);
         }

diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js
@@ -122,15 +122,3 @@ export function helper(className, content) {
 export function theme(color) {
   return /* html */ `<style>:root{--theme-color: ${color};}</style>`;
 }
-
-/**
- * Renders skip link
- * @returns {String} HTML of the skip link
- */
-export function skipLink() {
-  return /* html */ `
-    <button id="skip-to-content">
-      Skip to main content
-    </button>
-  `;
-}