autolink headings

website/astro.config.mjs

@@ -5,11 +5,24 @@ import react from '@astrojs/react';
 // https://astro.build/config
 import mdx from '@astrojs/mdx';
 
+import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
 // https://astro.build/config
 
 // https://astro.build/config
 import tailwind from '@astrojs/tailwind';
 
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    remarkToc,
+    // E.g. `remark-frontmatter`
+  ],
+  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+};
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [
@@ -17,7 +30,7 @@ export default defineConfig({
     preact(),
     // Enable React for the Algolia search component.
     react(),
-    mdx(),
+    mdx(options),
     tailwind(),
   ],
   site: `https://strudel.tidalcycles.org`,

website/package.json

@@ -30,7 +30,10 @@
     "tailwindcss": "^3.2.4",
     "@heroicons/react": "^2.0.13",
     "@supabase/supabase-js": "^1.35.3",
-    "nanoid": "^4.0.0"
+    "nanoid": "^4.0.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "remark-toc": "^8.0.1"
   },
   "devDependencies": {
     "html-escaper": "^3.0.3"

website/src/components/Header/Header.astro

@@ -15,7 +15,7 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 ---
 
-<nav class="flex justify-between py-2 px-4 items-center h-25 bg-header" title="Top Navigation">
+<nav class="flex justify-between py-2 px-4 items-center h-25 bg-[#161616]" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->

website/src/docs/docs.css

@@ -0,0 +1,36 @@
+h1::before,
+h2::before,
+h3::before,
+h4::before,
+h5::before,
+h6::before {
+  display: block;
+  content: ' ';
+  margin-top: -70px;
+  height: 70px;
+  visibility: hidden;
+  pointer-events: none;
+  position: relative;
+}
+
+h1:hover .icon-link,
+h2:hover .icon-link,
+h3:hover .icon-link,
+h4:hover .icon-link,
+h5:hover .icon-link,
+h6:hover .icon-link,
+.icon.icon-link:hover {
+  visibility: visible;
+}
+.icon.icon-link {
+  background-image: url(./link.svg);
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  display: block;
+  position: absolute;
+  visibility: hidden;
+  margin-left: -20px;
+  width: 20px;
+  margin-top: 8px;
+}

website/src/docs/link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+  <path fill-rule="evenodd" fill="white"
+    d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
+  </path>
+</svg>

website/src/layouts/MainLayout.astro

@@ -8,6 +8,7 @@ import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
 import * as CONFIG from '../config';
 import type { MarkdownHeading } from 'astro';
 import Footer from '../components/Footer/Footer.astro';
+import '../docs/docs.css';
 
 type Props = {
   frontmatter: CONFIG.Frontmatter;