starting work on abstracting card design

4 months ago · 3885b5135b
parent 3428bda4bc
commit 3885b5135b
10 changed files with 872 additions and 38 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,26 +1,31 @@
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import node from '@astrojs/node';
-import mdx from "@astrojs/mdx";
+import { defineConfig } from 'astro/config'
+import preact from '@astrojs/preact'
+import node from '@astrojs/node'
+
+import mdx from '@astrojs/mdx'
+
+import remarkToc from 'remark-toc'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'

 // https://astro.build/config
 export default defineConfig({
-  server: {
-    port: 3000
-  },
-  markdown: {
-    shikiConfig: {
-      theme: 'github-light'
-    }
-  },
-  integrations: [preact(), mdx()],
-  adapter: node({
-    mode: 'standalone'
-  }),
-  output: 'hybrid',
-  outDir: './out/astro',
-  build: {
-    client: './out/astro/client',
-    server: './out/astro/server'
-  }
-});
+    server: {
+        port: 3000,
+    },
+    markdown: {
+        shikiConfig: {
+            theme: 'github-light',
+        },
+    },
+    integrations: [preact(), mdx()],
+    adapter: node({
+        mode: 'standalone',
+    }),
+    output: 'hybrid',
+    outDir: './out/astro',
+    build: {
+        client: './out/astro/client',
+        server: './out/astro/server',
+    },
+})
--- a/package-lock.json
+++ b/package-lock.json
@ -30,8 +30,13 @@
                "@types/better-sqlite3": "^7.6.9",
                "@types/katex": "^0.16.7",
                "drizzle-kit": "^0.20.14",
+                "jsdom": "^24.1.1",
+                "linkedom": "^0.18.4",
                "npm-run-all": "^4.1.5",
+                "rehype-autolink-headings": "^7.1.0",
+                "rehype-slug": "^6.0.0",
                "remark-math": "^6.0.0",
+                "remark-toc": "^9.0.0",
                "sass": "^1.71.1",
                "tsx": "^4.7.1"
            }
@ -2521,6 +2526,13 @@
                "undici-types": "~6.11.1"
            }
        },
+        "node_modules/@types/ungap__structured-clone": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-1.2.0.tgz",
+            "integrity": "sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/@types/unist": {
            "version": "3.0.2",
            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@ -2662,6 +2674,19 @@
                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
            }
        },
+        "node_modules/agent-base": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+            "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "^4.3.4"
+            },
+            "engines": {
+                "node": ">= 14"
+            }
+        },
        "node_modules/ansi-align": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@ -2926,6 +2951,13 @@
                "node": ">=10"
            }
        },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/available-typed-arrays": {
            "version": "1.0.7",
            "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -3597,6 +3629,19 @@
            "license": "MIT",
            "optional": true
        },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
        "node_modules/comma-separated-tokens": {
            "version": "2.0.3",
            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@ -3715,6 +3760,33 @@
                "node": ">=4"
            }
        },
+        "node_modules/cssom": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+            "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cssstyle": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
+            "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "rrweb-cssom": "^0.6.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/cssstyle/node_modules/rrweb-cssom": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+            "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/d": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
@ -3729,6 +3801,20 @@
                "node": ">=0.12"
            }
        },
+        "node_modules/data-urls": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+            "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "whatwg-mimetype": "^4.0.0",
+                "whatwg-url": "^14.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
        "node_modules/data-view-buffer": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@ -3800,6 +3886,13 @@
                }
            }
        },
+        "node_modules/decimal.js": {
+            "version": "10.4.3",
+            "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+            "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/decode-named-character-reference": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@ -3873,6 +3966,16 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
        "node_modules/depd": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -5281,6 +5384,21 @@
                "is-callable": "^1.1.3"
            }
        },
