From c61bcd3a415f2fe77464aeb0b16369e2846336b4 Mon Sep 17 00:00:00 2001
From: HangerThem <f.borisjuk@hangerthem.com>
Date: Wed, 5 Aug 2026 11:54:39 +0200
Subject: [PATCH] Fixes for few tags and categories pages

---
 .../categories/[categorySlug]/page.tsx        | 49 +++++++++----------
 app/(withRecent)/categories/page.tsx          |  2 +-
 app/(withRecent)/tags/[tagSlug]/page.tsx      | 49 +++++++++----------
 app/(withRecent)/tags/page.tsx                |  2 +-
 content/posts/vigilare-custom-dashboard.md    |  2 +-
 5 files changed, 47 insertions(+), 57 deletions(-)

diff --git a/app/(withRecent)/categories/[categorySlug]/page.tsx b/app/(withRecent)/categories/[categorySlug]/page.tsx
index 6593544..3bbaa97 100644
--- a/app/(withRecent)/categories/[categorySlug]/page.tsx
+++ b/app/(withRecent)/categories/[categorySlug]/page.tsx
@@ -52,33 +52,28 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
     <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">
       <div className="font-mono text-sm text-fg-dim mb-2">~/categories/{categorySlug}</div>
 
-      <div className="border-l border-border ml-1 mb-3">
-        <span className="py-2 px-5 block font-bold group-hover:text-accent transition-colors capitalize">
-          {category}
-        </span>
-        <ul className="border-l border-border ml-8 mb-3">
-          {posts.map((post) => (
-            <li key={post.slug} className="pl-5">
-              <Link
-                href={`/posts/${post.slug}`}
-                className="group flex items-baseline justify-between gap-3 py-1.5 px-2 -ml-2 border-l-2 border-transparent hover:bg-accent/10 hover:border-accent transition-colors"
-              >
-                <span className="group-hover:text-accent transition-colors truncate">
-                  {post.title}
-                </span>
-                {post.date && (
-                  <time
-                    dateTime={new Date(post.date).toISOString()}
-                    className="text-sm whitespace-nowrap"
-                  >
-                    {dateFormatter.format(new Date(post.date))}
-                  </time>
-                )}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <ul className="border-l border-border ml-1 mb-3">
+        {posts.map((post) => (
+          <li key={post.slug} className="pl-5">
+            <Link
+              href={`/posts/${post.slug}`}
+              className="group flex items-baseline justify-between gap-3 py-1.5 px-2 -ml-2 border-l-2 border-transparent hover:bg-accent/10 hover:border-accent transition-colors"
+            >
+              <span className="group-hover:text-accent transition-colors truncate">
+                {post.title}
+              </span>
+              {post.date && (
+                <time
+                  dateTime={new Date(post.date).toISOString()}
+                  className="text-sm whitespace-nowrap"
+                >
+                  {dateFormatter.format(new Date(post.date))}
+                </time>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </main>
   )
 }
diff --git a/app/(withRecent)/categories/page.tsx b/app/(withRecent)/categories/page.tsx
index 6a3eec0..cd9d8ba 100644
--- a/app/(withRecent)/categories/page.tsx
+++ b/app/(withRecent)/categories/page.tsx
@@ -30,7 +30,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default function CategoriesPage() {
   const categories = getAllCategories()
   const posts = getAllPostsMeta()
-  const categoryNames = Object.keys(categories)
+  const categoryNames = Object.keys(categories).toSorted((a, b) => a.localeCompare(b))
 
   return (
     <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">
diff --git a/app/(withRecent)/tags/[tagSlug]/page.tsx b/app/(withRecent)/tags/[tagSlug]/page.tsx
index 24cd228..aacdd63 100644
--- a/app/(withRecent)/tags/[tagSlug]/page.tsx
+++ b/app/(withRecent)/tags/[tagSlug]/page.tsx
@@ -52,33 +52,28 @@ export default async function TagPage({ params }: TagPageProps) {
     <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">
       <div className="font-mono text-sm text-fg-dim mb-2">~/tags/{tagSlug}</div>
 
-      <div className="border-l border-border ml-1 mb-3">
-        <span className="py-2 px-5 block font-bold group-hover:text-accent transition-colors capitalize">
-          {tag}
-        </span>
-        <ul className="border-l border-border ml-8 mb-3">
-          {posts.map((post) => (
-            <li key={post.slug} className="pl-5">
-              <Link
-                href={`/posts/${post.slug}`}
-                className="group flex items-baseline justify-between gap-3 py-1.5 px-2 -ml-2 border-l-2 border-transparent hover:bg-accent/10 hover:border-accent transition-colors"
-              >
-                <span className="group-hover:text-accent transition-colors truncate">
-                  {post.title}
-                </span>
-                {post.date && (
-                  <time
-                    dateTime={new Date(post.date).toISOString()}
-                    className="text-sm whitespace-nowrap"
-                  >
-                    {dateFormatter.format(new Date(post.date))}
-                  </time>
-                )}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <ul className="border-l border-border ml-1 mb-3">
+        {posts.map((post) => (
+          <li key={post.slug} className="pl-5">
+            <Link
+              href={`/posts/${post.slug}`}
+              className="group flex items-baseline justify-between gap-3 py-1.5 px-2 -ml-2 border-l-2 border-transparent hover:bg-accent/10 hover:border-accent transition-colors"
+            >
+              <span className="group-hover:text-accent transition-colors truncate">
+                {post.title}
+              </span>
+              {post.date && (
+                <time
+                  dateTime={new Date(post.date).toISOString()}
+                  className="text-sm whitespace-nowrap"
+                >
+                  {dateFormatter.format(new Date(post.date))}
+                </time>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </main>
   )
 }
diff --git a/app/(withRecent)/tags/page.tsx b/app/(withRecent)/tags/page.tsx
index d4283cf..207f829 100644
--- a/app/(withRecent)/tags/page.tsx
+++ b/app/(withRecent)/tags/page.tsx
@@ -30,7 +30,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default function TagsPage() {
   const tags = getAllTags()
   const posts = getAllPostsMeta()
-  const tagNames = Object.keys(tags)
+  const tagNames = Object.keys(tags).toSorted((a, b) => a.localeCompare(b))
 
   return (
     <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">
diff --git a/content/posts/vigilare-custom-dashboard.md b/content/posts/vigilare-custom-dashboard.md
index 0d5870e..92e2af9 100644
--- a/content/posts/vigilare-custom-dashboard.md
+++ b/content/posts/vigilare-custom-dashboard.md
@@ -2,7 +2,7 @@
 title: "Vigilare: A Local-First Productivity Dashboard"
 description: Introducing Vigilare, a local-first, customizable productivity dashboard built with Next.js. Designed for developers and technical users, Vigilare offers a distraction-free way to manage links, notes, commands, and service status without logins or cloud dependencies.
 date: 2026-02-07 14:00:00 +0200
-categories: [Productivity, Tech]
+category: Productivity
 tags: [vigilare, dashboard, productivity, browser, organization, focus]
 ---