diff --git a/my-patterns/README.md b/my-patterns/README.md
index b7f416c6..1cec5e57 100644
--- a/my-patterns/README.md
+++ b/my-patterns/README.md
@@ -20,11 +20,8 @@ Example:
### 6. edit `website/astro.config.mjs` to use site: `https://.github.io` and base `/strudel`, like this
```js
-export default defineConfig({
- /* ... rest of config ... */
- site: 'https://.github.io',
- base: '/strudel',
-});
+const site = 'https://.github.io';
+const base = '/strudel';
```
### 7. commit & push the changes
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f61104a6..2b8626d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -380,6 +380,7 @@ importers:
astro: ^1.7.2
canvas: ^2.11.0
fraction.js: ^4.2.0
+ hastscript: ^7.2.0
html-escaper: ^3.0.3
nanoid: ^4.0.0
preact: ^10.7.3
@@ -387,6 +388,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
@@ -422,12 +424,14 @@ importers:
astro: 1.9.2_@types+node@18.11.18
canvas: 2.11.0
fraction.js: 4.2.0
+ hastscript: 7.2.0
nanoid: 4.0.0
preact: 10.11.3
react: 18.2.0
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 +7436,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 +7783,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:
@@ -10403,17 +10415,6 @@ packages:
- supports-color
dev: true
- /postcss-import/14.1.0:
- resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
- engines: {node: '>=10.0.0'}
- peerDependencies:
- postcss: ^8.0.0
- dependencies:
- postcss-value-parser: 4.2.0
- read-cache: 1.0.0
- resolve: 1.22.1
- dev: false
-
/postcss-import/14.1.0_postcss@8.4.21:
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
engines: {node: '>=10.0.0'}
@@ -10424,16 +10425,6 @@ packages:
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.1
- dev: true
-
- /postcss-js/4.0.0:
- resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
- engines: {node: ^12 || ^14 || >= 16}
- peerDependencies:
- postcss: ^8.3.3
- dependencies:
- camelcase-css: 2.0.1
- dev: false
/postcss-js/4.0.0_postcss@8.4.21:
resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -10443,23 +10434,6 @@ packages:
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.21
- dev: true
-
- /postcss-load-config/3.1.4:
- resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
- engines: {node: '>= 10'}
- peerDependencies:
- postcss: '>=8.0.9'
- ts-node: '>=9.0.0'
- peerDependenciesMeta:
- postcss:
- optional: true
- ts-node:
- optional: true
- dependencies:
- lilconfig: 2.0.6
- yaml: 1.10.2
- dev: false
/postcss-load-config/3.1.4_postcss@8.4.21:
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -10477,15 +10451,6 @@ packages:
postcss: 8.4.21
yaml: 1.10.2
- /postcss-nested/6.0.0:
- resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
- engines: {node: '>=12.0'}
- peerDependencies:
- postcss: ^8.2.14
- dependencies:
- postcss-selector-parser: 6.0.11
- dev: false
-
/postcss-nested/6.0.0_postcss@8.4.21:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
@@ -10494,7 +10459,6 @@ packages:
dependencies:
postcss: 8.4.21
postcss-selector-parser: 6.0.11
- dev: true
/postcss-selector-parser/6.0.10:
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -11110,6 +11074,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 +11811,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'}
@@ -12103,8 +12081,6 @@ packages:
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
engines: {node: '>=12.13.0'}
hasBin: true
- peerDependencies:
- postcss: ^8.0.9
dependencies:
arg: 5.0.2
chokidar: 3.5.3
@@ -12121,10 +12097,10 @@ packages:
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.21
- postcss-import: 14.1.0
- postcss-js: 4.0.0
- postcss-load-config: 3.1.4
- postcss-nested: 6.0.0
+ postcss-import: 14.1.0_postcss@8.4.21
+ postcss-js: 4.0.0_postcss@8.4.21
+ postcss-load-config: 3.1.4_postcss@8.4.21
+ postcss-nested: 6.0.0_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
quick-lru: 5.1.1
@@ -12707,6 +12683,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 +12735,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 +12748,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:
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index f8f345b8..a90ce0f6 100644
--- a/website/astro.config.mjs
+++ b/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
+// 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' })],
- },
- },
- */
diff --git a/website/package.json b/website/package.json
index 5393d1b8..f8c466d3 100644
--- a/website/package.json
+++ b/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"
},
diff --git a/website/src/docs/docs.css b/website/src/docs/docs.css
index ed75ecef..aac9e244 100644
--- a/website/src/docs/docs.css
+++ b/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%;
}
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 124fe4e4..e707e6b1 100644
--- a/website/src/repl/Repl.css
+++ b/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);
}