doc: Documentation about metadata.json

feat: Read highlighter languages from metadata
feat: Add more icons
2024-11-05 11:55:27 -08:00 · 2024-11-05 11:50:00 -08:00 · 2024-11-05 11:37:04 -08:00 · 2024-10-18 14:36:58 -07:00 · 2024-10-18 11:42:16 -07:00 · 2024-10-18 11:34:16 -07:00
33 changed files with 1178 additions and 434 deletions
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@ -11,7 +11,7 @@ repos:
  hooks:
  - id: conventional-pre-commit
    stages: [commit-msg]
-    args: [feat, fix, chore, test, build, merge]
+    args: [feat, fix, chore, test, build, merge, refactor, doc]
 - repo: local
  hooks:
  - id: eslint
--- a/README.md
+++ b/README.md
@ -19,6 +19,18 @@ To insert custom content, create a directory with a similar structure to
 directory. The website will be built statically in `build/`. Note that changing
 `favicon.svg` will require modifying the `static/` folder.

+Set `metadata.json` based on the example to have a custom avatar and background
+image.
+- `name`: Displayed name on the home page
+- `blogName`: Displayed name of the blog
+- `url`: The site url
+- `frontDescription`: The text above the main navbar
+- `frontCover`: Path to the cover image
+- `picture`: Avatar
+- `links`: A map of brands to links
+- `extra`: Extra pages showing on the navbar
+- `markdown`: `{ "highlighterLangs": [ ... ], "katex": [ ... ] }`
+
 ## Developing

 Install [pre-commit](https://pre-commit.com/).
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
 	"name": "chrysoblog",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chrysoblog",
-			"version": "0.0.1",
+			"version": "0.0.2",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.6.0",
 				"bits-ui": "^0.21.13",
@ -15,6 +15,7 @@
 				"rehype-slug": "^6.0.0",
 				"remark-github-blockquote-alert": "^1.2.1",
 				"remark-toc": "^9.0.0",
+				"shiki": "^1.22.0",
 				"svelte-radix": "^1.1.1",
 				"tailwind-merge": "^2.5.2",
 				"tailwind-variants": "^0.2.1"
@ -38,6 +39,8 @@
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"prettier-plugin-tailwindcss": "^0.6.5",
+				"rehype-katex-svelte": "^1.2.0",
+				"remark-math": "^3.0.0",
 				"svelte": "^4.2.7",
 				"svelte-check": "^4.0.0",
 				"tailwindcss": "^3.4.9",
@ -1019,6 +1022,57 @@
 				"win32"
 			]
 		},
+		"node_modules/@shikijs/core": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.0.tgz",
+			"integrity": "sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4",
+				"hast-util-to-html": "^9.0.3"
+			}
+		},
+		"node_modules/@shikijs/engine-javascript": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.0.tgz",
+			"integrity": "sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"oniguruma-to-js": "0.4.3"
+			}
+		},
+		"node_modules/@shikijs/engine-oniguruma": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.0.tgz",
+			"integrity": "sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0"
+			}
+		},
+		"node_modules/@shikijs/types": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.0.tgz",
+			"integrity": "sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
+		"node_modules/@shikijs/vscode-textmate": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+			"integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.2.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.5.tgz",
@ -1175,6 +1229,15 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/node": {
 			"version": "22.5.5",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
@ -1680,6 +1743,17 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
+		"node_modules/bcp-47-match": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+			"integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@ -1707,6 +1781,13 @@
 				"svelte": "^4.0.0 || ^5.0.0-next.118"
 			}
 		},
+		"node_modules/boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+			"dev": true,
+			"license": "ISC"
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -1806,6 +1887,16 @@
 				}
 			]
 		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chai": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
@ -1838,6 +1929,26 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/check-error": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@ -1917,6 +2028,16 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -1953,6 +2074,13 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-selector-parser": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
+			"integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/css-tree": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@ -2032,11 +2160,38 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
 			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
 		},
+		"node_modules/direction": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/direction/-/direction-2.0.1.tgz",
+			"integrity": "sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"direction": "cli.js"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@ -2690,6 +2845,41 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/hast-util-from-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-from-string/-/hast-util-from-string-2.0.0.tgz",
+			"integrity": "sha512-9JlBGWh+RXbT8PDrdwYZloN6poib8xg7Vq+LgN5TTqnaMDO0YqfX4EyZd3Myel6yIXlDsgysiRB1CTjH2K+1Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-string/node_modules/@types/hast": {
+			"version": "2.3.10",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+			"integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2"
+			}
+		},
+		"node_modules/hast-util-has-property": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.1.tgz",
+			"integrity": "sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"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",
@ -2703,6 +2893,143 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-select": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmjs.org/hast-util-select/-/hast-util-select-5.0.5.tgz",
+			"integrity": "sha512-QQhWMhgTFRhCaQdgTKzZ5g31GLQ9qRb1hZtDPMqQaOhpLBziWcshUS0uCR5IJ0U1jrK/mxg35fmcq+Dp/Cy2Aw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^2.0.0",
+				"@types/unist": "^2.0.0",
+				"bcp-47-match": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"css-selector-parser": "^1.0.0",
+				"direction": "^2.0.0",
+				"hast-util-has-property": "^2.0.0",
+				"hast-util-to-string": "^2.0.0",
+				"hast-util-whitespace": "^2.0.0",
+				"not": "^0.1.0",
+				"nth-check": "^2.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"unist-util-visit": "^4.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/@types/hast": {
+			"version": "2.3.10",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+			"integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/hast-util-to-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
+			"integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/hast-util-whitespace": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
+			"integrity": "sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/unist-util-is": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+			"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/unist-util-visit": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
+			"integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^5.0.0",
+				"unist-util-visit-parents": "^5.1.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/unist-util-visit-parents": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+			"integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+			"integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"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",
@ -2716,6 +3043,29 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@ -2922,6 +3272,33 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/katex": {
+			"version": "0.16.11",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
+			"integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
+			"dev": true,
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^8.3.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
+		"node_modules/katex/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/keyv": {
 			"version": "4.5.4",
 			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -3041,6 +3418,27 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+			"integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"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",
@ -3060,15 +3458,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/mdast-util-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/mdast-util-toc/node_modules/mdast-util-to-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@ -3173,6 +3562,95 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@ -3309,6 +3787,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/not": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/not/-/not-0.1.0.tgz",
+			"integrity": "sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA==",
+			"dev": true
+		},
 		"node_modules/npm-run-path": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@ -3336,6 +3820,19 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"boolbase": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/nth-check?sponsor=1"
