🚀 add cicd

🖼️ fix build
🖼️ update blog post styles
2025-11-14 16:20:14 +02:00 · 2025-11-13 16:42:05 +02:00 · 2025-11-13 16:04:17 +02:00
24 changed files with 1463 additions and 192 deletions
--- a/.gitea/workflows/main.yml
+++ b/.gitea/workflows/main.yml
@@ -0,0 +1,337 @@
+# Gitea Actions Workflow for Next.js Blog Application
+# This workflow builds a Docker image and deploys it to production
+#
+# Workflow triggers:
+#   - Push to master branch (automatic deployment)
+#   - Manual trigger via workflow_dispatch
+#
+# Required Secrets (configure in Gitea repository settings):
+#   - PRODUCTION_HOST: IP address or hostname of production server
+#   - PRODUCTION_USER: SSH username (e.g., 'deployer')
+#   - SSH_PRIVATE_KEY: Private SSH key for authentication
+#   - REGISTRY_USERNAME: Docker registry username (optional, if registry requires auth)
+#   - REGISTRY_PASSWORD: Docker registry password (optional, if registry requires auth)
+#
+# Environment Variables (configured below):
+#   - REGISTRY: Docker registry URL
+#   - IMAGE_NAME: Docker image name
+
+name: Build and Deploy Next.js Blog to Production
+
+on:
+  push:
+    branches:
+      - master # Trigger on push to master branch
+  workflow_dispatch: # Allow manual trigger from Gitea UI
+
+env:
+  # Docker registry configuration
+  # Update this to match your private registry URL
+  REGISTRY: repository.workspace:5000
+  IMAGE_NAME: mypage
+
+jobs:
+  # ============================================
+  # Job 1: Code Quality Checks (Linting)
+  # ============================================
+  lint:
+    name: 🔍 Code Quality Checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🔎 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 📦 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: 📥 Install dependencies
+        run: npm ci
+
+      - name: 🔍 Run ESLint
+        run: npm run lint
+
+      - name: 💅 Check code formatting (Prettier)
+        run: npm run format:check
+
+      - name: 🔤 TypeScript type checking
+        run: npx tsc --noEmit
+
+      - name: ✅ All quality checks passed
+        run: |
+          echo "✅ All code quality checks passed successfully!"
+          echo "  - ESLint: No linting errors"
+          echo "  - Prettier: Code is properly formatted"
+          echo "  - TypeScript: No type errors"
+
+  # ============================================
+  # Job 2: Build and Push Docker Image
+  # ============================================
+  build-and-push:
+    name: 🏗️ Build and Push Docker Image
+    runs-on: ubuntu-latest
+    needs: [lint] # Wait for lint job to complete successfully
+
+    steps:
+      - name: 🔎 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 🔐 Log in to Docker Registry (if credentials provided)
+        run: |
+          if [ -n "${{ secrets.REGISTRY_USERNAME }}" ] && [ -n "${{ secrets.REGISTRY_PASSWORD }}" ]; then
+            echo "Logging into ${{ env.REGISTRY }} with credentials..."
+            echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin
+            echo "✅ Login successful"
+          else
+            echo "⚠️ No registry credentials provided - using insecure/public registry"
+          fi
+
+      - name: 🏗️ Build Docker image
+        timeout-minutes: 30
+        env:
+          DOCKER_BUILDKIT: 1 # Enable BuildKit for faster builds and better caching
+        run: |
+          echo "Building Next.js Docker image with BuildKit..."
+          echo "Build context size:"
+          du -sh . 2>/dev/null || echo "Cannot measure context size"
+
+          # Build the Docker image
+          # - Uses Dockerfile.nextjs from project root
+          # - Tags image with both 'latest' and commit SHA
+          # - Enables inline cache for faster subsequent builds
+          docker build \
+            --progress=plain \
+            --build-arg BUILDKIT_INLINE_CACHE=1 \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} \
+            -f Dockerfile.nextjs \
+            .
+
+          echo "✅ Build successful"
+          echo "Image size:"
+          docker images ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+
+      - name: 🚀 Push Docker image to registry
+        run: |
+          echo "Pushing image to registry..."
+
+          # Push both tags (latest and commit SHA)
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+
+          echo "✅ Image pushed successfully"
+          echo "  - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest"
+          echo "  - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+
+  # ============================================
+  # Job 2: Deploy to Production Server
+  # ============================================
+  deploy-production:
+    name: 🚀 Deploy to Production
+    runs-on: ubuntu-latest
+    needs: [build-and-push] # Wait for build job to complete
+    environment:
+      name: production
+      url: http://your-production-url.com # Update with your actual production URL
+
+    steps:
+      - name: 🔎 Checkout code (for docker-compose file)
+        uses: actions/checkout@v4
+
+      - name: 🔐 Validate Registry Access on Production Server
+        uses: appleboy/ssh-action@v1.0.3
+        env:
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+          REGISTRY_URL: ${{ env.REGISTRY }}
+        with:
+          host: ${{ secrets.PRODUCTION_HOST }}
+          username: ${{ secrets.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL
+          script: |
+            echo "=== Validating Docker Registry access ==="
+            if [ -n "$REGISTRY_USERNAME" ] && [ -n "$REGISTRY_PASSWORD" ]; then
+              echo "Logging into $REGISTRY_URL with credentials..."
+              echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" -u "$REGISTRY_USERNAME" --password-stdin
+              echo "✅ Registry authentication successful"
+            else
+              echo "⚠️ No registry credentials - using insecure/public registry"
+              echo "Testing registry connectivity..."
+              curl -f "http://$REGISTRY_URL/v2/" || { echo "❌ Registry not accessible"; exit 1; }
+              echo "✅ Registry is accessible"
+            fi
+
+      - name: 📁 Ensure application directory structure
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.PRODUCTION_HOST }}
+          username: ${{ secrets.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: |
+            echo "=== Ensuring application directory structure ==="
+
+            # Verify base directory exists and is writable
+            # Update /opt/mypage to match your deployment directory
+            if [ ! -d /opt/mypage ]; then
+              echo "❌ /opt/mypage does not exist!"
+              echo "Please run manually on production server:"
+              echo "  sudo mkdir -p /opt/mypage"
+              echo "  sudo chown -R deployer:docker /opt/mypage"
+              echo "  sudo chmod -R 775 /opt/mypage"
+              exit 1
+            fi
+
+            if [ ! -w /opt/mypage ]; then
+              echo "❌ /opt/mypage is not writable by $USER user"
+              echo "Please run manually on production server:"
+              echo "  sudo chown -R deployer:docker /opt/mypage"
+              echo "  sudo chmod -R 775 /opt/mypage"
+              exit 1
+            fi
+
+            # Create data directories for logs
+            mkdir -p /opt/mypage/data/logs || { echo "❌ Failed to create logs directory"; exit 1; }
+
+            echo "✅ Directory structure ready"
+            ls -la /opt/mypage
+
+      - name: 📦 Copy docker-compose.prod.yml to server
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.PRODUCTION_HOST }}
+          username: ${{ secrets.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          source: "docker-compose.prod.yml"
+          target: "/opt/mypage/"
+          overwrite: true
+
+      - name: 🐳 Deploy application via Docker Compose
+        uses: appleboy/ssh-action@v1.0.3
+        env:
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD || '' }}
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME || '' }}
+          REGISTRY_URL: ${{ env.REGISTRY }}
+          IMAGE_FULL: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+        with:
+          host: ${{ secrets.PRODUCTION_HOST }}
+          username: ${{ secrets.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL,IMAGE_FULL
+          script_stop: true # Stop execution on any error
+          script: |
+            echo "=== Starting deployment to production server ==="
+            cd /opt/mypage
+
+            # Log in to Docker registry (if credentials are configured)
+            if [ -n "$REGISTRY_USERNAME" ] && [ -n "$REGISTRY_PASSWORD" ]; then
+              echo "=== Logging in to Docker registry ==="
+              echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" -u "$REGISTRY_USERNAME" --password-stdin
+              echo "✅ Registry login successful"
+            else
+              echo "⚠️ No registry credentials - using insecure/public registry (no login required)"
+            fi
+
+            # Pull latest image from registry
+            echo "=== Pulling latest Docker image ==="
+            docker pull "$IMAGE_FULL"
+
+            if [ $? -ne 0 ]; then
+              echo "❌ Failed to pull image, aborting deployment"
+              exit 1
+            fi
+
+            # Deploy new container
+            # - Stops old container
+            # - Removes old container
+            # - Creates and starts new container with fresh image
+            echo "=== Deploying new container ==="
+            docker compose -f docker-compose.prod.yml up -d --force-recreate
+
+            if [ $? -ne 0 ]; then
+              echo "❌ Failed to deploy new container"
+              echo "Check logs above for errors"
+              exit 1
+            fi
+
+            # Check container status
+            echo "=== Container Status ==="
+            docker compose -f docker-compose.prod.yml ps
+
+            # Show recent logs for debugging
+            echo "=== Recent application logs ==="
+            docker compose -f docker-compose.prod.yml logs --tail=50
+
+            # Clean up old/unused images to save disk space
+            echo "=== Cleaning up old Docker images ==="
+            docker image prune -f
+
+            echo "✅ Deployment completed successfully ==="
+
+      - name: ❤️ Health check
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.PRODUCTION_HOST }}
+          username: ${{ secrets.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: |
+            echo "=== Performing health check ==="
+            cd /opt/mypage
+            max_attempts=15
+            attempt=1
+
+            # Wait for container to be healthy (respect start_period from health check)
+            echo "Waiting for application to start (40s start period)..."
+            sleep 40
+
+            # Retry health check up to 15 times
+            while [ $attempt -le $max_attempts ]; do
+              # Check if application responds at port 3030
+              if curl -f http://localhost:3030/ > /dev/null 2>&1; then
+                echo "✅ Health check passed!"
+                echo "Application is healthy and responding to requests"
+                exit 0
+              fi
+              echo "Attempt $attempt/$max_attempts: Health check failed, retrying in 5s..."
+              sleep 5
+              attempt=$((attempt + 1))
+            done
+
+            # Health check failed - gather diagnostic information
+            echo "❌ Health check failed after $max_attempts attempts"
+            echo ""
+            echo "=== Container Status ==="
+            docker compose -f docker-compose.prod.yml ps
+            echo ""
+            echo "=== Container Health ==="
+            docker inspect mypage-prod --format='{{.State.Health.Status}}' 2>/dev/null || echo "No health status"
+            echo ""
+            echo "=== Recent Application Logs ==="
+            docker compose -f docker-compose.prod.yml logs --tail=100
+
+            exit 1
+
+      - name: 📊 Deployment summary
+        if: always() # Run even if previous steps fail
+        run: |
+          echo "### 🚀 Deployment Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- **Environment**: Production" >> $GITHUB_STEP_SUMMARY
+          echo "- **Image**: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest" >> $GITHUB_STEP_SUMMARY
+          echo "- **Commit**: \`${{ github.sha }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "- **Workflow Run**: #${{ github.run_number }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **Triggered By**: ${{ github.actor }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **Status**: ${{ job.status }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Next Steps:**" >> $GITHUB_STEP_SUMMARY
+          echo "1. Verify application is accessible at production URL" >> $GITHUB_STEP_SUMMARY
+          echo "2. Check application logs for any errors" >> $GITHUB_STEP_SUMMARY
+          echo "3. Monitor resource usage and performance" >> $GITHUB_STEP_SUMMARY
--- a/Dockerfile.nextjs
+++ b/Dockerfile.nextjs
@@ -0,0 +1,108 @@
+# Multi-stage Dockerfile for Next.js Blog Application
+# Optimized for Static Site Generation with standalone output
+# Final image size: ~150MB
+
+# ============================================
+# Stage 1: Dependencies Installation
+# ============================================
+FROM node:20-alpine AS deps
+
+# Install libc6-compat for better compatibility
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+# Copy package files for dependency installation
+# These files are copied first to leverage Docker layer caching
+# If package.json hasn't changed, this layer will be reused
+COPY package.json package-lock.json* ./
+
+# Install dependencies using npm ci for reproducible builds
+# --only=production flag is not used here because we need dev dependencies for build
+RUN npm ci
+
+# ============================================
+# Stage 2: Build Next.js Application
+# ============================================
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy all application source code
+# This includes:
+# - app/ directory (Next.js 16 App Router)
+# - components/ directory
+# - lib/ directory (markdown utilities)
+# - content/blog/ directory (markdown blog posts)
+# - public/ directory (static assets)
+# - next.config.js, tsconfig.json, tailwind.config.js, etc.
+COPY . .
+
+# Set environment variables for build
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+# Build the Next.js application
+# This will:
+# 1. Process all markdown files from content/blog/
+# 2. Generate static pages for all blog posts (SSG)
+# 3. Create standalone output in .next/standalone/
+# 4. Optimize images and assets
+# 5. Bundle and minify JavaScript
+RUN npm run build
+
+# ============================================
+# Stage 3: Production Runtime
+# ============================================
+FROM node:20-alpine AS runner
+
+# Install curl for health checks
+RUN apk add --no-cache curl
+
+WORKDIR /app
+
+# Set production environment
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create a non-root user for security
+# The application will run as this user instead of root
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy only the necessary files from builder stage
+# Next.js standalone output includes all dependencies needed to run
+COPY --from=builder /app/public ./public
+
+# Copy standalone output (includes minimal node_modules and server files)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+
+# Copy static files (CSS, JS bundles, optimized images)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Create directories for logs (optional, if your app writes logs)
+RUN mkdir -p /app/logs && chown nextjs:nodejs /app/logs
+
+# Switch to non-root user
+USER nextjs
+
+# Expose the application port
+# Note: This matches the port in package.json "dev" script (-p 3030)
+EXPOSE 3030
+
+# Set the port environment variable
+ENV PORT=3030
+ENV HOSTNAME="0.0.0.0"
+
+# Health check to verify the application is running
+# Docker will periodically check this endpoint
+# If it fails, the container is marked as unhealthy
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+  CMD curl -f http://localhost:3030/ || exit 1
+
+# Start the Next.js server
+# The standalone output includes a minimal server.js file
+CMD ["node", "server.js"]
--- a/app/@breadcrumbs/about/page.tsx
+++ b/app/@breadcrumbs/about/page.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';

 export default function AboutBreadcrumb() {
  return (
--- a/app/@breadcrumbs/blog/[...slug]/page.tsx
+++ b/app/@breadcrumbs/blog/[...slug]/page.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
 import { getPostBySlug } from '@/lib/markdown';

 interface BreadcrumbItem {
--- a/app/@breadcrumbs/blog/page.tsx
+++ b/app/@breadcrumbs/blog/page.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';

 export default function BlogBreadcrumb() {
  return (
--- a/app/@breadcrumbs/default.tsx
+++ b/app/@breadcrumbs/default.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';

 export default function DefaultBreadcrumb() {
  return <Breadcrumbs />;
--- a/app/@breadcrumbs/tags/[tag]/page.tsx
+++ b/app/@breadcrumbs/tags/[tag]/page.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';

 export default async function TagBreadcrumb({
  params,
--- a/app/@breadcrumbs/tags/page.tsx
+++ b/app/@breadcrumbs/tags/page.tsx
@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';

 export default function TagsBreadcrumb() {
  return (
--- a/app/blog/[...slug]/page.tsx
+++ b/app/blog/[...slug]/page.tsx
@@ -3,6 +3,10 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
 import { formatDate, formatRelativeDate } from '@/lib/utils'
+import { TableOfContents } from '@/components/blog/table-of-contents'
+import { ReadingProgress } from '@/components/blog/reading-progress'
+import { StickyFooter } from '@/components/blog/sticky-footer'
+import MarkdownRenderer from '@/components/blog/markdown-renderer'

 export async function generateStaticParams() {
  const posts = await getAllPosts()
@@ -39,41 +43,19 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
  }
 }

-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 extractHeadings(content: string) {
+  const headingRegex = /^(#{2,3})\s+(.+)$/gm
+  const headings: { id: string; text: string; level: number }[] = []
+  let match

-function RelatedPosts({ posts }: { posts: any[] }) {
-  if (posts.length === 0) return null
+  while ((match = headingRegex.exec(content)) !== null) {
+    const level = match[1].length
+    const text = match[2]
+    const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+    headings.push({ id, text, level })
+  }

-  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>
-  )
+  return headings
 }

 export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
@@ -86,44 +68,118 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
  }

  const relatedPosts = await getRelatedPosts(slugPath)
+  const headings = extractHeadings(post.content)
+  const fullUrl = `https://yourdomain.com/blog/${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>
+    <>
+      <ReadingProgress />

-      <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 className="max-w-7xl mx-auto px-6 py-16">
+        <div className="flex gap-12">
+          <TableOfContents headings={headings} />
+
+          <article className="flex-1 min-w-0">
+            <header className="mb-16 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-primary))] p-8 relative">
+              <div className="border-b border-[var(--neon-pink)] pb-4 mb-6 relative">
+                <div className="flex items-center gap-3 mb-3 justify-end">
+                  <p className="font-mono text-xs text-[var(--neon-cyan)] uppercase tracking-widest">
+                    &gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
+                  </p>
+                  <div className="flex gap-1.5">
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-red-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-yellow-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-green-500/10 cursor-pointer" />
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 mb-2">
+                  {post.frontmatter.tags.map((tag: string) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-1 bg-cyan-500/5 border border-[var(--neon-cyan)] text-cyan-400 text-xs font-mono uppercase shadow-[0_0_8px_rgba(90,139,149,0.3)] hover:shadow-[0_0_12px_rgba(90,139,149,0.5)] transition-all"
+                    >
+                      #{tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              <div className="border-l border-[var(--neon-magenta)] pl-6 relative">
+                <h1 className="text-4xl md:text-5xl font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-tight leading-tight mb-6">
+                  {post.frontmatter.title}
+                </h1>
+
+                <p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono">
+                  <span className="text-[var(--neon-pink)]">&gt;&gt;</span> {post.frontmatter.description}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-4 pt-6 border-t border-[var(--neon-purple)] relative">
+                <div className="w-12 h-12 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-secondary))] flex items-center justify-center">
+                  <span className="font-mono text-[var(--neon-cyan)] text-xs">
+                    {post.frontmatter.author.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm">{post.frontmatter.author}</p>
+                  <div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono">
+                    <time className="text-[var(--neon-magenta)]">{formatDate(post.frontmatter.date)}</time>
+                    <span className="text-[var(--neon-pink)]">//</span>
+                    <span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span>
+                  </div>
+                </div>
+              </div>
+            </header>
+
+            {post.frontmatter.image && (
+              <div className="relative aspect-video mb-16 border border-[var(--neon-pink)] overflow-hidden">
+                <img
+                  src={post.frontmatter.image}
+                  alt={post.frontmatter.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            )}
+
+            <div className="prose prose-invert prose-lg max-w-none cyberpunk-prose">
+              <MarkdownRenderer content={post.content} />
+            </div>
+
+            {relatedPosts.length > 0 && (
+              <section className="mt-12 pt-8 border-t border-zinc-800">
+                <h2 className="text-2xl font-mono font-bold uppercase text-[var(--neon-cyan)] mb-6">// Articole similare</h2>
+                <div className="grid gap-6 md:grid-cols-3">
+                  {relatedPosts.map((relatedPost) => (
+                    <Link
+                      key={relatedPost.slug}
+                      href={`/blog/${relatedPost.slug}`}
+                      className="block p-4 border border-zinc-800 bg-zinc-950 hover:border-[var(--neon-cyan)] transition-all hover:shadow-[0_0_8px_rgba(90,139,149,0.2)]"
+                    >
+                      <h3 className="font-mono font-semibold text-cyan-400 mb-2 line-clamp-2">{relatedPost.frontmatter.title}</h3>
+                      <p className="text-sm text-zinc-400 line-clamp-2">{relatedPost.frontmatter.description}</p>
+                      <p className="text-xs text-zinc-600 mt-2 font-mono">{formatDate(relatedPost.frontmatter.date)}</p>
+                    </Link>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <nav className="flex justify-between items-center mt-12 pt-8 border-t border-zinc-800">
+              <Link
+                href="/blog"
+                className="flex items-center text-[var(--neon-pink)] hover:text-[var(--neon-magenta)] transition-all font-mono text-sm uppercase border border-[var(--neon-pink)] px-4 py-2 hover:shadow-[0_0_6px_rgba(155,90,110,0.3)]"
+              >
+                <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>
+                [BACK TO BLOG]
+              </Link>
+            </nav>
+          </article>
        </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>
+      <StickyFooter url={fullUrl} title={post.frontmatter.title} />
+    </>
  )
 }
--- a/app/blog/blog-client.tsx
+++ b/app/blog/blog-client.tsx
@@ -65,22 +65,21 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
  }

  return (
-    <div className="min-h-screen bg-zinc-900">
-      <Navbar />
+    <div className="min-h-screen bg-[rgb(var(--bg-primary))]">

      <div className="max-w-7xl mx-auto px-6 py-12">
        {/* Header */}
-        <div className="border-l-4 border-cyan-400 pl-6 mb-12">
-          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
+        <div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
+          <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-widest mb-2">
            DATABASE QUERY // SEARCH RESULTS
          </p>
-          <h1 className="text-4xl md:text-6xl font-mono font-bold text-zinc-100 uppercase tracking-tight">
+          <h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
            &gt; BLOG ARCHIVE_
          </h1>
        </div>

        {/* Search Bar */}
-        <div className="border-4 border-slate-700 bg-slate-900 p-6 mb-8">
+        <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6 mb-8">
          <div className="flex flex-col lg:flex-row gap-4">
            <SearchBar
              searchQuery={searchQuery}
@@ -109,7 +108,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)

        {/* Results Count */}
        <div className="mb-6">
-          <p className="font-mono text-sm text-zinc-500 uppercase">
+          <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
            FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
          </p>
        </div>
@@ -131,8 +130,8 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
            })}
          </div>
        ) : (
-          <div className="border-4 border-slate-700 bg-slate-900 p-12 text-center">
-            <p className="font-mono text-lg text-zinc-400 uppercase">
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-12 text-center">
+            <p className="font-mono text-lg text-[rgb(var(--text-muted))] uppercase">
              NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
            </p>
          </div>
@@ -140,12 +139,12 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)

        {/* Pagination */}
        {totalPages > 1 && (
-          <div className="border-4 border-slate-700 bg-slate-900 p-6">
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
            <div className="flex items-center justify-between">
              <button
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={currentPage === 1}
-                className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
              >
                &lt; PREV
              </button>
@@ -154,10 +153,10 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
-                    className={`w-12 h-12 font-mono text-sm border-2 transition-colors cursor-pointer ${
+                    className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
                      currentPage === page
-                        ? 'bg-cyan-400 border-cyan-400 text-slate-900'
-                        : 'border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
+                        ? 'bg-[var(--neon-cyan)] border-[var(--neon-cyan)] text-white'
+                        : 'border-[rgb(var(--border-primary))] text-[rgb(var(--text-muted))] hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)]'
                    }`}
                  >
                    {String(page).padStart(2, '0')}
@@ -167,7 +166,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
              <button
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
-                className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
              >
                NEXT &gt;
              </button>
--- a/app/blog/layout.tsx
+++ b/app/blog/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'

 export const metadata: Metadata = {
  title: 'Blog',
@@ -6,5 +7,10 @@ export const metadata: Metadata = {
 }

 export default function BlogLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
 }
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,19 +9,20 @@
@layer base {
  :root {
    /* Light mode colors */
-    --bg-primary: 241 245 249;
-    --bg-secondary: 226 232 240;
-    --bg-tertiary: 203 213 225;
-    --text-primary: 15 23 42;
-    --text-secondary: 51 65 85;
-    --text-muted: 100 116 139;
-    --border-primary: 203 213 225;
-    --border-subtle: 226 232 240;
+    --bg-primary: 250 250 250;
+    --bg-secondary: 240 240 243;
+    --bg-tertiary: 228 228 231;
+    --text-primary: 24 24 27;
+    --text-secondary: 63 63 70;
+    --text-muted: 113 113 122;
+    --border-primary: 212 212 216;
+    --border-subtle: 228 228 231;

-    --neon-pink: #8b4a5e;
-    --neon-cyan: #4a7b85;
-    --neon-purple: #6b5583;
-    --neon-magenta: #8b4a7e;
+    /* Desaturated cyberpunk for light mode - darker for readability */
+    --neon-pink: #7a3d52;
+    --neon-cyan: #2d5a63;
+    --neon-purple: #5a4670;
+    --neon-magenta: #7a3d6b;
  }

  .dark {
@@ -35,10 +36,11 @@
    --border-primary: 71 85 105;
    --border-subtle: 30 41 59;

-    --neon-pink: #9b5a6e;
-    --neon-cyan: #5a8b95;
-    --neon-purple: #7b6593;
-    --neon-magenta: #9b5a8e;
+    /* Desaturated cyberpunk for dark mode */
+    --neon-pink: #8a5568;
+    --neon-cyan: #4d7580;
+    --neon-purple: #6a5685;
+    --neon-magenta: #8a5579;
  }
 }

@@ -322,5 +324,140 @@
      inset 0 0 10px rgba(255, 0, 128, 0.1);
    border-color: var(--neon-pink);
  }
+
+  /* Cyberpunk Prose Styling */
+  .cyberpunk-prose {
+    color: rgb(212 212 216);
+  }
+
+  .cyberpunk-prose h1,
+  .cyberpunk-prose h2,
+  .cyberpunk-prose h3 {
+    color: var(--neon-cyan);
+    font-family: var(--font-jetbrains-mono);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: -0.025em;
+  }
+
+  .cyberpunk-prose h1 {
+    font-size: 2.25rem;
+    margin-bottom: 2rem;
+    margin-top: 3rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--neon-cyan);
+  }
+
+  .cyberpunk-prose h2 {
+    font-size: 1.875rem;
+    margin-bottom: 1.5rem;
+    margin-top: 2.5rem;
+  }
+
+  .cyberpunk-prose h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+  }
+
+  .cyberpunk-prose p {
+    color: rgb(212 212 216);
+    line-height: 1.625;
+    margin-bottom: 1.5rem;
+    font-size: 1.125rem;
+  }
+
+  .cyberpunk-prose a {
+    color: var(--neon-magenta);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s;
+  }
+
+  .cyberpunk-prose a:hover {
+    color: var(--neon-pink);
+  }
+
+  .cyberpunk-prose ul,
+  .cyberpunk-prose ol {
+    color: rgb(212 212 216);
+    padding-left: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .cyberpunk-prose ul > * + *,
+  .cyberpunk-prose ol > * + * {
+    margin-top: 0.5rem;
+  }
+
+  .cyberpunk-prose li {
+    font-size: 1.125rem;
+  }
+
+  .cyberpunk-prose blockquote {
+    border-left: 4px solid var(--neon-magenta);
+    padding-left: 1.5rem;
+    font-style: italic;
+    color: rgb(161 161 170);
+    background-color: #000;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    position: relative;
+    box-shadow: -4px 0 15px rgba(155,90,142,0.3), inset 0 0 20px rgba(155,90,142,0.05);
+  }
+
+  .cyberpunk-prose blockquote::before {
+    content: '"';
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    font-size: 3.75rem;
+    color: var(--neon-magenta);
+    opacity: 0.3;
+    font-family: monospace;
+  }
+
+  .cyberpunk-prose code {
+    color: var(--neon-cyan);
+    background-color: #000;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.875rem;
+    font-family: monospace;
+    border: 2px solid var(--neon-cyan);
+    box-shadow: 0 0 8px rgba(90,139,149,0.3);
+    text-shadow: 0 0 6px rgba(90,139,149,0.6);
+  }
+
+  .cyberpunk-prose pre {
+    background-color: #000;
+    border: 4px solid var(--neon-purple);
+    padding: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    overflow-x: auto;
+    box-shadow: 0 0 25px rgba(123,101,147,0.6), inset 0 0 25px rgba(123,101,147,0.1);
+  }
+
+  .cyberpunk-prose pre code {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+  }
+
+  .cyberpunk-prose img {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border: 4px solid var(--neon-pink);
+    box-shadow: 0 0 20px rgba(155,90,110,0.5);
+  }
+
+  .cyberpunk-prose hr {
+    border-color: rgb(39 39 42);
+    border-top-width: 2px;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
 }

--- a/components/blog/blog-card.tsx
+++ b/components/blog/blog-card.tsx
@@ -14,8 +14,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
  if (!hasImage || variant === 'text-only') {
    return (
      <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-        <article className="border-4 border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
-          <div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+        <article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
            <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
              {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
            </span>
@@ -44,7 +44,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
  if (variant === 'image-side') {
    return (
      <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-        <article className="border-4 border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
+        <article className="border border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
          <div className="flex flex-col md:flex-row h-full">
            <div className="md:w-1/3 relative h-64 md:h-auto bg-zinc-900">
              <Image
@@ -56,7 +56,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
              <div className="absolute inset-0 bg-zinc-900/60" />
            </div>
            <div className="md:w-2/3 p-6">
-              <div className="border-l-4 border-cyan-400 pl-4 mb-4">
+              <div className="border-l-2 border-cyan-400 pl-4 mb-4">
                <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
                  {post.frontmatter.category} // {formatDate(post.frontmatter.date)}
                </span>
@@ -86,7 +86,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {

  return (
    <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-      <article className="border-4 border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
+      <article className="border border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
        <div className="relative h-64 bg-zinc-900">
          <Image
            src={post.frontmatter.image!}
@@ -97,7 +97,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
          <div className="absolute inset-0 bg-zinc-900/60" />
        </div>
        <div className="p-6">
-          <div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
            <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
              {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
            </span>
--- a/components/blog/code-block.tsx
+++ b/components/blog/code-block.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { useState } from 'react'
+
+interface CodeBlockProps {
+  code: string
+  language: string
+  filename?: string
+  showLineNumbers?: boolean
+}
+
+export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
+        <div className="flex items-center gap-3">
+          {filename && (
+            <span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">&gt;&gt; {filename}</span>
+          )}
+          <span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
+            [{language}]
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCopy}
+            className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
+          >
+            {copied ? '[COPIED✓]' : '[COPY]'}
+          </button>
+          <div className="flex gap-1">
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative overflow-x-auto">
+        <pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}
--- a/components/blog/markdown-renderer.tsx
+++ b/components/blog/markdown-renderer.tsx
@@ -4,8 +4,7 @@ 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';
+import { CodeBlock } from './code-block';

 interface MarkdownRendererProps {
  content: string;
@@ -16,55 +15,33 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
    <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>
-        ),
+        h1: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h1 id={id}>{children}</h1>;
+        },
+        h2: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h2 id={id}>{children}</h2>;
+        },
+        h3: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h3 id={id}>{children}</h3>;
+        },
        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}>
+          if (!inline && match) {
+            return (
+              <CodeBlock
+                code={String(children).replace(/\n$/, '')}
+                language={match[1]}
+              />
+            );
+          }
+          return (
+            <code {...props}>
              {children}
            </code>
          );
@@ -78,19 +55,18 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
              <img
                src={src}
                alt={alt || ''}
-                className="my-4 rounded-lg max-w-full h-auto"
+                className="w-full h-auto"
              />
            );
          }

          return (
-            <div className="my-4 relative w-full h-auto">
+            <div className="relative w-full h-auto">
              <Image
                src={src}
                alt={alt || ''}
                width={800}
                height={600}
-                className="rounded-lg"
                style={{ width: '100%', height: 'auto' }}
              />
            </div>
@@ -106,7 +82,6 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
                href={href}
                target="_blank"
                rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
              >
                {children}
              </a>
@@ -114,35 +89,11 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
          }

          return (
-            <Link href={href} className="text-blue-600 hover:underline">
+            <Link href={href}>
              {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}
--- a/components/blog/reading-progress.tsx
+++ b/components/blog/reading-progress.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercent = (scrollTop / docHeight) * 100
+      setProgress(Math.min(scrollPercent, 100))
+    }
+
+    window.addEventListener('scroll', updateProgress, { passive: true })
+    updateProgress()
+    return () => window.removeEventListener('scroll', updateProgress)
+  }, [])
+
+  return (
+    <>
+      <div className="fixed top-0 left-0 right-0 h-1.5 bg-[rgb(var(--bg-secondary))] dark:bg-black z-50 border-b-2 border-[rgb(var(--border-primary))]">
+        <div
+          className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
+          style={{
+            width: `${progress}%`,
+            boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none'
+          }}
+        />
+      </div>
+
+      <div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
+        <span className="relative z-10">
+          [{Math.round(progress)}%]
+        </span>
+      </div>
+    </>
+  )
+}
--- a/components/blog/search-bar.tsx
+++ b/components/blog/search-bar.tsx
@@ -5,7 +5,7 @@ interface SearchBarProps {

 export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
  return (
-    <div className="flex-1 flex items-center border-2 border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_10px_var(--neon-cyan),0_0_20px_rgba(0,255,255,0.5),inset_0_0_10px_rgba(0,255,255,0.1)]">
+    <div className="flex-1 flex items-center border border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_6px_rgba(0,255,255,0.4),inset_0_0_6px_rgba(0,255,255,0.05)]">
      <span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>&gt;</span>
      <input
        type="text"
--- a/components/blog/sticky-footer.tsx
+++ b/components/blog/sticky-footer.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface StickyFooterProps {
+  url: string
+  title: string
+}
+
+export function StickyFooter({ url, title }: StickyFooterProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  }
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <footer
+      className={`
+        fixed bottom-0 left-0 right-0 z-40
+        bg-black/98 backdrop-blur-sm
+        border-t-4 border-[var(--neon-magenta)]
+        transition-transform duration-200 ease-in-out
+        ${isVisible ? 'translate-y-0' : 'translate-y-full'}
+      `}
+      style={{
+        boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
+      }}
+    >
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
+
+      <div className="max-w-7xl mx-auto px-6 py-4 relative">
+        <div className="flex items-center justify-between">
+          <div className="hidden md:flex items-center gap-3">
+            <div className="flex gap-1.5">
+              <div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
+              <div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
+            </div>
+            <span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
+              &gt;&gt; SHARE:
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3 mx-auto md:mx-0">
+            <a
+              href={shareLinks.twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
+              style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
+            >
+              [X]
+            </a>
+
+            <a
+              href={shareLinks.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
+              style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
+            >
+              [IN]
+            </a>
+
+            <button
+              onClick={handleCopyLink}
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
+              style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
+            >
+              {copied ? '[✓ COPIED]' : '[COPY]'}
+            </button>
+          </div>
+
+          <button
+            onClick={scrollToTop}
+            className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
+            style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
+          >
+            [↑ TOP]
+          </button>
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/components/blog/table-of-contents.tsx
+++ b/components/blog/table-of-contents.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface Heading {
+  id: string
+  text: string
+  level: number
+}
+
+interface TOCProps {
+  headings: Heading[]
+}
+
+export function TableOfContents({ headings }: TOCProps) {
+  const [activeId, setActiveId] = useState('')
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-100px 0px -66%' }
+    )
+
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id)
+      if (element) observer.observe(element)
+    })
+
+    return () => observer.disconnect()
+  }, [headings])
+
+  return (
+    <aside className="hidden lg:block sticky top-24 w-64 h-fit">
+      <div className="bg-black border border-[var(--neon-cyan)] p-6 relative overflow-hidden shadow-[0_0_15px_rgba(90,139,149,0.3),inset_0_0_15px_rgba(90,139,149,0.05)]">
+        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-magenta-500/3 to-transparent pointer-events-none" />
+        <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-cyan)] to-transparent opacity-50" />
+
+        <div className="border-b border-[var(--neon-magenta)] pb-3 mb-4 relative">
+          <div className="flex gap-1.5 mb-2 justify-end">
+            <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Minimize" />
+            <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Maximize" />
+            <div className="w-3 h-3 border border-[var(--neon-pink)]/40 hover:bg-[var(--neon-pink)]/10 transition-colors cursor-pointer" title="Close" />
+          </div>
+          <h3 className="text-xs font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-wider" style={{ textShadow: '0 0 6px rgba(90,139,149,0.5)' }}>
+            &gt;&gt; NAVIGATION
+          </h3>
+        </div>
+
+        <nav className="space-y-1 relative">
+          {headings.map((heading) => (
+            <a
+              key={heading.id}
+              href={`#${heading.id}`}
+              className={`
+                block text-sm font-mono py-2 border-l-2 transition-all duration-150
+                ${heading.level === 2 ? 'pl-3' : 'pl-6'}
+                ${activeId === heading.id
+                  ? 'text-[var(--neon-cyan)] border-[var(--neon-cyan)] bg-cyan-500/5 shadow-[0_0_8px_rgba(90,139,149,0.3)]'
+                  : 'text-zinc-500 border-zinc-900 hover:border-[var(--neon-magenta)] hover:text-[var(--neon-magenta)] hover:bg-magenta-500/3 hover:shadow-[0_0_4px_rgba(155,90,142,0.2)]'
+                }
+              `}
+              style={activeId === heading.id ? { textShadow: '0 0 4px rgba(90,139,149,0.5)' } : {}}
+            >
+              <span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span>{heading.text}
+            </a>
+          ))}
+        </nav>
+
+        <div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-purple)] to-transparent opacity-40" />
+      </div>
+    </aside>
+  )
+}
--- a/components/blog/tag-filter.tsx
+++ b/components/blog/tag-filter.tsx
@@ -9,7 +9,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
  if (allTags.length === 0) return null

  return (
-    <div className="border-4 border-slate-700 bg-slate-900 p-6 mb-12">
+    <div className="border border-slate-700 bg-slate-900 p-6 mb-12">
      <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
        FILTER BY TAG
      </p>
@@ -18,7 +18,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
          <button
            key={tag}
            onClick={() => onToggleTag(tag)}
-            className={`px-4 py-2 font-mono text-xs uppercase border-2 transition-colors cursor-pointer ${
+            className={`px-4 py-2 font-mono text-xs uppercase border transition-colors cursor-pointer ${
              selectedTags.includes(tag)
                ? 'bg-cyan-400 border-cyan-400 text-slate-900'
                : 'bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -0,0 +1,134 @@
+# Docker Compose Configuration for Production Deployment
+# This file is used by CI/CD to deploy the application on production servers
+#
+# Key differences from local docker-compose.yml:
+#   - Uses pre-built image from registry (not local build)
+#   - Includes resource limits and logging configuration
+#   - More stringent health checks
+#   - Production-grade restart policies
+#
+# Usage:
+#   1. This file is automatically copied to server by CI/CD workflow
+#   2. Server pulls image from registry: docker compose -f docker-compose.prod.yml pull
+#   3. Server starts container: docker compose -f docker-compose.prod.yml up -d
+#
+# Manual deployment (if CI/CD is not available):
+#   ssh user@production-server
+#   cd /opt/mypage
+#   docker compose -f docker-compose.prod.yml pull
+#   docker compose -f docker-compose.prod.yml up -d --force-recreate
+
+version: '3.8'
+
+services:
+  mypage:
+    # Use pre-built image from private registry
+    # This image is built and pushed by the CI/CD workflow
+    # Format: REGISTRY_URL/IMAGE_NAME:TAG
+    image: repository.workspace:5000/mypage:latest
+
+    container_name: mypage-prod
+
+    # Restart policy: always restart on failure or server reboot
+    # This ensures high availability in production
+    restart: always
+
+    # Port mapping: host:container
+    # The application will be accessible at http://SERVER_IP:3030
+    # Usually, a reverse proxy (Caddy/Nginx) will forward traffic to this port
+    ports:
+      - "3030:3030"
+
+    # Production environment variables
+    environment:
+      - NODE_ENV=production
+      - NEXT_TELEMETRY_DISABLED=1
+      - PORT=3030
+      - HOSTNAME=0.0.0.0
+      # Add any other production-specific environment variables here
+      # Example:
+      # - DATABASE_URL=postgresql://user:pass@db:5432/mypage
+      # - REDIS_URL=redis://redis:6379
+
+    # Persistent volumes for logs (optional)
+    # Uncomment if your application writes logs
+    volumes:
+      - ./data/logs:/app/logs
+
+    # Health check configuration
+    # Docker monitors the application and marks it unhealthy if checks fail
+    # If container is unhealthy, restart policy will trigger a restart
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3030/", "||", "exit", "1"]
+      interval: 30s        # Check every 30 seconds
+      timeout: 10s         # Wait up to 10 seconds for response
+      retries: 3           # Mark unhealthy after 3 consecutive failures
+      start_period: 40s    # Grace period during container startup
+
+    # Resource limits for production
+    # Prevents container from consuming all server resources
+    deploy:
+      resources:
+        limits:
+          cpus: '1.0'         # Maximum 1 CPU core
+          memory: 512M        # Maximum 512MB RAM
+        reservations:
+          cpus: '0.25'        # Reserve at least 0.25 CPU cores
+          memory: 256M        # Reserve at least 256MB RAM
+
+    # Network configuration
+    networks:
+      - mypage-network
+
+    # Logging configuration
+    # Prevents logs from consuming all disk space
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"      # Maximum 10MB per log file
+        max-file: "3"        # Keep only 3 log files (30MB total)
+
+# Network definition
+networks:
+  mypage-network:
+    driver: bridge
+
+# ============================================
+# Production Deployment Commands
+# ============================================
+#
+# Pull latest image from registry:
+#   docker compose -f docker-compose.prod.yml pull
+#
+# Start/update containers:
+#   docker compose -f docker-compose.prod.yml up -d --force-recreate
+#
+# View logs:
+#   docker compose -f docker-compose.prod.yml logs -f mypage
+#
+# Check health status:
+#   docker inspect mypage-prod | grep -A 10 Health
+#
+# Stop containers:
+#   docker compose -f docker-compose.prod.yml down
+#
+# Restart containers:
+#   docker compose -f docker-compose.prod.yml restart
+#
+# Remove old/unused images (cleanup):
+#   docker image prune -f
+#
+# ============================================
+# Troubleshooting
+# ============================================
+#
+# If container keeps restarting:
+#   1. Check logs: docker compose -f docker-compose.prod.yml logs --tail=100
+#   2. Check health: docker inspect mypage-prod | grep -A 10 Health
+#   3. Verify port is not already in use: netstat -tulpn | grep 3030
+#   4. Check resource usage: docker stats mypage-prod
+#
+# If health check fails:
+#   1. Test manually: docker exec mypage-prod curl -f http://localhost:3030/
+#   2. Check if Next.js server is running: docker exec mypage-prod ps aux
+#   3. Verify environment variables: docker exec mypage-prod env
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,90 @@
+# Docker Compose Configuration for Local Development/Testing
+# This file is used to run the Next.js blog application locally using Docker
+#
+# Usage:
+#   1. Copy this file to project root: cp docker-compose.yml.example docker-compose.yml
+#   2. Build and start: docker compose up -d
+#   3. View logs: docker compose logs -f
+#   4. Stop: docker compose down
+#
+# Note: This builds from local Dockerfile, not registry image
+
+version: '3.8'
+
+services:
+  mypage:
+    # Build configuration
+    build:
+      context: .
+      dockerfile: Dockerfile.nextjs  # Use the Next.js-specific Dockerfile
+
+    container_name: mypage-dev
+
+    # Port mapping: host:container
+    # Access the app at http://localhost:3030
+    ports:
+      - "3030:3030"
+
+    # Environment variables for development
+    environment:
+      - NODE_ENV=production  # Use production mode even locally to test production build
+      - NEXT_TELEMETRY_DISABLED=1
+      - PORT=3030
+      - HOSTNAME=0.0.0.0
+
+    # Optional: Mount logs directory for debugging
+    # Uncomment if your application writes logs to /app/logs
+    # volumes:
+    #   - ./logs:/app/logs
+
+    # Restart policy: restart unless explicitly stopped
+    restart: unless-stopped
+
+    # Network configuration
+    networks:
+      - mypage-network
+
+    # Health check configuration
+    # Docker will check if the app is healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3030/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+networks:
+  mypage-network:
+    driver: bridge
+
+# ============================================
+# Common Commands
+# ============================================
+#
+# Build and start containers:
+#   docker compose up -d
+#
+# Build with no cache (clean build):
+#   docker compose build --no-cache
+#   docker compose up -d
+#
+# View logs (follow mode):
+#   docker compose logs -f mypage
+#
+# Stop containers:
+#   docker compose down
+#
+# Stop and remove volumes:
+#   docker compose down -v
+#
+# Restart service:
+#   docker compose restart mypage
+#
+# Access container shell:
+#   docker compose exec mypage /bin/sh
+#
+# Check container status:
+#   docker compose ps
+#
+# View resource usage:
+#   docker stats mypage-dev
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@@ -1,10 +1,180 @@
 /** @type {import('next').NextConfig} */
+
+// Production-ready Next.js configuration with standalone output
+// This configuration is optimized for Docker deployment with minimal image size
+//
+// Key features:
+//   - Standalone output mode (includes only necessary dependencies)
+//   - Image optimization with modern formats
+//   - Static Site Generation (SSG) for all blog posts
+//   - Production-grade caching and performance settings
+//
+// Usage:
+//   1. Copy this file to project root: cp next.config.js.production next.config.js
+//   2. Build application: npm run build
+//   3. The .next/standalone directory will contain everything needed to run the app
+
 const nextConfig = {
+  // ============================================
+  // Standalone Output Mode
+  // ============================================
+  // This is REQUIRED for Docker deployment
+  // Outputs a minimal server with only necessary dependencies
+  // Reduces Docker image size from ~1GB to ~150MB
+  output: 'standalone',
+
+  // ============================================
+  // Image Optimization
+  // ============================================
  images: {
+    // Modern image formats (smaller file sizes)
    formats: ['image/avif', 'image/webp'],
+
+    // Device sizes for responsive images
+    // Next.js will generate optimized images for these widths
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+
+    // Image sizes for <Image> component size prop
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+
+    // Disable image optimization during build (optional)
+    // Uncomment if build times are too long
+    // unoptimized: false,
+
+    // External image domains (if loading images from CDN)
+    // Uncomment and add domains if needed
+    // remotePatterns: [
+    //   {
+    //     protocol: 'https',
+    //     hostname: 'cdn.example.com',
+    //   },
+    // ],
  },
+
+  // ============================================
+  // Performance Optimization
+  // ============================================
+
+  // Enable SWC minification (faster than Terser)
+  swcMinify: true,
+
+  // Compress static pages (reduces bandwidth)
+  compress: true,
+
+  // ============================================
+  // Production Settings
+  // ============================================
+
+  // Disable X-Powered-By header for security
+  poweredByHeader: false,
+
+  // Generate ETags for caching
+  generateEtags: true,
+
+  // ============================================
+  // Static Generation Settings
+  // ============================================
+
+  // Automatically generate static pages at build time
+  // This is the default behavior for Next.js App Router
+  // All markdown blog posts will be pre-rendered
+
+  // ============================================
+  // TypeScript Settings
+  // ============================================
+
+  // Type checking during build
+  // Set to false to skip type checking (not recommended)
+  typescript: {
+    // ignoreBuildErrors: false,
+  },
+
+  // ============================================
+  // ESLint Settings
+  // ============================================
+
+  // ESLint during build
+  // Set to false to skip linting (not recommended)
+  eslint: {
+    // ignoreDuringBuilds: false,
+  },
+
+  // ============================================
+  // Experimental Features (Next.js 16)
+  // ============================================
+
+  experimental: {
+    // Enable optimistic client cache
+    // Improves navigation performance
+    staleTimes: {
+      dynamic: 30,
+      static: 180,
+    },
+
+    // Enable PPR (Partial Prerendering) - Next.js 16 feature
+    // Uncomment to enable (currently in beta)
+    // ppr: false,
+  },
+
+  // ============================================
+  // Headers (Optional)
+  // ============================================
+  // Custom headers for all routes
+  // Note: Caddy/Nginx reverse proxy can also set these headers
+  // Uncomment if you want Next.js to handle headers instead
+  //
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'X-XSS-Protection',
+            value: '1; mode=block',
+          },
+        ],
+      },
+    ]
+  },
+
+  // ============================================
+  // Redirects (Optional)
+  // ============================================
+  // Add permanent redirects for old URLs
+  // Uncomment and add your redirects
+  //
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: '/old-blog/:slug',
+  //       destination: '/blog/:slug',
+  //       permanent: true,
+  //     },
+  //   ]
+  // },
+
+  // ============================================
+  // Rewrites (Optional)
+  // ============================================
+  // Add URL rewrites for API proxying or URL masking
+  // Uncomment and add your rewrites
+  //
+  // async rewrites() {
+  //   return [
+  //     {
+  //       source: '/api/:path*',
+  //       destination: 'https://api.example.com/:path*',
+  //     },
+  //   ]
+  // },
 }

 module.exports = nextConfig
Author	SHA1	Message	Date
RJ	daf253540f	🚀 add cicd	2025-11-14 16:20:14 +02:00
RJ	5e9093cf9c	🖼️ fix build	2025-11-13 16:42:05 +02:00
RJ	82b77be57a	🖼️ update blog post styles	2025-11-13 16:04:17 +02:00