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..97aa6c81 100644 --- a/pnpm-lock.yaml +++ b/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: 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/components/RightSidebar/RightSidebar.astro b/website/src/components/RightSidebar/RightSidebar.astro index ce16b9c0..e6031e4d 100644 --- a/website/src/components/RightSidebar/RightSidebar.astro +++ b/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; ---