Revamp the blogpost

notkaramel · notkaramel · commit be6e824e294a · 2026-02-15T23:14:55.000-05:00
diff --git a/blogs/arch-install-docs.md b/blogs/arch-install-docs.md
@@ -5,6 +5,7 @@ description: "Step-by-step notes for installing Arch Linux on a single-boot syst
 date: "2024-08-08"
 lastUpdated: "2025-06-30"
 tags: ["linux", "arch-linux", "guide"]
+categories: ["Technical Docs"]
 ---
 
 ## Prerequisite
diff --git a/blogs/arch-install-dual-boot.md b/blogs/arch-install-dual-boot.md
@@ -5,6 +5,7 @@ description: "A guide to install Linux and Windows with dual-boot - shared file
 date: "2025-08-28"
 lastUpdated: "2025-06-30"
 tags: ["linux", "guide", "technical"]
+categories: ["Technical Docs"]
 ---
 
 ## Prerequisite
diff --git a/blogs/arch-packages.md b/blogs/arch-packages.md
@@ -5,6 +5,7 @@ description: "Personal list of essential packages to install on Arch Linux syste
 date: "2024-08-08"
 lastUpdated: "2025-06-30"
 tags: ["linux", "arch-linux", "packages"]
+categories: ["Technical Docs"]
 ---
 
 # List of Core Packages
diff --git a/blogs/ecse-223.md b/blogs/ecse-223.md
@@ -5,6 +5,7 @@ description: "Team 07 notes and resources for the ECSE 223 SnowShoeTours project
 date: "2025-06-30"
 lastUpdated: "2025-06-30"
 tags: ["university", "project", "software-engineering"]
+categories: ["Technical Docs"]
 ---
 
 # :snowflake::ski: ECSE223 SnowShoeTours Project: Team 07
diff --git a/blogs/ecse-321.md b/blogs/ecse-321.md
@@ -5,6 +5,7 @@ description: "Documentation and developer notes collected during ECSE 321 course
 date: "2025-06-30"
 lastUpdated: "2025-07-12"
 tags: ["university", "project", "software-engineering"]
+categories: ["Technical Docs"]
 ---
 
 # Frontend Elements
diff --git a/blogs/home-server-as-bluetooth-speaker.md b/blogs/home-server-as-bluetooth-speaker.md
@@ -5,6 +5,7 @@ description: "How I turn a home server into a Bluetooth speaker endpoint using P
 date: "2025-08-20"
 lastUpdated: "2025-08-20"
 tags: ["linux", "audio", "guide"]
+categories: ["Technical Docs"]
 ---
 
 Two machines: Server and Media Player
diff --git a/blogs/lifelong-learning.md b/blogs/lifelong-learning.md
@@ -1,10 +1,11 @@
 ---
-title: "Lifelong learning"
+title: "Lifelong learning - An essay for FACC 400"
 slug: "lifelong-learning"
 description: "An essay about life long learning"
 date: "2025-11-26"
 lastUpdated: "2025-11-26"
 tags: ["lifelong", "thoughts", "inspiration", "life"]
+categories: ["Random Thoughts"]
 ---
 
 # The meaning of life long learning
diff --git a/blogs/linux-daily-driving.md b/blogs/linux-daily-driving.md
@@ -5,6 +5,7 @@ description: "Answers to common questions about daily driving Linux alongside Wi
 date: "2025-08-18"
 lastUpdated: "2025-08-18"
 tags: ["linux", "opinion", "dual-boot"]
+categories: ["Discussion"]
 ---
 
 With Linux how bad can I break things? Like is it always possible to restart or can I brick my laptop by accident
diff --git a/blogs/linux-gui-docker-xauth.md b/blogs/linux-gui-docker-xauth.md
@@ -5,6 +5,7 @@ description: "Run applications with graphical interfaces from Docker using an X1
 date: "2025-09-24"
 lastUpdated: "2025-09-24"
 tags: ["linux", "docker", "devops"]
