anchors available. scroll to not working.

Author: s-light

markdown-it-config.js

@@ -38,6 +38,7 @@ const markdownItSetup = async (md) => {
 
     // https://github.com/valeriangalliat/markdown-it-anchor/tree/master
     md.use(mditPluginAnchor, {
+        permalink: mditPluginAnchor.permalink.headerLink(),
         // https://github.com/valeriangalliat/markdown-it-anchor/tree/master?tab=readme-ov-file#link-after-header
         // permalink: mditPluginAnchor.permalink.linkAfterHeader({
         //     style: "visually-hidden",

src/css/app.scss

@@ -53,7 +53,6 @@ body.body--light {
     --main-background: var(--mys-basics-50);
     --main-background-dots: hsla(198, 63%, 15%, 0.5);
     // --main-background-dots: var(--mys-blue-950);
-
 }
 
 body.body--dark {
@@ -85,7 +84,7 @@ body {
 }
 
 a {
-	color: var(--text-primary);
+    color: var(--text-primary);
 }
 
 body.body--light {
@@ -157,3 +156,12 @@ html {
     color: var(--text-primary);
 }
 
+// headings
+.header-anchor {
+	text-decoration: none;
+}
+
+.header-anchor:hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+}

src/pages/MKS_Part_Details.vue

@@ -72,7 +72,7 @@ const coverImage = `../${part.path_base}/${part.meta.coverImage}`
     padding: 1em
 .back
     display: block
-    margin-left: 3em
+    // margin-left: 3em
     cursor: pointer
 header
     display: flex

src/router/index.js

@@ -1,11 +1,12 @@
-import { route } from "quasar/wrappers";
+import { route } from 'quasar/wrappers'
+// import { nextTick } from 'vue'
 import {
     createRouter,
     createMemoryHistory,
     createWebHistory,
     createWebHashHistory,
-} from "vue-router";
-import routes from "./routes";
+} from 'vue-router'
+import routes from './routes'
 
 /*
  * If not building with SSR mode, you can
@@ -19,16 +20,27 @@ import routes from "./routes";
 export default route(function (/* { store, ssrContext } */) {
     const createHistory = process.env.SERVER
         ? createMemoryHistory
-        : process.env.VUE_ROUTER_MODE === "history"
-        ? createWebHistory
-        : createWebHashHistory;
+        : process.env.VUE_ROUTER_MODE === 'history'
+          ? createWebHistory
+          : createWebHashHistory
 
     const Router = createRouter({
         // scrollBehavior: () => ({ left: 0, top: 0 }),
         // https://router.vuejs.org/guide/advanced/scroll-behavior.html#Scroll-Behavior
         // scrollBehavior(to, from, savedPosition) {
-        scrollBehavior(to,) {
+        scrollBehavior(to) {
             if (to.hash) {
+                // https://router.vuejs.org/guide/advanced/scroll-behavior.html#Delaying-the-scroll
+                // return new Promise((resolve) => {
+                //     setTimeout(() => {
+                //         resolve({
+                //             el: to.hash,
+                //             behavior: 'smooth',
+                //         })
+                //     }, 500)
+                // })
+                // this does not really work.
+                // seems the md content is not rendered fast enough...
                 return {
                     el: to.hash,
                     behavior: 'smooth',
@@ -43,5 +55,23 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.VUE_ROUTER_BASE),
     })
 
-    return Router;
-});
+    // https://stackoverflow.com/questions/62409643/scroll-to-anchor-on-refresh-or-on-manual-url-change?noredirect=1&lq=1
+    // Router.afterEach((to, from) => {
+    //     if (to.hash && to.path != from.path) {
+    //         // Vue.nextTick().then(() => VueScrollTo.scrollTo(to.hash, 700))
+    //         nextTick().then(() => {
+    //             setTimeout(() => {
+    //                 // console.log(`to.hash.replace('#', '')`, to.hash.replace('#', ''))
+    //                 const target = document.getElementById(to.hash.replace("#", ''))
+    //                 // console.log('target', target)
+    //                 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+    //                 target.scrollIntoView({
+    //                     behavior: 'smooth',
+    //                 })
+    //             }, 200);
+    //         })
+    //     }
+    // })
+
+    return Router
+})