style: add colorful tags & update blog post thumbnail icons

Author: Sadman Hossain

package-lock.json

@@ -22,6 +22,7 @@
     "@expressive-code/plugin-collapsible-sections": "^0.40.2",
     "@expressive-code/plugin-line-numbers": "^0.40.2",
     "@iconify-json/lucide": "^1.2.26",
+    "@iconify-json/simple-icons": "^1.2.46",
     "@iconify-json/tabler": "^1.2.19",
     "@swup/astro": "^1.7.0",
     "@tailwindcss/vite": "^4.0.7",
@@ -33,6 +34,7 @@
     "astro-loader-goodreads": "1.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jsdom": "^26.1.0",
     "limiter": "^3.0.0",
     "lucide-react": "^0.469.0",
     "medium-zoom": "^1.1.0",
@@ -53,6 +55,8 @@
   },
   "devDependencies": {
     "@iconify-icons/tabler": "^1.2.95",
+    "@iconify-json/clarity": "^1.2.2",
+    "@types/jsdom": "^21.1.7",
     "@types/xml2js": "^0.4.14",
     "prettier": "^3.5.1",
     "prettier-plugin-astro": "^0.14.1",

package.json

@@ -10,6 +10,7 @@ import {
 } from '@/lib/data-utils'
 import { formatDate } from '@/lib/utils'
 import { getThumbnailColors } from '@/lib/thumbnail-colors'
+import { TAG_CLASSES } from '@/consts'
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
@@ -25,6 +26,23 @@ const readTime = await getCombinedReadingTime(entry.id)
 const authors = await parseAuthors(entry.data.authors ?? [])
 const subpostCount = !isSubpost(entry.id) ? await getSubpostCount(entry.id) : 0
 
+/* ---------- tag styling helper ---------- */
+const getTagClasses = (tag: string) => {
+  const tagLower = tag.toLowerCase()
+  // Check for exact matches first
+  if (TAG_CLASSES[tagLower]) {
+    return TAG_CLASSES[tagLower]
+  }
+  // Check for partial matches
+  for (const [key, classes] of Object.entries(TAG_CLASSES)) {
+    if (tagLower.includes(key)) {
+      return classes
+    }
+  }
+  // Default classes
+  return 'flex items-center gap-x-1 text-xs'
+}
+
 /* ---------- visual theming ---------- */
 const thumb = getThumbnailColors(entry.data)                 // ← NEW
 const card  = (() => {
@@ -70,8 +88,8 @@ const cssVars = {
     class="flex flex-col gap-4 sm:flex-row"
   >
     {(entry.data.thumbnailIcon || entry.data.image) && (
-      <div class="relative max-w-[200px] sm:flex-shrink-0">
-        <div class="h-[55px] w-[80px] rounded-xl flex items-center justify-center thumbnail">
+      <div class="relative max-w-[180px] sm:flex-shrink-0">
+        <div class="h-[55px] w-[70px] rounded-xl flex items-center justify-center thumbnail">
           <Icon
             name={entry.data.thumbnailIcon || 'lucide:file-text'}
             class={`thumbnail-icon ${entry.data.thumbnailIconSize || 'h-10 w-10'}`}
@@ -109,7 +127,10 @@ const cssVars = {
             <Separator orientation="vertical" className="h-4!" />
             <div class="flex flex-wrap gap-1">
               {entry.data.tags.map((tag) => (
-                <Badge variant="muted" className="flex items-center gap-x-1 text-xs">
+                <Badge 
+                  variant="muted" 
+                  classes={getTagClasses(tag)}
+                >
                   {tag}
                 </Badge>
               ))}

src/components/BlogCard.astro

@@ -31,15 +31,18 @@ function Badge({
   className,
   variant,
   asChild = false,
+  classes,
   ...props
 }: React.ComponentProps<'span'> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  VariantProps<typeof badgeVariants> & { asChild?: boolean; classes?: string }) {
   const Comp = asChild ? SlotPrimitive.Root : 'span'
 
+  const finalClasses = classes || className
+
   return (
     <Comp
       data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
+      className={cn(badgeVariants({ variant }), finalClasses)}
       {...props}
     />
   )

src/components/ui/badge.tsx

@@ -193,8 +193,8 @@ const menuItems = [
       updateTextWithCrossFade();
     }, 1000);
 
-    // Set interval to change text every 13 seconds
-    const intervalId = setInterval(updateTextWithCrossFade, 13000);
+    // Set interval to change text every 20 seconds
+    const intervalId = setInterval(updateTextWithCrossFade, 20000);
 
     // Dropdown functionality
     if (trigger && content) {

src/components/ui/more-dropdown.astro

@@ -67,4 +67,17 @@ export const FEATURED_PROJECTS = [
   'astro-loader-goodreads/astro-loader-goodreads',
   'fricdl/fricdl',
   'libstreetmap/libstreetmap',
-];
+]
+
+export const TAG_CLASSES: Record<string, string> = {
+  uoft:
+    'bg-blue-300 text-primary dark:bg-blue-800 dark:text-white flex items-center gap-x-1 text-xs',
+  personal: 'bg-purple-200 text-secondary-foreground dark:bg-purple-900 dark:text-white flex items-center gap-x-1 text-xs',
+  advice: 'bg-lime-200 text-secondary-foreground dark:bg-lime-900 dark:text-white flex items-center gap-x-1 text-xs',
+  project:
+    'bg-purple-500 text-white hover:bg-purple-600 flex items-center gap-x-1 text-xs',
+  tutorial:
+    'bg-orange-200 text-secondary-foreground dark:bg-orange-900 dark:text-white flex items-center gap-x-1 text-xs',
+  analysis:
+    'bg-indigo-500 text-white hover:bg-indigo-600 flex items-center gap-x-1 text-xs',
+}

src/consts.ts

@@ -2,7 +2,7 @@
 title: 'On keeping a journal'
 description: "Why you should be writing if you aren't already."
 date: 2020-08-17
-tags: ['writing']
+tags: ['advice', 'writing']
 slug: on-keeping-a-journal
 authors: ['sadman']
 ---

src/content/blog/2020-08-17-on-keeping-a-journal/index.mdx

@@ -3,7 +3,7 @@ title: Coming up with (good) ideas
 description: "Coming up with good ideas can be tough, but the real magic lies in the process, not just the outcome."
 date: 2020-09-25
 slug: "coming-up-with-good-ideas"
-tags: ['writing']
+tags: ['advice', 'writing']
 authors: ['sadman']
 ---
 

src/content/blog/2020-09-25-coming-up-with-good-ideas/index.mdx

@@ -3,7 +3,7 @@ title: "Why I use Trello"
 description: "Everybody needs a system for making their to do list; Trello is mine."
 date: 2020-11-09
 slug: "why-i-use-trello"
-tags: ['productivity', 'tools']
+tags: ['advice', 'productivity', 'tools']
 authors: ['sadman']
 ---
 

src/content/blog/2020-11-09-why-i-use-trello/index.mdx

@@ -3,7 +3,7 @@ title: "A guide to learning"
 description: "Better alternatives to rote memorization (also known as cramming the night before an exam)"
 date: 2020-12-14
 slug: "a-guide-to-learning"
-tags: ['learning', 'university']
+tags: ['advice', 'learning', 'university']
 authors: ['sadman']
 ---