Fixes for few tags and categories pages

This commit is contained in:
HangerThem 2026-08-05 11:54:39 +02:00
parent 77b1916df1
commit c61bcd3a41
5 changed files with 47 additions and 57 deletions

View file

@ -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"> <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="font-mono text-sm text-fg-dim mb-2">~/categories/{categorySlug}</div>
<div className="border-l border-border ml-1 mb-3"> <ul 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"> {posts.map((post) => (
{category} <li key={post.slug} className="pl-5">
</span> <Link
<ul className="border-l border-border ml-8 mb-3"> href={`/posts/${post.slug}`}
{posts.map((post) => ( 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"
<li key={post.slug} className="pl-5"> >
<Link <span className="group-hover:text-accent transition-colors truncate">
href={`/posts/${post.slug}`} {post.title}
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>
> {post.date && (
<span className="group-hover:text-accent transition-colors truncate"> <time
{post.title} dateTime={new Date(post.date).toISOString()}
</span> className="text-sm whitespace-nowrap"
{post.date && ( >
<time {dateFormatter.format(new Date(post.date))}
dateTime={new Date(post.date).toISOString()} </time>
className="text-sm whitespace-nowrap" )}
> </Link>
{dateFormatter.format(new Date(post.date))} </li>
</time> ))}
)} </ul>
</Link>
</li>
))}
</ul>
</div>
</main> </main>
) )
} }

View file

@ -30,7 +30,7 @@ export async function generateMetadata(): Promise<Metadata> {
export default function CategoriesPage() { export default function CategoriesPage() {
const categories = getAllCategories() const categories = getAllCategories()
const posts = getAllPostsMeta() const posts = getAllPostsMeta()
const categoryNames = Object.keys(categories) const categoryNames = Object.keys(categories).toSorted((a, b) => a.localeCompare(b))
return ( return (
<main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full"> <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">

View file

@ -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"> <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="font-mono text-sm text-fg-dim mb-2">~/tags/{tagSlug}</div>
<div className="border-l border-border ml-1 mb-3"> <ul 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"> {posts.map((post) => (
{tag} <li key={post.slug} className="pl-5">
</span> <Link
<ul className="border-l border-border ml-8 mb-3"> href={`/posts/${post.slug}`}
{posts.map((post) => ( 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"
<li key={post.slug} className="pl-5"> >
<Link <span className="group-hover:text-accent transition-colors truncate">
href={`/posts/${post.slug}`} {post.title}
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>
> {post.date && (
<span className="group-hover:text-accent transition-colors truncate"> <time
{post.title} dateTime={new Date(post.date).toISOString()}
</span> className="text-sm whitespace-nowrap"
{post.date && ( >
<time {dateFormatter.format(new Date(post.date))}
dateTime={new Date(post.date).toISOString()} </time>
className="text-sm whitespace-nowrap" )}
> </Link>
{dateFormatter.format(new Date(post.date))} </li>
</time> ))}
)} </ul>
</Link>
</li>
))}
</ul>
</div>
</main> </main>
) )
} }

View file

@ -30,7 +30,7 @@ export async function generateMetadata(): Promise<Metadata> {
export default function TagsPage() { export default function TagsPage() {
const tags = getAllTags() const tags = getAllTags()
const posts = getAllPostsMeta() const posts = getAllPostsMeta()
const tagNames = Object.keys(tags) const tagNames = Object.keys(tags).toSorted((a, b) => a.localeCompare(b))
return ( return (
<main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full"> <main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">

View file

@ -2,7 +2,7 @@
title: "Vigilare: A Local-First Productivity Dashboard" 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. 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 date: 2026-02-07 14:00:00 +0200
categories: [Productivity, Tech] category: Productivity
tags: [vigilare, dashboard, productivity, browser, organization, focus] tags: [vigilare, dashboard, productivity, browser, organization, focus]
--- ---