Minor layout fixes

src/lib/components/layout/blog-card.svelte

@@ -19,8 +19,8 @@
 		>
 		<span class="mb-2.5 block font-bold sm:text-2xl">{data.metadata.title}</span>
 		<span class="block max-w-prose">
-			{data.intro.substring(0, 100)}
-			<span class="bg-gradient-to-r from-gray-700 to-white bg-clip-text text-transparent"
+			{data.intro.substring(0, 100)}<span
+				class="bg-gradient-to-r from-gray-700 to-white bg-clip-text text-transparent"
 				>{data.intro.substring(100, 110)}</span
 			>
 		</span>

src/lib/components/layout/blog-header.svelte

@@ -16,19 +16,16 @@
 
 		<div class="mb-3 mt-3 h-[2px] w-full rounded-full bg-gray-200" />
 
-		<div class="mx-auto flex flex-col gap-2.5">
-			<div class="flex gap-2">
-				{#each data.metadata.categories as category}
-					<Button
-						onClick={() => {}}
-						classes="bg-gray-100 px-3 py-1.5 text-sm hover:bg-gray-200 sm:px-4 sm:py-2.5 sm:text-base"
-					>
-						<p class="font-semibold">{category.name}</p>
-					</Button>
-				{/each}
-			</div>
+		<div class="mx-auto flex flex-wrap justify-center gap-2">
+			{#each data.metadata.categories as category}
+				<Button
+					onClick={() => {}}
+					classes="bg-gray-100 px-3 py-1.5 text-sm hover:bg-gray-200 sm:px-4 sm:py-2.5 sm:text-base"
+				>
+					<p class="font-semibold">{category.name}</p>
+				</Button>
+			{/each}
 		</div>
-
 		<div class="mb-3 mt-3 h-[2px] w-full rounded-full bg-gray-200" />
 	</div>
 </div>

src/lib/objects/objects.ts

@@ -5,6 +5,9 @@ export const categoryMappings: Category[] = [
 	{ slug: 'csharp', name: 'C#' },
 	{ slug: 'dotnet', name: '.NET' },
 	{ slug: 'aspnetcore', name: 'ASP.NET Core' },
+	{ slug: 'javascript', name: 'JavaScript' },
+	{ slug: 'typescript', name: 'TypeScript' },
+	{ slug: 'svelte', name: 'Svelte' },
 	{ slug: 'unity', name: 'Unity' },
 	{ slug: 'godot', name: 'Godot' },
 	{ slug: 'game-dev', name: 'Game Development' }

static/data/categories.json

@@ -1,6 +1,9 @@
 {
   "csharp": "C#",
   "dotnet": ".NET",
+  "javascript": "JavaScript",
+  "typescript": "TypeScript",
+  "svelte": "Svelte",
   "godot": "Godot",
   "game-dev": "Game Development"
 }

static/posts/test.md

@@ -1,13 +1,12 @@
 ---
-date: 2023-11-06T19:41:00.000+10:00
-title: Writing Game Engine Agnostic Code
+date: 2024-01-20T19:41:00.000+10:00
+title: 10 Interesting Svelte Features
 slug: test
-categories: [ "dotnet", "csharp", "godot" ]
+categories: [ "svelte", "javascript", "typescript" ]
 ---
 
-Fermentum dui faucibus in ornare quam viverra orci. Non diam phasellus vestibulum lorem sed risus ultricies tristique
-nulla. Malesuada proin libero nunc consequat interdum varius sit amet. Pharetra pharetra massa massa ultricies mi. Est
-velit egestas dui id ornare arcu odio ut sem.
+Aliquam purus sit amet luctus venenatis lectus magna. Nisi vitae suscipit tellus mauris a diam. Eu facilisis sed odio
+morbi quis. Iaculis at erat pellentesque adipiscing commodo.
 
 <!--endintro-->