+        "node_modules/form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
        "node_modules/fresh": {
            "version": "0.5.2",
            "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -5723,6 +5841,20 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/hast-util-heading-rank": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+            "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/hast-util-is-element": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
@ -5891,6 +6023,20 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/hast-util-to-string": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
+            "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/hast-util-to-text": {
            "version": "4.0.2",
            "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
@ -5970,6 +6116,19 @@
            "dev": true,
            "license": "ISC"
        },
+        "node_modules/html-encoding-sniffer": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+            "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "whatwg-encoding": "^3.1.1"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
        "node_modules/html-escaper": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
@ -5986,6 +6145,26 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/htmlparser2": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+            "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+            "dev": true,
+            "funding": [
+                "https://github.com/fb55/htmlparser2?sponsor=1",
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3",
+                "domutils": "^3.1.0",
+                "entities": "^4.5.0"
+            }
+        },
        "node_modules/http-cache-semantics": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@ -6008,6 +6187,34 @@
                "node": ">= 0.8"
            }
        },
+        "node_modules/http-proxy-agent": {
+            "version": "7.0.2",
+            "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+            "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "agent-base": "^7.1.0",
+                "debug": "^4.3.4"
+            },
+            "engines": {
+                "node": ">= 14"
+            }
+        },
+        "node_modules/https-proxy-agent": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+            "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "agent-base": "^7.0.2",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 14"
+            }
+        },
        "node_modules/human-signals": {
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@ -6017,6 +6224,19 @@
                "node": ">=16.17.0"
            }
        },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
        "node_modules/ieee754": {
            "version": "1.2.1",
            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@ -6408,6 +6628,13 @@
                "url": "https://github.com/sponsors/sindresorhus"
            }
        },
+        "node_modules/is-potential-custom-element-name": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+            "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/is-promise": {
            "version": "2.2.2",
            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@ -6602,6 +6829,47 @@
                "js-yaml": "bin/js-yaml.js"
            }
        },
+        "node_modules/jsdom": {
+            "version": "24.1.1",
+            "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.1.tgz",
+            "integrity": "sha512-5O1wWV99Jhq4DV7rCLIoZ/UIhyQeDR7wHVyZAHAshbrvZsLs+Xzz7gtwnlJTJDjleiTKh54F4dXrX70vJQTyJQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssstyle": "^4.0.1",
+                "data-urls": "^5.0.0",
+                "decimal.js": "^10.4.3",
+                "form-data": "^4.0.0",
+                "html-encoding-sniffer": "^4.0.0",
+                "http-proxy-agent": "^7.0.2",
+                "https-proxy-agent": "^7.0.5",
+                "is-potential-custom-element-name": "^1.0.1",
+                "nwsapi": "^2.2.12",
+                "parse5": "^7.1.2",
+                "rrweb-cssom": "^0.7.1",
+                "saxes": "^6.0.0",
+                "symbol-tree": "^3.2.4",
+                "tough-cookie": "^4.1.4",
+                "w3c-xmlserializer": "^5.0.0",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^3.1.1",
+                "whatwg-mimetype": "^4.0.0",
+                "whatwg-url": "^14.0.0",
+                "ws": "^8.18.0",
+                "xml-name-validator": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "canvas": "^2.11.2"
+            },
+            "peerDependenciesMeta": {
+                "canvas": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/jsesc": {
            "version": "2.5.2",
            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@ -6706,6 +6974,20 @@
            "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
            "license": "MIT"
        },
+        "node_modules/linkedom": {
+            "version": "0.18.4",
+            "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.18.4.tgz",
+            "integrity": "sha512-JhLErxMIEOKByMi3fURXgI1fYOzR87L1Cn0+MI9GlMckFrqFZpV1SUGox1jcKtsKN3y6JgclcQf0FzZT//BuGw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "css-select": "^5.1.0",
+                "cssom": "^0.5.0",
+                "html-escaper": "^3.0.3",
+                "htmlparser2": "^9.1.0",
+                "uhyphen": "^0.2.0"
+            }
+        },
        "node_modules/load-json-file": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@ -7229,6 +7511,26 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/mdast-util-toc": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
+            "integrity": "sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "@types/ungap__structured-clone": "^1.0.0",
+                "@ungap/structured-clone": "^1.0.0",
+                "github-slugger": "^2.0.0",
+                "mdast-util-to-string": "^4.0.0",
+                "unist-util-is": "^6.0.0",
+                "unist-util-visit": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/memoizee": {
            "version": "0.4.17",
            "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
