marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: link post tags to static tag pages

Browse Source
This commit is contained in:
OpenCode Worker
2026-06-03 10:58:15 -05:00
parent 381e6225e1
commit a897894791
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/posts/[slug]/page.tsx
View File

@@ -1,5 +1,6 @@
import { notFound } from 'next/navigation'
import { getPosts, getPost } from '@/lib/posts'
import Link from 'next/link'
import { getPosts, getPost, tagToSlug } from '@/lib/posts'
import { TableOfContents } from '@/components/blog/TableOfContents'
import { ScrollToTop } from '@/components/ui/ScrollToTop'
import { ReadingProgress } from '@/components/ui/ReadingProgress'
@@ -38,7 +39,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
<div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
<article>
<header className="mb-12">
<time className="font-mono text-sm text-ink-soft">{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
<time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
<h1 className="heading-xl text-ink mt-3 mb-2">
{post.title}
</h1>
@@ -49,7 +50,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
{post.coverImage && (
<img
src={post.coverImage}
alt="Cover image"
alt={`Cover image for ${post.title}`}
className="w-full h-64 object-cover rounded-xl my-6"
loading="lazy"
/>
@@ -57,9 +58,9 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
{post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-4">
{post.tags.map((tag) => (
<span key={tag} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border">
<Link key={tag} href={`/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</span>
</Link>
))}
</div>
)}

34
components/blog/PostCard.tsx
View File

@@ -4,6 +4,18 @@ import Link from 'next/link';
import { m } from 'motion/react';
import type { PostMeta } from '@/lib/posts';
const tagToClientSlug = (tag: string): string =>
tag
.normalize('NFKD')
.toLowerCase()
.replace(/[\u0300-\u036f]/g, '')
.replace(/\+/g, ' plus ')
.replace(/#/g, ' sharp ')
.replace(/[\\/]+/g, ' ')
.replace(/[^\p{L}\p{N}]+/gu, '-')
.replace(/-{2,}/g, '-')
.replace(/^-|-$/g, '');
export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
return (
<m.article
@@ -18,14 +30,14 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
<div className="mb-4 overflow-hidden rounded-lg">
<img
src={coverImage}
alt="Cover image"
alt={`Cover image for ${title}`}
className="w-full h-40 object-cover"
loading="lazy"
/>
</div>
)}
<div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
<time className="font-mono">{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
<time className="font-mono" dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
{author && <span className="text-ink-soft/70">·</span>}
{author && <span>{author}</span>}
{readingTime && <span className="text-ink-soft/70">·</span>}
@@ -34,19 +46,19 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
<h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
{title}
</h3>
{tags && tags.length > 0 && (
<div className="flex flex-wrap gap-1.5 mt-3">
{tags.slice(0, 3).map((tag) => (
<span key={tag} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft">
{tag}
</span>
))}
</div>
)}
{excerpt && (
<p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
)}
</Link>
{tags && tags.length > 0 && (
<div className="flex flex-wrap gap-1.5 mt-3">
{tags.slice(0, 3).map((tag) => (
<Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</Link>
))}
</div>
)}
</m.article>
);
}