doc: Documentation about metadata.json

Reviewed-on: #25

.pre-commit-config.yaml

@@ -11,7 +11,7 @@ repos:
   hooks:
   - id: conventional-pre-commit
     stages: [commit-msg]
-    args: [feat, fix, chore, test, build, merge, refactor]
+    args: [feat, fix, chore, test, build, merge, refactor, doc]
 - repo: local
   hooks:
   - id: eslint

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/).

package-lock.json

@@ -39,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",
@@ -1741,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",
@@ -1768,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",
@@ -2054,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",
@@ -2151,6 +2178,20 @@
 			"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",
@@ -2804,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",
@@ -2817,6 +2893,114 @@
 				"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",
@@ -3088,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",
@@ -3576,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",
@@ -3603,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",
@@ -4247,6 +4477,43 @@
 			"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",
@@ -4279,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",

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",

src/app.css

@@ -40,6 +40,7 @@
 	 --shadow: theme('colors.java.800');
 	 --name: theme('colors.java.800');
 	 --navlink: theme('colors.eucalyptus.400');
+	 --series: theme('colors.sunglow.700');
   }
 
   .dark {
@@ -74,6 +75,7 @@
 	 --shadow: theme('colors.java.100');
 	 --name: theme('colors.java.300');
 	 --navlink: theme('colors.eucalyptus.200');
+	 --series: theme('colors.sunglow.600');
   }
 }
 
@@ -113,11 +115,13 @@ a, button {
 	text-shadow: 0 0 5px;
 }
 .nav-link, .nav-link * {
-	color: var(--navlink);
 	@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;

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>

src/content/metadata.json

@@ -12,5 +12,12 @@
 	},
 	"extra": [
 		{ "route": "/archives", "name": "Archives" }
-	]
+	],
+	"markdown": {
+		"highlighterLangs": [
+			"python",
+			"lean",
+			"tex"
+		]
+	}
 }

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
 

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

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"]
 ---

src/content/post/the-perfect-math-class.md

@@ -16,3 +16,17 @@ theorem perfect_number_theorem (n: Nat),
 
 > :>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}
+```

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 }) => {

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>

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>

src/routes/+page.svelte

@@ -19,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]);

src/routes/Navbar.svelte

@@ -16,8 +16,8 @@
 	{#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>

src/routes/page/[slug]/+page.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import siteMetadata from '$content/metadata.json'
-	export let data: PageData;
+	import PostList from '$lib/components/PostList.svelte'
-	const { posts, pageN, maxPageN } = data;
-	import siteMetadata from '$content/metadata.json';
 
-	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
+	import type { PageData } from './$types'
-	import PostHeader from '$lib/components/PostHeader.svelte';
+	export let data: PageData
-
+	const { posts, pageN, maxPageN } = data
-	const disableLinkPrev = pageN == 1;
-	const disableLinkNext = pageN == maxPageN;
 </script>
 
 <svelte:head>
@@ -16,49 +12,7 @@
 </svelte:head>
 
 <hr class="separator" />
-<ul id="catalog" class="content">
+<PostList {posts} {pageN} {maxPageN}/>
-	{#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>
 
 <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>

src/routes/page/[slug]/+page.ts

@@ -1,7 +1,7 @@
-import { error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit'
-import type { PageLoad } from './$types';
+import type { PageLoad } from './$types'
-import { getPosts } from '$lib/posts';
+import { getPosts } from '$lib/posts'
-import siteMetadata from '$content/metadata.json';
+import siteMetadata from '$content/metadata.json'
 
 export const load: PageLoad = async ({ params }) => {
 	const pageN: number = +params.slug;

src/routes/post/+page.server.ts

@@ -1,7 +1,14 @@
-import type { PageLoad } from './$types';
+import type { PageLoad } from './$types'
-import { getPosts } from '$lib/posts';
+import { getPosts } from '$lib/posts'
+import siteMetadata from '$content/metadata.json'
 
-export const load: PageLoad = async (_) => {
+export const load: PageLoad = async () => {
-	const allPosts = await getPosts();
+	const posts = await getPosts();
-	return { allPosts };
+	const pageSize = siteMetadata?.pageSize || 3;
-};
+	const maxPageN = Math.ceil(posts.length / pageSize);
+
+	return {
+		maxPageN,
+		posts: posts.slice(0, pageSize),
+	};
+}

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;
+	const { posts, maxPageN } = data;
-	import siteMetadata from '$content/metadata.json';
-	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>
 
 <svelte:head>
@@ -11,17 +12,4 @@
 </svelte:head>
 
 <hr class="separator" />
-<ul id="catalog" class="content">
+<PostList {posts} pageN={1} {maxPageN}/>
-	{#each allPosts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
-<hr class="separator" />
-
-<style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
-</style>

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">
+<PostList {posts}/>
-	{#each posts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
 <hr class="separator" />
 
 <style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
 </style>

svelte.config.js

@@ -1,5 +1,6 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import adapter from '@sveltejs/adapter-static';
+import fs from 'fs';
 
 import { mdsvex, escapeSvelte } from 'mdsvex';
 import remarkAlert from './src/lib/markdown.js'
@@ -7,10 +8,14 @@ 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 langs = [
+const metadata = await fs.promises.readFile(contentDir + "/metadata.json")
+                         .then((file) => JSON.parse(file.toString()));
+const langs = metadata?.markdown.highlighterLangs ?? [
    "javascript",
    "lean",
    "lisp",
@@ -24,6 +29,15 @@ const langs = [
    "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',
@@ -47,8 +61,10 @@ const config = {
             remarkAlert,
             relativeImages,
             [remarkToc, {tight: true}],
+            remarkMath,
          ],
          rehypePlugins: [
+            [ rehypeKatexSvelte, katexOptions ],
             rehypeSlug,
          ],
          highlight: {
@@ -78,9 +94,7 @@ const config = {
       }),
       prerender: {
          crawl: true,
-         entries: [
+         entries: ['*'],
-            "/page/1/",
-         ],
       },
 		alias: {
          $content: contentDir,

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/");
+});