@ -8042,6 +8344,29 @@
                "node": ">=4"
            }
        },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
        "node_modules/mimic-fn": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@ -8403,6 +8728,13 @@
                "url": "https://github.com/fb55/nth-check?sponsor=1"
            }
        },
+        "node_modules/nwsapi": {
+            "version": "2.2.12",
+            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
+            "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/object-inspect": {
            "version": "1.13.2",
            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@ -8919,6 +9251,13 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/psl": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+            "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/pump": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@ -8929,6 +9268,23 @@
                "once": "^1.3.1"
            }
        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/querystringify": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+            "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/queue-microtask": {
            "version": "1.2.3",
            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -9049,6 +9405,25 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/rehype-autolink-headings": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
+            "integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@ungap/structured-clone": "^1.0.0",
+                "hast-util-heading-rank": "^3.0.0",
+                "hast-util-is-element": "^3.0.0",
+                "unified": "^11.0.0",
+                "unist-util-visit": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/rehype-parse": {
            "version": "9.0.0",
            "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.0.tgz",
@ -9079,6 +9454,24 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/rehype-slug": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+            "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "github-slugger": "^2.0.0",
+                "hast-util-heading-rank": "^3.0.0",
+                "hast-util-to-string": "^3.0.0",
+                "unist-util-visit": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/rehype-stringify": {
            "version": "10.0.0",
            "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
@ -9207,6 +9600,21 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/remark-toc": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-9.0.0.tgz",
+            "integrity": "sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-toc": "^7.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/request-light": {
            "version": "0.7.0",
            "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.7.0.tgz",
@ -9222,6 +9630,13 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/resolve": {
            "version": "1.22.8",
            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -9401,6 +9816,13 @@
                "fsevents": "~2.3.2"
            }
        },
+        "node_modules/rrweb-cssom": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+            "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/run-parallel": {
            "version": "1.2.0",
            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -9481,6 +9903,13 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/sass": {
            "version": "1.77.8",
            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
@ -9499,6 +9928,19 @@
                "node": ">=14.0.0"
            }
        },
+        "node_modules/saxes": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+            "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "xmlchars": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=v12.22.7"
+            }
+        },
        "node_modules/section-matter": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@ -10139,6 +10581,13 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/symbol-tree": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+            "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/tar-fs": {
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
@ -10211,6 +10660,35 @@
                "node": ">=0.6"
            }
        },
+        "node_modules/tough-cookie": {
+            "version": "4.1.4",
+            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+            "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "psl": "^1.1.33",
+                "punycode": "^2.1.1",
+                "universalify": "^0.2.0",
+                "url-parse": "^1.5.3"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/tr46": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+            "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "punycode": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
        "node_modules/trim-lines": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@ -10426,6 +10904,13 @@
                "node": ">=10"
            }
        },
+        "node_modules/uhyphen": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.2.0.tgz",
+            "integrity": "sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==",
+            "dev": true,
+            "license": "ISC"
+        },
        "node_modules/unbox-primitive": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@ -10605,6 +11090,16 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/universalify": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+            "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.0.0"
+            }
+        },
        "node_modules/update-browserslist-db": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@ -10635,6 +11130,17 @@
                "browserslist": ">= 4.21.0"
            }
        },
+        "node_modules/url-parse": {
+            "version": "1.5.10",
+            "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+            "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "querystringify": "^2.1.1",
+                "requires-port": "^1.0.0"
+            }
+        },
        "node_modules/util-deprecate": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@ -10973,6 +11479,19 @@
            "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
            "license": "MIT"
        },
+        "node_modules/w3c-xmlserializer": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+            "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "xml-name-validator": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
        "node_modules/web-namespaces": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@ -10983,6 +11502,53 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/webidl-conversions": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+            "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/whatwg-encoding": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+            "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/whatwg-mimetype": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+            "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/whatwg-url": {
+            "version": "14.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+            "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tr46": "^5.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
        "node_modules/which": {
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -11159,6 +11725,45 @@
            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
            "license": "ISC"
        },
