feat(docs): add header links (#2882)

* feat(docs): add header links * style(documentation): update header link styling
interledger · Sep 24, 2024 · 00e9bb3 · 00e9bb3
1 parent 2ca8bf4
commit 00e9bb3
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 188 deletions.
diff --git a/packages/documentation/astro.config.mjs b/packages/documentation/astro.config.mjs
@@ -5,14 +5,25 @@ import remarkMath from 'remark-math'
 import rehypeMathjax from 'rehype-mathjax'
 import GraphQL from 'astro-graphql-plugin'
 import starlightLinksValidator from 'starlight-links-validator'
+import { rehypeHeadingIds } from '@astrojs/markdown-remark'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://rafiki.dev',
   outDir: './build',
   markdown: {
     remarkPlugins: [remarkMath],
-    rehypePlugins: [rehypeMathjax]
+    rehypePlugins: [
+      rehypeMathjax,
+      rehypeHeadingIds,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'wrap'
+        }
+      ]
+    ]
   },
   integrations: [
     starlight({

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -9,12 +9,14 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/markdown-remark": "^5.2.0",
     "@astrojs/starlight": "^0.25.5",
     "@interledger/docs-design-system": "^0.5.2",
     "astro": "4.13.4",
     "astro-graphql-plugin": "^0.3.0",
     "graphql": "16.8.1",
     "mermaid": "^10.9.1",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-mathjax": "^6.0.0",
     "remark-math": "^6.0.0",
     "starlight-links-validator": "^0.10.1"

diff --git a/packages/documentation/src/styles/rafiki.css b/packages/documentation/src/styles/rafiki.css
@@ -53,3 +53,13 @@
 .accounting-table.accounting-table tr td {
   text-align: center;
 }
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a:hover {
+  color: var(--sl-color-accent-high);
+}