+			}
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@ -3367,6 +3864,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/oniguruma-to-js": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+			"integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+			"license": "MIT",
+			"dependencies": {
+				"regex": "^4.3.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@ -3893,6 +4402,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -3952,6 +4471,49 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/regex": {
+			"version": "4.3.3",
+			"resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+			"integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+			"license": "MIT"
+		},
+		"node_modules/rehype-katex-svelte": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/rehype-katex-svelte/-/rehype-katex-svelte-1.2.0.tgz",
+			"integrity": "sha512-3mAa0J7LgMfaoU3oj9XLBIn5H/MyvWcOQcItoWhww/sABkcLpY73WsAs5mwH0c6cwYDYwJKaVVl2vNuL3wokeA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"hast-util-from-string": "^2.0.0",
+				"hast-util-select": "^5.0.5",
+				"hast-util-to-string": "^2.0.0",
+				"katex": "^0.16.7"
+			}
+		},
+		"node_modules/rehype-katex-svelte/node_modules/@types/hast": {
+			"version": "2.3.10",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+			"integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2"
+			}
+		},
+		"node_modules/rehype-katex-svelte/node_modules/hast-util-to-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
+			"integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"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",
@ -3984,6 +4546,17 @@
 				"url": "https://jaywcjlove.github.io/#/sponsor"
 			}
 		},
+		"node_modules/remark-math": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/remark-math/-/remark-math-3.0.0.tgz",
+			"integrity": "sha512-1ptXVKQaxexoS1pywvbtoRofKenkulyWa7trXUh2LR5NCdzmqfUlM/aA8qyke7h63BGMFXVjPNjOZmD8oWkKDg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"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",
@ -3998,15 +4571,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/remark-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -4148,6 +4712,20 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/shiki": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.0.tgz",
+			"integrity": "sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/core": "1.22.0",
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"node_modules/siginfo": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@ -4187,6 +4765,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/stackback": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@ -4256,6 +4844,20 @@
 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+			"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+			"license": "MIT",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@ -4705,6 +5307,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/ts-api-utils": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@ -4806,6 +5418,25 @@
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
 			"license": "MIT"
 		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@ -4905,6 +5536,20 @@
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vfile-message": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
@ -4920,6 +5565,39 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/vfile/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
+		"node_modules/vfile/node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "5.4.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
@ -5234,6 +5912,16 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		}
 	}
 }
--- a/package.json
+++ b/package.json
@ -34,6 +34,8 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.6.5",
+		"rehype-katex-svelte": "^1.2.0",
+		"remark-math": "^3.0.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.9",
@ -52,6 +54,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-github-blockquote-alert": "^1.2.1",
 		"remark-toc": "^9.0.0",
+		"shiki": "^1.22.0",
 		"svelte-radix": "^1.1.1",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"
--- a/src/app.css
+++ b/src/app.css
@ -1,5 +1,4 @@
@import url(./style/content.css);
-@import url(./style/code.css);
@import '@fortawesome/fontawesome-free/css/all.min.css';
@tailwind base;
@tailwind components;
@ -37,11 +36,16 @@
    --ring: 20 14.3% 4.1%;

    --radius: 0.5rem;
+
+	 --shadow: theme('colors.java.800');
+	 --name: theme('colors.java.800');
+	 --navlink: theme('colors.eucalyptus.400');
+	 --series: theme('colors.sunglow.700');
  }

  .dark {
    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    --foreground: 150 9.1% 70%;

    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
@ -68,9 +72,17 @@
    --destructive-foreground: 60 9.1% 97.8%;

    --ring: 24 5.7% 82.9%;
+	 --shadow: theme('colors.java.100');
+	 --name: theme('colors.java.300');
+	 --navlink: theme('colors.eucalyptus.200');
+	 --series: theme('colors.sunglow.600');
  }
 }

