From 869a44dd0422395edf8540f28c6f0e2af3f52b24 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Dec 2022 23:19:38 +0100
Subject: [PATCH] autolink headings

---
 website/astro.config.mjs                   | 15 ++++++++-
 website/package.json                       |  5 ++-
 website/src/components/Header/Header.astro |  2 +-
 website/src/docs/docs.css                  | 36 ++++++++++++++++++++++
 website/src/docs/link.svg                  |  5 +++
 website/src/layouts/MainLayout.astro       |  1 +
 6 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 website/src/docs/docs.css
 create mode 100644 website/src/docs/link.svg

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index f18ae37a..873712b1 100644
--- a/website/astro.config.mjs
+++ b/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`,
diff --git a/website/package.json b/website/package.json
index 47d39d07..7319cce3 100644
--- a/website/package.json
+++ b/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"
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index c7f672c8..a84b1a8e 100644
--- a/website/src/components/Header/Header.astro
+++ b/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> -->
diff --git a/website/src/docs/docs.css b/website/src/docs/docs.css
new file mode 100644
index 00000000..4ca17c9f
--- /dev/null
+++ b/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;
+}
diff --git a/website/src/docs/link.svg b/website/src/docs/link.svg
new file mode 100644
index 00000000..b45044c2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index 6af2541c..a57f705a 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/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;