fix: Pathing issue when using external content

package-lock.json

@@ -1146,6 +1146,18 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/node": {
+			"version": "22.5.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
+			"integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
 		"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",
@@ -4623,6 +4635,15 @@
 				}
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/unist-util-is": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",

src/content/archives.md

@@ -0,0 +1,4 @@
+# Archives
+
+Archives live here
+

src/routes/+page.svelte

@@ -16,6 +16,8 @@
 	const { name, Content } = data;
 
 	import metadata from '$content/metadata.json';
+	const pathFrontCover = metadata.frontCover;
+	const pathAvatar = metadata.avatar;
 	const iconMap: Map<string, string> = {
 		"bitbucket": "fa-brands fa-bitbucket",
 		"discord": "fa-brands fa-discord",
@@ -37,7 +39,7 @@
 
 <div
 	id="background"
-	style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
+	style="opacity: {1 - progress}; background-image: url('{pathFrontCover}')"
 >
 </div>
 
@@ -78,7 +80,8 @@
 					</div>
 				</div>
 				<div id="avatar">
-					<img src={metadata.avatar} alt={metadata.name} />
+
+					<img id="avatar-img" src={pathAvatar} alt={metadata.name} />
 				</div>
 			</div>
 		</div>
@@ -154,7 +157,7 @@
 		margin-right: auto;
 		@apply ml-auto mr-0;
 	}
-	#avatar img {
+	#avatar-img {
 		width: 20vh;
 		height: 20vh;
 		border-radius: 50%;

src/routes/archives/+page.md

@@ -1 +0,0 @@
-# Archives

src/routes/archives/+page.svelte

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

src/routes/archives/+page.ts

@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const post = await import("$content/archives.md");
+	const Content = post.default;
+
+	return {
+		metadata: {
+			...post.metadata,
+			date: new Date(post.metadata.date),
+		},
+		Content,
+	};
+}

src/routes/post/+page.svelte

@@ -19,3 +19,9 @@
 	{/each}
 </ul>
 <hr class="separator" />
+
+<style>
+	#catalog li {
+		margin-bottom: 10px;
+	}
+</style>

src/routes/post/+page.ts

@@ -5,17 +5,25 @@ export const load: PageLoad = async ({ params }) => {
 	const iterablePostFiles = Object.entries(allPostFiles);
 
 	const allPosts = await Promise.all(
-		iterablePostFiles.map(async ([path, resolver]) => {
+		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
 			const { metadata } = await resolver();
-			const postPath = path.slice("/src/content/".length, -".md".length);
+			const pathPost = "post/" + pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
 
 			return {
-				meta: metadata,
-				path: postPath
+				meta: {
+					...metadata,
+					date: new Date(metadata.date),
+				},
+				path: pathPost
 			};
 		})
 	);
 
+	allPosts.sort((post1, post2) => {
+		const date1: Date = post1.meta.date;
+		const date2: Date = post2.meta.date;
+		return date2.getTime() - date1.getTime();
+	});
 	return {
 		allPosts
 	};

src/routes/post/Heading.svelte

@@ -3,6 +3,7 @@
 	export let metadata : { title: string, description: string, tags: [string], date: Date };
 
 	export let link: Option<string> = null;
+	const date = metadata.date.toLocaleDateString();
 </script>
 
 <div id="post-heading">
@@ -14,7 +15,7 @@
 		{/if}
 	</h2>
 	<div>
-		<p class="text-gray-500">{metadata.description}</p>
+		<p class="text-gray-500 h-8">{metadata.description}</p>
 	</div>
 	<div class="flex flex-row justify-between">
 		<p class="text-gray-200 flex justify-center">
@@ -27,7 +28,7 @@
 				<a href="/">{tag}</a>
 			{/each}
 		</p>
-		<p class="text-l text-gray-500">{metadata.date}</p>
+		<p class="text-l text-gray-500">{date}</p>
 	</div>
 </div>
 

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

@@ -8,7 +8,10 @@ export const load: PageLoad = async ({ params }) => {
 		const Content = post.default;
 
 		return {
-			metadata: post.metadata,
+			metadata: {
+				...post.metadata,
+				date: new Date(post.metadata.date),
+			},
 			Content,
 		};
 	}

svelte.config.js

@@ -5,7 +5,7 @@ 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";
+const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {