fix: translate react props to solid props

style: Fix typo in viewBox attribute value
feat: Add Prism.js support and configure languages
2025-04-19 19:52:57 +02:00 · 2025-04-19 19:24:05 +02:00 · 2025-04-19 19:19:13 +02:00 · 2025-04-19 18:47:03 +02:00
33 changed files with 1094 additions and 433 deletions
--- a/app/bun.lock
+++ b/app/bun.lock
@ -7,25 +7,29 @@
        "@fastify/static": "^8.1.1",
        "@mdx-js/rollup": "^3.1.0",
        "@sindresorhus/slugify": "^2.2.1",
+        "@tailwindcss/typography": "^0.5.16",
        "@universal-middleware/core": "^0.4.7",
        "@universal-middleware/fastify": "^0.5.16",
        "clsx": "^2.1.1",
        "fastify": "^5.3.0",
+        "prismjs": "^1.30.0",
        "solid-heroicons": "^3.2.4",
-        "solid-highlight": "^0.1.26",
        "solid-js": "^1.9.5",
        "solid-jsx": "^1.1.4",
        "solid-mdx": "^0.0.7",
+        "solid-toast": "^0.5.0",
        "telefunc": "^0.2.3",
        "terracotta": "^1.0.6",
        "vike": "^0.4.228",
        "vike-solid": "^0.7.9",
+        "vite-plugin-prismjs": "^0.0.11",
      },
      "devDependencies": {
        "@biomejs/biome": "1.9.4",
        "@eslint/js": "^9.24.0",
        "@tailwindcss/vite": "^4.1.3",
        "@types/node": "^18.19.86",
+        "@types/prismjs": "^1.26.5",
        "cross-env": "^7.0.3",
        "eslint": "^9.24.0",
        "eslint-config-prettier": "^10.1.2",
@ -303,6 +307,8 @@

    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.4", "", { "os": "win32", "cpu": "x64" }, "sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw=="],

+    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
+
    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.4", "", { "dependencies": { "@tailwindcss/node": "4.1.4", "@tailwindcss/oxide": "4.1.4", "tailwindcss": "4.1.4" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A=="],

    "@ts-morph/common": ["@ts-morph/common@0.20.0", "", { "dependencies": { "fast-glob": "^3.2.12", "minimatch": "^7.4.3", "mkdirp": "^2.1.6", "path-browserify": "^1.0.1" } }, "sha512-7uKjByfbPpwuzkstL3L5MQyuXPSKdoNG93Fmi2JoDcTf3pEP731JdRFAduRVkOs8oqxPsXKA+ScrWkdQ8t/I+Q=="],
@ -333,6 +339,8 @@

    "@types/node": ["@types/node@18.19.86", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-fifKayi175wLyKyc5qUfyENhQ1dCNI1UNjp653d8kuYcPQN5JhX3dGuP/XmvPTg/xRBn1VTLpbmi+H/Mr7tLfQ=="],

+    "@types/prismjs": ["@types/prismjs@1.26.5", "", {}, "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="],
+
    "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],

    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.30.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.30.1", "@typescript-eslint/type-utils": "8.30.1", "@typescript-eslint/utils": "8.30.1", "@typescript-eslint/visitor-keys": "8.30.1", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q=="],
@ -383,6 +391,8 @@

    "babel-plugin-jsx-dom-expressions": ["babel-plugin-jsx-dom-expressions@0.39.7", "", { "dependencies": { "@babel/helper-module-imports": "7.18.6", "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/types": "^7.20.7", "html-entities": "2.3.3", "parse5": "^7.1.2", "validate-html-nesting": "^1.2.1" }, "peerDependencies": { "@babel/core": "^7.20.12" } }, "sha512-8GzVmFla7jaTNWW8W+lTMl9YGva4/06CtwJjySnkYtt8G1v9weCzc2SuF1DfrudcCNb2Doetc1FRg33swBYZCA=="],

+    "babel-plugin-prismjs": ["babel-plugin-prismjs@2.1.0", "", { "peerDependencies": { "prismjs": "^1.18.0" } }, "sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g=="],
+
    "babel-preset-solid": ["babel-preset-solid@1.9.5", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.39.7" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-85I3osODJ1LvZbv8wFozROV1vXq32BubqHXAGu73A//TRs3NLI1OFP83AQBUTSQHwgZQmARjHlJciym3we+V+w=="],

    "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
@ -441,6 +451,8 @@

    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],

+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],

    "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
@ -685,6 +697,10 @@

    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],

+    "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
+
+    "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
+
    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],

    "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
@ -831,6 +847,8 @@

    "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],

+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
+
    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],

    "prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="],
@ -915,8 +933,6 @@

    "solid-heroicons": ["solid-heroicons@3.2.4", "", { "dependencies": { "solid-js": "^1.7.6" } }, "sha512-u6BMdFLvkJnvUGYzdFcWp1wvJ4hb9Y1zd3AbZ9D3bUmmiy9jBzNZX+RcqBCI2EKRvdQwAb1UB9bkESfqfhayDg=="],

-    "solid-highlight": ["solid-highlight@0.1.26", "", { "peerDependencies": { "prismjs": "^1.29.0", "solid-js": "^1.8.0" } }, "sha512-Iw1mi3vE+YCBBBU/+HHc5y8VNULaGXUX4OK2c9TbzegOGCitzW0uNIvb0s3S0KoVv7Uma/KadWHNFXkwZCwPgQ=="],
-
    "solid-js": ["solid-js@1.9.5", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "^1.1.0", "seroval-plugins": "^1.1.0" } }, "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw=="],

    "solid-jsx": ["solid-jsx@1.1.4", "", { "peerDependencies": { "solid-js": ">=1.4.0" } }, "sha512-A4E9cB+wZpHZrXzv3+OWr6zaGS0FjD/UAKqbI38R1JwogjlBXdSGC2PgaIMisnGYKL3oJ55FPLv4QRkENmdbWQ=="],
@ -925,6 +941,8 @@

    "solid-refresh": ["solid-refresh@0.6.3", "", { "dependencies": { "@babel/generator": "^7.23.6", "@babel/helper-module-imports": "^7.22.15", "@babel/types": "^7.23.6" }, "peerDependencies": { "solid-js": "^1.3" } }, "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA=="],

+    "solid-toast": ["solid-toast@0.5.0", "", { "peerDependencies": { "solid-js": "^1.5.4" } }, "sha512-t770JakjyS2P9b8Qa1zMLOD51KYKWXbTAyJePVUoYex5c5FH5S/HtUBUbZAWFcqRCKmAE8KhyIiCvDZA8bOnxQ=="],
+
    "solid-use": ["solid-use@0.9.1", "", { "peerDependencies": { "solid-js": "^1.7" } }, "sha512-UwvXDVPlrrbj/9ewG9ys5uL2IO4jSiwys2KPzK4zsnAcmEl7iDafZWW1Mo4BSEWOmQCGK6IvpmGHo1aou8iOFw=="],

    "sonic-boom": ["sonic-boom@4.2.0", "", { "dependencies": { "atomic-sleep": "^1.0.0" } }, "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww=="],
@ -1025,6 +1043,8 @@

    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],

+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
    "validate-html-nesting": ["validate-html-nesting@1.2.2", "", {}, "sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg=="],

    "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
@ -1037,6 +1057,8 @@

    "vite": ["vite@6.3.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.3", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.12" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg=="],