+body {
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
@layer base {
  * {
    @apply border-border;
@ -91,3 +103,73 @@ html {
 hr {
  @apply separator;
 }
+
+a, button {
+	color: theme('colors.eucalyptus.400');
+	&:hover,
+	&:focus {
+		color: theme('colors.java.500');
+	}
+}
+.dark a:not(.disabled-link),button {
+	text-shadow: 0 0 5px;
+}
+.nav-link, .nav-link * {
+	@apply text-lg;
+	font-weight: 500;
+	font-family: serif;
+}
+.nav-link:not(.disabled-link):not(.current-link) {
+	color: var(--navlink);
+}
+a.disabled-link {
+	color: rgb(128,128,128);
+	pointer-events: none;
+}
+a:not(.icon) {
+	position: relative;
+	text-decoration: inherit;
+
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		position: absolute;
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: theme('colors.java.500');
+		transform: scaleX(0);
+		transition: transform 0.3s ease;
+	}
+
+	&:hover,
+	&:focus {
+		&::after {
+			content: "";
+			position: absolute;
+			transform: scaleX(1);
+		}
+	}
+}
+a.current-link {
+	color: theme('colors.magenta.500');
+
+	&::after {
+		background-color: theme('colors.magenta.500');
+	}
+	&:hover,
+	&:focus {
+		color: theme('colors.magenta.500');
+	}
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
--- a/src/app.html
+++ b/src/app.html
@ -5,6 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
 	</head>
 	<body data-sveltekit-preload-data="hover" class="font-serif">
 		<div style="display: contents">%sveltekit.body%</div>
--- a/src/content/home.md
+++ b/src/content/home.md
@ -17,7 +17,7 @@ Strongest of Gensokyo

 # Projects

-> This is a quote
+> People say nothing is impossible but I do nothing everyday. -- Winnie The Pooh

 ```python
 for i in range(9):
--- a/src/content/metadata.json
+++ b/src/content/metadata.json
@ -12,5 +12,12 @@
 	},
 	"extra": [
 		{ "route": "/archives", "name": "Archives" }
-	]
+	],
+	"markdown": {
+		"highlighterLangs": [
+			"python",
+			"lean",
+			"tex"
+		]
+	}
 }
--- a/src/content/post/placeholder1.md
+++ b/src/content/post/placeholder1.md
@ -7,7 +7,7 @@ series: ["placeholder"]
 ---
 # 1st Level Heading

-Here is some placeholder text
+Here is some placeholder text. Here is some **bold text**.

 ## 2nd Level Heading

--- a/src/content/post/placeholder2.md
+++ b/src/content/post/placeholder2.md
@ -3,6 +3,6 @@ title: Placeholder 2
 date: '2024-09-20'
 description: "This is a placeholder description"
 tags: ["a123"]
-series: ["placeholder"]
+series: ["placeholder", "another-series"]
 ---
 ## Content
--- a/src/content/post/placeholder3.md
+++ b/src/content/post/placeholder3.md
@ -1,7 +1,6 @@
 ---
 title: Placeholder 3
 date: '2024-09-24'
-description: "This is a placeholder description"
 tags: []
 series: ["placeholder"]
 ---
--- a/src/content/post/the-perfect-math-class.md
+++ b/src/content/post/the-perfect-math-class.md
@ -4,3 +4,29 @@ date: '2024-09-15'
 tags: ["Cirno"]
 ---
 # Content
+
+Here are some contents for the perfect math class. [A link](https://example.com)
+
+```lean
+theorem perfect_number_theorem (n: Nat),
+	Nat.is_odd → ¬perfect n := by
+	intro h
+	apply cirno_theorem
+```
+
+> :>WARNING
+> The proof is elusive!
+
+Some KaTeX: $a^n + b^n = c^n$.
+
+$$
+\Gamma(z) = \int_0^\infty e^{-t} t^{z-1}\,\mathrm dz
+$$
+
+$$
+\vec z^{(l+1)} = \mat M\vec z^{(l)} + \vec b
+$$
+
+```tex
+\\newcommand{\\cirno}{9}
+```
--- a/src/hooks.ts
+++ b/src/hooks.ts
@ -1,7 +1,6 @@
 import type { Reroute } from '@sveltejs/kit';

 const translated: Record<string, string> = {
-	'/post': '/page/1',
 };

 export const reroute: Reroute = ({ url }) => {
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Post } from '$lib/types'
-	import DividerVertical from "svelte-radix/DividerVertical.svelte";
+	import Dot from "svelte-radix/Dot.svelte"
+	import DividerVertical from "svelte-radix/DividerVertical.svelte"
 	export let post: Post;

 	export let inactive: bool = false;
@ -9,18 +10,28 @@
 </script>

 <div id="post-heading">
+	{#if series}
+		<div class="flex flex-row justify-left items-center">
+			{#each series as seriesTag, i}
+				{#if i > 0}
+					<div class="separator text-sm">
+					<Dot />
+					</div>
+				{/if}
+				<p class="series-tag">{seriesTag}</p>
+			{/each}
+		</div>
+	{/if}
 	<h2>
-		{#each series as seriesTag}
-			<p class="series-tag">{seriesTag}</p>
-		{/each}
 		{#if inactive}
 			<p id="post-title">{post.title}</p>
 		{:else}
 			<a id="post-title" href="/post/{post.slug}">{post.title}</a>
 		{/if}
 	</h2>
+	<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
 	<div>
-		<p class="text-gray-500 h-8">{post.description}</p>
+		<p class="text-gray-500 h-8">{post?.description || ""}</p>
 	</div>
 	<div class="flex flex-row justify-between" style="width: 100%">
 		<p class="text-gray-200 flex justify-center">
@ -46,6 +57,6 @@
 		@apply text-3xl;
 	}
 	.series-tag {
-		color: theme('colors.sunglow.600');
+		color: var(--series);
 	}
 </style>
--- a/src/lib/components/PostList.svelte
+++ b/src/lib/components/PostList.svelte
@ -0,0 +1,69 @@
+<script lang="ts">
+	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
+	import type { Post } from '$lib/types'
+ 	import PostHeader from './PostHeader.svelte';
+
+	export let posts: Post[];
+	// The page navigation bar will not show if these numbers are not provided.
+	export let maxPageN: number = 0;
+	export let pageN: number = 0;
+
+	const disableLinkPrev = pageN == 1;
+	const disableLinkNext = pageN == maxPageN;
+	const firstPageLink = "/post";
+	const prevLink = pageN <= 2 ? firstPageLink : `/page/${pageN - 1}`;
+</script>
+
+<ul id="catalog" class="content">
+	{#each posts as post}
+		<li>
+			<PostHeader {post}/>
+		</li>
+	{/each}
+</ul>
+<!-- Navigation bar -->
+{#if maxPageN}
+	<hr class="separator" />
+	<div id="page-navigator">
+		<a
+			aria-label="First Page"
+			class="nav-link icon"
+			class:disabled-link={disableLinkPrev}
+			href={firstPageLink}><DoubleArrowLeft /></a>
+		<a
+			aria-label="Prev Page"
+			class="nav-link icon"
+			class:disabled-link={disableLinkPrev}
+			href={prevLink}><ChevronLeft /></a>
+		<div id="page-map">
+			<p id="page-num">{pageN}/{maxPageN}</p>
+		</div>
+		<a
+			aria-label="Next Page"
+			class="nav-link icon"
+			class:disabled-link={disableLinkNext}
+			href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
+		<a
+			aria-label="Last Page"
+			class="nav-link icon"
+			class:disabled-link={disableLinkNext}
+			href="/page/{maxPageN}"><DoubleArrowRight /></a>
+	</div>
+{/if}
+
+<style>
+	#page-navigator {
+		display: flex;
+		flex-direction: horizontal;
+		justify-content: space-between;
+		margin: 1em auto 1em auto;
+		width: 80%;
+		align-items: center;
+	}
+	#page-map {
+		display: inline-block;
+	}
+	#page-num {
+		color: rgb(128,128,128);
+	}
+</style>
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte';
+	import { theme, setTheme } from '$lib/theme'
+
+	function toggleTheme() {
+		theme.update((currentTheme) => {
+			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
+
+			document.documentElement.setAttribute('color-scheme', newTheme)
+			localStorage.setItem('color-scheme', newTheme)
+
+			if (newTheme === "tokiwa") {
+				document.documentElement.classList.remove('dark');
+			} else {
+				document.documentElement.classList.add('dark');
+			}
+			setTheme(newTheme);
+			return newTheme
+		})
+	}
+</script>
+
+<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
+	{#if $theme === "tokiwa"}
+		<Sun />
+	{:else}
+		<Moon />
+	{/if}
+</button>
+
+<style>
+	button {
+		padding: 0;
+		font-weight: inherit;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow: hidden;
+	}
+</style>
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@ -0,0 +1,13 @@
+import { writable } from 'svelte/store'
+import { browser } from "$app/environment"
+
+type Theme = 'tokiwa' | 'star'
+
+const userTheme = browser && localStorage.getItem('color-scheme')
+
+export const theme = writable(userTheme ?? 'tokiwa')
+
+// set the theme
+export function setTheme(newTheme: Theme) {
+	theme.set(newTheme)
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -31,59 +31,6 @@
 {/if}

 <style>
-	:global(.nav-link) {
-		@apply text-lg;
-		font-weight: 500;
-		font-family: serif;
-	}
-	:global(a.disabled-link) {
-		color: rgb(128,128,128);
-		pointer-events: none;
-	}
-	:global(a) {
-		color: theme('colors.eucalyptus.400');
-		&:hover,
-		&:focus {
-			color: theme('colors.java.500');
-		}
-	}
-	:global(a):not(.icon) {
-		position: relative;
-		text-decoration: inherit;
-
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			position: absolute;
-			height: 2px;
-			bottom: 0;
-			left: 0;
-			background-color: theme('colors.java.500');
-			transform: scaleX(0);
-			transition: transform 0.3s ease;
-		}
-
-		&:hover,
-		&:focus {
-			&::after {
-				content: "";
-				position: absolute;
-				transform: scaleX(1);
-			}
-		}
-	}
-	:global(a.current-link) {
-		color: theme('colors.magenta.500');
-
-		&::after {
-			background-color: theme('colors.magenta.500');
-		}
-		&:hover,
-		&:focus {
-			color: theme('colors.magenta.500');
-		}
-	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -2,6 +2,7 @@
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { Rss } from "lucide-svelte";
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
 	let progress: number = 0;
@ -18,15 +19,22 @@

 	import metadata from '$content/metadata.json';
 	const iconMap: Map<string, string> = {
-		"bitbucket": "fa-brands fa-bitbucket",
+		"orcid": "fa-brands fa-orcid",
+		"google-scholar": "fa-brands fa-google-scholar",
+
 		"discord": "fa-brands fa-discord",
 		"email": "fa-solid fa-envelope",
+
+		"bitbucket": "fa-brands fa-bitbucket",
 		"github": "fa-brands fa-github",
 		"gitlab": "fa-brands fa-gitlab",
-		"google-scholar": "fa-brands fa-google-scholar",
-		"instagram": "fa-brands fa-instagram",
 		"open-source": "fa-brands fa-osi",
-		"orcid": "fa-brands fa-orcid",
+
+		"bluesky": "fa-brands fa-bluesky",
+		"youtube": "fa-brands fa-youtube",
+		"instagram": "fa-brands fa-instagram",
+		"bandcamp": "fa-brands fa-bandcamp",
+		"pixiv": "fa-brands fa-pixiv",
 	};
 	const iconLinks: [string, string][] = Object.entries(metadata.links).map(
 		([key, link]) => [iconMap[key], link]);
@ -50,22 +58,27 @@
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="nav-link" href="#bio">Bio</a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
+						<a
+							href={item.route}
+							class="nav-link"
+							class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<a class="icon" href="/rss.xml"><Rss /></a>
+				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
+				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+				<ThemeSwitch />
 			</div>
 		</div>
 	</div>
 </div>

 <main>
-	<div id="bio" class="bg-background">
+	<div id="bio">
 		<div class="p-1">
 			<div class="flex">
 				<div id="info flex-col">
@ -81,7 +94,7 @@
 				</div>
 			</div>
 		</div>
-		<article id="bio-core" class="prose lg:prose-xl dark:prose-invert">
+		<article id="bio-core" class="prose lg:prose-xl dark:prose-dark">
 			<Content />
 		</article>
 	</div>
@ -131,8 +144,9 @@
 	main {
 		width: 100%;
 		@apply bg-background;
-		box-shadow:
-			0px -5px 10px 10px rgba(200,200,200,0.4);
+		@apply dark:bg-gray-800;
+		/*box-shadow:
+			0px -5px 5px var(--shadow);*/
 	}
 	#bio {
 		max-width: max(50vw, 100vh);
@ -145,14 +159,14 @@
 		font-family: serif;
 		font-size: min(10vw, 60px);
 		display: inline-block;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#avatar {
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
 		margin-right: auto;
-		border: 4px solid theme('colors.eucalyptus.500');
+		border: 1px solid var(--name);
 		border-radius: 50%;
 		aspect-ratio: 1;
 		max-width: 20%;
@ -171,7 +185,6 @@
 		margin-left: 50px;
 	}
 	#bio-core > :global(h1) {
-		color: theme('colors.eucalyptus.700');
 		font-weight: normal;
 		border-bottom: 1px solid;
 	}
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@ -7,6 +7,7 @@
 		text-align: center;
 		bottom: 10px;
 		font-size: 12px;
-		color: #888;
+		background-color: var(--background);
+		color: var(--foreground);
 	}
 </style>
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 	import { name } from '$content/metadata.json';
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	import { Rss } from "lucide-svelte";

 	function isCurrentLink(pathname, route) {
@ -15,11 +16,12 @@
 	{#each routes as item}
 		<a
 			class="nav-link"
-			class:current-link={isCurrentLink($page.url.pathname, item.route)}
 			class:disabled-link={item.disabled}
+			class:current-link={isCurrentLink($page.url.pathname, item.route)}
 			href={item.route}>{item.name}</a>
 	{/each}
 	<a class="nav-link icon" href="/rss.xml"><Rss /></a>
+	<div><ThemeSwitch /></div>
 </div>

 <style>
@ -27,7 +29,7 @@
 		font-family: serif;
 		font-size: 3rem;
 		font-weight: normal;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#navbar {
 		display: flex;
--- a/src/routes/[slug=extra]/+page.svelte
+++ b/src/routes/[slug=extra]/+page.svelte
@ -12,7 +12,7 @@
 </svelte:head>

 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
--- a/src/routes/page/[slug]/+page.svelte
+++ b/src/routes/page/[slug]/+page.svelte
@ -1,14 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	export let data: PageData;
-	const { posts, pageN, maxPageN } = data;
-	import siteMetadata from '$content/metadata.json';
+	import siteMetadata from '$content/metadata.json'
+	import PostList from '$lib/components/PostList.svelte'

-	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
-	import PostHeader from '$lib/components/PostHeader.svelte';
-
-	const disableLinkPrev = pageN == 1;
-	const disableLinkNext = pageN == maxPageN;
+	import type { PageData } from './$types'
+	export let data: PageData
+	const { posts, pageN, maxPageN } = data
 </script>

 <svelte:head>
@ -16,49 +12,7 @@
 </svelte:head>

 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each posts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
-<hr class="separator" />
-<div id="page-navigator">
-	<a
-		class="nav-link icon"
-		class:disabled-link={disableLinkPrev}
-		href="/page/1"><DoubleArrowLeft /></a>
-	<a
-		class="nav-link icon"
-		class:disabled-link={disableLinkPrev}
-		href="/page/{Math.max(1, pageN-1)}"><ChevronLeft /></a>
-	<div id="page-map">
-		<p id="page-num">{pageN}/{maxPageN}</p>
-	</div>
-	<a
-		class="nav-link icon"
-		class:disabled-link={disableLinkNext}
-		href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
-	<a
-		class="nav-link icon"
-		class:disabled-link={disableLinkNext}
-		href="/page/{maxPageN}"><DoubleArrowRight /></a>
-</div>
+<PostList {posts} {pageN} {maxPageN}/>

 <style>
-	#page-navigator {
-		display: flex;
-		flex-direction: horizontal;
-		justify-content: space-between;
-		margin: 1em auto 1em auto;
-		width: 80%;
-		align-items: center;
-	}
-	#page-map {
-		display: inline-block;
-	}
-	#page-num {
-		color: rgb(128,128,128);
-	}
 </style>
--- a/src/routes/page/[slug]/+page.ts
+++ b/src/routes/page/[slug]/+page.ts
@ -1,7 +1,7 @@
-import { error } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
-import { getPosts } from '$lib/posts';
-import siteMetadata from '$content/metadata.json';
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+import { getPosts } from '$lib/posts'
+import siteMetadata from '$content/metadata.json'

 export const load: PageLoad = async ({ params }) => {
 	const pageN: number = +params.slug;
--- a/src/routes/post/+page.server.ts
+++ b/src/routes/post/+page.server.ts
@ -1,7 +1,14 @@
-import type { PageLoad } from './$types';
-import { getPosts } from '$lib/posts';
+import type { PageLoad } from './$types'
+import { getPosts } from '$lib/posts'
+import siteMetadata from '$content/metadata.json'

-export const load: PageLoad = async (_) => {
-	const allPosts = await getPosts();
-	return { allPosts };
-};
+export const load: PageLoad = async () => {
+	const posts = await getPosts();
+	const pageSize = siteMetadata?.pageSize || 3;
+	const maxPageN = Math.ceil(posts.length / pageSize);
+
+	return {
+		maxPageN,
+		posts: posts.slice(0, pageSize),
+	};
+}
--- a/src/routes/post/+page.svelte
+++ b/src/routes/post/+page.svelte
@ -1,9 +1,10 @@
 <script lang="ts">
+	import siteMetadata from '$content/metadata.json';
+	import PostList from '$lib/components/PostList.svelte'
+
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const { allPosts } = data;
-	import siteMetadata from '$content/metadata.json';
-	import PostHeader from '$lib/components/PostHeader.svelte';
+	const { posts, maxPageN } = data;
 </script>

 <svelte:head>
@ -11,17 +12,4 @@
 </svelte:head>

 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each allPosts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
-<hr class="separator" />
-
-<style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
-</style>
+<PostList {posts} pageN={1} {maxPageN}/>
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@ -13,7 +13,7 @@
 <PostHeader post={post} inactive={true}/>

 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
--- a/src/routes/tag/[slug]/+page.svelte
+++ b/src/routes/tag/[slug]/+page.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import PostList from '$lib/components/PostList.svelte'
+	import siteMetadata from '$content/metadata.json';
 	export let data: PageData;
 	const { name, posts } = data;
-	import siteMetadata from '$content/metadata.json';
-	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>

 <svelte:head>
@ -11,19 +11,9 @@
 </svelte:head>

 <h1>{name} ({posts.length})</h1>
-
 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each posts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
+<PostList {posts}/>
 <hr class="separator" />

 <style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
 </style>
--- a/src/style/code.css
+++ b/src/style/code.css
@ -1,209 +0,0 @@
-/* Adapted from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	color: #90a4ae;
-	background: #fafafa;
-	font-family: Roboto Mono, monospace;
-	font-size: 1em;
-	line-height: 1.5em;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-code[class*="language-"]::-moz-selection,
-pre[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection,
-pre[class*="language-"] ::-moz-selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-code[class*="language-"]::selection,
-pre[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"] ::selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-:not(pre) > code[class*="language-"] {
-	white-space: normal;
-	border-radius: 0.2em;
-	padding: 0.1em;
-}
-
-pre[class*="language-"] {
-	overflow: auto;
-	position: relative;
-	margin: 0.5em 0;
-	padding: 1.25em 1em;
-}
-
-.language-css > code,
-.language-sass > code,
-.language-scss > code {
-	color: #f76d47;
-}
-
-[class*="language-"] .namespace {
-	opacity: 0.7;
-}
-
-.token.atrule {
-	color: #7c4dff;
-}
-
-.token.attr-name {
-	color: #39adb5;
-}
-
-.token.attr-value {
-	color: #f6a434;
-}
-
-.token.attribute {
-	color: #f6a434;
-}
-
-.token.boolean {
-	color: #7c4dff;
-}
-
-.token.builtin {
-	color: #39adb5;
-}
-
-.token.cdata {
-	color: #39adb5;
-}
-
-.token.char {
-	color: #39adb5;
-}
-
-.token.class {
-	color: #39adb5;
-}
-
-.token.class-name {
-	color: #6182b8;
-}
-
-.token.comment {
-	color: #aabfc9;
-}
-
-.token.constant {
-	color: #7c4dff;
-}
-
-.token.deleted {
-	color: #e53935;
-}
-
-.token.doctype {
-	color: #aabfc9;
-}
-
-.token.entity {
-	color: #e53935;
-}
-
-.token.function {
-	color: #7c4dff;
-}
-
-.token.hexcode {
-	color: #f76d47;
-}
-
-.token.id {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.important {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.inserted {
-	color: #39adb5;
-}
-
-.token.keyword {
-	color: #7c4dff;
-}
-
-.token.number {
-	color: #f76d47;
-}
-
-.token.operator {
-	color: #39adb5;
-}
-
-.token.prolog {
-	color: #aabfc9;
-}
-
-.token.property {
-	color: #39adb5;
-}
-
-.token.pseudo-class {
-	color: #f6a434;
-}
-
-.token.pseudo-element {
-	color: #f6a434;
-}
-
-.token.punctuation {
-	color: #39adb5;
-}
-
-.token.regex {
-	color: #6182b8;
-}
-
-.token.selector {
-	color: #e53935;
-}
-
-.token.string {
-	color: #f6a434;
-}
-
-.token.symbol {
-	color: #7c4dff;
-}
-
-.token.tag {
-	color: #e53935;
-}
-
-.token.unit {
-	color: #f76d47;
-}
-
-.token.url {
-	color: #e53935;
-}
-
-.token.variable {
-	color: #e53935;
-}
--- a/src/style/content.css
+++ b/src/style/content.css
@ -1,5 +1,4 @@
 blockquote {
-    background: #fafaee;
    font-style: italic;
 }

--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,14 +1,55 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { mdsvex } from 'mdsvex';
 import adapter from '@sveltejs/adapter-static';
+import fs from 'fs';

+import { mdsvex, escapeSvelte } from 'mdsvex';
 import remarkAlert from './src/lib/markdown.js'
 import relativeImages from 'mdsvex-relative-images'
 import remarkToc from 'remark-toc'
 import rehypeSlug from 'rehype-slug'
+import { getHighlighter } from 'shiki'
+import rehypeKatexSvelte from "rehype-katex-svelte";
+import remarkMath from 'remark-math'

 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";

+const metadata = await fs.promises.readFile(contentDir + "/metadata.json")
+                         .then((file) => JSON.parse(file.toString()));
+const langs = metadata?.markdown.highlighterLangs ?? [
+   "javascript",
+   "lean",
+   "lisp",
+   "nix",
+   "python",
+   "rust",
+   "toml",
+   "typescript",
+   "yaml",
+   "c",
+   "c++",
+   "sh",
+];
+const katexOptions = metadata?.markdown.katex ?? {
+   macros: {
+      "\\Nat": "\\mathbb N",
+      "\\Complex": "\\mathbb C",
+      "\\vec": "\\boldsymbol",
+      "\\mat": "\\boldsymbol",
+      "\\rv": "\\mathrm",
+   },
+};
+const highlightingThemes = {
+   light: 'vitesse-light',
+   dark: 'vitesse-dark',
+};
+
+const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
+const highlighter = await getHighlighter({
+   themes,
+   langs,
+})
+await highlighter.loadLanguage(...langs);
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@ -20,10 +61,21 @@ const config = {
            remarkAlert,
            relativeImages,
            [remarkToc, {tight: true}],
+            remarkMath,
         ],
         rehypePlugins: [
+            [ rehypeKatexSvelte, katexOptions ],
            rehypeSlug,
-         ]
+         ],
+         highlight: {
+		      highlighter: async (code, lang = 'text') => {
+			      const html = escapeSvelte(highlighter.codeToHtml(code, {
+                  lang,
+                  themes: highlightingThemes,
+               }))
+			      return `{@html \`${html}\` }`
+		      }
+	      },
      }),
      vitePreprocess(),
   ],
