should work

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/Header.svelte

@@ -20,9 +20,6 @@
 				<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 					<a href="/about">About</a>
 				</li>
-				<li aria-current={$page.url.pathname === '/blog' ? 'page' : undefined}>
-					<a href="/blog">Blog</a>
-				</li>
 				<li aria-current={$page.url.pathname.startsWith('/projects') ? 'page' : undefined}>
 					<a href="/projects">Projects</a>
 				</li>

src/routes/contact/+page.svelte

@@ -0,0 +1 @@
+<h1>Work in progress</h1>

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

@@ -0,0 +1,12 @@
+import { projects } from '$lib/projects';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => ({
+	data: await Promise.all(
+		[...projects.entries()].map(async ([path, load]) =>
+			load().then(({ metadata }) => ({ path, ...metadata }))
+		)
+	).then((data) =>
+		data.sort(({ date: a }, { date: z }) => new Date(z ?? 0).getTime() - new Date(a ?? 0).getTime())
+	)
+});

src/routes/projects/+page.svelte

@@ -1,6 +1,8 @@
-<script>
+<script lang="ts">
 	import Card from '$lib/components/Card.svelte';
-	import { projects } from './+page';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
@@ -11,20 +13,24 @@
 <div>
 	<h1>Projects</h1>
 
-	<p>This is the page where all projects will live.</p>
+	<p>This is the page where all projects will live</p>
 
 	<hr />
 
-	<section class="card_list">
-		{#each projects as { title }}
-			<Card {title} />
+	<section class="project_list">
+		{#each data.data as { title, description, path, date, tags }}
+			<Card data={{ title, description, path, date, tags }} />
 		{/each}
 	</section>
 </div>
 
-<style>
-	.card_list {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+<style lang="css">
+	.project_list {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 1rem;
 	}
 </style>

src/routes/projects/+page.ts

@@ -1 +1,5 @@
-export const projects = [{ title: 'Projet 1' }, { title: 'Projet 2' }];
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ data }) => ({
+	...data
+});

src/routes/projects/can7/+page.md

@@ -0,0 +1,9 @@
+---
+title: 🎚️ Can7 dashboard
+date: 2022-09-08
+description: A dashboard for can7
+tags:
+  - web
+  - php
+  - laravel
+---

src/routes/projects/net7/+page.md

@@ -0,0 +1,9 @@
+---
+title: 🖥️ net7 homepage
+date: 2022-09-08
+description: net7
+tags:
+  - web
+  - js
+  - tailwind
+---

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

@@ -0,0 +1,12 @@
+import { shs } from '$lib/shs';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => ({
+	data: await Promise.all(
+		[...shs.entries()].map(async ([path, load]) =>
+			load().then(({ metadata }) => ({ path, ...metadata }))
+		)
+	).then((data) =>
+		data.sort(({ date: a }, { date: z }) => new Date(z ?? 0).getTime() - new Date(a ?? 0).getTime())
+	)
+});

src/routes/shs/+page.svelte

@@ -1,6 +1,8 @@
-<script>
+<script lang="ts">
 	import Card from '$lib/components/Card.svelte';
-	import { works } from './+page';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
@@ -16,8 +18,8 @@
 	<hr />
 
 	<section class="card_list">
-		{#each works as title}
-			<Card {title} />
+		{#each data.data as { title, description, path, date, tags }}
+			<Card data={{ title, description, path, date, tags }} />
 		{/each}
 	</section>
 </div>
@@ -25,6 +27,6 @@
 <style>
 	.card_list {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		grid-template-columns: repeat(auto-fit);
 	}
 </style>

src/routes/shs/+page.ts

@@ -1 +1,5 @@
-export const works = ['Home', 'About', 'Contact'];
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ data }) => ({
+	...data
+});

src/routes/shs/internship/+page.md

@@ -1,7 +1,7 @@
 ---
 title: 🎚️ Internship report
-date: 2022-11-13T21:57:10.852Z
-summary:
+date: 2022-11-13
+description: My internship report
 tags:
   - web
   - svelte

src/routes/shs/ppp/+page.md

@@ -0,0 +1,6 @@
+---
+title: 🎚️ Internship report
+date: 2022-11-15
+description:
+tags:
+---

src/routes/styles.css

@@ -4,9 +4,8 @@
 	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	--font-mono: 'Fira Mono', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
+	--color-tag: #f7f7f7;
+	--color-bg-tag: #2f5bc2;
 	--color-nav: #2f5bc2;
 	--color-bg-nav: #f7f7f7;
 	--color-text: rgba(0, 0, 0, 0.7);