should work

Dockerfile

@@ -0,0 +1,6 @@
+FROM node:latest
+WORKDIR /app
+COPY . .
+RUN npm install
+EXPOSE 5173
+CMD ["npm", "run", "dev"]

package-lock.json

@@ -18,8 +18,12 @@
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte3": "^4.0.0",
+				"mdsvex": "^0.10.6",
+				"postcss": "^8.4.20",
+				"postcss-scss": "^4.0.6",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
+				"sass": "^1.57.1",
 				"svelte": "^3.54.0",
 				"svelte-check": "^2.9.2",
 				"tslib": "^2.4.1",
@@ -617,6 +621,12 @@
 			"integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
 			"dev": true
 		},
+		"node_modules/@types/unist": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+			"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "5.47.1",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.47.1.tgz",
@@ -1681,6 +1691,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
+			"integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1902,6 +1918,21 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/mdsvex": {
+			"version": "0.10.6",
+			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.10.6.tgz",
+			"integrity": "sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.3",
+				"prism-svelte": "^0.4.7",
+				"prismjs": "^1.17.1",
+				"vfile-message": "^2.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "3.x"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2187,6 +2218,28 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-scss": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
+			"integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
+				}
+			],
+			"engines": {
+				"node": ">=12.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.19"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2221,6 +2274,21 @@
 				"svelte": "^3.2.0"
 			}
 		},
+		"node_modules/prism-svelte": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+			"dev": true
+		},
+		"node_modules/prismjs": {
+			"version": "1.29.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2400,6 +2468,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.57.1",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+			"integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.3.8",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -2796,6 +2881,19 @@
 				"node": ">=12.18"
 			}
 		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -2805,6 +2903,20 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",

package.json

@@ -21,8 +21,12 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"mdsvex": "^0.10.6",
+		"postcss": "^8.4.20",
+		"postcss-scss": "^4.0.6",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
+		"sass": "^1.57.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
 		"tslib": "^2.4.1",

src/lib/components/Card.svelte

@@ -1,14 +1,42 @@
 <script lang="ts">
-	export let title: string;
+	export let data: {
+		title: string;
+		description?: string;
+		path: string;
+		date?: string;
+		tags?: string[];
+	};
 </script>
 
+<a href={data.path}>
 	<div class="card">
-	<h1>{title}</h1>
+		<h2>{data.title}</h2>
+		{#if data.description}
+			<p>{data.description}</p>
+		{/if}
+		{#if data.tags}
+			<div class="tags">
+				{#each data.tags as tag}
+					<span class="tag">{tag}</span>
+				{/each}
 			</div>
+		{/if}
+	</div>
+</a>
 
 <style>
+	a {
+		text-decoration: none;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+
+	a:hover {
+		color: var(--color-nav);
+	}
+
 	.card {
-		margin: 1rem 0;
 		overflow: hidden;
 		border-radius: 0.25rem;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -16,5 +44,22 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
+		padding: 1rem;
+		margin-top: 1rem;
+	}
+
+	.tags {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.tag {
+		background-color: var(--color-bg-tag);
+		color: var(--color-tag);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
 	}
 </style>

src/lib/projects.ts

@@ -0,0 +1,20 @@
+import type { create_ssr_component } from 'svelte/internal';
+
+export type Mdsvex = {
+	metadata: {
+		title: string;
+		description?: string;
+		date?: string;
+		tags?: string[];
+	};
+	default: ReturnType<typeof create_ssr_component>;
+};
+
+export const projects = new Map(
+	Object.entries(
+		import.meta.glob<Mdsvex>('../routes/projects/*/*{.md,.svelte,index.md.index.svelte}')
+	).map(([path, load]) => [
+		path.replace(/(\.md|\.svelte|\/index\.md|\/index\.svelte)$/, '').replace(/^\.\.\/routes/, ''),
+		load
+	])
+);

src/lib/shs.ts

@@ -0,0 +1,20 @@
+import type { create_ssr_component } from 'svelte/internal';
+
+export type Mdsvex = {
+	metadata: {
+		title: string;
+		description?: string;
+		date?: string;
+		tags?: string[];
+	};
+	default: ReturnType<typeof create_ssr_component>;
+};
+
+export const shs = new Map(
+	Object.entries(
+		import.meta.glob<Mdsvex>('../routes/shs/*/*{.md,.svelte,index.md.index.svelte}')
+	).map(([path, load]) => [
+		path.replace(/(\.md|\.svelte|\/index\.md|\/index\.svelte)$/, '').replace(/^\.\.\/routes/, ''),
+		load
+	])
+);

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">
+	<section class="project_list">
-		{#each projects as { title }}
+		{#each data.data as { title, description, path, date, tags }}
-			<Card {title} />
+			<Card data={{ title, description, path, date, tags }} />
 		{/each}
 	</section>
 </div>
 
-<style>
+<style lang="css">
-	.card_list {
+	.project_list {
-		display: grid;
+		display: flex;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		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}
+		{#each data.data as { title, description, path, date, tags }}
-			<Card {title} />
+			<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
+date: 2022-11-13
-summary:
+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-tag: #f7f7f7;
-	--color-bg-1: hsl(209, 36%, 86%);
+	--color-bg-tag: #2f5bc2;
-	--color-bg-2: hsl(224, 44%, 95%);
 	--color-nav: #2f5bc2;
 	--color-bg-nav: #f7f7f7;
 	--color-text: rgba(0, 0, 0, 0.7);

svelte.config.js

@@ -1,11 +1,18 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	extensions: ['.svelte', '.md'],
+	preprocess: [
+		vitePreprocess(),
+		mdsvex({
+			extensions: ['.md']
+		})
+	],
 
 	kit: {
 		adapter: adapter()