refactor(tags): centralize tag slug logic in client-safe util
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user