+categories: ["Technical Docs"]
 ---
 
 https://gursimarsm.medium.com/run-gui-applications-in-a-docker-container-ca625bad4638
diff --git a/blogs/linux-i3-config.md b/blogs/linux-i3-config.md
@@ -5,6 +5,7 @@ description: "References and snippets for customizing the i3 window manager."
 date: "2024-08-08"
 lastUpdated: "2025-06-30"
 tags: ["linux", "i3", "dotfiles"]
+categories: ["Technical Docs"]
 ---
 
 ## 0. List of config files (relative to `$HOME`)
diff --git a/blogs/linux-network-config.md b/blogs/linux-network-config.md
@@ -5,6 +5,7 @@ description: "Notes on configuring network connectivity under Linux with iwd and
 date: "2025-06-30"
 lastUpdated: "2025-07-12"
 tags: ["linux", "networking", "guide"]
+categories: ["Technical Docs"]
 ---
 
 # Network Configuration
diff --git a/blogs/linux-recovery.md b/blogs/linux-recovery.md
@@ -5,6 +5,7 @@ description: "Troubleshooting checklist for recovering broken dual-boot systems.
 date: "2025-06-30"
 lastUpdated: "2025-06-30"
 tags: ["linux", "troubleshooting", "guide"]
+categories: ["Technical Docs"]
 ---
 
 # Recovery
diff --git a/blogs/linux-sway-config.md b/blogs/linux-sway-config.md
@@ -5,6 +5,7 @@ description: "Cheatsheet for adapting i3-style workflows to Sway on Wayland."
 date: "2025-06-30"
 lastUpdated: "2025-06-30"
 tags: ["linux", "sway", "dotfiles"]
+categories: ["Technical Docs"]
 ---
 
 # Sway configuration
diff --git a/blogs/welcome-to-montreal.md b/blogs/welcome-to-montreal.md
@@ -5,6 +5,7 @@ description: "Personal guide to my favourite spots, food, and activities around
 date: "2025-08-18"
 lastUpdated: "2025-08-20"
 tags: ["travel", "montreal", "guide"]
+categories: ["Travel Guide"]
 ---
 
 # Places to visit
diff --git a/src/app.css b/src/app.css
@@ -116,39 +116,58 @@ body {
   background: var(--color-primary-content);
 }
 
+/* Blog design tokens – cohesive card/section style */
+.blog-card {
+  @apply rounded-2xl border border-primary/20 bg-base-100 shadow-lg shadow-primary/10;
+  @apply transition-all duration-200;
+}
+
+.blog-card-hover {
+  @apply hover:shadow-xl hover:shadow-primary/15 hover:border-primary/30;
+}
+
+/* Blog article prose: use primary palette */
+.blog-article .prose blockquote {
+  @apply bg-primary/30 italic text-primary-content border-l-4 border-l-primary;
+}
+
+.blog-article .prose kbd {
+  @apply bg-primary text-primary-content;
+}
+
 .prose {
-  @apply text-base;
+  @apply text-base text-primary-content;
 
   p {
-    @apply my-2 leading-relaxed;
+    @apply my-2 leading-relaxed text-primary-content;
   }
 
   a {
-    @apply text-secondary-content underline underline-offset-2 hover:text-secondary-content/70 transition-colors;
+    @apply text-primary-content underline underline-offset-2 hover:text-primary-content/80 transition-colors;
   }
 
   .lead {
-    @apply text-xl leading-8 my-6;
+    @apply text-xl leading-8 my-6 text-primary-content;
   }
 
   blockquote {
     @apply my-4 ps-4 rounded-sm py-[0.01rem] bg-accent/40 italic text-accent-content border-l-4 border-l-accent;
   }
 
   h1 {
-    @apply font-extrabold text-4xl leading-10 my-4;
+    @apply font-extrabold text-4xl leading-10 my-4 text-primary-content;
   }
 
   h2 {
-    @apply font-black text-2xl leading-8 mt-4 mb-3;
+    @apply font-black text-2xl leading-8 mt-4 mb-3 text-primary-content;
   }
 
   h3 {
-    @apply font-bold text-xl mt-4 mb-1 leading-relaxed;
+    @apply font-bold text-xl mt-4 mb-1 leading-relaxed text-primary-content;
   }
 
   h4 {
-    @apply mt-6 mb-2 leading-6;
+    @apply mt-6 mb-2 leading-6 text-primary-content;
   }
 
   img,
@@ -195,16 +214,36 @@ body {
 
   pre {
     @apply font-mono text-sm leading-6 my-3 rounded-md pt-3 pb-3 px-4;
-    @apply bg-primary;
+    @apply bg-primary overflow-x-auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary-content) var(--color-base-200);
+  }
+
+  pre::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  pre::-webkit-scrollbar-track {
+    background: var(--color-base-200);
+    border-radius: 2px;
+  }
+
+  pre::-webkit-scrollbar-thumb {
+    background: var(--color-primary-content);
+    border-radius: 2px;
+  }
+
+  pre::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
   }
 
   ol,
   ul {
-    @apply my-2 ps-6.5 list-disc list-outside;
+    @apply my-2 ps-6.5 list-disc list-outside text-primary-content;
   }
 
   li {
-    @apply my-1 leading-relaxed;
+    @apply my-1 leading-relaxed text-primary-content;
   }
 
   ol > li,
