From 64ad75c79e8721243f1e9a696ccc9fbdd0366cb3 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Mon, 13 Feb 2023 00:35:40 +0100 Subject: [PATCH] fix: anchor links fixes https://github.com/tidalcycles/strudel/issues/432 + fix style regression in mini repl --- my-patterns/README.md | 7 +-- pnpm-lock.yaml | 100 ++++++++++++++++++-------------------- website/astro.config.mjs | 41 ++++++++++------ website/package.json | 1 + website/src/docs/docs.css | 44 +++++++++-------- website/src/repl/Repl.css | 6 +-- 6 files changed, 104 insertions(+), 95 deletions(-) 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); }