refactor(tags): centralize tag slug logic in client-safe util

This commit is contained in:
kbot
2026-07-06 20:15:54 -05:00
parent 7c8a4d8c52
commit ff58dd000c
5 changed files with 21 additions and 37 deletions

View File

@@ -3,18 +3,7 @@
import Link from 'next/link';
import { m, useReducedMotion } 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, '');
import { tagToSlug } from '@/lib/tags';
export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
const shouldReduceMotion = useReducedMotion();
@@ -56,7 +45,7 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
{tags && tags.length > 0 && (
<div className="mt-5 flex flex-wrap gap-2">
{tags.slice(0, 3).map((tag) => (
<Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full border border-border bg-surface/70 px-3 py-1 text-xs text-ink-soft transition-colors duration-200 hover:border-accent/60 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
<Link key={tag} href={`/tags/${tagToSlug(tag)}/`} className="rounded-full border border-border bg-surface/70 px-3 py-1 text-xs text-ink-soft transition-colors duration-200 hover:border-accent/60 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</Link>
))}