@@ -213,7 +252,7 @@ body {
   }
 
   > ul > li p {
-    @apply my-2 leading-relaxed;
+    @apply my-2 leading-relaxed text-primary-content;
   }
 
   ul ul,
@@ -224,15 +263,15 @@ body {
   }
 
   dl {
-    @apply my-5;
+    @apply my-5 text-primary-content;
   }
 
   dt {
-    @apply mt-5;
+    @apply mt-5 text-primary-content;
   }
 
   dd {
-    @apply mt-2 ps-6.5;
+    @apply mt-2 ps-6.5 text-primary-content;
   }
 
   hr {
@@ -260,7 +299,7 @@ body {
 
   tbody td,
   tfoot td {
-    @apply p-2.5;
+    @apply p-2.5 text-primary-content;
   }
 
   td > a {
@@ -288,7 +327,7 @@ body {
   }
 
   figcaption {
-    @apply text-sm leading-5 mt-3;
+    @apply text-sm leading-5 mt-3 text-primary-content;
   }
 }
 
diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte
@@ -33,6 +33,16 @@
         );
     }
 
+    function getCategories(): string[] {
+        if (!frontmatter || !Array.isArray(frontmatter.categories)) {
+            return [];
+        }
+
+        return frontmatter.categories.filter(
+            (cat): boolean => typeof cat === "string" && cat.trim().length > 0,
+        ) as string[];
+    }
+
     function getDateMetadata(): string[] {
         const dates: string[] = [];
         const published = formatDate(frontmatter?.date);
@@ -50,27 +60,32 @@
     }
 
     const tags = getTags();
+    const categories = getCategories();
     const dateLines = getDateMetadata();
 </script>
 
 <li
-    class="border border-primary-content rounded-xl bg-base-100 shadow-lg
-            shadow-primary hover:shadow-2xl hover:shadow-secondary transition-all
-            ring-2 ring-primary-content hover:ring-accent-content focus-visible:ring-accent-content"
+    class="blog-card blog-card-hover
+            ring-2 ring-primary-content focus-visible:ring-2 hover:scale-[1.012] hover:shadow-xl hover:shadow-primary transform-gpu"
     transition:slide
 >
-    <a href={`/blogs/${frontmatter.slug}`} class="flex flex-col gap-3 p-5">
+    <a href={`/blogs/${frontmatter.slug}`} class="flex flex-col gap-3 p-6">
         <div class="flex flex-wrap items-center gap-2">
