fix: anchor links

fixes https://github.com/tidalcycles/strudel/issues/432
+ fix style regression in mini repl

website/astro.config.mjs

@@ -1,24 +1,47 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';
-
 import mdx from '@astrojs/mdx';
 
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeUrls from 'rehype-urls';
 
 import tailwind from '@astrojs/tailwind';
 import AstroPWA from '@vite-pwa/astro';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
+const site = `https://strudel.tidalcycles.org`; // root url without a path
+const base = '/'; // base path of the strudel site
+
+// this rehype plugin converts relative anchor links to absolute ones
+// it wokrs by prepending the absolute page path to anchor links
+// example: #gain -> /learn/effects/#gain
+// this is necessary when using a base href like <base href={base} />
+// in this setup, relative anchor links will always link to base, instead of the current page
+function absoluteAnchors() {
+  return (tree, file) => {
+    const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
+    const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
+    return rehypeUrls((url) => {
+      if (!url.href.startsWith('#')) {
+        return;
+      }
+      const baseWithSlash = base.endsWith('/') ? base : base + '/';
+      const absoluteUrl = baseWithSlash + path + url.href;
+      // console.log(url.href + ' -> ', absoluteUrl);
+      return absoluteUrl;
+    })(tree);
+  };
+}
 const options = {
   // See https://mdxjs.com/advanced/plugins
   remarkPlugins: [
     remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
 };
 
 // https://astro.build/config
@@ -97,8 +120,8 @@ export default defineConfig({
       },
     }),
   ],
-  site: `https://strudel.tidalcycles.org`,
-  base: '/',
+  site,
+  base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed
@@ -106,13 +129,3 @@ export default defineConfig({
     },
   },
 });
-
-/*
-  build: {
-    outDir: '../out',
-    sourcemap: true,
-    rollupOptions: {
-      plugins: [visualizer({ template: 'treemap' })],
-    },
-  },
-  */

website/package.json

@@ -48,6 +48,7 @@
     "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
+    "rehype-urls": "^1.1.1",
     "remark-toc": "^8.0.1",
     "tailwindcss": "^3.2.4"
   },

website/src/docs/docs.css

@@ -10,27 +10,33 @@
   height: 70px;
   visibility: hidden;
   pointer-events: none;
-  position: relative;
 }
 
-.prose h1:hover .icon-link,
-.prose h2:hover .icon-link,
-.prose h3:hover .icon-link,
-.prose h4:hover .icon-link,
-.prose h5:hover .icon-link,
-.prose h6:hover .icon-link,
-.icon.icon-link:hover {
+.icon.icon-link {
+  visibility: hidden;
+}
+
+.prose h1:hover .icon.icon-link,
+.prose h2:hover .icon.icon-link,
+.prose h3:hover .icon.icon-link,
+.prose h4:hover .icon.icon-link,
+.prose h5:hover .icon.icon-link,
+.prose h6:hover .icon.icon-link {
   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;
+
+.prose h1 > a,
+.prose h2 > a,
+.prose h3 > a,
+.prose h4 > a,
+.prose h5 > a,
+.prose h6 > a {
+  text-decoration: none !important;
+}
+
+.icon.icon-link::after {
+  content: '#';
+  margin-left: 8px;
+  font-size: 0.9em;
+  opacity: 50%;
 }

website/src/repl/Repl.css

@@ -10,14 +10,14 @@
   opacity: 0.5;
 }
 
-.cm-content {
+#code .cm-content {
   padding-top: 12px !important;
   padding-left: 8px !important;
 }
 
-.cm-scroller {
+#code .cm-scroller {
   padding-bottom: 50vh;
 }
-.cm-line > * {
+#code .cm-line > * {
   background: var(--lineBackground);
 }