+    "vite-plugin-prismjs": ["vite-plugin-prismjs@0.0.11", "", { "dependencies": { "@babel/core": "^7.15.5", "babel-plugin-prismjs": "^2.1.0" } }, "sha512-20NBQxg/zH+3FTrlU6BQTob720xkuXNYtrx7psAQ4E6pMcRDeLEK77QU9kXURU587+f2To7ASH1JVTGbXVV/vQ=="],
+
    "vite-plugin-solid": ["vite-plugin-solid@2.11.6", "", { "dependencies": { "@babel/core": "^7.23.3", "@types/babel__core": "^7.20.4", "babel-preset-solid": "^1.8.4", "merge-anything": "^5.1.7", "solid-refresh": "^0.6.3", "vitefu": "^1.0.4" }, "peerDependencies": { "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*", "solid-js": "^1.7.2", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["@testing-library/jest-dom"] }, "sha512-Sl5CTqJTGyEeOsmdH6BOgalIZlwH3t4/y0RQuFLMGnvWMBvxb4+lq7x3BSiAw6etf0QexfNJW7HSOO/Qf7pigg=="],

    "vitefu": ["vitefu@1.0.6", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA=="],
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@ -9,7 +9,7 @@ const variantStyles = {
 	secondary:
 		"bg-slate-800 font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400",
 	ghost:
-		"bg-transparent font-medium text-slate-900 dark:text-slate-400 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200",
+		"bg-transparent font-medium text-slate-900 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200",
 };

 const sizeStyles = {
--- a/app/components/Callout.tsx
+++ b/app/components/Callout.tsx
@ -5,22 +5,19 @@ import clsx from "clsx";

 const styles = {
 	note: {
-		container:
-			"bg-violet-50 dark:bg-violet-800/60 dark:ring-1 dark:ring-violet-300/10",
-		title: "text-violet-900 dark:text-violet-400",
-		body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:prose-code:text-slate-300",
+		container: "bg-violet-50",
+		title: "text-violet-900",
+		body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
 	},
 	warning: {
-		container:
-			"bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10",
-		title: "text-amber-900 dark:text-amber-500",
-		body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300",
+		container: "bg-amber-50",
+		title: "text-amber-900",
+		body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
 	},
 	question: {
-		container:
-			"bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10",
-		title: "text-amber-900 dark:text-amber-500",
-		body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300",
+		container: "bg-amber-50",
+		title: "text-amber-900",
+		body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
 	},
 };

--- a/app/components/Form.tsx
+++ b/app/components/Form.tsx
@ -42,9 +42,7 @@ export function Toggle(props: ToggleProps) {
 					/>
 				</span>

-				<span class="ml-2 text-sm text-slate-700 dark:text-slate-300">
-					{props.label}
-				</span>
+				<span class="ml-2 text-sm text-slate-700">{props.label}</span>
 			</label>
 		</div>
 	);
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@ -0,0 +1,361 @@
+import type { JSX, ComponentProps, ParentComponent } from "solid-js";
+
+import { createEffect, createMemo, mergeProps, on, splitProps } from "solid-js";
+import * as Prismjs from "prismjs";
+
+/**
+ * @see https://prismjs.com/#supported-languages
+ */
+export const Language = {
+	JAVASCRIPT: "javascript",
+	HTML: "html",
+	CSS: "css",
+	MARKUP: "markup",
+	XML: "xml",
+	SVG: "svg",
+	ABAP: "abap",
+	ABNF: "abnf",
+	ACTION_SCRIPT: "actionscript",
+	ADA: "ada",
+	AGDA: "agda",
+	AL: "al",
+	ANTLR4: "antlr4",
+	G4: "g4",
+	APACHE_CONFIGURATION: "apacheconf",
+	APEX: "apex",
+	APL: "apl",
+	APPLESCRIPT: "applescript",
+	AQL: "aql",
+	ARDUINO: "arduino",
+	ARFF: "arff",
+	ARM_ASSEMBLY: "armasm",
+	ARTURO: "arturo",
+	ASCIIDOC: "asciidoc",
+	ASP_NET: "aspnet",
+	ASSEMBLY_6502: "asm6502",
+	ASSEMBLY_ATMEL_AVR: "asmatmel",
+	AUTO_HOTKEY: "autohotkey",
+	AUTO_IT: "autoit",
+	AVI_SYNTH: "avisynth",
+	AVRO_IDL: "avro-idl",
+	AWK: "awk",
+	BASH: "bash",
+	BASIC: "basic",
+	BATCH: "batch",
+	BBCODE: "bbcode",
+	BBJ: "bbj",
+	BICEP: "bicep",
+	BIRB: "birb",
+	BISON: "bison",
+	BNF: "bnf",
+	BQN: "bqn",
+	BRAINFUCK: "brainfuck",
+	BRIGHT_SCRIPT: "brightscript",
+	BRO: "bro",
+	BSL: "bsl",
+	C: "c",
+	CSHARP: "csharp",
+	CPP: "cpp",
+	CF_SCRIPT: "cfscript",
+	CHAI_SCRIPT: "chaiscript",
+	CIL: "cil",
+	CILK_C: "cilkc",
+	CILK_CPP: "cilkcpp",
+	CLOJURE: "clojure",
+	CMAKE: "cmake",
+	COBOL: "cobol",
+	COFFEE_SCRIPT: "coffeescript",
+	CONCURNAS: "concurnas",
+	CONTENT_SECURITY_POLICY: "csp",
+	COOKLANG: "cooklang",
+	Coq: "coq",
+	CRYSTAL: "crystal",
+	CSS_EXTRAS: "css-extras",
+	CSV: "csv",
+	CUE: "cue",
+	CYPHER: "cypher",
+	D: "d",
+	DART: "dart",
+	DATA_WEAVE: "dataweave",
+	DAX: "dax",
+	DHALL: "dhall",
+	DIFF: "diff",
+	DJANGO: "django",
+	JINJA2: "jinja2",
+	DNS_ZONE_FILE: "dns-zone-file",
+	DOCKER: "docker",
+	DOT: "dot",
+	EBNF: "ebnf",
+	EDITOR_CONFIG: "editorconfig",
+	EIFFEL: "eiffel",
+	EJS: "ejs",
+	ELIXIR: "elixir",
+	ELM: "elm",
+	EMBEDDED_LUA_TEMPLATING: "etlua",
+	ERB: "erb",
+	ERLANG: "erlang",
+	EXCEL_FORMULA: "excel-formula",
+	FSHARP: "fsharp",
+	FACTOR: "factor",
+	FALSE: "false",
+	FIRESTORE_SECURITY_RULES: "firestore-security-rules",
+	FLOW: "flow",
+	FORTRAN: "fortran",
+	FREEMARKER_TEMPLATE_LANGUAGE: "ftl",
+	GAMEMAKER_LANGUAGE: "gml",
+	GAP: "gap",
+	GCODE: "gcode",
+	GD_SCRIPT: "gdscript",
+	GEDCOM: "gedcom",
+	GETTEXT: "gettext",
+	GHERKIN: "gherkin",
+	GIT: "git",
+	GLSL: "glsl",
+	GN: "gn",
+	GNU_LINKER_SCRIPT: "linker-script",
+	GO: "go",
+	GO_MODULE: "go-module",
+	GRADLE: "gradle",
+	GRAPHQL: "graphql",
+	GROOVY: "groovy",
+	HAML: "haml",
+	HANDLEBARS: "handlebars",
+	HASKELL: "haskell",
+	HAXE: "haxe",
+	HCL: "hcl",
+	HLSL: "hlsl",
+	HOON: "hoon",
+	HTTP: "http",
+	HTTP_PUBLIC_KEY_PINS: "hpkp",
+	HTTP_STRICT_TRANSPORT_SECURITY: "hsts",
+	ICHIGOJAM: "ichigojam",
+	ICON: "icon",
+	ICU_MESSAGE_FORMAT: "icu-message-format",
+	IDRIS: "idris",
+	IGNORE: "ignore",
+	INFORM_7: "inform7",
+	INI: "ini",
+	IO: "io",
+	J: "j",
+	JAVA: "java",
+	JAVADOC: "javadoc",
+	JAVADOC_LIKE: "javadoclike",
+	JAVA_STACK_TRACE: "javastacktrace",
+	JEXL: "jexl",
+	JOLIE: "jolie",
+	JQ: "jq",
+	JSDOC: "jsdoc",
+	JS_EXTRAS: "js-extras",
+	JSON: "json",
+	JSON5: "json5",
+	JSONP: "jsonp",
+	JS_STACK_TRACE: "jsstacktrace",
+	JS_TEMPLATES: "js-templates",
+	JULIA: "julia",
+	KEEPALIVED_CONFIGURE: "keepalived",
+	KEYMAN: "keyman",
+	KOTLIN: "kotlin",
+	KUMIR: "kumir",
+	KUSTO: "kusto",
+	LATEX: "latex",
+	LATTE: "latte",
+	LESS: "less",
+	LILYPOND: "lilypond",
+	LIQUID: "liquid",
+	LISP: "lisp",
+	LIVESCRIPT: "livescript",
+	LLVM: "llvm",
+	LOG: "log",
+	LOLCODE: "lolcode",
+	LUA: "lua",
+	MAGMA: "magma",
+	MAKEFILE: "makefile",
+	MARKDOWN: "markdown",
+	MARKUP_TEMPLATING: "markup-templating",
+	MATA: "mata",
+	MATLAB: "matlab",
+	MAXSCRIPT: "maxscript",
+	MEL: "mel",
+	MERMAID: "mermaid",
+	METAFONT: "metafont",
+	MIZAR: "mizar",
+	MONGODB: "mongodb",
+	MONKEY: "monkey",
+	MOONSCRIPT: "moonscript",
+	N1QL: "n1ql",
+	N4JS: "n4js",
+	NAND_TO_TETRIS_HDL: "nand2tetris",
+	NANINOVEL_SCRIPT: "naniscript",
+	NASM: "nasm",
+	NEON: "neon",
+	NEVOD: "nevod",
+	NGINX: "nginx",
+	NIM: "nim",
+	NIX: "nix",
+	NSIS: "nsis",
+	OBJECTIVE_C: "objectivec",
+	OCAML: "ocaml",
+	ODIN: "odin",
+	OPENCL: "opencl",
+	OPENQASM: "openqasm",
+	OZ: "oz",
+	PARI_GP: "parigp",
+	PARSER: "parser",
+	PASCAL: "pascal",
+	PASCALIGO: "pascaligo",
+	PATROL_SCRIPTING_LANGUAGE: "psl",
+	PC_AXIS: "pcaxis",
+	PEOPLECODE: "peoplecode",
+	PERL: "perl",
+	PHP: "php",
+	PHP_DOC: "phpdoc",
+	PHP_EXTRAS: "php-extras",
+	PLANT_UML: "plant-uml",
+	PL_SQL: "plsql",
+	POWERQUERY: "powerquery",
+	POWERSHELL: "powershell",
+	PROCESSING: "processing",
+	PROLOG: "prolog",
+	PROMQL: "promql",
+	PROPERTIES: "properties",
+	PROTOBUF: "protobuf",
+	PUG: "pug",
+	PUPPET: "puppet",
+	PURE: "pure",
+	PUREBASIC: "purebasic",
+	PURESCRIPT: "purescript",
+	PYTHON: "python",
+	QSHARP: "qsharp",
+	Q: "q",
+	QML: "qml",
+	QORE: "qore",
+	R: "r",
+	RACKET: "racket",
+	RAZOR: "razor",
+	REACT_JSX: "jsx",
+	REACT_TSX: "tsx",
+	REASON: "reason",
+	REGEX: "regex",
+	REGO: "rego",
+	RENPY: "renpy",
+	RESCRIPT: "rescript",
+	REST: "rest",
+	RIP: "rip",
+	ROBOCONF: "roboconf",
+	ROBOT_FRAMEWORK: "robotframework",
+	RUBY: "ruby",
+	RUST: "rust",
+	SAS: "sas",
+	SASS: "sass",
+	SCSS: "scss",
+	SCALA: "scala",
+	SCHEME: "scheme",
+	SHELL_SESSION: "shell-session",
+	SMALI: "smali",
+	SMALLTALK: "smalltalk",
+	SMARTY: "smarty",
+	SML: "sml",
+	SOLIDITY: "solidity",
+	SOLUTION_FILE: "solution-file",
+	SOY: "soy",
+	SPARQL: "sparql",
+	SPLUNK_SPL: "splunk-spl",
+	SQF: "sqf",
+	SQL: "sql",
+	SQUIRREL: "squirrel",
+	STAN: "stan",
+	STATA_ADO: "stata",
+	STRUCTURED_TEXT: "iecst",
+	STYLUS: "stylus",
+	SUPERCOLLIDER: "supercollider",
+	SWIFT: "swift",
+	SYSTEMD: "systemd",
+	T4_TEMPLATING: "t4-templating",
+	T4_CSHARP: "t4-cs",
+	T4_VB: "t4-vb",
+	TAP: "tap",
+	TCL: "tcl",
+	TEMPLATE_TOOLKIT_2: "tt2",
+	TEXTILE: "textile",
+	TOML: "toml",
+	TREMOR: "tremor",
+	TURTLE: "turtle",
+	TWIG: "twig",
+	TYPESCRIPT: "typescript",
+	TYPOSCRIPT: "typoscript",
+	UNREALSCRIPT: "unrealscript",
+	UO_RAZOR_SCRIPT: "uorazor",
+	URI: "uri",
+	V: "v",
+	VALA: "vala",
+	VB_NET: "vbnet",
+	VELOCITY: "velocity",
+	VERILOG: "verilog",
+	VHDL: "vhdl",
+	VIM: "vim",
+	VISUAL_BASIC: "visual-basic",
+	WARP_SCRIPT: "warpscript",
+	WEB_ASSEMBLY: "wasm",
+	WEB_IDL: "web-idl",
+	WGSL: "wgsl",
+	WIKI: "wiki",
+	WOLFRAM: "wolfram",
+	WREN: "wren",
+	XEORA: "xeora",
+	XML_DOC: "xml-doc",
+	XOJO: "xojo",
+	XQUERY: "xquery",
+	YAML: "yaml",
+	YANG: "yang",
+	ZIG: "zig",
+} as const;
+export type Language = (typeof Language)[keyof typeof Language];
+
+type Props = {
+	language: string;
+} & (
+	| (ComponentProps<"code"> & { code?: never })
+	| (Omit<JSX.IntrinsicElements["code"], "children"> & { code: string })
+);
+
+export const Highlight: ParentComponent<Props> = (_props) => {
+	const props = mergeProps({ language: "javascript" }, _props);
+	const [, rest] = splitProps(props, [
+		"language",
+		"children",
+		"class",
+		"innerHTML",
+	]);
+
+	const languageClass = createMemo(() => `language-${props.language}`);
+	const highlightedCode = createMemo<string | undefined>(() => {
+		const childrenString = props.children?.toString();
+		if (!childrenString) {
+			return;
+		}
+		const grammar = Prismjs.languages[props.language];
+		if (!grammar) {
+			return;
+		}
+		const result = Prismjs.highlight(childrenString, grammar, props.language);
+		return result;
+	});
+
+	createEffect(
+		on([languageClass, highlightedCode], () => {
+			Prismjs.highlightAll();
+		}),
+	);
+
+	return (
+		<pre>
+			<code
+				class={`${languageClass()} ${props.class || ""}`}
+				innerHTML={highlightedCode()}
+				{...rest}
+			>
+				{props.code || props.children}
+			</code>
+		</pre>
+	);
+};
--- a/app/components/Logo.tsx
+++ b/app/components/Logo.tsx
@ -34,7 +34,7 @@ function LogomarkPaths() {

 export function Logo(props: JSX.IntrinsicElements["svg"]) {
 	return (
-		<svg view-box="0 0 58 38" {...props}>
+		<svg viewBox="0 0 58 38" {...props}>
 			<title>Memento Dev</title>
 			<LogomarkPaths />
 		</svg>
--- a/app/components/PrevNextLinks.tsx
+++ b/app/components/PrevNextLinks.tsx
@ -31,20 +31,20 @@ function PageLink(props: PageLinkProps) {

 	return (
 		<div {...cleanProps(props, "dir", "title")}>
-			<dt class="font-display text-sm font-medium text-slate-900 dark:text-white">
+			<dt class="font-display text-sm font-medium text-slate-900">
 				{props.dir === "next" ? "Suivant" : "Précédent"}
 			</dt>
 			<dd class="mt-1">
 				<Link
 					href={props.href}
 					class={clsx(
-						"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
+						"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600",
 						props.dir === "previous" && "flex-row-reverse",
 					)}
 				>
 					<p class="flex flex-col gap-0">
 						{pageCategory && (
-							<span class="text-violet-600 dark:text-violet-400 text-sm mb-1 leading-3">
+							<span class="text-violet-600 text-sm mb-1 leading-3">
 								{pageCategory.title}
 							</span>
 						)}
@ -89,7 +89,7 @@ export function PrevNextLinks() {
 	if (!nextPage && !previousPage) return null;

 	return (
-		<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6 dark:border-slate-800">
+		<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
 			{previousPage && <PageLink dir="previous" {...previousPage} />}
 			{nextPage && <PageLink class="ml-auto text-right" {...nextPage} />}
 		</dl>
--- a/app/components/Prose.tsx
+++ b/app/components/Prose.tsx
@ -16,19 +16,17 @@ export function Prose(props: ProseProps) {
 			component={Component}
 			class={clsx(
 				props.class,
-				"prose max-w-none prose-slate dark:text-slate-400 dark:prose-invert",
+				"prose max-w-none prose-slate",
 				// headings
 				"prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]",
 				// lead
-				"prose-lead:text-slate-500 dark:prose-lead:text-slate-400",
+				"prose-lead:text-slate-500",
 				// links
-				"prose-a:font-semibold dark:prose-a:text-violet-400",
+				"prose-a:font-semibold",
 				// link underline
-				"dark:[--tw-prose-background:var(--color-slate-900)] prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-violet-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]",
+				"prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px]",
 				// pre
-				"prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:ring-1 dark:prose-pre:shadow-none dark:prose-pre:ring-slate-300/10",
-				// hr
-				"dark:prose-hr:border-slate-800",
+				"prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg",
 			)}
 			{...props}
 		/>
--- a/app/components/QuickLinks.tsx
+++ b/app/components/QuickLinks.tsx
@ -25,21 +25,19 @@ type QuickLinkProps = {

 export function QuickLink(props: QuickLinkProps) {
 	return (
-		<div class="group relative rounded-xl border border-slate-200 dark:border-slate-800">
-			<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
+		<div class="group relative rounded-xl border border-slate-200">
+			<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
 			<div class="relative overflow-hidden rounded-xl p-6">
 				<Icon icon={props.icon} class="h-8 w-8" />

-				<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
+				<h2 class="mt-4 font-display text-base text-slate-900">
 					<Link href={props.href}>
 						<span class="absolute -inset-px rounded-xl" />
 						{props.title}
 					</Link>
 				</h2>

-				<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
-					{props.description}
-				</p>
+				<p class="mt-1 text-sm text-slate-700">{props.description}</p>
 			</div>
 		</div>
 	);
--- a/app/fastify-entry.ts
+++ b/app/fastify-entry.ts
@ -1,9 +1,9 @@
-import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
-
 import { createHandler } from "@universal-middleware/fastify";
 import { telefuncHandler } from "./server/telefunc-handler";
 import { vikeHandler } from "./server/vike-handler";
+import { createDevMiddleware } from "vike/server";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
 import { config } from "./config";
 import Fastify from "fastify";

@ -27,17 +27,13 @@ async function startServer() {
 			wildcard: false,
 		});
 	} else {
-		// Instantiate Vite's development server and integrate its middleware to our server.
-		// ⚠️ We should instantiate it *only* in development. (It isn't needed in production
-		// and would unnecessarily bloat our server in production.)
-		const vite = await import("vite");
-		const viteDevMiddleware = (
-			await vite.createServer({
+		const { devMiddleware } = await createDevMiddleware({
 			root,
-				server: { middlewareMode: true, hmr: { port: config.HMR_PORT } },
-			})
-		).middlewares;
-		app.use(viteDevMiddleware);
+			viteConfig: {
+				server: { hmr: { port: config.HMR_PORT } },
+			},
+		});
+		app.use(devMiddleware);
 	}

 	app.post<{ Body: string }>("/_telefunc", createHandler(telefuncHandler)());
--- a/app/icons/LightbulbIcon.tsx
+++ b/app/icons/LightbulbIcon.tsx
@ -1,39 +1,43 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function LightbulbIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
-        <Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="matrix(0 21 -21 0 20 11)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark`}
+					color={props.color}
+					gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
 			<path
-          fillRule="evenodd"
-          clipRule="evenodd"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
 				d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
-          className="fill-[var(--icon-background)]"
-          fillOpacity={0.5}
+				class="fill-[var(--icon-background)]"
+				fill-opacity={0.5}
 			/>
 			<path
 				d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
-          className="fill-[var(--icon-foreground)]"
+				class="fill-[var(--icon-foreground)]"
 			/>
 			<path
 				d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
-          className="fill-[var(--icon-foreground)]"
+				class="fill-[var(--icon-foreground)]"
 			/>
-      </LightMode>
-      <DarkMode>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M16 2C10.002 2 5 6.507 5 12.23c0 3.144 1.523 6.411 3.877 8.691.75.727 1.363 1.52 1.734 2.353.185.415.574.726 1.028.726H12a1 1 0 0 0 1-1v-4.5a.5.5 0 0 0-.5-.5A3.5 3.5 0 0 1 9 14.5V14a3 3 0 1 1 6 0v9a1 1 0 1 0 2 0v-9a3 3 0 1 1 6 0v.5a3.5 3.5 0 0 1-3.5 3.5.5.5 0 0 0-.5.5V23a1 1 0 0 0 1 1h.36c.455 0 .844-.311 1.03-.726.37-.833.982-1.626 1.732-2.353 2.354-2.28 3.878-5.547 3.878-8.69C27 6.507 21.998 2 16 2Zm5 25a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1 3 3 0 0 0 3 3h4a3 3 0 0 0 3-3Zm-8-13v1.5a.5.5 0 0 1-.5.5 1.5 1.5 0 0 1-1.5-1.5V14a1 1 0 1 1 2 0Zm6.5 2a.5.5 0 0 1-.5-.5V14a1 1 0 1 1 2 0v.5a1.5 1.5 0 0 1-1.5 1.5Z"
-          fill={`url(#${id}-gradient-dark)`}
-        />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/icons/PluginsIcon.tsx
+++ b/app/icons/PluginsIcon.tsx
@ -1,48 +1,57 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function PluginsIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
-        <Gradient id={`${id}-gradient-dark-1`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
-        <Gradient id={`${id}-gradient-dark-2`} color={color} gradientTransform="matrix(0 14 -14 0 16 10)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="matrix(0 21 -21 0 20 11)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark-1`}
+					color={props.color}
+					gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark-2`}
+					color={props.color}
+					gradientTransform="matrix(0 14 -14 0 16 10)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
 			<g
-          fillOpacity={0.5}
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				fill-opacity={0.5}
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
 				<path d="M3 9v14l12 6V15L3 9Z" />
 				<path d="M27 9v14l-12 6V15l12-6Z" />
 			</g>
-        <path d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z" fillOpacity={0.5} className="fill-[var(--icon-background)]" />
+			<path
+				d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z"
+				fill-opacity={0.5}
+				class="fill-[var(--icon-background)]"
+			/>
 			<g
-          className="stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
 				<path d="M20 5.5 27 9l-12 6L3 9l7-3.5" />
 				<path d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5" />
 			</g>
-      </LightMode>
-      <DarkMode strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
-        <path
-          d="M17.676 3.38a3.887 3.887 0 0 0-3.352 0l-9 4.288C3.907 8.342 3 9.806 3 11.416v9.168c0 1.61.907 3.073 2.324 3.748l9 4.288a3.887 3.887 0 0 0 3.352 0l9-4.288C28.093 23.657 29 22.194 29 20.584v-9.168c0-1.61-.907-3.074-2.324-3.748l-9-4.288Z"
-          stroke={`url(#${id}-gradient-dark-1)`}
-        />
-        <path
-          d="M16.406 8.087a.989.989 0 0 0-.812 0l-7 3.598A1.012 1.012 0 0 0 8 12.61v6.78c0 .4.233.762.594.925l7 3.598a.989.989 0 0 0 .812 0l7-3.598c.361-.163.594-.525.594-.925v-6.78c0-.4-.233-.762-.594-.925l-7-3.598Z"
-          fill={`url(#${id}-gradient-dark-2)`}
-          stroke={`url(#${id}-gradient-dark-2)`}
-        />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/icons/PresetsIcon.tsx
+++ b/app/icons/PresetsIcon.tsx
@ -1,36 +1,40 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function PresetsIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 3)" />
-        <Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="matrix(0 21 -21 0 20 3)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark`}
+					color={props.color}
+					gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={20} cy={12} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={20} cy={12} r={12} fill={`url(#${props.id}-gradient)`} />
 			<g
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          fillOpacity={0.5}
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				fill-opacity={0.5}
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
 				<path d="M3 5v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
 				<path d="M18 17v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
 				<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
 				<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
 			</g>
-      </LightMode>
-      <DarkMode fill={`url(#${id}-gradient-dark)`}>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3 17V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Zm16 10v-9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2Zm0-23v5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1ZM3 28v-3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z"
-        />
-        <path d="M2 4v13h2V4H2Zm2-2a2 2 0 0 0-2 2h2V2Zm8 0H4v2h8V2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 13V4h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-8 0h8v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Zm16 1v9h2v-9h-2Zm3-3a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1v-2Zm6 0h-6v2h6v-2Zm3 3a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2Zm0 9v-9h-2v9h2Zm-3 3a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2Zm-6 0h6v-2h-6v2Zm-3-3a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1h-2Zm2-18V4h-2v5h2Zm0 0h-2a2 2 0 0 0 2 2V9Zm8 0h-8v2h8V9Zm0 0v2a2 2 0 0 0 2-2h-2Zm0-5v5h2V4h-2Zm0 0h2a2 2 0 0 0-2-2v2Zm-8 0h8V2h-8v2Zm0 0V2a2 2 0 0 0-2 2h2ZM2 25v3h2v-3H2Zm2-2a2 2 0 0 0-2 2h2v-2Zm9 0H4v2h9v-2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 3v-3h-2v3h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-9 0h9v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Z" />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/icons/QuestionIcon.tsx
+++ b/app/icons/QuestionIcon.tsx
@ -1,48 +1,52 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function QuestionIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
-        <Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark`}
+					color={props.color}
+					gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
 			<path
 				d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
-          fillOpacity={0.5}
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				fill-opacity={0.5}
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="m 16.39 14.617 l 1.179 -3.999 C 17.38 9.304 16.133 9.127 15.469 10.645 C 15.306 11.269 14.71 11.12 14.71 10.537 a 1.66 1.66 5 1 1 3.808 0.217 l -1.5182 5.4314 a 0.602 0.602 5 0 1 -1.1795 -0.1032 Z"
-          className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-          fillOpacity={0.5}
+				fill-opacity={0.5}
 				stroke="currentColor"
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
-      </LightMode>
-      <DarkMode>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
-          fill={`url(#${id}-gradient-dark)`}
-        />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/icons/ThemingIcon.tsx
+++ b/app/icons/ThemingIcon.tsx
@ -1,52 +1,56 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function ThemingIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 12 11)" />
-        <Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="matrix(0 21 -21 0 12 11)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark`}
+					color={props.color}
+					gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={12} cy={20} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={12} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
 			<path
 				d="M27 12.13 19.87 5 13 11.87v14.26l14-14Z"
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          fillOpacity={0.5}
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				fill-opacity={0.5}
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="M3 3h10v22a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V3Z"
-          className="fill-[var(--icon-background)]"
-          fillOpacity={0.5}
+				class="fill-[var(--icon-background)]"
+				fill-opacity={0.5}
 			/>
 			<path
 				d="M3 9v16a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V9M3 9V3h10v6M3 9h10M3 15h10M3 21h10"
-          className="stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="M29 29V19h-8.5L13 26c0 1.5-2.5 3-5 3h21Z"
-          fillOpacity={0.5}
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				fill-opacity={0.5}
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
-      </LightMode>
-      <DarkMode>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3 2a1 1 0 0 0-1 1v21a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H3Zm16.752 3.293a1 1 0 0 0-1.593.244l-1.045 2A1 1 0 0 0 17 8v13a1 1 0 0 0 1.71.705l7.999-8.045a1 1 0 0 0-.002-1.412l-6.955-6.955ZM26 18a1 1 0 0 0-.707.293l-10 10A1 1 0 0 0 16 30h13a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1h-3ZM5 18a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H5Zm-1-5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1-7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z"
-          fill={`url(#${id}-gradient-dark)`}
-        />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/icons/WarningIcon.tsx
+++ b/app/icons/WarningIcon.tsx
@ -1,48 +1,52 @@
-import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
-import React from "react";
+import type { IconColor } from "@/components/Icon";

-export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
+import { Gradient } from "@/components/Icon";
+
+type GradientProps = {
+	id: string;
+	color?: IconColor;
+};
+
+export function WarningIcon(props: GradientProps) {
 	return (
 		<>
 			<defs>
-        <Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
-        <Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
+				<Gradient
+					id={`${props.id}-gradient`}
+					color={props.color}
+					gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
+				/>
+				<Gradient
+					id={`${props.id}-gradient-dark`}
+					color={props.color}
+					gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
+				/>
 			</defs>
-      <LightMode>
-        <circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
+			<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
 			<path
 				d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
-          fillOpacity={0.5}
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				fill-opacity={0.5}
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="m15.408 16.509-1.04-5.543a1.66 1.66 0 1 1 3.263 0l-1.039 5.543a.602.602 0 0 1-1.184 0Z"
-          className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
 			<path
 				d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-          fillOpacity={0.5}
+				fill-opacity={0.5}
 				stroke="currentColor"
-          className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+				class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
+				stroke-width={2}
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			/>
-      </LightMode>
-      <DarkMode>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
-          fill={`url(#${id}-gradient-dark)`}
-        />
-      </DarkMode>
 		</>
 	);
 }
--- a/app/images/blur-cyan.webp
+++ b/app/images/blur-cyan.webp
--- a/app/images/blur-indigo.webp
+++ b/app/images/blur-indigo.webp
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@ -1,38 +1,74 @@
-import { type Node } from "@markdoc/markdoc";
+import type { JSXElement } from "solid-js";

-import { TableOfContents } from "@syntax/TableOfContents";
+import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
-import { collectSections } from "@/lib/sections";
-import { DocsHeader } from "@syntax/DocsHeader";
+import { usePageContext } from "vike-solid/usePageContext";
+import { collectSections } from "@/libs/sections";
+import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";

-export function DocsLayout({
-	children,
-	frontmatter: { title },
-	estimatedReadingTime,
-	nodes,
-}: {
-	children: React.ReactNode;
-	frontmatter: { title?: string };
+type DocsLayoutProps = {
+	children: JSXElement;
+	title?: string;
+	// frontmatter: { title?: string };
 	estimatedReadingTime?: string;
-	nodes: Array<Node>;
-}) {
-	const tableOfContents = collectSections(nodes);
+	// nodes: Array<Node>;
+};
+
+export function DocsLayout(props: DocsLayoutProps) {
+	// const tableOfContents = collectSections(nodes);

 	return (
 		<>
 			<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
 				<article>
 					<DocsHeader
-						title={title}
-						estimatedReadingTime={estimatedReadingTime}
+						title={props.title}
+						estimatedReadingTime={props.estimatedReadingTime}
 					/>
-					<Prose>{children}</Prose>
+					<Prose>{props.children}</Prose>
 				</article>
 				<PrevNextLinks />
 			</div>

-			<TableOfContents tableOfContents={tableOfContents} />
+			{/* <TableOfContents tableOfContents={tableOfContents} /> */}
 		</>
 	);
 }
+
+type DocsHeaderProps = {
+	title?: string;
+	estimatedReadingTime?: string;
+};
+
+export function DocsHeader(props: DocsHeaderProps) {
+	const { urlPathname } = usePageContext();
+
+	const section = navigation.find((section) =>
+		section.links.find((link) => link.href === urlPathname),
+	);
+
+	if (!props.title && !section) {
+		return null;
+	}
+
+	return (
+		<header class="mb-9 space-y-1">
+			{section && (
+				<p class="font-display text-sm font-medium text-violet-500">
+					{section.title}
+				</p>
+			)}
+			{props.title && (
+				<h1 class="font-display text-3xl tracking-tight text-slate-900">
+					{props.title}
+				</h1>
+			)}
+			{/* {props.estimatedReadingTime && (
+        <p class="text-sm text-slate-500 inline-flex items-center gap-1">
+          <ClockIcon class="w-4" /> {props.estimatedReadingTime}
+        </p>
+      )} */}
+		</header>
+	);
+}
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@ -1,52 +1,161 @@
-import type { JSX } from "solid-js";
-
-import "./tailwind.css";
+import type { JSX, JSXElement } from "solid-js";

+// import { CookiesContainer } from "@/components/common/Cookies";
+import { MobileNavigation } from "@/partials/MobileNavigation";
+import { usePageContext } from "vike-solid/usePageContext";
+// import { ThemeProvider } from "@/providers/ThemeProvider";
+// import { clientOnly } from "vike-react/clientOnly";
+import { createEffect, createSignal } from "solid-js";
+import { HeroSection } from "@/partials/HeroSection";
+import { Navigation } from "@/partials/Navigation";
 import { Link } from "@/components/Link";
-import logoUrl from "@/assets/logo.svg";
+import { Logo } from "@/components/Logo";
+import { Toaster } from "solid-toast";
+import clsx from "clsx";

-export default function LayoutDefault(props: { children?: JSX.Element }) {
+// import "./style.css";
+import "./tailwind.css";
+import { DocsLayout } from "./DocsLayout";
+// import "./prism.css";
+// import "unfonts.css";
+
+// const Search = clientOnly(() => import("@/components/Search").then((module) => module.Search));
+
+function Search() {
+	return null;
+}
+
+function GitHubIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
-		<div class={"flex max-w-5xl m-auto"}>
-			<Sidebar>
-				<Logo />
-				<Link href="/">Welcome</Link>
-				<Link href="/todo">Todo</Link>
-				<Link href="/star-wars">Data Fetching</Link>
-				{""}
-			</Sidebar>
-			<Content>{props.children}</Content>
-		</div>
+		<svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+			<path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
+		</svg>
 	);
 }

-function Sidebar(props: { children: JSX.Element }) {
+function Header() {
+	const [isScrolled, setIsScrolled] = createSignal(false);
+
+	createEffect(() => {
+		function onScroll() {
+			setIsScrolled(window.scrollY > 0);
+		}
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", onScroll);
+		};
+	}, []);
+
 	return (
-		<div
-			id="sidebar"
-			class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
+		<header
+			class={clsx(
+				"sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8",
+			)}
 		>
-			{props.children}
+			<div class="mr-6 flex lg:hidden">
+				<MobileNavigation />
 			</div>
+
+			<div class="relative flex grow basis-0 items-center">
+				<Link href="/" aria-label="Home page" class="flex items-center gap-2">
+					<Logo class="h-9 w-auto" />
+					<span class="hidden lg:inline text-2xl font-bold -tracking-tight text-slate-900">
+						Memento Dev
+					</span>
+				</Link>
+			</div>
+
+			<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
+				{/* <Search fallback={<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />} /> */}
+				<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />
+			</div>
+
+			<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
+				<Link
+					href="https://github.com/GauthierWebDev/memento-dev"
+					class="group"
+					aria-label="GitHub"
+				>
+					<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500" />
+				</Link>
+			</div>
+		</header>
 	);
 }

-function Content(props: { children: JSX.Element }) {
+function Footer() {
 	return (
-		<div id="page-container">
-			<div id="page-content" class={"p-5 pb-12 min-h-screen"}>
-				{props.children}
-			</div>
+		<footer class="bg-slate-50 text-slate-700">
+			<div class="mx-auto w-full flex flex-col max-w-8xl sm:px-2 lg:px-8 xl:px-12 py-8">
+				<section>
+					<header class="flex items-center gap-2 mb-2">
+						<Logo class="h-8 w-auto" />
+						<h2 class="font-display text-2xl">Memento Dev</h2>
+					</header>
+
+					<p>
+						Plateforme de ressources et documentations synthétiques et concises,
+						conçue pour les développeurs ou passionnés de l&lsquo;informatique
+						en quête de savoir.
+					</p>
+				</section>
+
+				<hr class="my-6 border-slate-200" />
+
+				<section>
+					<header class="flex items-center gap-2">
+						<h2 class="font-display">
+							&copy; 2022 - {new Date().getFullYear()} Memento Dev. Tous droits
+							réservés
+						</h2>
+					</header>
+
+					<p class="text-sm text-slate-500">
+						Memento Dev est une plateforme open-source, développée par{" "}
+						<Link href="https://gauthierdaniels.fr" class="font-bold">
+							Gauthier Daniels
+						</Link>
+						, soutenue et maintenue par une communauté de contributeurs
+						passionnés.
+					</p>
+				</section>
 			</div>
+		</footer>
 	);
 }

-function Logo() {
+type DefaultLayoutProps = {
+	children: JSXElement;
+};
+
+export default function DefaultLayout(props: DefaultLayoutProps) {
+	const { urlPathname } = usePageContext();
+	const isHomePage = urlPathname === "/";
+
 	return (
-		<div class={"p-5 mb-2"}>
-			<a href="/">
-				<img src={logoUrl} height={64} width={64} alt="logo" />
-			</a>
+		<>
+			<div class="flex w-full flex-col font-sans">
+				<Header />
+
+				{isHomePage && <HeroSection />}
+
+				<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
+					<div class="hidden lg:relative lg:block lg:flex-none">
+						<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
+						<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
+						<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
+						<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
+							<Navigation />
 						</div>
+					</div>
+					<DocsLayout>{props.children}</DocsLayout>
+				</div>
+
+				<Footer />
+			</div>
+
+			<Toaster />
+		</>
 	);
 }
--- a/app/layouts/prism.css
+++ b/app/layouts/prism.css
@ -0,0 +1,55 @@
+pre[class*="language-"] {
+  color: var(--color-slate-50);
+}
+
+.token.tag,
+.token.class-name,
+.token.selector,
+.token.selector .class,
+.token.selector.class,
+.token.function {
+  color: var(--color-pink-400);
+}
+
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.pseudo-class,
+.token.important {
+  color: var(--color-slate-300);
+}
+
+.token.module {
+  color: var(--color-pink-400);
+}
+
+.token.attr-value,
+.token.class,
+.token.string,
+.token.property {
+  color: var(--color-sky-300);
+}
+
+.token.punctuation,
+.token.attr-equals {
+  color: var(--color-slate-500);
+}
+
+.token.unit,
+.language-css .token.function {
+  color: var(--color-teal-200);
+}
+
+.token.comment,
+.token.operator,
+.token.combinator {
+  color: var(--color-slate-400);
+}
+
+.prism-code {
+  margin: 0;
+}
+
+.prism-code + .prism-code {
+  margin-bottom: 1rem;
+}
--- a/app/layouts/style.css
+++ b/app/layouts/style.css
@ -27,3 +27,9 @@ body {
 body.page-is-transitioning #page-content {
  opacity: 0;
 }
+
+#root {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
--- a/app/layouts/tailwind.css
+++ b/app/layouts/tailwind.css
@ -1,2 +1,47 @@
+@import "./prism.css";
@import "./style.css";
@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.5rem;
+  --text-base: 1rem;
+  --text-base--line-height: 2rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 2rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2.5rem;
+  --text-3xl: 2rem;
+  --text-3xl--line-height: 2.5rem;
+  --text-4xl: 2.5rem;
+  --text-4xl--line-height: 3rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 3.5rem;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --font-sans: "Inter";
+  --font-display: "Lexend";
+  --font-display--font-feature-settings: "ss01";
+
+  --container-8xl: 88rem;
+}
+
+@layer base {
+  [inert] ::-webkit-scrollbar {
+    display: none;
+  }
+}
--- a/app/package.json
+++ b/app/package.json
@ -12,25 +12,29 @@
 		"@fastify/static": "^8.1.1",
 		"@mdx-js/rollup": "^3.1.0",
 		"@sindresorhus/slugify": "^2.2.1",
+		"@tailwindcss/typography": "^0.5.16",
 		"@universal-middleware/core": "^0.4.7",
 		"@universal-middleware/fastify": "^0.5.16",
 		"clsx": "^2.1.1",
 		"fastify": "^5.3.0",
+		"prismjs": "^1.30.0",
 		"solid-heroicons": "^3.2.4",
-		"solid-highlight": "^0.1.26",
 		"solid-js": "^1.9.5",
 		"solid-jsx": "^1.1.4",
 		"solid-mdx": "^0.0.7",
+		"solid-toast": "^0.5.0",
 		"telefunc": "^0.2.3",
 		"terracotta": "^1.0.6",
 		"vike": "^0.4.228",
-		"vike-solid": "^0.7.9"
+		"vike-solid": "^0.7.9",
+		"vite-plugin-prismjs": "^0.0.11"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@eslint/js": "^9.24.0",
 		"@tailwindcss/vite": "^4.1.3",
 		"@types/node": "^18.19.86",
+		"@types/prismjs": "^1.26.5",
 		"cross-env": "^7.0.3",
 		"eslint": "^9.24.0",
 		"eslint-config-prettier": "^10.1.2",
--- a/app/pages/+Head.tsx
+++ b/app/pages/+Head.tsx
@ -16,6 +16,17 @@ export default function HeadDefault() {

          gtag('config', '${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}');`}
 			/>
+
+			<link rel="preconnect" href="https://fonts.googleapis.com" />
+			<link
+				rel="preconnect"
+				href="https://fonts.gstatic.com"
+				crossorigin="anonymous"
+			/>
+			<link
+				href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap"
+				rel="stylesheet"
+			/>
 		</>
 	);
 }
--- a/app/pages/+config.ts
+++ b/app/pages/+config.ts
@ -1,18 +1,25 @@
 import type { Config } from "vike/types";

+import Layout from "@/layouts/LayoutDefault";
 import vikeSolid from "vike-solid/config";
-import Layout from "../layouts/LayoutDefault.js";

 // Default config (can be overridden by pages)
 // https://vike.dev/config

 export default {
 	// https://vike.dev/Layout
+	// @ts-ignore
 	Layout,

 	// https://vike.dev/head-tags
 	title: "My Vike App",
 	description: "Demo showcasing Vike",
+	htmlAttributes: {
+		class: "h-full antialiased",
+	},
+	bodyAttributes: {
+		class: "flex min-h-full bg-white dark:bg-slate-900",
+	},

 	prerender: true,

--- a/app/pages/index/+Page.tsx
+++ b/app/pages/index/+Page.tsx
@ -1,10 +1,10 @@
 export default function Page() {
 	return (
 		<>
-			<h1 class={"font-bold text-3xl pb-4"}>My Vike app</h1>
+			<h1>My Vike app</h1>
 			This page is:
 			<ul>
-				<li>Rendered to HTML.</li>
+				<li>Rendered to HTMLs.</li>
 			</ul>
 		</>
 	);
--- a/app/partials/HeroSection.tsx
+++ b/app/partials/HeroSection.tsx
@ -2,9 +2,9 @@ import type { JSX } from "solid-js";

 import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
+import { Highlight } from "@/components/Highlight";
 import { HeroBackground } from "./HeroBackground";
 import { Button } from "@/components/Button";
-import { Highlight } from "solid-highlight";
 import { Image } from "@/components/Image";
 import { For } from "solid-js";
 import clsx from "clsx";
@ -34,7 +34,7 @@ function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
 	);
 }

-export function Hero() {
+export function HeroSection() {
 	return (
 		<div class="overflow-hidden bg-slate-900 dark:mt-[-4.75rem] dark:-mb-32 dark:pt-[4.75rem] dark:pb-32">
 			<div class="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
@ -132,23 +132,7 @@ export function Hero() {
 											</For>
 										</div>

-										<Highlight language={codeLanguage}>{code}</Highlight>
-
-										{/* <Highlight code={code} language={codeLanguage} theme={{ plain: {}, styles: [] }}>
-                      {({ class, style, tokens, getLineProps, getTokenProps }) => (
-                        <pre class={clsx(class, "flex overflow-x-auto pb-6")} style={style}>
-                          <code class="px-4">
-                            {tokens.map((line, lineIndex) => (
-                              <div key={lineIndex} {...getLineProps({ line })}>
-                                {line.map((token, tokenIndex) => (
-                                  <span key={tokenIndex} {...getTokenProps({ token })} />
-                                ))}
-                              </div>
-                            ))}
-                          </code>
-                        </pre>
-                      )}
-                    </Highlight> */}
+										<Highlight language={codeLanguage} code={code} />
 									</div>
 								</div>
 							</div>
--- a/app/partials/MobileNavigation.tsx
+++ b/app/partials/MobileNavigation.tsx
@ -70,7 +70,7 @@ export function MobileNavigation() {
 				class="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur-sm lg:hidden"
 				aria-label="Navigation"
 			>
-				<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6 dark:bg-slate-900">
+				<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6">
 					<div class="flex items-center">
 						<button
 							type="button"
--- a/app/partials/Navigation.tsx
+++ b/app/partials/Navigation.tsx
@ -27,9 +27,7 @@ function NavigationItem(props: NavigationItemProps) {
 			<h2
 				class={clsx(
 					"font-display font-medium cursor-pointer",
-					isOpened()
-						? "text-violet-600 dark:text-violet-200"
-						: "text-slate-900 dark:text-white ",
+					isOpened() ? "text-violet-600" : "text-slate-900",
 				)}
 			>
 				<button
@ -54,14 +52,11 @@ function NavigationItem(props: NavigationItemProps) {

 					{props.section.title}

-					<span class="text-slate-400 dark:text-slate-500">
-						{" "}
-						({props.section.links.length})
-					</span>
+					<span class="text-slate-400"> ({props.section.links.length})</span>
 				</button>
 			</h2>
 			{isOpened() && (
-				<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
+				<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200">
 					<For each={props.section.links}>
 						{(link) => (
 							<li class="relative">
@ -139,20 +134,17 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 						props.link.href !== urlPathname && "before:hidden",
 						isOpened()
 							? "text-violet-500 before:bg-violet-500"
-							: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
+							: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
 					)}
 				>
 					{props.link.title}
 					{props.link.subitems.length > 0 && (
-						<span class="text-slate-400 dark:text-slate-500">
-							{" "}
-							({props.link.subitems.length})
-						</span>
+						<span class="text-slate-400"> ({props.link.subitems.length})</span>
 					)}
 				</Link>
 			</span>
 			{props.link.subitems.length > 0 && isOpened() && (
-				<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
+				<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 mb-4">
 					<For each={props.link.subitems}>
 						{(subitem) => (
 							<li class="relative">
@ -163,7 +155,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 										"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
 										subitem.href === urlPathname
 											? "font-semibold text-violet-500 before:bg-violet-500"
-											: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
+											: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block",
 									)}
 								>
 									{subitem.title}
@ -208,7 +200,7 @@ export function Navigation(props: {
 		<nav class={clsx("text-base lg:text-sm", props.class)}>
 			<ul class="space-y-4">
 				<li>
-					<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
+					<h2 class="font-display font-bold text-base text-slate-900">
 						{firstSections[0]?.type}
 					</h2>
 					<For each={firstSections}>
@ -224,7 +216,7 @@ export function Navigation(props: {
 				<For each={Object.entries(filteredSections)}>
 					{([type, sections]) => (
 						<li>
-							<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
+							<h2 class="font-display font-bold text-base text-slate-900">
 								{type}
 							</h2>

@ -241,7 +233,7 @@ export function Navigation(props: {
 				</For>

 				<li>
-					<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
+					<h2 class="font-display font-bold text-base text-slate-900">
 						{lastSections[0]?.type}
 					</h2>
 					<For each={lastSections}>
--- a/app/partials/TableOfContents.tsx
+++ b/app/partials/TableOfContents.tsx
@ -65,7 +65,7 @@ export function TableOfContents(props: TableOfContentsProps) {
 					<>
 						<h2
 							id="on-this-page-title"
-							class="font-display text-sm font-medium text-slate-900 dark:text-white"
+							class="font-display text-sm font-medium text-slate-900"
 						>
 							Table des matières
 						</h2>
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@ -1,3 +1,4 @@
+import prismjsVitePlugin from "vite-plugin-prismjs";
 import tailwindcss from "@tailwindcss/vite";
 import { telefunc } from "telefunc/vite";
 import vikeSolid from "vike-solid/vite";
@ -10,6 +11,18 @@ const __dirname = path.resolve();

 export default defineConfig({
 	plugins: [
+		prismjsVitePlugin({
+			languages: [
+				"javascript",
+				"typescript",
+				"tsx",
+				"jsx",
+				"css",
+				"html",
+				"bash",
+				"nginx",
+			],
+		}),
 		vike(),
 		vikeSolid(),
 		mdx({ jsxImportSource: "solid-jsx", providerImportSource: "solid-mdx" }),
--- a/biome.json
+++ b/biome.json
@ -10,6 +10,6 @@
 		}
 	},
 	"files": {
-    "ignore": ["dist/**", "*.js", "*.cjs", "*.mjs", "*.spec.ts"]
+		"ignore": ["dist/**", "*.js", "*.cjs", "*.mjs", "*.spec.ts", "*.css"]
 	}
 }
Author	SHA1	Message	Date
GauthierWebDev	81aa2da4a6	fix: translate react props to solid props	2025-04-19 19:52:57 +02:00
GauthierWebDev	8321753573	style: Fix typo in viewBox attribute value	2025-04-19 19:24:05 +02:00
GauthierWebDev	bd4ce16b67	feat: Add Prism.js support and configure languages	2025-04-19 19:19:13 +02:00
GauthierWebDev	e417d7c94f	feat: Add Header, Footer, and HeroSection components	2025-04-19 18:47:03 +02:00