-            <h2 class="font-semibold text-xl text-primary-content">{frontmatter.title}</h2>
+            <h2 class="font-semibold text-xl text-primary-content tracking-tight">{frontmatter.title}</h2>
         </div>
         <div class="flex flex-wrap items-center gap-2">
+            {#each categories as cat}
+                <span class="badge badge-primary text-primary-content text-xs">
+                    {cat}
+                </span>
+            {/each}
             {#each tags as tag}
-                <span class="badge badge-primary badge-outline text-xs">
+                <span class="badge badge-primary badge-outline text-primary-content text-xs">
                     {tag}
                 </span>
             {/each}
         </div>
-        <div class="space-y-1 text-sm text-secondary-content/90">
+        <div class="space-y-1 text-sm text-primary-content/90">
             {#if dateLines.length > 0}
                 {#each dateLines as line}
                     <p>{line}</p>
diff --git a/src/lib/components/BlogFilterContainer.svelte b/src/lib/components/BlogFilterContainer.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import BlogSearchFilter from "$lib/components/BlogSearchFilter.svelte";
+  import type { BlogCategory } from "@schemas";
+
+  let {
+    searchQuery = $bindable(""),
+    sortBy = $bindable("date-desc" as "date-desc" | "date-asc" | "title" | "category"),
+    selectedCategories = $bindable(new Set<BlogCategory>()),
+  }: {
+    searchQuery?: string;
+    sortBy?: "date-desc" | "date-asc" | "title" | "category";
+    selectedCategories?: Set<BlogCategory>;
+  } = $props();
+</script>
+
+<div class="container lg:max-w-6xl w-full mx-auto px-6 lg:px-12 overflow-visible">
+  <BlogSearchFilter
+    bind:searchQuery
+    bind:sortBy
+    bind:selectedCategories
+  />
+</div>
diff --git a/src/lib/components/BlogList.svelte b/src/lib/components/BlogList.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import BlogCard from "$lib/components/BlogCard.svelte";
+  import type { BlogFrontmatter } from "@schemas";
+
+  let {
+    blogs = [],
+  }: {
+    blogs: { frontmatter: BlogFrontmatter; content: string }[];
+  } = $props();
+</script>
+
+<div class="space-y-6 min-h-[40vh]">
+  {#if blogs.length === 0}
+    <div class="blog-card p-12 text-center">
+      <p class="text-primary-content/90 text-lg mb-2">
+        No blogs match your filters.
+      </p>
+      <p class="text-sm text-primary-content/70">
+        Try adjusting search or topic filters above.
+      </p>
+    </div>
+  {:else}
+    <ul class="w-full space-y-6">
+      {#each blogs as blog (blog.frontmatter.slug)}
+        <BlogCard frontmatter={blog.frontmatter} />
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/src/lib/components/BlogListContainer.svelte b/src/lib/components/BlogListContainer.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import BlogList from "$lib/components/BlogList.svelte";
+  import type { BlogFrontmatter } from "@schemas";
+
+  let {
+    blogs = [],
+  }: {
+    blogs: { frontmatter: BlogFrontmatter; content: string }[];
+  } = $props();
+</script>
+
+<div class="container lg:max-w-6xl w-full mx-auto px-6 lg:px-12 overflow-visible">
+  <BlogList {blogs} />
+</div>
diff --git a/src/lib/components/BlogSearchFilter.svelte b/src/lib/components/BlogSearchFilter.svelte
diff --git a/src/lib/newblog.ts b/src/lib/newblog.ts
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
diff --git a/src/routes/(main)/blogs/+layout.svelte b/src/routes/(main)/blogs/+layout.svelte
diff --git a/src/routes/(main)/blogs/+page.svelte b/src/routes/(main)/blogs/+page.svelte
diff --git a/src/routes/(main)/blogs/[slug]/+page.svelte b/src/routes/(main)/blogs/[slug]/+page.svelte
diff --git a/src/routes/(main)/blogs/[slug]/+page.ts b/src/routes/(main)/blogs/[slug]/+page.ts