@ -42,9 +94,7 @@ const config = {
      }),
      prerender: {
         crawl: true,
-         entries: [
-            "/page/1/",
-         ],
+         entries: ['*'],
      },
 		alias: {
         $content: contentDir,
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -109,25 +109,7 @@ const config: Config = {
 				mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
 			},
 			typography: ((theme) => {
-				const markdownCommon = {
-					h1: {
-						color: theme('colors.eucalyptus.700'),
-					},
-					h2: {
-						color: theme('colors.eucalyptus.700'),
-					},
-					h3: {
-						color: theme('colors.eucalyptus.800'),
-					},
-					h4: {
-						color: theme('colors.eucalyptus.800'),
-					},
-					a: {
-						color: theme('colors.eucalyptus.400'),
-						"&:focus": {
-							color: theme('colors.java.500'),
-						},
-					},
+				const common = {
 					ul: {
 						listStyleType: "square",
 						listStylePosition: "outside",
@ -138,17 +120,75 @@ const config: Config = {
 					},
 					maxWidth: "100%",
 				};
+				const themeTokiwa = {
+					'--tw-prose-body': theme('colors.gray.900'),
+					'--tw-prose-headings': theme('colors.eucalyptus.700'),
+					'--tw-prose-lead': theme('colors.eucalyptus.400'),
+					'--tw-prose-links': theme('colors.eucalyptus.400'),
+					'--tw-prose-bold': theme('colors.eucalyptus.800'),
+					'--tw-prose-counters': theme('colors.gray.900'),
+					'--tw-prose-bullets': theme('colors.java.900'),
+					'--tw-prose-hr': theme('colors.gray.600'),
+					'--tw-prose-quotes': theme('colors.gray.900'),
+					'--tw-prose-quote-borders': theme('colors.eucalyptus.700'),
+					'--tw-prose-captions': theme('colors.gray.800'),
+					'--tw-prose-code': theme('colors.sunglow.900'),
+					'--tw-prose-pre-code': theme('colors.gray.500'),
+					'--tw-prose-pre-bg': theme('colors.gray.500'),
+					'--tw-prose-th-borders': theme('colors.gray.500'),
+					'--tw-prose-td-borders': theme('colors.gray.500'),
+					a: {
+						color: theme('colors.eucalyptus.400'),
+						"&:hover, &:focus": {
+							color: theme('colors.java.500'),
+						},
+					},
+				};
+				const themeStar = {
+					'--tw-prose-body': theme('colors.gray.400'),
+					'--tw-prose-headings': theme('colors.eucalyptus.500'),
+					'--tw-prose-lead': theme('colors.eucalyptus.400'),
+					'--tw-prose-links': theme('colors.eucalyptus.500'),
+					'--tw-prose-bold': theme('colors.eucalyptus.100'),
+					'--tw-prose-counters': theme('colors.gray.100'),
+					'--tw-prose-bullets': theme('colors.java.100'),
+					'--tw-prose-hr': theme('colors.gray.400'),
+					'--tw-prose-quotes': theme('colors.gray.100'),
+					'--tw-prose-quote-borders': theme('colors.eucalyptus.300'),
+					'--tw-prose-captions': theme('colors.gray.200'),
+					'--tw-prose-code': theme('colors.sunglow.300'),
+					'--tw-prose-pre-code': theme('colors.gray.500'),
+					'--tw-prose-pre-bg': theme('colors.gray.500'),
+					'--tw-prose-th-borders': theme('colors.gray.500'),
+					'--tw-prose-td-borders': theme('colors.gray.500'),
+					a: {
+						color: theme('colors.eucalyptus.300'),
+						"&:hover, &:focus": {
+							color: theme('colors.java.400'),
+						},
+					},
+				};

 				return {
 					DEFAULT: {
 						css: {
-							...markdownCommon,
+							...themeTokiwa,
+							...common,
+						},
+					},
+					dark: {
+						css: {
+							...themeStar,
+							...common,
 						},
 					},
 				};
 			}),
 		}
 	},
+	variants: {
+		extend: { typography: ["dark"] }
+	},
 	plugins: [
 		typography,
 	],
--- a/tests/post.spec.ts
+++ b/tests/post.spec.ts
@ -5,3 +5,15 @@ test('Navigate to blog post', async ({ page }) => {
 	await page.getByText('The Perfect Math Class').click();
 	await expect(page).toHaveURL("/post/the-perfect-math-class/");
 });
+
+test('Navigate to page 2', async ({ page }) => {
+	await page.goto('/post');
+	await page.getByRole('link', { name: 'Next Page' }).click();
+	await expect(page).toHaveURL("/page/2/");
+	await page.getByRole('link', { name: 'Prev Page' }).click();
+	await expect(page).toHaveURL("/post/");
+	await page.getByRole('link', { name: 'Last Page' }).click();
+	await expect(page).toHaveURL("/page/2/");
+	await page.getByRole('link', { name: 'First Page' }).click();
+	await expect(page).toHaveURL("/post/");
+});
Author	SHA1	Message	Date
Leni Aniva	5dbb8e7a8c	doc: Documentation about metadata.json	2024-11-05 11:55:27 -08:00
Leni Aniva	7b900c2993	feat: Read highlighter languages from metadata	2024-11-05 11:50:00 -08:00
Leni Aniva	0d87cea96f	feat: Add more icons	2024-11-05 11:37:04 -08:00
Leni Aniva	78a414c747	Merge pull request 'fix: Page navigation links' (#25 ) from post/page into main Reviewed-on: #25	2024-10-18 14:36:58 -07:00
Leni Aniva	0cea3461dc	fix: Styling current link	2024-10-18 11:42:16 -07:00
Leni Aniva	60fc46af4a	fix: Styling disabled nav-link	2024-10-18 11:34:16 -07:00
Leni Aniva	d756598342	fix: Next page link on first page	2024-10-18 11:31:34 -07:00
Leni Aniva	6e7ccd73fc	Merge pull request 'fix: Stacking series problem and undefined descriptions problem' (#24 ) from post/header into main Reviewed-on: #24	2024-10-18 11:27:46 -07:00
Leni Aniva	1a1d53adee	fix: Styling post header	2024-10-18 11:26:56 -07:00
Leni Aniva	f971902433	merge: branch 'main' into post/header	2024-10-18 11:21:15 -07:00
Leni Aniva	2feff3d675	Merge pull request 'fix: Cataloging problem on /post' (#23 ) from post/page into main Reviewed-on: #23	2024-10-18 11:17:31 -07:00
Leni Aniva	62485531e5	test: Navigate to page 2	2024-10-18 11:16:44 -07:00
Leni Aniva	2471a5beb1	merge: branch 'main' into post/page	2024-10-18 11:07:31 -07:00
Leni Aniva	b6e353362d	Merge pull request 'feat: Enable KaTeX' (#22 ) from post/remark-katex into main Reviewed-on: #22	2024-10-18 11:07:09 -07:00
Leni Aniva	b914ad32ae	merge: branch 'main' into post/remark-katex	2024-10-18 11:05:57 -07:00
Leni Aniva	e9af9f019a	fix: Stacking series problem	2024-10-18 10:59:59 -07:00
Leni Aniva	9a6c891671	fix: No undefined description	2024-10-18 10:53:54 -07:00
Leni Aniva	401db3787e	fix: Remove /page/1 link	2024-10-18 10:51:03 -07:00
Leni Aniva	38aeb1e80d	refactor: Use PostList in tag	2024-10-18 10:48:02 -07:00
Leni Aniva	19519fb30e	fix: Prerender page crawling	2024-10-18 10:46:44 -07:00
Leni Aniva	1af8dd8c8d	fix: Cataloging problem on /post	2024-10-18 10:38:13 -07:00
Leni Aniva	a650a31ac4	Merge pull request 'fix: Dark mode colour variables' (#21 ) from styling/dark-mode into main Reviewed-on: #21	2024-10-17 23:32:52 -07:00
Leni Aniva	a8f3f7aad2	fix: Remove box shadow; Fix footer colour	2024-10-16 23:23:23 -07:00
Leni Aniva	b867931563	feat: Enable KaTeX	2024-10-16 23:04:12 -07:00
Leni Aniva	a10e282166	feat: Use less intensive colour for dark mode code	2024-10-16 17:20:15 -07:00
Leni Aniva	5b4ce34163	fix: Set tw prose colours	2024-10-16 17:04:54 -07:00
Leni Aniva	23219e6619	Merge pull request 'feat: Dark mode' (#15 ) from styling/dark-mode into main Reviewed-on: #15	2024-10-15 19:32:15 -07:00
Leni Aniva	6bda82321b	fix: Dark mode highlighting of code	2024-10-15 19:28:58 -07:00
Leni Aniva	ac0d9a5a03	feat: Cache shiki instance; Add more languages	2024-10-15 19:27:40 -07:00
Leni Aniva	571d54a975	fix: Call `setTheme` function	2024-10-15 19:20:08 -07:00
Leni Aniva	581c122c82	fix: Theme switch --navlink colour	2024-10-15 19:16:20 -07:00
Leni Aniva	3a8a9c8105	fix: Blockquote themes	2024-10-15 19:14:27 -07:00
Leni Aniva	8632ae7a79	feat: Light and dark themes	2024-10-15 18:59:02 -07:00
Leni Aniva	cd477d6b7a	feat: Syntax highlighting via shiki	2024-10-15 13:58:14 -07:00
Leni Aniva	72b4fd2550	feat: Style name heading and nav-link	2024-10-15 13:51:46 -07:00
Leni Aniva	8762763390	feat: Prose dark mode	2024-10-15 12:11:40 -07:00
Leni Aniva	f2344ea3cb	feat: Put ThemeSwitch after CSS	2024-10-11 15:06:17 -07:00
Leni Aniva	cf84bd324f	merge: branch 'main' into styling/dark-mode	2024-10-11 15:01:07 -07:00
Leni Aniva	8b2a141a05	Merge pull request 'fix: RSS Styling and Trailing Slash Problems' (#16 ) from post/rss into main Reviewed-on: #16	2024-10-11 15:00:31 -07:00
Leni Aniva	95095083c3	refactor: Move global styles to `app.css`	2024-10-11 14:43:20 -07:00
Leni Aniva	e8ef1d6a0e	fix: Glowing links inherit colour	2024-10-11 11:50:31 -07:00
Leni Aniva	20f663e654	feat: Glowing links in dark mode	2024-10-11 11:49:58 -07:00
Leni Aniva	479690d2b2	feat: Implement dark mode switch	2024-10-11 11:45:19 -07:00