feat: blog (WIP)

src/lib/blog.ts

@@ -0,0 +1,21 @@
+import { error } from '@sveltejs/kit';
+
+const url = 'http://localhost:1337';
+
+export async function list(fetch_fn = fetch) {
+	// TODO: only get the fields we need.
+	const res = await fetch_fn(`${url}/api/posts?populate=*`);
+	const data = await res.json();
+
+	return data.data;
+}
+
+export async function get_one(slug: string, fetch_fn = fetch) {
+	const res = await fetch_fn(`${url}/api/posts?filters[slug][$eq]=${slug}`);
+	if (res.status === 404) {
+		throw error(404, `The post with slug ${slug} was not found`);
+	} else {
+		const response = await res.json();
+		return response.data[0].attributes;
+	}
+}

src/routes/blog/+layout.svelte

@@ -0,0 +1,3 @@
+<main style="text-align: center; margin-top: 8rem;">
+  <slot />
+</main>

src/routes/blog/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+export let data;
+</script>
+<h1>Blog posts</h1>
+<div>
+{#each data.posts as post}
+  <div>
+    <h2>{post.attributes.title}</h2>
+    <p>
+      {post.attributes.description}
+    </p>
+    <a href="/blog/{post.attributes.slug}">link</a>
+  </div>
+{/each}
+</div>

src/routes/blog/+page.ts

@@ -0,0 +1,5 @@
+import { list } from '$lib/blog';
+
+export const load = async ({ fetch }) => {
+	return { posts: await list(fetch) };
+};

src/routes/blog/[...slug]/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+export let data;
+</script>
+
+<svelte:head>
+	<title>ReVanced | {data.post.title}</title>
+	<meta content="ReVanced | {data.post.title}" name="og:title" />
+	<meta content="ReVanced | {data.post.title}" name="twitter:title" />
+</svelte:head>
+<h1 style="color: var(--accent-color); font-size: 5rem;">
+  {data.post.title}
+</h1>
+
+{@html data.post.content}

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

@@ -0,0 +1,8 @@
+import { get_one } from '$lib/blog';
+import { parse } from 'marked';
+
+export const load = async ({ fetch, params }) => {
+	let post = await get_one(params.slug, fetch);
+	post.content = parse(post.content);
+	return { post };
+};