elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-10 21:28:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: anchor links

Browse Source 
fixes https://github.com/tidalcycles/strudel/issues/432
+ fix style regression in mini repl
This commit is contained in:
Felix Roos 2023-02-13 00:35:40 +01:00
parent 12eb361d69
commit 64ad75c79e
6 changed files with 104 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
my-patterns/README.md
View File

@ -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

100
pnpm-lock.yaml generated
View File

@ -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:

41
website/astro.config.mjs
View File

@ -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' })],
},
},
*/

1
website/package.json
View File

@ -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"
},

44
website/src/docs/docs.css
View File

@ -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%;
}

6
website/src/repl/Repl.css
View File

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