Merge pull request #433 from tidalcycles/fix-anchors

Fix anchors

my-patterns/README.md

@@ -20,11 +20,8 @@ Example: <https://felixroos.github.io/strudel/swatch/>
 ### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.github.io` and base `/strudel`, like this
 
 ```js
-export default defineConfig({
-  /* ... rest of config ... */
-  site: 'https://<your-username>.github.io',
-  base: '/strudel',
-});
+const site = 'https://<your-username>.github.io';
+const base = '/strudel';
 ```
 
 ### 7. commit & push the changes

pnpm-lock.yaml

@@ -387,6 +387,7 @@ importers:
       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
       vite-plugin-pwa: ^0.14.1
@@ -428,6 +429,7 @@ importers:
       react-dom: 18.2.0_react@18.2.0
       rehype-autolink-headings: 6.1.1
       rehype-slug: 5.1.0
+      rehype-urls: 1.1.1
       remark-toc: 8.0.1
       tailwindcss: 3.2.4
     devDependencies:
@@ -7432,6 +7434,10 @@ packages:
       web-namespaces: 2.0.1
     dev: false
 
+  /hast-util-has-property/1.0.4:
+    resolution: {integrity: sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg==}
+    dev: false
+
   /hast-util-has-property/2.0.1:
     resolution: {integrity: sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==}
     dev: false
@@ -7775,6 +7781,10 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -11110,6 +11120,14 @@ packages:
       unified: 10.1.2
     dev: false
 
+  /rehype-urls/1.1.1:
+    resolution: {integrity: sha512-ct9Kb/nAL6oe/O5fDc0xjiqm8Z9xgXdorOdDhZAWx7awucyiuYXU7Dax+23Gu24nnGwtdaCW6zslKAYzlEW1lw==}
+    dependencies:
+      hast-util-has-property: 1.0.4
+      stdopt: 2.2.0
+      unist-util-visit: 1.4.1
+    dev: false
+
   /rehype/12.0.1:
     resolution: {integrity: sha512-ey6kAqwLM3X6QnMDILJthGvG1m1ULROS9NT4uG9IDCuv08SFyLlreSuvOa//DgEvbXx62DS6elGVqusWhRUbgw==}
     dependencies:
@@ -11839,6 +11857,12 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /stdopt/2.2.0:
+    resolution: {integrity: sha512-D/p41NgXOkcj1SeGhfXOwv9z1K6EV3sjAUY5aeepVbgEHv7DpKWLTjhjScyzMWAQCAgUQys1mjH0eArm4cjRGw==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /stream-connect/1.0.2:
     resolution: {integrity: sha512-68Kl+79cE0RGKemKkhxTSg8+6AGrqBt+cbZAXevg2iJ6Y3zX4JhA/sZeGzLpxW9cXhmqAcE7KnJCisUmIUfnFQ==}
     engines: {node: '>=0.10.0'}
@@ -12707,6 +12731,10 @@ packages:
     resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
     dev: false
 
+  /unist-util-is/3.0.0:
+    resolution: {integrity: sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==}
+    dev: false
+
   /unist-util-is/5.2.0:
     resolution: {integrity: sha512-Glt17jWwZeyqrFqOK0pF1Ded5U3yzJnFr8CG1GMjCWTp9zDo2p+cmD6pWbZU8AgM5WU3IzRv6+rBwhzsGh6hBQ==}
     dev: false
@@ -12755,6 +12783,12 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /unist-util-visit-parents/2.1.2:
+    resolution: {integrity: sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==}
+    dependencies:
+      unist-util-is: 3.0.0
+    dev: false
+
   /unist-util-visit-parents/5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
     dependencies:
@@ -12762,6 +12796,12 @@ packages:
       unist-util-is: 5.2.0
     dev: false
 
+  /unist-util-visit/1.4.1:
+    resolution: {integrity: sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==}
+    dependencies:
+      unist-util-visit-parents: 2.1.2
+    dev: false
+
   /unist-util-visit/4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:

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/components/RightSidebar/RightSidebar.astro

@@ -9,7 +9,9 @@ type Props = {
 };
 
 const { headings, githubEditUrl } = Astro.props as Props;
-const currentPage = Astro.url.pathname;
+let currentPage = Astro.url.pathname;
+// remove slash before #
+currentPage = currentPage.endsWith('/') ? currentPage.slice(0, -1) : currentPage;
 ---
 
 <nav aria-labelledby="grid-right" class="w-64 text-foreground">

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);
 }