Merge pull request #118 from SpeciesFileGroup/development

Add markdown anchor and convert a tag to vue router link

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.4",
+    "markdown-it-anchor": "^8.6.7",
     "pinia": "^2.1.6",
     "unhead": "^1.2.2",
     "vue": "^3.3.4",

src/plugins/markdown/relativeToRouter.js

@@ -0,0 +1,29 @@
+export default (md) => {
+  const scan = (state) => {
+    state.tokens.forEach((tokens) => {
+      if (tokens.type !== 'inline') {
+        return
+      }
+      const inlineTokens = tokens.children
+      let isRT = false
+      for (let i = 0; i < inlineTokens.length; i++) {
+        if (isRT && inlineTokens[i].type === 'link_close') {
+          inlineTokens[i].tag = 'router-link'
+          isRT = false
+        } else if (inlineTokens[i].type === 'link_open') {
+          const attrs = inlineTokens[i].attrs
+          const href = attrs?.find((v) => v[0] === 'href')
+          if (href && !href[1].startsWith('http')) {
+            inlineTokens[i].tag = 'router-link'
+            inlineTokens[i].attrs = [['to', href[1]]]
+            isRT = true
+          } else {
+            inlineTokens[i].attrs.push(['rel', 'noopener noreferrer'])
+            inlineTokens[i].attrs.push(['target', '_blank'])
+          }
+        }
+      }
+    })
+  }
+  md.core.ruler.push('router-link', scan)
+}

src/router/index.js

@@ -38,6 +38,11 @@ function getHistory() {
 export function createRouter() {
   return _createRouter({
     history: getHistory(),
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+      if (to.hash) {
+        return { el: to.hash }
+      }
+    }
   })
 }

vite.config.js

@@ -3,6 +3,8 @@ import { loadConfiguration } from './src/utils/loadConfiguration.js'
 import path from 'path'
 import Vue from '@vitejs/plugin-vue'
 import Markdown from 'vite-plugin-md'
+import markdownAnchor from 'markdown-it-anchor'
+import markdownRelativeToRouter from './src/plugins/markdown/relativeToRouter.js'
 import Pages from 'vite-plugin-pages'
 import './src/utils/globalVars'
 
@@ -26,7 +28,11 @@ export default () => {
       }),
       Markdown({
         wrapperClasses:
-          '!container mx-auto p-4 sm:pl-0 sm:pr-0 prose dark:prose-invert box-border'
+          '!container mx-auto p-4 sm:pl-0 sm:pr-0 prose dark:prose-invert box-border',
+        markdownItSetup(md) {
+          md.use(markdownAnchor)
+        },
+        markdownItUses: [markdownRelativeToRouter]
       }),
       Pages({
         dirs: 'pages',