fix(docs): add docs route

apps/docs/src/lib/components/NavBar.svelte

@@ -6,7 +6,7 @@
 		{ href: '/', text: 'Home',  icon: HouseSolid },
 		{ href: '/about', text: 'About', icon: FutbolRegular},
 		{ href: '/blog', text: 'Blog', icon: BullhornSolid},
-		{ href: '/guides', text: 'Guides', icon: BookSolid},
+		{ href: '/docs', text: 'Docs', icon: BookSolid},
 		{ href: '/faq', text: 'FAQ', icon: CircleQuestionRegular},
 		{ href: '/contact', text: 'Contact', icon: CommentRegular},
 	];

apps/docs/src/lib/layouts/blog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Page from '$lib/components/Page.svelte';
 	/* All values defined in frontmatter are available as props.*/
-	export let title: string;
+	export let title;
 	export let headline;
 	export let keywords;
 </script>

apps/docs/src/lib/layouts/page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Page from '$lib/components/Page.svelte';
 	/* All values defined in frontmatter are available as props.*/
-	export let title: string;
+	export let title;
 	export let headline;
 	export let keywords;
 </script>

apps/docs/src/posts/sample.md

@@ -0,0 +1,18 @@
+---
+title: Sample Post
+description: Just to have something on this page.
+published: true
+categories:
+  - Sample
+date: 2023-01-10
+---
+
+# Markdown
+
+---
+
+```ts
+function greet(name: string) {
+	console.log('Hey');
+}
+```

apps/docs/src/routes/api/docs/+server.ts

@@ -0,0 +1,30 @@
+import { json } from '@sveltejs/kit';
+import type { Post } from '$lib/types';
+import { formatDateString } from '$lib/util';
+
+async function getPosts(searchParams: URLSearchParams) {
+	console.info('API: getPosts', searchParams);
+	let posts: Post[] = [];
+	const paths = import.meta.glob('/src/posts/*.md', { eager: true });
+	for (const [path, file] of Object.entries(paths)) {
+		const slug = path.split('/').at(-1)?.replace('.md', '');
+		if (file && typeof file === 'object' && 'metadata' in file && slug) {
+			const metadata = file.metadata as Omit<Post, 'slug'>;
+			if (!metadata.published) continue;
+			const post = { ...metadata, slug };
+			post.date = formatDateString(post.date);
+			posts.push(post);
+		}
+	}
+	posts.sort((d1, d2) => new Date(d2.date).getTime() - new Date(d1.date).getTime());
+	const category = searchParams.get('category');
+	if (category) {
+		posts = posts.filter((post) => post.categories.includes(category));
+	}
+	return posts;
+}
+
+export async function GET({ url }) {
+	const posts = await getPosts(url.searchParams);
+	return json(posts);
+}

apps/docs/src/routes/docs/+page.server.ts

@@ -0,0 +1,8 @@
+import type { Post } from '$lib/types';
+
+export async function load({ fetch, url }) {
+	console.info('Loading blogpost', url);
+	const resp = await fetch('/api/docs?' + url.searchParams);
+	const posts: Post[] = await resp.json();
+	return { posts };
+}

apps/docs/src/routes/docs/+page.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	export let data;
+	const categoryUrl = (category: string) => {
+		return `/docs?category=${category}`;
+	};
+
+	const postUrl = (slug: string) => {
+		return `/docs/${slug}`;
+	};
+	let searchParam: null | string = null;
+	$: filteredPosts = data.posts.filter((post) => {
+		if (searchParam === null) return true;
+		return post.title.toLowerCase().includes(searchParam.toLowerCase());
+	});
+</script>
+
+<div class="container h-full mx-auto flex flex-col w-full mt-12 space-y-8">
+	<input
+		class="input !border-warning-500 !border-opacity-50"
+		type="search"
+		name="autocomplete-search"
+		bind:value={searchParam}
+		placeholder="Search..."
+	/>
+	<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+		{#each filteredPosts as post}
+			<a class="unstyled" href={postUrl(post.slug)}>
+				<article class="card card-hover flex flex-col overflow-hidden">
+					{#if post.headerImage !== undefined}
+						<a class="unstyled" href={postUrl(post.slug)}>
+							<img class="w-full aspect-[21/9]" src={post.headerImage} alt="" />
+						</a>
+					{:else}
+						<header>
+							<img class="w-full aspect-[21/9]" src="/default.jpg" alt="" />
+						</header>
+					{/if}
+					<div class="p-4 space-y-4">
+						<div class="flex justify-start">
+							{#each post.categories as category}
+								<a class="unstyled" href={categoryUrl(category)}>
+									<div
+										class="border border-warning-400 border-solid hover:border-double rounded-md p-1 px-2"
+									>
+										<h4 class="text-sm text-warning-500">{category}</h4>
+									</div>
+								</a>
+							{/each}
+						</div>
+						<h1 class="text-secondary-700 text-xl text-center">{post.title}</h1>
+						<p>{post.description}</p>
+						<p>{post.date}</p>
+					</div>
+				</article>
+			</a>
+		{/each}
+	</section>
+</div>

apps/docs/src/routes/docs/[slug]/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="container h-full mx-auto flex justify-center w-full my-auto">
+	<slot />
+</div>

apps/docs/src/routes/docs/[slug]/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<svelte:head>
+	<title>{data.metadata.title}</title>
+</svelte:head>
+
+<article class="mt-8 prose prose-lg lg:prose-xl dark:prose-invert w-full">
+	<hgroup>
+		<h1 class="text-center">{data.metadata.title}</h1>
+        <p>Published {data.metadata.date}</p>
+	</hgroup>
+	<svelte:component this={data.content} />
+</article>

apps/docs/src/routes/docs/[slug]/+page.ts

@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit';
+import { formatDateString } from '$lib/util';
+
+export async function load({ params }) {
+	try {
+		const slug = params.slug;
+		const post = await import(`../../../posts/${slug}.md`);
+		const data = {
+			content: post.default,
+			metadata: post.metadata
+		};
+		data.metadata.date = formatDateString(data.metadata.date);
+		return data;
+	} catch (e) {
+		throw error(404, 'Post not found');
+	}
+}