+        "node_modules/ws": {
+            "version": "8.18.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/xml-name-validator": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+            "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/xmlchars": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+            "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/y18n": {
            "version": "5.0.8",
            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/package.json
+++ b/package.json
@ -34,8 +34,13 @@
        "@types/better-sqlite3": "^7.6.9",
        "@types/katex": "^0.16.7",
        "drizzle-kit": "^0.20.14",
+        "jsdom": "^24.1.1",
+        "linkedom": "^0.18.4",
        "npm-run-all": "^4.1.5",
+        "rehype-autolink-headings": "^7.1.0",
+        "rehype-slug": "^6.0.0",
        "remark-math": "^6.0.0",
+        "remark-toc": "^9.0.0",
        "sass": "^1.71.1",
        "tsx": "^4.7.1"
    }
--- a/src/components/meta/CodeBlockPreview.astro
+++ b/src/components/meta/CodeBlockPreview.astro
@ -0,0 +1,16 @@
+---
+import { JSDOM } from 'jsdom'
+import Container from './Container.astro'
+
+const language = Astro.props['data-language'] ?? 'text'
+
+const html = await Astro.slots.render('default')
+
+console.log(html)
+
+const rawCode = new JSDOM(html).window.document.body.textContent
+---
+
+<pre {...Astro.props}><slot /></pre>
+
+{language === 'astro' && <Container set:html={rawCode} />}
--- a/src/content/meta/design.mdx
+++ b/src/content/meta/design.mdx
@ -3,14 +3,46 @@ import Palette from '../../components/meta/Palette.astro'

 import ArticleCard from '../../components/ArticleCard.astro'

-# Meta / Design
+# Meta > Design

-In questa pagina tento di spiegare come funziona il design di questo sito.
+In questa pagina tento di spiegare come funziona il design di questo sito. I blocchi di codice con sfondo arancione chiaro sono esempi di codice Astro e sotto hanno un'anteprima del risultato _generata automaticamente_. Ad esempio
+
+```astro
+<p>Questo è un paragrafo</p>
+```

 ## Card

 Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea

+### Esempio di base
+
+Una card semplice ha un titolo ed una descrizione.
+
+```astro
+<div class="card" style="--card-base: var(--guide-base); max-width: 25rem;">
+    <div class="title">Titolo</div>
+    <div class="text">
+        Descrizione lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Aspernatur, labore?
+    </div>
+</div>
+```
+
+### Variante grande
+
+Le card possono essere di dimensioni diverse. Questa è una card grande.
+
+```astro
+<div class="card large" style="--card-base: lightgreen; max-width: 25rem;">
+    <div class="title">Titolo</div>
+    <div class="text">
+        Descrizione lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Aspernatur, labore?
+    </div>
+</div>
+```
+
 ### Lista di articoli

 Una lista di articoli è composta da più card, ognuna delle quali rappresenta un articolo. Ogni card ha un titolo, una descrizione e una lista di tag.
--- a/src/pages/meta/design.astro
+++ b/src/pages/meta/design.astro
@ -4,13 +4,31 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import Header from '../../components/Header.astro'
 import Footer from '../../components/Footer.astro'

-import { Content } from '../../content/meta/design.mdx'
+import CodeBlockPreview from '../../components/meta/CodeBlockPreview.astro'
+
+import { Content, getHeadings } from '../../content/meta/design.mdx'
+
+const headings = getHeadings()
 ---

 <BaseLayout {...Astro.props} pageName="design">
    <Header />
+    <aside>
+        <nav>
+            <h2>Indice</h2>
+            <ul>
+                {
+                    headings.map(heading => (
+                        <li style={{ '--depth': heading.depth }}>
+                            <a href={`#${heading.slug}`}>{heading.text}</a>
+                        </li>
+                    ))
+                }
+            </ul>
+        </nav>
+    </aside>
    <main class="text-content center">
-        <Content />
+        <Content components={{ pre: CodeBlockPreview }} />
    </main>
    <Footer />
 </BaseLayout>
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@ -318,3 +318,61 @@ $news-accent-bg: #f8e8b1;
        }
    }
 }
