feat: Refactor out header, blockquote remark

package-lock.json

@@ -11,6 +11,10 @@
 				"@fortawesome/fontawesome-free": "^6.6.0",
 				"bits-ui": "^0.21.13",
 				"clsx": "^2.1.1",
+				"rehype-slug": "^6.0.0",
+				"remark-github-blockquote-alert": "^1.2.1",
+				"remark-toc": "^9.0.0",
+				"svelte-radix": "^1.1.1",
 				"tailwind-merge": "^2.5.2",
 				"tailwind-variants": "^0.2.1"
 			},
@@ -1127,17 +1131,31 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/ungap__structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-1.2.0.tgz",
+			"integrity": "sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==",
+			"license": "MIT"
+		},
 		"node_modules/@types/unist": {
 			"version": "2.0.11",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
 			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
@@ -1358,6 +1376,12 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+			"license": "ISC"
+		},
 		"node_modules/@vitest/expect": {
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
@@ -2499,6 +2523,12 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/github-slugger": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+			"integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
+			"license": "ISC"
+		},
 		"node_modules/glob": {
 			"version": "10.4.5",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2601,6 +2631,32 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/hast-util-heading-rank": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+			"integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-string": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
+			"integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -2910,6 +2966,47 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mdast-util-toc": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
+			"integrity": "sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/ungap__structured-clone": "^1.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"github-slugger": "^2.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/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",
+			"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -3704,6 +3801,61 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/rehype-slug": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+			"integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"github-slugger": "^2.0.0",
+				"hast-util-heading-rank": "^3.0.0",
+				"hast-util-to-string": "^3.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-github-blockquote-alert": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/remark-github-blockquote-alert/-/remark-github-blockquote-alert-1.2.1.tgz",
+			"integrity": "sha512-qNf2mSAoZgh3Cl23/9Y1L7S4Kbf9NsdHvYK398ab/52yEsDPDU5I4cuTcgDRrdIX7Ltc6RK+KCLRtWkbFnL6Dg==",
+			"license": "MIT",
+			"dependencies": {
+				"unist-util-visit": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://jaywcjlove.github.io/#/sponsor"
+			}
+		},
+		"node_modules/remark-toc": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-9.0.0.tgz",
+			"integrity": "sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-toc": "^7.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"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",
@@ -4171,6 +4323,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-radix": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-1.1.1.tgz",
+			"integrity": "sha512-TCbV7fzlJ2aEUB0nu2EodVA+r1eYj526IYpmGUTV32Z0bIrCUvx3K8xX3tcxR5dDFA5ZBU1Hxr4RYC4TDFEQ4A==",
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/tabbable": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -4466,7 +4627,6 @@
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
 			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0"
@@ -4480,7 +4640,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/unist-util-stringify-position": {
@@ -4501,7 +4660,6 @@
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
 			"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
@@ -4517,7 +4675,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
 			"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
@@ -4532,14 +4689,12 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/unist-util-visit/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==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/update-browserslist-db": {

package.json

@@ -45,6 +45,10 @@
 		"@fortawesome/fontawesome-free": "^6.6.0",
 		"bits-ui": "^0.21.13",
 		"clsx": "^2.1.1",
+		"rehype-slug": "^6.0.0",
+		"remark-github-blockquote-alert": "^1.2.1",
+		"remark-toc": "^9.0.0",
+		"svelte-radix": "^1.1.1",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"
 	}

src/app.css

@@ -7,7 +7,7 @@
  
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 90%;
     --foreground: 20 14.3% 4.1%;
  
     --muted: 60 4.8% 95.9%;
@@ -81,6 +81,13 @@
 }
 html {
   scroll-behavior: smooth;
-  overscroll-behavior: none;
+  /*overscroll-behavior: none;*/
 }
 
+.separator {
+  color: rgb(170,170,170);
+  border-color: rgb(170,170,170);
+}
+hr {
+  @apply separator;
+}

src/content/post/placeholder1.md

@@ -2,15 +2,16 @@
 title: Placeholder 1
 date: '2024-09-01'
 description: "This is a placeholder description"
+tags: ["a123", "ボースト"]
 ---
-# Placeholder Post 1
+# 1st Level Heading
 
 Here is some placeholder text
 
