feat: Add syntax highlighting

fix: Clamp main page progress to between 0,1

src/app.css

@@ -1,4 +1,5 @@
 @import url(./style/content.css);
+@import url(./style/code.css);
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @tailwind base;
 @tailwind components;

src/content/post/placeholder1.md

@@ -1,6 +1,7 @@
 ---
 title: Placeholder 1
 date: '2024-09-01'
+description: "This is a placeholder description"
 ---
 # Placeholder Post 1
 

src/routes/+page.svelte

@@ -5,9 +5,9 @@
 	let scrollHeight: number = 1;
 	let progress: number = 0;
 
-	function onScroll(_p) {
+	function onScroll() {
 		if (scrollHeight > 1) {
-			progress = Math.min(1, scrollPosition / scrollHeight);
+			progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight));
 		}
 	}
 

src/routes/post/+page.svelte

@@ -9,21 +9,33 @@
 	<title>{metadata.blogName}</title>
 </svelte:head>
 
-<ul>
+<ul id="catalog">
 	{#each allPosts as post}
-		<li>
+		<li id="post-item">
+			<h2>
+				<a id="post-title" href={post.path}>{post.meta.title}</a>
+			</h2>
 			<div>
-				<h2 style="display: flex">
+				<p class="text-gray-500">{post.meta.description}</p>
-					<a id="post-title" href={post.path}>{post.meta.title}</a>
+			</div>
-				</h2>
+			<div class="flex flex-row justify-between">
-				Published {post.meta.date}
+				<p>tags?</p>
+				<p class="text-l text-gray-500">{post.meta.date}</p>
 			</div>
 		</li>
 	{/each}
 </ul>
 
 <style>
+	#post-item {
+		@apply flex flex-col;
+	}
 	#post-title {
-		margin: auto;
+		@apply text-3xl;
+	}
+	#catalog {
+		max-width: max(50vw, 100vh);
+		margin-left: auto;
+		margin-right: auto;
 	}
 </style>

src/style/code.css

@@ -0,0 +1,209 @@
+/* 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;
+}