docs - anchors - fix accessibility

Author: nruffing

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { Readable } from 'stream'
 import { pwaPlugin } from '@vuepress/plugin-pwa'
 import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import anchor from 'markdown-it-anchor'
 
 const domain = 'datagridvue.com'
 const hostname = `https://${domain}`
@@ -188,6 +189,9 @@ export default defineUserConfig({
     importCode: {
       handleImportPath: str => str.replace(/^@temp/, tempDir),
     },
+    anchor: {
+      permalink: anchor.permalink.headerLink({}),
+    },
   },
   plugins: [
     shikiPlugin({

vuepress/.vuepress/config.ts

@@ -67,6 +67,16 @@ html.dark {
 /*
 TYPOGRAPHY
 */
+
+/* 
+Changes to the default theme to support using headerLink of markdown-it-anchor for proper accessibility.
+*/
+a.header-anchor {
+  opacity: 1;
+  float: none;
+  margin-left: 0;
+}
+
 h2 {
   border-bottom-color: var(--color-secondary-opaque);
 }
@@ -82,14 +92,19 @@ h2 {
   padding-top: 0;
 }
 
-h1 {
+h1, h1 a {
   color: var(--c-text);
 }
 
-h2, h3, h4, h5, h6 {
+h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: var(--color-secondary);
 }
 
+h1, h2, h3, h4, h5, h6 {
+  /* add scroll margin to account for fixed navbar */
+  scroll-margin-top: calc(var(--navbar-height) + 1rem);
+}
+
 p a code {
   color: var(--color-accent3);
 }

vuepress/.vuepress/styles/index.scss

@@ -32,6 +32,7 @@
     "@vuepress/theme-default": "2.0.0-rc.0",
     "@vuepress/utils": "2.0.0-rc.0",
     "data-grid-vue": "workspace:^",
+    "markdown-it-anchor": "^8.6.7",
     "markdown-it-include": "^2.0.0",
     "postcss": "^8.4.31",
     "sitemap": "^7.1.1",