🪛 04 breadcrumbs

.gitignore

@@ -0,0 +1,18 @@
+node_modules
+.next
+dist
+out
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.vercel
+*.tsbuildinfo
+next-env.d.ts

app/@breadcrumbs/about/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+
+export default function AboutBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Despre',
+          href: '/about',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/blog/[...slug]/page.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { getPostBySlug } from '@/lib/markdown';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+  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 { slug } = await params;
+  const slugPath = slug.join('/');
+  const post = getPostBySlug(slugPath);
+
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Blog',
+      href: '/blog',
+    },
+  ];
+
+  if (slug.length > 1) {
+    for (let i = 0; i < slug.length - 1; i++) {
+      const segmentPath = slug.slice(0, i + 1).join('/');
+      items.push({
+        label: formatDirectoryName(slug[i]),
+        href: `/blog/${segmentPath}`,
+      });
+    }
+  }
+
+  items.push({
+    label: post ? post.frontmatter.title : slug[slug.length - 1],
+    href: `/blog/${slugPath}`,
+    current: true,
+  });
+
+  return <Breadcrumbs items={items} />;
+}

app/@breadcrumbs/blog/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+
+export default function BlogBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Blog',
+          href: '/blog',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/default.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+
+export default function DefaultBreadcrumb() {
+  return <Breadcrumbs />;
+}

app/@breadcrumbs/tags/[tag]/page.tsx

@@ -0,0 +1,29 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+
+export default async function TagBreadcrumb({
+  params,
+}: {
+  params: Promise<{ tag: string }>;
+}) {
+  const { tag } = await params;
+  const tagName = tag
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+        },
+        {
+          label: tagName,
+          href: `/tags/${tag}`,
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/tags/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+
+export default function TagsBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/about/page.tsx

@@ -0,0 +1,47 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Despre',
+  description: 'Află mai multe despre mine și acest blog',
+}
+
+export default function AboutPage() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-4xl font-bold mb-8">Despre Mine</h1>
+
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-lg leading-relaxed mb-6">
+          Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie,
+          specializat în dezvoltarea web modernă cu Next.js, React și TypeScript.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
+        <ul className="space-y-2">
+          <li>Tutoriale despre dezvoltare web</li>
+          <li>Ghiduri practice pentru Next.js și React</li>
+          <li>Sfaturi despre design și UX</li>
+          <li>Experiențe din proiecte reale</li>
+        </ul>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
+        <p>Acest blog este construit cu:</p>
+        <ul className="space-y-2">
+          <li><strong>Next.js 15</strong> - Framework React pentru producție</li>
+          <li><strong>TypeScript</strong> - Pentru type safety</li>
+          <li><strong>Tailwind CSS</strong> - Pentru stilizare rapidă</li>
+          <li><strong>Markdown</strong> - Pentru conținut</li>
+        </ul>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>
+        <p>
+          Mă poți contacta pe{' '}
+          <a href="mailto:email@example.com" className="text-primary-600 hover:text-primary-700">
+            email@example.com
+          </a>{' '}
+          sau mă poți găsi pe rețelele sociale.
+        </p>
+      </div>
+    </div>
+  )
+}

app/blog/[...slug]/not-found.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold mb-4">Articolul nu a fost găsit</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
+          Ne pare rău, dar articolul pe care îl cauți nu există sau a fost mutat.
+        </p>
+        <div className="space-x-4">
+          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+            Vezi toate articolele
+          </Link>
+          <Link href="/" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+            Pagina principală
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/blog/[...slug]/page.tsx

