wip: basic blog

KodingDev · KodingDev · commit 707d93f7d7ff · 2023-02-06T00:19:44.000+11:00
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -1,7 +1,7 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
-declare namespace App {
+export declare namespace App {
 	// interface Locals {}
 	// interface PageData {}
 	// interface Error {}
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 	<!--suppress HtmlRequiredTitleElement -->
 	<head>
 		<meta charset="utf-8" />
diff --git a/src/components/base/NavBar.svelte b/src/components/base/NavBar.svelte
@@ -10,7 +10,8 @@
 		mode?: 'startswith' | 'exact';
 	}[] = [
 		{ label: 'Home', to: '/', mode: 'exact' },
-		{ label: 'Art', to: '/art' }
+		{ label: 'Art', to: '/art' },
+		{ label: 'Blog', to: '/blog' }
 	];
 </script>
 
diff --git a/src/lib/data/blog/tests.md b/src/lib/data/blog/tests.md
@@ -0,0 +1,51 @@
+---
+title: Test
+description: This is a test post, there's nothing to see here.
+date: 2019-01-01
+---
+
+# Hey!
+
+This is a test!
+
+**This is bold!**
+*This is italic!*
+
+This is a link to [Google](https://google.com)
+
+This is a code block:
+
+```js
+console.log('Hello World!');
+```
+
+This is a list:
+
+- Item 1
+- Item 2
+- Item 3
+
+This is a numbered list:
+
+1. Item 1
+2. Item 2
+3. Item 3
+
+This is a table:
+
+| Column 1 | Column 2 | Column 3 |
+| -------- | -------- | -------- |
+| Item 1   | Item 2   | Item 3   |
+| Item 4   | Item 5   | Item 6   |
+
+This is a quote:
+
+> This is a quote!
+
+This is an image:
+
+![Image](https://i.imgur.com/1Q9ZQ9A.png)
+
+This is a horizontal rule:
+
+---
diff --git a/src/lib/types/blog.ts b/src/lib/types/blog.ts
@@ -0,0 +1,22 @@
+import type { SvelteComponent } from 'svelte';
+
+/**
+ * A post which has been imported from a file using import.meta.glob.
+ */
+export interface PostFile {
+	default: SvelteComponent;
+	metadata: {
+		title: string;
+		description?: string;
+		date: string;
+		tags?: string[];
+	};
+}
+
+/**
+ * GET /api/blog/posts
+ */
+export type BlogPostsGet = {
+	slug: string;
+	metadata: PostFile['metadata'];
+}[];
diff --git a/src/lib/util/blog.ts b/src/lib/util/blog.ts
@@ -0,0 +1,7 @@
+/**
+ * Returns the slug from a path
+ *
+ * @param path The path to get the slug from
+ * @returns The slug
+ */
+export const getSlug = (path: string): string | undefined => path.split('/').pop()?.split('.').shift();
diff --git a/src/lib/util/notion.ts b/src/lib/util/notion.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	// Layout
+	import { navigating } from '$app/stores';
 	import Footer from '$components/base/Footer.svelte';
 	import GradientCanvas from '$components/base/GradientCanvas.svelte';
 	import NavBar from '$components/base/NavBar.svelte';
-
-	// Styling
-	import '../app.postcss';
-
-	// Navigation
-	import { navigating } from '$app/stores';
 	import NProgress from 'nprogress';
 	import 'nprogress/nprogress.css';
+	import { fade } from 'svelte/transition';
+	import '../app.postcss';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 
 	NProgress.configure({
 		showSpinner: false,
@@ -35,7 +34,11 @@
 			<GradientCanvas />
 		</div>
 
-		<slot />
+		{#key data.pathname}
+			<div in:fade={{ duration: 250, delay: 250 }} out:fade={{ duration: 250 }}>
+				<slot />
+			</div>
+		{/key}
 	</div>
 
 	<div class="px-8 pb-8">
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1,5 +1,9 @@
 import type { LayoutLoad } from './$types';
 
+/*
+ * Always provide the pathname to the layout, so that it can
+ * be used to determine which page is active
+ */
 export const load: LayoutLoad = async ({ url: { pathname } }) => {
 	return { pathname };
 };
diff --git a/src/routes/api/blog/posts/+server.ts b/src/routes/api/blog/posts/+server.ts
@@ -0,0 +1,27 @@
+import type { PostFile } from '$lib/types/blog';
+import { getSlug } from '$lib/util/blog';
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+	// List all posts
+	const posts = import.meta.glob<PostFile>('/src/lib/data/blog/*.md');
+
+	// Map the posts
+	const postList = Object.entries(posts).map(async ([path, resolver]) => {
+		// Get the slug
+		const slug = getSlug(path);
+
+		// Load the post
+		const post = await resolver();
+
+		// Return the post
+		return {
+			slug,
+			metadata: post.metadata
+		};
+	});
+
+	// Return the list of posts
+	return json(await Promise.all(postList));
+};
diff --git a/src/routes/art/+layout.svelte b/src/routes/art/+layout.svelte
@@ -1,10 +1,3 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { PageData } from './$types';
-
-	export let data: PageData;
-</script>
-
 <div class="mx-auto flex w-10/12 flex-col gap-10 pb-12">
 	<div class="flex flex-col gap-2">
 		<h1 class="text-title">🎨 Art</h1>
@@ -14,9 +7,5 @@
 		</h2>
 	</div>
 
-	{#key data.pathname}
-		<div in:fade={{ duration: 250, delay: 250 }} out:fade={{ duration: 250 }}>
-			<slot />
-		</div>
-	{/key}
+	<slot />
 </div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="mx-auto flex w-10/12 flex-col gap-10 pb-12">
+	<div class="flex flex-col gap-4">
+		<h1 class="text-4xl font-bold">Blog</h1>
+		<p class="text-neutral-300">A collection of my thoughts and ramblings.</p>
+	</div>
+
+	{#each data.posts as post}
+		<a
+			href="/blog/{post.slug}"
+			class="rounded-lg bg-neutral-800 p-4 transition-all hover:scale-[101%]"
+		>
+			<h2 class="text-2xl font-bold">{post.metadata.title}</h2>
+
+			<div class="flex flex-row gap-2">
+				<span class="text-neutral-300"
+					>{new Date(post.metadata.date).toLocaleDateString('en-US', {
+						year: 'numeric',
+						month: 'long',
+						day: 'numeric'
+					})}</span
+				>
+
+				{#if post.metadata.tags}
+					{#each post.metadata.tags as tag}
+						<span class="text-neutral-400">#{tag}</span>
+					{/each}
+				{/if}
+			</div>
+			<p class="pt-2">{post.metadata.description ?? 'Take a read :)'}</p>
+		</a>
+	{/each}
+</div>
diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts
@@ -0,0 +1,7 @@
+import type { BlogPostsGet } from '$lib/types/blog';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ fetch }) => {
+	const posts: BlogPostsGet = await fetch('/api/blog/posts').then((r) => r.json());
+	return { posts };
+};
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="mb-12 w-full overflow-clip rounded-xl bg-neutral-800">
+	<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-2 bg-neutral-900 p-6">
+			<h2 class="text-4xl font-bold">{data.metadata.title}</h2>
+
+			<div class="flex flex-row gap-2">
+				<span class="text-neutral-300"
+					>{new Date(data.metadata.date).toLocaleDateString('en-US', {
+						year: 'numeric',
+						month: 'long',
+						day: 'numeric'
+					})}</span
+				>
+
+				{#if data.metadata.tags}
+					{#each data.metadata.tags as tag}
+						<span class="text-neutral-400">#{tag}</span>
+					{/each}
+				{/if}
+			</div>
+		</div>
+
+		<div class="prose mx-auto w-full py-6 dark:prose-invert">
+			<svelte:component this={data.post} />
+		</div>
+	</div>
+</div>
diff --git a/src/routes/blog/[slug]/+page.ts b/src/routes/blog/[slug]/+page.ts
@@ -0,0 +1,28 @@
+import type { PostFile } from '$lib/types/blog';
+import { getSlug } from '$lib/util/blog';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	// Find a list of all blog posts
+	const posts = import.meta.glob<PostFile>('/src/lib/data/blog/*.md');
+
+	// Find the post that matches the slug
+	let post: PostFile | undefined;
+	for (const [path, resolver] of Object.entries(posts)) {
+		// Get the slug from the file name
+		const slug = getSlug(path);
+
+		// If the slug matches the requested slug, use this post
+		if (slug === params.slug) {
+			post = await resolver();
+			break;
+		}
+	}
+
+	// If no post was found, return an error
+	if (!post) throw error(404, 'Post not found');
+
+	// Load the post
+	return { post: post.default, metadata: post.metadata };
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const config = {
+	darkMode: 'class',
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 
 	theme: {