-## 2nd level heading
+## 2nd Level Heading
 
-### 3rd level heading
+### 3rd Level Heading
-#### 4th level heading
+#### 4th Level Heading
 
 Markdown `inline code`
 
@@ -20,3 +21,9 @@ Markdown `inline code`
 for i in range(9):
 	print("this is python")
 ```
+
+> [!note Danger]
+> This is a note quote
+
+> [!NOTE]
+> This is a note quote

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
 	<div id="layout">
 		<div id="navbar">
 			<Navbar />
+			<slot name="header" />
 		</div>
 		<div id="content">
 			<slot />
@@ -62,12 +63,23 @@
 			}
 		}
 	}
+	:global(a.active-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;
 		margin-right: auto;
 		margin-top: 50px;
-		gap: 20px;
+		gap: 100px;
 		display: flex;
 		justify-content: center;
 		/*

src/routes/+page.svelte

@@ -66,7 +66,7 @@
 </div>
 
 <div id="main">
-	<div id="bio" class="bg-white dark:bg-gray-900" style="">
+	<div id="bio" class="bg-background">
 		<div class="p-1">
 			<div class="flex">
 				<div id="info flex-col">
@@ -100,14 +100,16 @@
 		background-size: 100%;
 		background-position: center;
 		z-index: -10;
-		position: absolute;
+		position: fixed;
 		min-width: 100vw;
 		min-height: 100vh;
+		overscroll-behaviour: none;
 	}
 	#front {
 		height: 100vh;
 		display: flex;
 		flex-direction: column;
+		overscroll-behavior: none;
 	}
 	#floater {
 		display: flex;
@@ -123,6 +125,7 @@
 	}
 	#main {
 		width: 100%;
+		@apply bg-background;
 		box-shadow:
 			0px -5px 10px 10px rgba(200,200,200,0.4);
 	}

src/routes/Footer.svelte

@@ -1,13 +1,11 @@
-<div id="footer">
+<footer>
-	<p>Created and Designed by Leni Aniva based on <a href="https://github.com/heyeshuang/hugo-theme-tokiwa">Tokiwa</a></p>
+	Created and Designed by Leni Aniva based on <a href="https://github.com/heyeshuang/hugo-theme-tokiwa">Tokiwa</a>
-</div>
+</footer>
 
 <style>
-	#footer {
+	footer {
 		text-align: center;
 		bottom: 10px;
-	}
-	#footer p {
 		font-size: 12px;
 		color: #888;
 	}

src/routes/Navbar.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
+
+	function isActiveLink(pathname, route) {
+		return route != "/" && pathname.startsWith(route);
+	}
 </script>
 
 <div id="navbar" class="h-5 space-x-4 justify-between">
 	{#each routes as item}
 		{#if item.inactive ?? false}
 			<p class="navbar-link"
-				class:active-link={item.route === $page.url.pathname}
 				>{item.name}</p>
 		{:else}
 			<a class="navbar-link"
-				 class:active-link={item.route === $page.url.pathname}
+				 class:active-link={isActiveLink($page.url.pathname, item.route)}
 				 href={item.route}>{item.name}</a>
 		{/if}
 	{/each}

src/routes/post/+page.svelte

@@ -2,39 +2,20 @@
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const { allPosts } = data;
-	import metadata from '$content/metadata.json';
+	import siteMetadata from '$content/metadata.json';
+	import Heading from './Heading.svelte';
 </script>
 
 <svelte:head>
-	<title>{metadata.blogName}</title>
+	<title>{siteMetadata.blogName}</title>
 </svelte:head>
 
+<hr class="separator" />
 <ul id="catalog" class="content">
 	{#each allPosts as post}
-		<li id="post-item">
+		<li>
-			<h2>
+			<Heading metadata={post.meta} link={post.path} />
-				<a id="post-title" href={post.path}>{post.meta.title}</a>
-			</h2>
-			<div>
-				<p class="text-gray-500">{post.meta.description}</p>
-			</div>
-			<div class="flex flex-row justify-between">
-				<p>
-					{#each (post.meta.tags ?? []) as tag}
-						<a href="/">{tag}</a>
-					{/each}
-				</p>
-				<p class="text-l text-gray-500">{post.meta.date}</p>
-			</div>
 		</li>
 	{/each}
 </ul>
-
+<hr class="separator" />
-<style>
-	#post-item {
-		@apply flex flex-col;
-	}
-	#post-title {
-		@apply text-3xl;
-	}
-</style>

src/routes/post/Heading.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import DividerVertical from "svelte-radix/DividerVertical.svelte";
+	export let metadata : { title: string, description: string, tags: [string], date: Date };
+
+	export let link: Option<string> = null;
+</script>
+
+<div id="post-heading">
+	<h2>
+		{#if link}
+			<a id="post-title" href={link}>{metadata.title}</a>
+		{:else}
+			<p id="post-title">{metadata.title}</p>
+		{/if}
+	</h2>
+	<div>
+		<p class="text-gray-500">{metadata.description}</p>
+	</div>
+	<div class="flex flex-row justify-between">
+		<p class="text-gray-200 flex justify-center">
+			{#each (metadata.tags ?? []) as tag, i}
+				{#if i > 0}
+					<div class="separator text-sm">
+					<DividerVertical />
+					</div>
+				{/if}
+				<a href="/">{tag}</a>
+			{/each}
+		</p>
+		<p class="text-l text-gray-500">{metadata.date}</p>
+	</div>
+</div>
+
+<style>
+	#post-heading {
+		@apply flex flex-col;
+	}
+	#post-title {
+		@apply text-3xl;
+	}
+</style>

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

@@ -1,16 +1,19 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const { title, date, Content } = data;
+	const { metadata, Content } = data;
-	import metadata from '$content/metadata.json';
+	import siteMetadata from '$content/metadata.json';
+	import Heading from '../Heading.svelte';
 </script>
 
 <svelte:head>
-	<title>{title} | {metadata.blogName}</title>
+	<title>{metadata.title} | {siteMetadata.blogName}</title>
 </svelte:head>
 
+<Heading metadata={metadata}/>
+
+<hr />
 <article class="prose lg:prose-xl dark:prose-invert p-4">
-	<h1>{title}</h1>
-	<p>Published: {date}</p>
 	<Content />
 </article>
+<hr />

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

@@ -5,16 +5,14 @@ export const load: PageLoad = async ({ params }) => {
 	try {
 		const post = await import(`$content/post/${params.slug}.md`);
 		 if (!post) throw error(404);
-		const { title, date } = post.metadata;
 		const Content = post.default;
 
 		return {
+			metadata: post.metadata,
 			Content,
-			title,
-			date
 		};
 	}
-	catch(_e) {
+	catch(e) {
-		 throw error(404)
+		 error(404, `Could not find post ${params.slug}`)
 	}
 }

svelte.config.js

@@ -1,6 +1,9 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
+import { remarkAlert } from 'remark-github-blockquote-alert'
+import remarkToc from 'remark-toc'
+import rehypeSlug from 'rehype-slug'
 
 const contentDir = import.meta.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
@@ -12,8 +15,14 @@ const config = {
       vitePreprocess(),
       mdsvex({
          extensions: ['.md'],
-         remarkPlugins: [],
+         remarkPlugins: [
-      })
+            remarkAlert,
+            [remarkToc, {tight: true}],
+         ],
+         rehypePlugins: [
+            rehypeSlug,
+         ]
+      }),
    ],
    extensions: [".svelte", ".md"],
 

tailwind.config.ts

@@ -70,6 +70,28 @@ const config: Config = {
 					800: '#215652',
 					900: '#163937',
 				},
+				sunglow: {
+					100: '#FFFAEF',
+					200: '#FEF3D6',
+					300: '#FDECBD',
+					400: '#FCDD8C',
+					500: '#FACF5A',
+					600: '#E1BA51',
+					700: '#967C36',
+					800: '#715D29',
+					900: '#4B3E1B',
+				},
+				magenta: {
+					100: '#F9ECF4',
+					200: '#F1D0E4',
+					300: '#E8B3D3',
+					400: '#D77AB2',
+					500: '#C64191',
+					600: '#B23B83',
+					700: '#772757',
+					800: '#591D41',
+					900: '#3B142C',
+				},
 			},
 			borderRadius: {
 				lg: "var(--radius)",