📝Update breadcrumbs i18n

2025-12-05 16:19:58 +02:00
parent 919e638144
commit 0fe115f46e
12 changed files with 175 additions and 78 deletions
--- a/app/[locale]/@breadcrumbs/about/page.tsx
+++ b/app/[locale]/@breadcrumbs/about/page.tsx
@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'

 export default function AboutBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
  return (
    <Breadcrumbs
      items={[
        {
-          label: 'Despre',
+          label: t('about'),
          href: '/about',
          current: true,
        },
--- a/app/[locale]/@breadcrumbs/blog/[...slug]/page.tsx
+++ b/app/[locale]/@breadcrumbs/blog/[...slug]/page.tsx
@@ -1,5 +1,6 @@
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 import { getPostBySlug } from '@/lib/markdown'
+import { getTranslations } from 'next-intl/server'

 interface BreadcrumbItem {
  label: string
@@ -7,28 +8,19 @@ interface BreadcrumbItem {
  current?: boolean
 }

-function formatDirectoryName(name: string): string {
-  const directoryNames: { [key: string]: string } = {
-    tech: 'Tehnologie',
-    design: 'Design',
-    tutorial: 'Tutoriale',
-  }
-
-  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1)
-}
-
 export default async function BlogPostBreadcrumb({
  params,
 }: {
  params: Promise<{ slug: string[] }>
 }) {
+  const t = await getTranslations('Breadcrumbs')
  const { slug } = await params
  const slugPath = slug.join('/')
  const post = await getPostBySlug(slugPath)

  const items: BreadcrumbItem[] = [
    {
-      label: 'Blog',
+      label: t('blog'),
      href: '/blog',
    },
  ]
@@ -36,8 +28,9 @@ export default async function BlogPostBreadcrumb({
  if (slug.length > 1) {
    for (let i = 0; i < slug.length - 1; i++) {
      const segmentPath = slug.slice(0, i + 1).join('/')
+      const dirName = slug[i]
      items.push({
-        label: formatDirectoryName(slug[i]),
+        label: t(dirName) || dirName.charAt(0).toUpperCase() + dirName.slice(1),
        href: `/blog/${segmentPath}`,
      })
    }
--- a/app/[locale]/@breadcrumbs/blog/page.tsx
+++ b/app/[locale]/@breadcrumbs/blog/page.tsx
@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'

 export default function BlogBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
  return (
    <Breadcrumbs
      items={[
        {
-          label: 'Blog',
+          label: t('blog'),
          href: '/blog',
          current: true,
        },
--- a/app/[locale]/@breadcrumbs/tags/[tag]/page.tsx
+++ b/app/[locale]/@breadcrumbs/tags/[tag]/page.tsx
@@ -1,6 +1,8 @@
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { getTranslations } from 'next-intl/server'

 export default async function TagBreadcrumb({ params }: { params: Promise<{ tag: string }> }) {
+  const t = await getTranslations('Breadcrumbs')
  const { tag } = await params
  const tagName = tag
    .split('-')
@@ -11,7 +13,7 @@ export default async function TagBreadcrumb({ params }: { params: Promise<{ tag:
    <Breadcrumbs
      items={[
        {
-          label: 'Tag-uri',
+          label: t('tags'),
          href: '/tags',
        },
        {
--- a/app/[locale]/@breadcrumbs/tags/page.tsx
+++ b/app/[locale]/@breadcrumbs/tags/page.tsx
@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'

 export default function TagsBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
  return (
    <Breadcrumbs
      items={[
        {
-          label: 'Tag-uri',
+          label: t('tags'),
          href: '/tags',
          current: true,
        },
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -13,7 +13,7 @@ export default async function HomePage({ params }: Props) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Home')
-  const tNav = await getTranslations('Navigation')
+  // const tNav = await getTranslations('Navigation')

  const allPosts = await getAllPosts()
  const featuredPosts = allPosts.slice(0, 6)
@@ -29,11 +29,7 @@ export default async function HomePage({ params }: Props) {
        <div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
            {/* Logo */}
-            <HeroHeader
-              terminalVersion={t('terminalVersion')}
-              blogLabel={tNav('blog')}
-              aboutLabel={tNav('about')}
-            />
+            <HeroHeader />

            <div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
              <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
--- a/app/globals.css
+++ b/app/globals.css
@@ -473,12 +473,62 @@
@layer utilities {
  .glitch-btn-cyber {
    --glitch-shimmy: 5;
-    --glitch-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
-    --glitch-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
-    --glitch-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
+    --glitch-clip-1: polygon(
+      0 2%,
+      100% 2%,
+      100% 95%,
+      95% 95%,
+      95% 90%,
+      85% 90%,
+      85% 95%,
+      8% 95%,
+      0 70%
+    );
+    --glitch-clip-2: polygon(
+      0 78%,
+      100% 78%,
+      100% 100%,
+      95% 100%,
+      95% 90%,
+      85% 90%,
+      85% 100%,
+      8% 100%,
+      0 78%
+    );
+    --glitch-clip-3: polygon(
+      0 44%,
+      100% 44%,
+      100% 54%,
+      95% 54%,
+      95% 54%,
+      85% 54%,
+      85% 54%,
+      8% 54%,
+      0 54%
+    );
    --glitch-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
-    --glitch-clip-5: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
-    --glitch-clip-6: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
+    --glitch-clip-5: polygon(
+      0 40%,
+      100% 40%,
+      100% 85%,
+      95% 85%,
+      95% 85%,
+      85% 85%,
+      85% 85%,
+      8% 85%,
+      0 70%
+    );
+    --glitch-clip-6: polygon(
+      0 63%,
+      100% 63%,
+      100% 80%,
+      95% 80%,
+      95% 80%,
+      85% 80%,
+      85% 80%,
+      8% 80%,
+      0 70%
+    );
  }

  .glitch-overlay {
@@ -498,29 +548,80 @@
  }

  @keyframes glitch-btn-animate {
-    0% { clip-path: var(--glitch-clip-1); }
-    2%, 8% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
-    6% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
-    9% { clip-path: var(--glitch-clip-2); transform: translate(0, 0); }
-    10% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
-    13% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
-    14%, 21% { clip-path: var(--glitch-clip-4); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
-    25%, 30% { clip-path: var(--glitch-clip-5); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
-    35%, 45% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
-    40% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
-    50% { clip-path: var(--glitch-clip-6); transform: translate(0, 0); }
-    55% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
-    60% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
-    61%, 100% { clip-path: var(--glitch-clip-4); }
+    0% {
+      clip-path: var(--glitch-clip-1);
+    }
+    2%,
+    8% {
+      clip-path: var(--glitch-clip-2);
+      transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
+    }
+    6% {
+      clip-path: var(--glitch-clip-2);
+      transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
+    }
+    9% {
+      clip-path: var(--glitch-clip-2);
+      transform: translate(0, 0);
+    }
+    10% {
+      clip-path: var(--glitch-clip-3);
+      transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
+    }
+    13% {
+      clip-path: var(--glitch-clip-3);
+      transform: translate(0, 0);
+    }
+    14%,
+    21% {
+      clip-path: var(--glitch-clip-4);
+      transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
+    }
+    25%,
+    30% {
+      clip-path: var(--glitch-clip-5);
+      transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
+    }
+    35%,
+    45% {
+      clip-path: var(--glitch-clip-6);
+      transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
+    }
+    40% {
+      clip-path: var(--glitch-clip-6);
+      transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
+    }
+    50% {
+      clip-path: var(--glitch-clip-6);
+      transform: translate(0, 0);
+    }
+    55% {
+      clip-path: var(--glitch-clip-3);
+      transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
+    }
+    60% {
+      clip-path: var(--glitch-clip-3);
+      transform: translate(0, 0);
+    }
+    61%,
+    100% {
+      clip-path: var(--glitch-clip-4);
+    }
  }

  .glitch-btn-subtle {
    --glitch-shimmy: 2;
  }

-  .glitch-overlay-pink { color: var(--neon-pink); }
-  .glitch-overlay-purple { color: var(--neon-purple); }
-  .glitch-overlay-magenta { color: var(--neon-magenta); }
+  .glitch-overlay-pink {
+    color: var(--neon-pink);
+  }
+  .glitch-overlay-purple {
+    color: var(--neon-purple);
+  }
+  .glitch-overlay-magenta {
+    color: var(--neon-magenta);
+  }

  @media (prefers-reduced-motion: reduce) {
    .glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {