Upgrade to Svelte 5

DanielPower · Nov 7, 2024 · 7454dbb · 7454dbb
1 parent c03e41b
commit 7454dbb
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 103 deletions.
diff --git a/src/lib/server/posts.ts b/src/lib/server/posts.ts
@@ -2,60 +2,61 @@ import type { SvelteComponent } from "svelte";
 import type { PostFrontmatter } from "../../../types";
 import { assignToBucket } from "./bucket";
 import { dev } from "$app/environment";
+import { render } from "svelte/server";
 
 const tagColors = [
-	"#faedcb",
-	"#c9e4de",
-	"#dbcdf0",
-	"#f2c6de",
-	"#ffadad",
-	"#ffd6a5",
-	"#fdffb6",
+  "#faedcb",
+  "#c9e4de",
+  "#dbcdf0",
+  "#f2c6de",
+  "#ffadad",
+  "#ffd6a5",
+  "#fdffb6",
 ];
 
 const postFiles = import.meta.glob<{
-	default: SvelteComponent;
-	metadata: PostFrontmatter;
+  default: SvelteComponent;
+  metadata: PostFrontmatter;
 }>(`$lib/posts/*.md`);
 const slugs = Object.keys(postFiles).map(
-	(path) => path.split("/").at(-1)!.split(".").at(0)!,
+  (path) => path.split("/").at(-1)!.split(".").at(0)!,
 );
 const data = await Promise.all(
-	Object.values(postFiles).map((resolver) => resolver()),
+  Object.values(postFiles).map((resolver) => resolver()),
 );
 
 export const tags = new Map(
-	data
-		.map(({ metadata }) => metadata.tags)
-		.flat()
-		.filter(Boolean)
-		.map((tag) => [
-			tag,
-			{
-				label: tag,
-				color: tagColors[assignToBucket(tag, tagColors.length)],
-			},
-		]),
+  data
+    .map(({ metadata }) => metadata.tags)
+    .flat()
+    .filter(Boolean)
+    .map((tag) => [
+      tag,
+      {
+        label: tag,
+        color: tagColors[assignToBucket(tag, tagColors.length)],
+      },
+    ]),
 );
 
 const posts = data
-	.map(({ default: component, metadata }, index) => {
-		const { html, css } = component.render();
-		return {
-			title: metadata.title,
-			draft: !metadata.date,
-			date: metadata.date || new Date().toISOString().slice(0, 10),
-			tags: metadata.tags?.map((tag) => tags.get(tag)!) ?? [],
-			slug: slugs[index],
-			content: `<style>${css.code}</style>${html}`,
-		};
-	})
-	.sort((a, b) => +new Date(b.date) - +new Date(a.date))
-	.filter((post) => dev || !post.draft);
+  .map(({ default: component, metadata }, index) => {
+    const { body } = render(component);
+    return {
+      title: metadata.title,
+      draft: !metadata.date,
+      date: metadata.date || new Date().toISOString().slice(0, 10),
+      tags: metadata.tags?.map((tag) => tags.get(tag)!) ?? [],
+      slug: slugs[index],
+      body,
+    };
+  })
+  .sort((a, b) => +new Date(b.date) - +new Date(a.date))
+  .filter((post) => dev || !post.draft);
 const postsMap = new Map(posts.map((post) => [post.slug, post]));
 
 export const getPosts = () => {
-	return posts;
+  return posts;
 };
 
 export const getPost = (slug: string) => postsMap.get(slug);
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -12,7 +12,7 @@
 		{/each}
 	</div>
 </div>