+
+//
+// Cards
+//
+
+.card {
+    display: grid;
+
+    --card-base-internal: var(--card-base, #f8f8f8);
+
+    background: var(--card-base-internal);
+    color: color-mix(in srgb, var(--card-base-internal), #000 80%);
+
+    @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+    row-gap: 0.5rem;
+    padding: 1rem;
+
+    // Variants
+
+    &.large {
+        padding: 2rem;
+
+        @include neo-brutalist-card($size: 4px, $offset: 8px);
+
+        row-gap: 1rem;
+
+        & > .title {
+            font-size: 36px;
+            font-weight: 700;
+        }
+
+        & > .text {
+            font-size: 18px;
+        }
+    }
+
+    // Child Items
+
+    & > .title {
+        color: color-mix(in srgb, var(--card-base-internal), #000 75%);
+        font-size: 26px;
+        font-weight: 700;
+    }
+
+    & > .text {
+        font-size: 16px;
+    }
+
+    & > .tags {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        font-size: 14px;
+        font-weight: 600;
+        color: #555;
+    }
+}
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -27,10 +27,13 @@ $screen-desktop-min: 1024px;
    margin: 0;
 }

+html {
+    height: 100%;
+}
+
 html,
 body {
    min-height: 100%;
-    height: 100%;
    margin: 0;

    font-family: 'Open Sans', sans-serif;
@ -93,10 +96,10 @@ a {

 body {
    // for the header spacing
-    padding-top: 6rem;
+    // padding-top: 6rem;

    display: grid;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: auto 1fr auto;

    header {
        z-index: 10;
@ -105,8 +108,10 @@ body {
        border-bottom: $border-large;
        background: $header-bg;

+        grid-column: 1 / -1;
+
        top: 0;
-        position: fixed;
+        position: sticky;
        width: 100%;

        display: flex;
@ -143,6 +148,8 @@ body {
    }

    footer {
+        z-index: 10;
+
        min-height: 6rem;
        border-top: $border-large;
        background: $footer-bg;
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@ -417,8 +417,84 @@
 }

 .design {
+    grid-template-columns: 2fr 10fr;
+
+    @media screen and (max-width: 1400px) {
+        grid-template-columns: 1fr;
+    }
+
+    aside {
+        margin: 1rem;
+        padding: 1rem;
+
+        @include neo-brutalist-card();
+
+        background: #f0f0f0;
+
+        align-self: start;
+        position: sticky;
+        top: 7rem;
+        height: calc(100dvh - 8rem - 6rem);
+
+        nav {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+
+                li {
+                    padding-left: calc((var(--depth) - 1) * 1rem);
+
+                    a {
+                        font-size: 16px;
+                        font-weight: 600;
+
+                        color: #444;
+
+                        &:hover {
+                            color: #666;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+
+        @media screen and (max-width: 1400px) {
+            display: none;
+        }
+    }
+
+    footer {
+        grid-column: 1 / -1;
+    }
+
    main {
        justify-self: center;
+
+        // trick to fix anchor links with sticky header
+        & > h1,
+        & > h2,
+        & > h3,
+        & > h4 {
+            padding-top: 7rem;
+            margin-top: -7rem;
+        }
+    }
+
+    pre[data-language='astro'] {
+        --code-bg: #fff7ef;
+
+        width: 100%;
+        max-width: 46rem;
    }

    .container {
@ -430,21 +506,25 @@
        z-index: 1;

        &.large {
-            min-width: calc(100vw - 4rem);
+            min-width: calc(100% - 4rem);
+        }
+
+        &:not(.large) {
+            & > .content {
+                display: grid;
+                place-content: center;
+            }
        }

        & > .content {
            padding: 2rem;

-            // display: grid;
-            // place-content: center;
-
            overflow: auto;
        }

        // label in the top left corner
        &::before {
-            content: 'Result';
+            content: 'Preview';
            position: absolute;

            bottom: 100%;
--- a/src/styles/typography.scss
+++ b/src/styles/typography.scss
@ -39,7 +39,7 @@

    pre,
    code {
-        background: #f0f0f0 !important;
+        background: var(--code-bg, #f0f0f0) !important;

        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
@ -75,7 +75,15 @@

    p {
        line-height: 1.75;
-        margin: 0.5rem auto;
+        margin: 1rem auto;
+    }
+
+    strong {
+        font-weight: 500;
+    }
+
+    em {
+        font-style: italic;
    }

    @include geometric-headings;