@@ -0,0 +1,129 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
+import { formatDate, formatRelativeDate } from '@/lib/utils'
+
+export async function generateStaticParams() {
+  const posts = await getAllPosts()
+  return posts.map((post) => ({ slug: post.slug.split('/') }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }): Promise<Metadata> {
+  const { slug } = await params
+  const slugPath = slug.join('/')
+  const post = getPostBySlug(slugPath)
+
+  if (!post) {
+    return { title: 'Articol negăsit' }
+  }
+
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.description,
+    authors: [{ name: post.frontmatter.author }],
+    openGraph: {
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      type: 'article',
+      publishedTime: post.frontmatter.date,
+      authors: [post.frontmatter.author],
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+  }
+}
+
+function AuthorInfo({ author, date }: { author: string; date: string }) {
+  return (
+    <div className="flex items-center space-x-4 py-6 border-y border-gray-200 dark:border-gray-700">
+      <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
+        <span className="text-xl font-bold text-primary-600 dark:text-primary-400">
+          {author.charAt(0).toUpperCase()}
+        </span>
+      </div>
+      <div>
+        <p className="font-semibold">{author}</p>
+        <p className="text-sm text-gray-500">
+          Publicat {formatRelativeDate(date)} • {formatDate(date)}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function RelatedPosts({ posts }: { posts: any[] }) {
+  if (posts.length === 0) return null
+
+  return (
+    <section className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+      <h2 className="text-2xl font-bold mb-6">Articole similare</h2>
+      <div className="grid gap-6 md:grid-cols-3">
+        {posts.map((post) => (
+          <Link key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-lg transition">
+            <h3 className="font-semibold mb-2 line-clamp-2">{post.frontmatter.title}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{post.frontmatter.description}</p>
+            <p className="text-xs text-gray-500 mt-2">{formatDate(post.frontmatter.date)}</p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const slugPath = slug.join('/')
+  const post = getPostBySlug(slugPath)
+
+  if (!post) {
+    notFound()
+  }
+
+  const relatedPosts = await getRelatedPosts(slugPath)
+
+  return (
+    <article className="max-w-4xl mx-auto">
+      <header className="mb-8">
+        {post.frontmatter.image && (
+          <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-64 md:h-96 object-cover rounded-lg mb-8" />
+        )}
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.frontmatter.title}</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 mb-6">{post.frontmatter.description}</p>
+        {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-6">
+            {post.frontmatter.tags.map((tag: string) => (
+              <Link key={tag} href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} className="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition">
+                #{tag}
+              </Link>
+            ))}
+          </div>
+        )}
+        <AuthorInfo author={post.frontmatter.author} date={post.frontmatter.date} />
+      </header>
+
+      <div className="prose dark:prose-invert max-w-none">
+        <div className="flex items-center justify-between text-sm text-gray-500 mb-6">
+          <span>Timp estimat de citire: {post.readingTime} minute</span>
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+      </div>
+
+      <nav className="flex justify-between items-center mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+        <Link href="/blog" className="flex items-center text-primary-600 hover:text-primary-700 transition">
+          <svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Înapoi la blog
+        </Link>
+      </nav>
+
+      <RelatedPosts posts={relatedPosts} />
+    </article>
+  )
+}

app/blog/page.tsx

@@ -0,0 +1,95 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+import { getAllPosts } from '@/lib/markdown'
+import { formatDate } from '@/lib/utils'
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Toate articolele din blog',
+}
+
+function PostCard({ post }: { post: any }) {
+  return (
+    <article className="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:border-0">
+      <div className="flex flex-col lg:flex-row gap-6">
+        {post.frontmatter.image && (
+          <div className="lg:w-1/3">
+            <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 lg:h-full object-cover rounded-lg" />
+          </div>
+        )}
+        <div className={post.frontmatter.image ? 'lg:w-2/3' : 'w-full'}>
+          <div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
+            <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
+            <span>•</span>
+            <span>{post.readingTime} min citire</span>
+            <span>•</span>
+            <span>{post.frontmatter.author}</span>
+          </div>
+          <h2 className="text-2xl font-bold mb-3">
+            <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
+              {post.frontmatter.title}
+            </Link>
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
+          {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-4">
+              {post.frontmatter.tags.map((tag: string) => (
+                <span key={tag} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-sm rounded-full">
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+          <Link href={`/blog/${post.slug}`} className="inline-flex items-center text-primary-600 hover:text-primary-700 transition">
+            Citește articolul complet
+            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+function BlogFilters({ totalPosts }: { totalPosts: number }) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold mb-2">Articole Blog</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            {totalPosts} {totalPosts === 1 ? 'articol' : 'articole'} publicate
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default async function BlogPage() {
+  const posts = await getAllPosts()
+
+  if (posts.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <h1 className="text-3xl font-bold mb-4">Blog</h1>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">Nu există articole publicate încă.</p>
+        <Link href="/" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+          Înapoi la pagina principală
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <BlogFilters totalPosts={posts.length} />
+      <div>
+        {posts.map((post) => (
+          <PostCard key={post.slug} post={post} />
+        ))}
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}

app/layout.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import Link from 'next/link'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Blog & Portofoliu',
+    default: 'Blog & Portofoliu',
+  },
+  description: 'Blog personal despre dezvoltare web și design',
+  metadataBase: new URL('http://localhost:3000'),
+  authors: [{ name: 'Nume Autor' }],
+  keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript'],
+  openGraph: {
+    type: 'website',
+    locale: 'ro_RO',
+    siteName: 'Blog & Portofoliu',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+}
+
+export default function RootLayout({
+  children,
+  breadcrumbs,
+}: {
+  children: React.ReactNode
+  breadcrumbs: React.ReactNode
+}) {
+  return (
+    <html lang="ro">
+      <body className={inter.className}>
+        <div className="min-h-screen bg-white dark:bg-gray-900">
+          <header className="border-b border-gray-200 dark:border-gray-700">
+            <nav className="container mx-auto px-4 py-4">
+              <div className="flex items-center justify-between">
+                <Link href="/" className="text-2xl font-bold text-primary-600">
+                  Blog
+                </Link>
+                <div className="flex space-x-6">
+                  <Link href="/" className="hover:text-primary-600">Acasă</Link>
+                  <Link href="/blog" className="hover:text-primary-600">Blog</Link>
+                  <Link href="/about" className="hover:text-primary-600">Despre</Link>
+                </div>
+              </div>
+            </nav>
+          </header>
+          {breadcrumbs}
+          <main className="container mx-auto px-4 py-8">
+            {children}
+          </main>
+          <footer className="border-t border-gray-200 dark:border-gray-700 mt-12">
+            <div className="container mx-auto px-4 py-6 text-center text-gray-600 dark:text-gray-400">
+              © 2025 Blog & Portofoliu. Toate drepturile rezervate.
+            </div>
+          </footer>
+        </div>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link'
+import { getAllPosts } from '@/lib/markdown'
+import { formatDate } from '@/lib/utils'
+
+export default async function HomePage() {
+  const allPosts = await getAllPosts()
+  const featuredPosts = allPosts.slice(0, 3)
+
+  return (
+    <div className="space-y-12">
+      <section className="text-center py-12">
+        <h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+          Explorează articole despre dezvoltare web, design și tehnologie.
+          Învață din experiențe practice și tutoriale detaliate.
+        </p>
+        <div className="mt-8 space-x-4">
+          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+            Vezi toate articolele
+          </Link>
+          <Link href="/about" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+            Despre mine
+          </Link>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-3xl font-bold mb-8">Articole Recente</h2>
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {featuredPosts.map((post) => (
+            <article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
+              {post.frontmatter.image && (
+                <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" />
+              )}
+              <h3 className="text-xl font-semibold mb-2">
+                <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
+                  {post.frontmatter.title}
+                </Link>
+              </h3>
+              <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
+              <div className="flex items-center justify-between text-sm text-gray-500">
+                <span>{formatDate(post.frontmatter.date)}</span>
+                <span>{post.readingTime} min citire</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p>
+        <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+          Vezi toate articolele →
+        </Link>
+      </section>
+    </div>
+  )
+}

components/blog/MarkdownRenderer.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ children }) => (
+          <h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="text-2xl font-bold mt-4 mb-2">{children}</h3>
+        ),
+        h4: ({ children }) => (
+          <h4 className="text-xl font-bold mt-3 mb-2">{children}</h4>
+        ),
+        h5: ({ children }) => (
+          <h5 className="text-lg font-bold mt-2 mb-1">{children}</h5>
+        ),
+        h6: ({ children }) => (
+          <h6 className="text-base font-bold mt-2 mb-1">{children}</h6>
+        ),
+        p: ({ children }) => (
+          <p className="my-4 leading-7">{children}</p>
+        ),
+        ul: ({ children }) => (
+          <ul className="list-disc list-inside my-4 space-y-2">{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className="list-decimal list-inside my-4 space-y-2">{children}</ol>
+        ),
+        li: ({ children }) => (
+          <li className="ml-4">{children}</li>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-4 border-gray-300 pl-4 my-4 italic text-gray-700">
+            {children}
+          </blockquote>
+        ),
+        code: ({ inline, className, children, ...props }: any) => {
+          const match = /language-(\w+)/.exec(className || '');
+          return !inline && match ? (
+            <SyntaxHighlighter
+              style={vscDarkPlus}
+              language={match[1]}
+              PreTag="div"
+              className="my-4 rounded-lg"
+              {...props}
+            >
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+              {children}
+            </code>
+          );
+        },
+        img: ({ src, alt }) => {
+          if (!src || typeof src !== 'string') return null;
+          const isExternal = src.startsWith('http://') || src.startsWith('https://');
+
+          if (isExternal) {
+            return (
+              <img
+                src={src}
+                alt={alt || ''}
+                className="my-4 rounded-lg max-w-full h-auto"
+              />
+            );
+          }
+
+          return (
+            <div className="my-4 relative w-full h-auto">
+              <Image
+                src={src}
+                alt={alt || ''}
+                width={800}
+                height={600}
+                className="rounded-lg"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            </div>
+          );
+        },
+        a: ({ href, children }) => {
+          if (!href) return <>{children}</>;
+          const isExternal = href.startsWith('http://') || href.startsWith('https://');
+
+          if (isExternal) {
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                {children}
+              </a>
+            );
+          }
+
+          return (
+            <Link href={href} className="text-blue-600 hover:underline">
+              {children}
+            </Link>
+          );
+        },
+        table: ({ children }) => (
+          <div className="overflow-x-auto my-4">
+            <table className="min-w-full border-collapse border border-gray-300">
+              {children}
+            </table>
+          </div>
+        ),
+        thead: ({ children }) => (
+          <thead className="bg-gray-100">{children}</thead>
+        ),
+        tbody: ({ children }) => (
+          <tbody>{children}</tbody>
+        ),
+        tr: ({ children }) => (
+          <tr className="border-b border-gray-300">{children}</tr>
+        ),
+        th: ({ children }) => (
+          <th className="border border-gray-300 px-4 py-2 text-left font-bold">
+            {children}
+          </th>
+        ),
+        td: ({ children }) => (
+          <td className="border border-gray-300 px-4 py-2">{children}</td>
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

components/layout/Breadcrumbs.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Fragment } from 'react';
+import { BreadcrumbsSchema } from './BreadcrumbsSchema';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+function HomeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    </svg>
+  );
+}
+
+function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5l7 7-7 7"
+      />
+    </svg>
+  );
+}
+
+function formatSegmentLabel(segment: string): string {
+  const specialCases: { [key: string]: string } = {
+    blog: 'Blog',
+    tags: 'Tag-uri',
+    about: 'Despre',
+  };
+
+  if (specialCases[segment]) {
+    return specialCases[segment];
+  }
+
+  return segment
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
+  const pathname = usePathname();
+
+  let breadcrumbs: BreadcrumbItem[] = items || [];
+
+  if (!items) {
+    const segments = pathname.split('/').filter(Boolean);
+    breadcrumbs = segments.map((segment, index) => {
+      const href = '/' + segments.slice(0, index + 1).join('/');
+      const label = formatSegmentLabel(segment);
+      const current = index === segments.length - 1;
+
+      return { label, href, current };
+    });
+  }
+
+  if (pathname === '/') {
+    return null;
+  }
+
+  const schemaItems = [
+    { position: 1, name: 'Acasă', item: '/' },
+    ...breadcrumbs.map((item, index) => ({
+      position: index + 2,
+      name: item.label,
+      item: item.href,
+    })),
+  ];
+
+  return (
+    <>
+      <nav
+        aria-label="Breadcrumb"
+        className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+      >
+        <div className="container mx-auto px-4 py-3">
+          <ol className="flex items-center space-x-2 text-sm overflow-x-auto scrollbar-hide">
+            <li className="flex-shrink-0">
+              <Link
+                href="/"
+                className="flex items-center text-gray-500 hover:text-primary-600 transition"
+                aria-label="Acasă"
+              >
+                <HomeIcon className="w-4 h-4" />
+              </Link>
+            </li>
+
+            {breadcrumbs.map((item) => (
+              <Fragment key={item.href}>
+                <li className="text-gray-400 flex-shrink-0">
+                  <ChevronIcon className="w-4 h-4" />
+                </li>
+                <li className="flex-shrink-0">
+                  {item.current ? (
+                    <span
+                      className="font-medium text-gray-700 dark:text-gray-300 truncate max-w-[150px] sm:max-w-none block"
+                      aria-current="page"
+                    >
+                      {item.label}
+                    </span>
+                  ) : (
+                    <Link
+                      href={item.href}
+                      className="text-gray-500 hover:text-primary-600 transition truncate max-w-[150px] sm:max-w-none block"
+                    >
+                      {item.label}
+                    </Link>
+                  )}
+                </li>
+              </Fragment>
+            ))}
+          </ol>
+        </div>
+      </nav>
+      <BreadcrumbsSchema items={schemaItems} />
+    </>
+  );
+}

components/layout/BreadcrumbsSchema.tsx

@@ -0,0 +1,25 @@
+interface BreadcrumbSchemaItem {
+  position: number;
+  name: string;
+  item: string;
+}
+
+export function BreadcrumbsSchema({ items }: { items: BreadcrumbSchemaItem[] }) {
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item) => ({
+      '@type': 'ListItem',
+      position: item.position,
+      name: item.name,
+      item: `http://localhost:3000${item.item}`,
+    })),
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  );
+}

content/blog/example.md

@@ -0,0 +1,30 @@
+---
+title: "Getting Started with Next.js 15"
+description: "Learn how to build modern web applications with Next.js 15 and TypeScript."
+date: "2025-01-07"
+author: "John Doe"
+category: "Tutorial"
+tags: ["nextjs", "typescript", "tutorial"]
+---
+
+# Getting Started with Next.js 15
+
+Welcome to this example blog post! This post demonstrates how markdown content is rendered.
+
+## Features
+
+- Server Components by default
+- Improved performance
+- Better TypeScript support
+
+## Code Example
+
+```typescript
+export default function Page() {
+  return <h1>Hello, Next.js 15!</h1>
+}
+```
+
+## Conclusion
+
+Next.js 15 brings many improvements for building modern web applications.

content/blog/tech/articol-tehnic.md

@@ -0,0 +1,41 @@
+---
+title: "Articol Tehnic din Subdirector"
+description: "Test pentru subdirectoare și organizare ierarhică"
+date: "2025-01-10"
+author: "Tech Writer"
+category: "Tehnologie"
+tags: ["nextjs", "react", "typescript"]
+draft: false
+---
+
+# Articol Tehnic
+
+Acesta este un articol stocat într-un subdirector pentru a testa funcționalitatea de organizare ierarhică.
+
+## Next.js și React
+
+Next.js este un framework React puternic care oferă:
+
+- Server-side rendering (SSR)
+- Static site generation (SSG)
+- API routes
+- File-based routing
+
+## Exemplu de cod TypeScript
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+```
+
+## Concluzie
+
+Subdirectoarele funcționează perfect pentru organizarea conținutului!

content/blog/test-complet.md

@@ -0,0 +1,109 @@
+---
+title: "Test Complet Markdown"
+description: "Un articol de test care demonstrează toate elementele markdown suportate"
+date: "2025-01-15"
+author: "Test Author"
+category: "Tutorial"
+tags: ["markdown", "test", "demo"]
+image: "/images/test.jpg"
+draft: false
+---
+
+# Heading 1
+
+Acesta este un paragraf normal cu **text bold** și *text italic*. Putem combina ***bold și italic***.
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+## Liste
+
+### Listă neordonată
+
+- Item 1
+- Item 2
+  - Subitem 2.1
+  - Subitem 2.2
+- Item 3
+
+### Listă ordonată
+
+1. Primul item
+2. Al doilea item
+3. Al treilea item
+
+## Cod
+
+Cod inline: `const x = 42;`
+
+Bloc de cod JavaScript:
+
+```javascript
+function greet(name) {
+  console.log(`Hello, ${name}!`);
+  return true;
+}
+
+greet("World");
+```
+
+Bloc de cod Python:
+
+```python
+def calculate_sum(a, b):
+    """Calculate sum of two numbers"""
+    return a + b
+
+result = calculate_sum(5, 10)
+print(f"Result: {result}")
+```
+
+## Blockquote
+
+> Acesta este un blockquote.
+> Poate avea multiple linii.
+>
+> Și paragrafe separate.
+
+## Link-uri
+
+[Link intern](/blog/alt-articol)
+
+[Link extern](https://example.com)
+
+## Imagini
+
+![Alt text pentru imagine](/images/sample.jpg)
+
+## Tabele
+
+| Coloana 1 | Coloana 2 | Coloana 3 |
+|-----------|-----------|-----------|
+| Celula 1  | Celula 2  | Celula 3  |
+| Date 1    | Date 2    | Date 3    |
+| Info 1    | Info 2    | Info 3    |
+
+## Linie orizontală
+
+---
+
+## Task List (GFM)
+
+- [x] Task completat
+- [ ] Task incomplet
+- [ ] Alt task
+
+## Strikethrough
+
+~~Text șters~~
+
+## Concluzie
+
+Acesta este sfârșitul articolului de test.

lib/markdown.ts

@@ -0,0 +1,154 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { FrontMatter, Post } from './types/frontmatter';
+import { generateExcerpt } from './utils';
+
+const POSTS_PATH = path.join(process.cwd(), 'content', 'blog');
+
+export function sanitizePath(inputPath: string): string {
+  const normalized = path.normalize(inputPath).replace(/^(\.\.[\/\\])+/, '');
+  if (normalized.includes('..') || path.isAbsolute(normalized)) {
+    throw new Error('Invalid path');
+  }
+  return normalized;
+}
+
+export function calculateReadingTime(content: string): number {
+  const wordsPerMinute = 200;
+  const words = content.trim().split(/\s+/).length;
+  return Math.ceil(words / wordsPerMinute);
+}
+
+export function validateFrontmatter(data: any): FrontMatter {
+  if (!data.title || typeof data.title !== 'string') {
+    throw new Error('Invalid title');
+  }
+  if (!data.description || typeof data.description !== 'string') {
+    throw new Error('Invalid description');
+  }
+  if (!data.date || typeof data.date !== 'string') {
+    throw new Error('Invalid date');
+  }
+  if (!data.author || typeof data.author !== 'string') {
+    throw new Error('Invalid author');
+  }
+  if (!data.category || typeof data.category !== 'string') {
+    throw new Error('Invalid category');
+  }
+  if (!Array.isArray(data.tags) || data.tags.length === 0 || data.tags.length > 3) {
+    throw new Error('Tags must be array with 1-3 items');
+  }
+
+  return {
+    title: data.title,
+    description: data.description,
+    date: data.date,
+    author: data.author,
+    category: data.category,
+    tags: data.tags,
+    image: data.image,
+    draft: data.draft || false,
+  };
+}
+
+export function getPostBySlug(slug: string | string[]): Post | null {
+  const slugArray = Array.isArray(slug) ? slug : [slug];
+  const sanitized = slugArray.map(s => sanitizePath(s));
+  const fullPath = path.join(POSTS_PATH, ...sanitized) + '.md';
+
+  if (!fs.existsSync(fullPath)) {
+    return null;
+  }
+
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+  const frontmatter = validateFrontmatter(data);
+
+  return {
+    slug: sanitized.join('/'),
+    frontmatter,
+    content,
+    readingTime: calculateReadingTime(content),
+    excerpt: generateExcerpt(content),
+  };
+}
+
+export function getAllPosts(includeContent = false): Post[] {
+  const posts: Post[] = [];
+
+  function walkDir(dir: string, prefix = ''): void {
+    const files = fs.readdirSync(dir);
+
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        walkDir(filePath, prefix ? `${prefix}/${file}` : file);
+      } else if (file.endsWith('.md')) {
+        const slug = prefix ? `${prefix}/${file.replace(/\.md$/, '')}` : file.replace(/\.md$/, '');
+        try {
+          const post = getPostBySlug(slug.split('/'));
+          if (post && !post.frontmatter.draft) {
+            posts.push(includeContent ? post : { ...post, content: '' });
+          }
+        } catch (error) {
+          console.error(`Error loading post ${slug}:`, error);
+        }
+      }
+    }
+  }
+
+  if (fs.existsSync(POSTS_PATH)) {
+    walkDir(POSTS_PATH);
+  }
+
+  return posts.sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+}
+
+export async function getRelatedPosts(currentSlug: string, limit = 3): Promise<Post[]> {
+  const currentPost = getPostBySlug(currentSlug);
+  if (!currentPost) return [];
+
+  const allPosts = getAllPosts(false);
+  const { category, tags } = currentPost.frontmatter;
+
+  const scored = allPosts
+    .filter(post => post.slug !== currentSlug)
+    .map(post => {
+      let score = 0;
+      if (post.frontmatter.category === category) score += 3;
+      score += post.frontmatter.tags.filter(tag => tags.includes(tag)).length * 2;
+      return { post, score };
+    })
+    .filter(({ score }) => score > 0)
+    .sort((a, b) => b.score - a.score);
+
+  return scored.slice(0, limit).map(({ post }) => post);
+}
+
+export function getAllPostSlugs(): string[][] {
+  const slugs: string[][] = [];
+
+  function walkDir(dir: string, prefix: string[] = []): void {
+    const files = fs.readdirSync(dir);
+
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        walkDir(filePath, [...prefix, file]);
+      } else if (file.endsWith('.md')) {
+        slugs.push([...prefix, file.replace(/\.md$/, '')]);
+      }
+    }
+  }
+
+  if (fs.existsSync(POSTS_PATH)) {
+    walkDir(POSTS_PATH);
+  }
+
+  return slugs;
+}

lib/seo.ts

@@ -0,0 +1,33 @@
+export interface SEOData {
+  title: string
+  description: string
+  url: string
+  image?: string
+  type?: 'website' | 'article'
+  author?: string
+  publishedTime?: string
+}
+
+export function generateStructuredData(data: SEOData) {
+  const structuredData: any = {
+    '@context': 'https://schema.org',
+    '@type': data.type === 'article' ? 'BlogPosting' : 'WebSite',
+    headline: data.title,
+    description: data.description,
+    url: data.url,
+  }
+
+  if (data.image) {
+    structuredData.image = data.image
+  }
+
+  if (data.type === 'article') {
+    structuredData.author = {
+      '@type': 'Person',
+      name: data.author || 'Unknown',
+    }
+    structuredData.datePublished = data.publishedTime
+  }
+
+  return JSON.stringify(structuredData)
+}

lib/types/frontmatter.ts

@@ -0,0 +1,22 @@
+export interface FrontMatter {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  category: string;
+  tags: string[];
+  image?: string;
+  draft?: boolean;
+}
+
+export interface Post {
+  slug: string;
+  frontmatter: FrontMatter;
+  content: string;
+  readingTime: number;
+  excerpt: string;
+}
+
+export interface BlogParams {
+  slug: string[];
+}

lib/utils.ts

@@ -0,0 +1,53 @@
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const months = [
+    'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie',
+    'iulie', 'august', 'septembrie', 'octombrie', 'noiembrie', 'decembrie'
+  ];
+
+  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+export function formatRelativeDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffTime = Math.abs(now.getTime() - date.getTime());
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return 'astăzi';
+  if (diffDays === 1) return 'ieri';
+  if (diffDays < 7) return `acum ${diffDays} zile`;
+  if (diffDays < 30) return `acum ${Math.floor(diffDays / 7)} săptămâni`;
+  if (diffDays < 365) return `acum ${Math.floor(diffDays / 30)} luni`;
+  return `acum ${Math.floor(diffDays / 365)} ani`;
+}
+
+export function generateExcerpt(content: string, maxLength = 160): string {
+  const text = content
+    .replace(/^---[\s\S]*?---/, '')
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    .replace(/[#*`]/g, '')
+    .trim();
+
+  if (text.length <= maxLength) return text;
+
+  const truncated = text.slice(0, maxLength);
+  const lastSpace = truncated.lastIndexOf(' ');
+  return truncated.slice(0, lastSpace) + '...';
+}
+
+export function generateSlug(title: string): string {
+  const romanianMap: Record<string, string> = {
+    'ă': 'a', 'â': 'a', 'î': 'i', 'ș': 's', 'ț': 't',
+    'Ă': 'a', 'Â': 'a', 'Î': 'i', 'Ș': 's', 'Ț': 't'
+  };
+
+  return title
+    .split('')
+    .map(char => romanianMap[char] || char)
+    .join('')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "mypage",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next dev -p 3030",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "validate-posts": "node scripts/validate-posts.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@192.168.1.53:2222/raresj/mypage.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "autoprefixer": "^10.4.21",
+    "gray-matter": "^4.0.3",
+    "next": "^16.0.1",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}