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

src/app.css

@@ -115,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/content/metadata.json

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

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

@@ -26,3 +26,7 @@ $$
 $$
 \vec z^{(l+1)} = \mat M\vec z^{(l)} + \vec b
 $$
+
+```tex
+\\newcommand{\\cirno}{9}
+```

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/post/+page.svelte

@@ -12,4 +12,4 @@
 </svelte:head>
 
 <hr class="separator" />
-<PostList {posts} pageN=1 {maxPageN}/>
+<PostList {posts} pageN={1} {maxPageN}/>

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'
@@ -12,7 +13,9 @@ 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",
@@ -26,11 +29,7 @@ const langs = [
    "c++",
    "sh",
 ];
-const highlightingThemes = {
-   light: 'vitesse-light',
-   dark: 'vitesse-dark',
-};
-const katexOptions = {
+const katexOptions = metadata?.markdown.katex ?? {
    macros: {
       "\\Nat": "\\mathbb N",
       "\\Complex": "\\mathbb C",
@@ -39,6 +38,10 @@ const katexOptions = {
       "\\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({