-{@html data.content}
+{@html data.body}
 
 <style>
 	h1 {

diff --git a/src/routes/rss/+server.ts b/src/routes/rss/+server.ts
@@ -4,50 +4,50 @@ import { js2xml } from "xml-js";
 import type { RequestHandler } from "./$types";
 
 const renderRss = (posts: Post[], origin: string) =>
-	js2xml(
-		{
-			_declaration: {
-				_attributes: {
-					version: "1.0",
-					encoding: "utf-8",
-				},
-			},
-			rss: {
-				_attributes: {
-					version: "2.0",
-					"xmlns:atom": "http://www.w3.org/2005/Atom",
-				},
-				channel: {
-					title: "Daniel Power",
-					description: "Daniel Power's ramblings",
-					link: origin,
-					"atom:link": {
-						_attributes: {
-							href: `${origin}rss`,
-							rel: "self",
-							type: "application/rss+xml",
-						},
-					},
-					item: posts.map((post) => ({
-						title: post.title,
-						guid: post.slug,
-						link: `${origin}/blog/${post.slug}`,
-						pubDate: new Date(post.date).toUTCString(),
-						description: post.content,
-					})),
-				},
-			},
-		},
-		{ compact: true },
-	);
+  js2xml(
+    {
+      _declaration: {
+        _attributes: {
+          version: "1.0",
+          encoding: "utf-8",
+        },
+      },
+      rss: {
+        _attributes: {
+          version: "2.0",
+          "xmlns:atom": "http://www.w3.org/2005/Atom",
+        },
+        channel: {
+          title: "Daniel Power",
+          description: "Daniel Power's ramblings",
+          link: origin,
+          "atom:link": {
+            _attributes: {
+              href: `${origin}rss`,
+              rel: "self",
+              type: "application/rss+xml",
+            },
+          },
+          item: posts.map((post) => ({
+            title: post.title,
+            guid: post.slug,
+            link: `${origin}/blog/${post.slug}`,
+            pubDate: new Date(post.date).toUTCString(),
+            description: post.body,
+          })),
+        },
+      },
+    },
+    { compact: true },
+  );
 
 export const GET: RequestHandler = async ({ url }) => {
-	const posts = getPosts();
+  const posts = getPosts();
 
-	return new Response(renderRss(posts, url.origin), {
-		headers: {
-			"Cache-Control": `max-age=0, s-max-age=${600}`,
-			"Content-Type": "application/xml",
-		},
-	});
+  return new Response(renderRss(posts, url.origin), {
+    headers: {
+      "Cache-Control": `max-age=0, s-max-age=${600}`,
+      "Content-Type": "application/xml",
+    },
+  });
 };
diff --git a/svelte.config.js b/svelte.config.js
@@ -5,17 +5,20 @@ import remarkFootnotes from "remark-footnotes";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: [
-		vitePreprocess(),
-		mdsvex({
-			extensions: [".md"],
-			remarkPlugins: [remarkFootnotes],
-		}),
-	],
-	extensions: [".svelte", ".md"],
-	kit: {
-		adapter: adapter(),
-	},
+  preprocess: [
+    vitePreprocess(),
+    mdsvex({
+      extensions: [".md"],
+      remarkPlugins: [remarkFootnotes],
+    }),
+  ],
+  extensions: [".svelte", ".md"],
+  kit: {
+    adapter: adapter(),
+  },
+  compilerOptions: {
+    css: "injected",
+  },
 };
 
 export default config;
diff --git a/types.ts b/types.ts
@@ -1,17 +1,17 @@
 export type PostFrontmatter = {
-	title: string;
-	date?: string;
-	tags: string[];
+  title: string;
+  date?: string;
+  tags: string[];
 };
 
 export type Post = {
-	title: string;
-	date: string;
-	draft: boolean;
-	tags: {
-		label: string;
-		color: string;
-	}[];
-	slug: string;
-	content: string;
+  title: string;
+  date: string;
+  draft: boolean;
+  tags: {
+    label: string;
+    color: string;
+  }[];
+  slug: string;
+  body: string;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ @@
     		{/each}
     	</div>
     </div>
-    {@html data.content}
+    {@html data.body}
     <style>
     	h1 {
@@ Expand Down @@