1 Commits

Author SHA1 Message Date
RJ
daf253540f 🚀 add cicd 2025-11-14 16:20:14 +02:00
57 changed files with 494 additions and 6993 deletions

View File

@@ -15,7 +15,6 @@ Reference this skill when writing or reviewing code to ensure consistency with p
### Files and Directories ### Files and Directories
**Use kebab-case for all file names:** **Use kebab-case for all file names:**
``` ```
✅ user-profile.tsx ✅ user-profile.tsx
✅ blog-post-card.tsx ✅ blog-post-card.tsx
@@ -27,14 +26,12 @@ Reference this skill when writing or reviewing code to ensure consistency with p
``` ```
**Why kebab-case?** **Why kebab-case?**
- Cross-platform compatibility (Windows vs Unix) - Cross-platform compatibility (Windows vs Unix)
- URL-friendly (file names often map to routes) - URL-friendly (file names often map to routes)
- Easier to parse and read - Easier to parse and read
- Industry standard for Next.js projects - Industry standard for Next.js projects
**Special Next.js Files:** **Special Next.js Files:**
``` ```
page.tsx # Route pages page.tsx # Route pages
layout.tsx # Layout components layout.tsx # Layout components
@@ -47,7 +44,6 @@ route.ts # API route handlers
### Component Names (Inside Files) ### Component Names (Inside Files)
**Use PascalCase for component names:** **Use PascalCase for component names:**
```typescript ```typescript
// File: user-profile.tsx // File: user-profile.tsx
export function UserProfile() { export function UserProfile() {
@@ -63,7 +59,6 @@ export default function BlogPostCard() {
### Variables, Functions, Props ### Variables, Functions, Props
**Use camelCase:** **Use camelCase:**
```typescript ```typescript
// Variables // Variables
const userSettings = {} const userSettings = {}
@@ -88,11 +83,10 @@ function useMarkdown() {}
### Constants ### Constants
**Use SCREAMING_SNAKE_CASE:** **Use SCREAMING_SNAKE_CASE:**
```typescript ```typescript
const API_BASE_URL = 'https://api.example.com' const API_BASE_URL = "https://api.example.com"
const MAX_RETRIES = 3 const MAX_RETRIES = 3
const DEFAULT_LOCALE = 'ro-RO' const DEFAULT_LOCALE = "ro-RO"
``` ```
--- ---
@@ -139,7 +133,10 @@ export async function POST(request: NextRequest) {
const parsed = bodySchema.safeParse(json) const parsed = bodySchema.safeParse(json)
if (!parsed.success) { if (!parsed.success) {
return NextResponse.json({ error: 'Validation failed', details: parsed.error }, { status: 400 }) return NextResponse.json(
{ error: 'Validation failed', details: parsed.error },
{ status: 400 }
)
} }
// parsed.data is fully typed // parsed.data is fully typed
@@ -149,7 +146,6 @@ export async function POST(request: NextRequest) {
``` ```
**Key Points:** **Key Points:**
- Use `safeParse()` instead of `parse()` to avoid try/catch - Use `safeParse()` instead of `parse()` to avoid try/catch
- Return structured error responses - Return structured error responses
- Use appropriate HTTP status codes - Use appropriate HTTP status codes
@@ -158,7 +154,6 @@ export async function POST(request: NextRequest) {
### Error Handling ### Error Handling
**Return meaningful status codes:** **Return meaningful status codes:**
```typescript ```typescript
200 // Success 200 // Success
201 // Created 201 // Created
@@ -170,13 +165,12 @@ export async function POST(request: NextRequest) {
``` ```
**Structured error responses:** **Structured error responses:**
```typescript ```typescript
return NextResponse.json( return NextResponse.json(
{ {
error: 'Resource not found', error: 'Resource not found',
code: 'NOT_FOUND', code: 'NOT_FOUND',
timestamp: new Date().toISOString(), timestamp: new Date().toISOString()
}, },
{ status: 404 } { status: 404 }
) )
@@ -288,7 +282,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
'dark-primary': '#18181b', 'dark-primary': '#18181b',
accent: { 'accent': {
DEFAULT: '#164e63', DEFAULT: '#164e63',
hover: '#155e75', hover: '#155e75',
}, },
@@ -386,7 +380,6 @@ export function Card({ children, className = "" }) {
``` ```
**Standard breakpoints:** **Standard breakpoints:**
``` ```
sm: 640px // Small tablets sm: 640px // Small tablets
md: 768px // Tablets md: 768px // Tablets
@@ -466,21 +459,18 @@ content/ # Content files (outside app/)
### lib/ Organization ### lib/ Organization
**Modules in lib/:** **Modules in lib/:**
- Substantial business logic (markdown.ts, seo.ts) - Substantial business logic (markdown.ts, seo.ts)
- API clients and data fetching - API clients and data fetching
- Database connections - Database connections
- Authentication logic - Authentication logic
**Utils in lib/utils.ts:** **Utils in lib/utils.ts:**
- Pure helper functions - Pure helper functions
- Formatters (formatDate, formatCurrency) - Formatters (formatDate, formatCurrency)
- Validators (isEmail, isValidUrl) - Validators (isEmail, isValidUrl)
- String manipulations - String manipulations
**Types in lib/types/:** **Types in lib/types/:**
- Shared TypeScript interfaces - Shared TypeScript interfaces
- API response types - API response types
- Domain models - Domain models
@@ -489,7 +479,6 @@ content/ # Content files (outside app/)
### Component Organization ### Component Organization
**By domain/feature:** **By domain/feature:**
``` ```
components/ components/
├── blog/ # Blog-specific ├── blog/ # Blog-specific
@@ -506,7 +495,6 @@ components/
``` ```
**Not by type:** **Not by type:**
``` ```
❌ Don't organize like this: ❌ Don't organize like this:
components/ components/
@@ -519,7 +507,6 @@ components/
### Public Assets ### Public Assets
**Organize by feature:** **Organize by feature:**
``` ```
public/ public/
├── blog/ ├── blog/
@@ -532,7 +519,6 @@ public/
``` ```
**Naming conventions:** **Naming conventions:**
- Use descriptive names: `hero-background.jpg` not `img1.jpg` - Use descriptive names: `hero-background.jpg` not `img1.jpg`
- Use kebab-case: `user-avatar.png` - Use kebab-case: `user-avatar.png`
- Include dimensions for images: `logo-512x512.png` - Include dimensions for images: `logo-512x512.png`
@@ -544,10 +530,9 @@ public/
### Type Safety ### Type Safety
**Avoid `any`:** **Avoid `any`:**
```typescript ```typescript
// ❌ Bad // ❌ Bad
function processData(data: any) {} function processData(data: any) { }
// ✅ Good // ✅ Good
function processData(data: unknown) { function processData(data: unknown) {
@@ -561,7 +546,7 @@ interface PostData {
title: string title: string
content: string content: string
} }
function processData(data: PostData) {} function processData(data: PostData) { }
``` ```
### Infer Types from Zod ### Infer Types from Zod
@@ -680,7 +665,6 @@ export function InteractiveCard({ title }) {
``` ```
**When to use 'use client':** **When to use 'use client':**
- Using React hooks (useState, useEffect, etc.) - Using React hooks (useState, useEffect, etc.)
- Using event handlers (onClick, onChange, etc.) - Using event handlers (onClick, onChange, etc.)
- Using browser APIs (window, localStorage, etc.) - Using browser APIs (window, localStorage, etc.)
@@ -759,7 +743,7 @@ export async function generateStaticParams() {
```typescript ```typescript
// In frontmatter // In frontmatter
date: '2025-01-15' date: "2025-01-15"
// For display // For display
formatDate(post.frontmatter.date) // "15 ianuarie 2025" (Romanian) formatDate(post.frontmatter.date) // "15 ianuarie 2025" (Romanian)

View File

@@ -9,16 +9,12 @@
# - PRODUCTION_HOST: IP address or hostname of production server # - PRODUCTION_HOST: IP address or hostname of production server
# - PRODUCTION_USER: SSH username (e.g., 'deployer') # - PRODUCTION_USER: SSH username (e.g., 'deployer')
# - SSH_PRIVATE_KEY: Private SSH key for authentication # - 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): # Environment Variables (configured below):
# - REGISTRY: Docker registry URL # - REGISTRY: Docker registry URL
# - IMAGE_NAME: Docker image name # - IMAGE_NAME: Docker image name
#
# Docker Registry Configuration:
# - Current registry (repository.workspace:5000) is INSECURE - no authentication required
# - Registry login steps are SKIPPED to avoid 7+ minute timeout delays
# - Docker push/pull operations work without credentials
# - If switching to authenticated registry: uncomment login steps and configure secrets
name: Build and Deploy Next.js Blog to Production name: Build and Deploy Next.js Blog to Production
@@ -40,21 +36,17 @@ jobs:
# ============================================ # ============================================
lint: lint:
name: 🔍 Code Quality Checks name: 🔍 Code Quality Checks
runs-on: node-22 runs-on: ubuntu-latest
# env:
# ACTIONS_RUNTIME_URL: http://192.168.1.53:3000 # Setează la nivel de job
steps: steps:
- name: 🔎 Checkout code - name: 🔎 Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4
# with:
# github-server-url: ${{ env.ACTIONS_RUNTIME_URL }}
# - name: 📦 Setup Node.js - name: 📦 Setup Node.js
# uses: actions/setup-node@v4 uses: actions/setup-node@v4
# with: with:
# node-version: "22" node-version: "20"
# cache: "npm" cache: "npm"
- name: 📥 Install dependencies - name: 📥 Install dependencies
run: npm ci run: npm ci
@@ -64,7 +56,6 @@ jobs:
- name: 💅 Check code formatting (Prettier) - name: 💅 Check code formatting (Prettier)
run: npm run format:check run: npm run format:check
continue-on-error: true
- name: 🔤 TypeScript type checking - name: 🔤 TypeScript type checking
run: npx tsc --noEmit run: npx tsc --noEmit
@@ -88,32 +79,15 @@ jobs:
- name: 🔎 Checkout code - name: 🔎 Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4
# Insecure registry configuration - no authentication required - name: 🔐 Log in to Docker Registry (if credentials provided)
# The registry at repository.workspace:5000 does not require login
# Docker push/pull operations work without credentials
- name: Registry configuration (insecure - no login required)
run: | run: |
echo "=== Docker Registry Configuration ===" if [ -n "${{ secrets.REGISTRY_USERNAME }}" ] && [ -n "${{ secrets.REGISTRY_PASSWORD }}" ]; then
echo "Registry: ${{ env.REGISTRY }}" echo "Logging into ${{ env.REGISTRY }} with credentials..."
echo "Type: Insecure (no authentication required)" echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin
echo "" echo "✅ Login successful"
echo " Skipping registry login - insecure registry allows push/pull without credentials" else
echo "" echo "⚠️ No registry credentials provided - using insecure/public registry"
echo "If your registry requires authentication in the future:" fi
echo " 1. Set REGISTRY_USERNAME and REGISTRY_PASSWORD secrets in Gitea"
echo " 2. Uncomment the login step below this message"
echo " 3. Change registry URL to authenticated registry"
# Uncomment this step if registry requires authentication in the future
# - name: 🔐 Log in to Docker Registry
# timeout-minutes: 1
# run: |
# if [ -n "${{ secrets.REGISTRY_USERNAME }}" ] && [ -n "${{ secrets.REGISTRY_PASSWORD }}" ]; then
# echo "Attempting login to ${{ env.REGISTRY }}..."
# timeout 30s bash -c 'echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin' || {
# echo "⚠️ Login failed - continuing anyway"
# }
# fi
- name: 🏗️ Build Docker image - name: 🏗️ Build Docker image
timeout-minutes: 30 timeout-minutes: 30
@@ -128,11 +102,11 @@ jobs:
# - Uses Dockerfile.nextjs from project root # - Uses Dockerfile.nextjs from project root
# - Tags image with both 'latest' and commit SHA # - Tags image with both 'latest' and commit SHA
# - Enables inline cache for faster subsequent builds # - Enables inline cache for faster subsequent builds
# -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} ❗ do this if deploying on PR creation
docker build \ docker build \
--progress=plain \ --progress=plain \
--build-arg BUILDKIT_INLINE_CACHE=1 \ --build-arg BUILDKIT_INLINE_CACHE=1 \
-t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest \ -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest \
-t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} \
-f Dockerfile.nextjs \ -f Dockerfile.nextjs \
. .
@@ -146,11 +120,11 @@ jobs:
# Push both tags (latest and commit SHA) # Push both tags (latest and commit SHA)
docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
# docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
echo "✅ Image pushed successfully" echo "✅ Image pushed successfully"
echo " - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest" echo " - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest"
# echo " - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}" echo " - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
# ============================================ # ============================================
# Job 2: Deploy to Production Server # Job 2: Deploy to Production Server
@@ -161,41 +135,42 @@ jobs:
needs: [build-and-push] # Wait for build job to complete needs: [build-and-push] # Wait for build job to complete
environment: environment:
name: production name: production
url: http://192.168.1.54:3030 # Update with your actual production URL url: http://your-production-url.com # Update with your actual production URL
steps: steps:
- name: 🔎 Checkout code (for docker-compose file) - name: 🔎 Checkout code (for docker-compose file)
uses: actions/checkout@v4 uses: actions/checkout@v4
# Verify Docker is accessible on production server - name: 🔐 Validate Registry Access on Production Server
# Registry authentication is not required for insecure registry
- name: Verify production server Docker access
uses: appleboy/ssh-action@v1.0.3 uses: appleboy/ssh-action@v1.0.3
env:
REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
REGISTRY_URL: ${{ env.REGISTRY }}
with: with:
host: ${{ vars.PRODUCTION_HOST }} host: ${{ secrets.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }} username: ${{ secrets.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }} key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22 port: 22
envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL
script: | script: |
echo "=== Verifying Docker is accessible ===" echo "=== Validating Docker Registry access ==="
docker info > /dev/null 2>&1 || { if [ -n "$REGISTRY_USERNAME" ] && [ -n "$REGISTRY_PASSWORD" ]; then
echo "❌ Docker is not running or user has no access" echo "Logging into $REGISTRY_URL with credentials..."
echo "Please ensure Docker is installed and user is in docker group" echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" -u "$REGISTRY_USERNAME" --password-stdin
exit 1 echo "✅ Registry authentication successful"
} else
echo "✅ Docker is accessible" echo "⚠️ No registry credentials - using insecure/public registry"
echo "Testing registry connectivity..."
echo "" curl -f "http://$REGISTRY_URL/v2/" || { echo "❌ Registry not accessible"; exit 1; }
echo "=== Registry Configuration ===" echo " Registry is accessible"
echo "Registry: ${{ env.REGISTRY }}" fi
echo "Type: Insecure (no authentication)"
echo " Skipping registry login - push/pull will work without credentials"
- name: 📁 Ensure application directory structure - name: 📁 Ensure application directory structure
uses: appleboy/ssh-action@v1.0.3 uses: appleboy/ssh-action@v1.0.3
with: with:
host: ${{ vars.PRODUCTION_HOST }} host: ${{ secrets.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }} username: ${{ secrets.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }} key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22 port: 22
script: | script: |
@@ -229,8 +204,8 @@ jobs:
- name: 📦 Copy docker-compose.prod.yml to server - name: 📦 Copy docker-compose.prod.yml to server
uses: appleboy/scp-action@v0.1.7 uses: appleboy/scp-action@v0.1.7
with: with:
host: ${{ vars.PRODUCTION_HOST }} host: ${{ secrets.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }} username: ${{ secrets.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }} key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22 port: 22
source: "docker-compose.prod.yml" source: "docker-compose.prod.yml"
@@ -240,14 +215,13 @@ jobs:
- name: 🐳 Deploy application via Docker Compose - name: 🐳 Deploy application via Docker Compose
uses: appleboy/ssh-action@v1.0.3 uses: appleboy/ssh-action@v1.0.3
env: env:
# Optional: only needed if registry requires authentication
REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD || '' }} REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD || '' }}
REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME || '' }} REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME || '' }}
REGISTRY_URL: ${{ env.REGISTRY }} REGISTRY_URL: ${{ env.REGISTRY }}
IMAGE_FULL: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest IMAGE_FULL: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
with: with:
host: ${{ vars.PRODUCTION_HOST }} host: ${{ secrets.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }} username: ${{ secrets.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }} key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22 port: 22
envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL,IMAGE_FULL envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL,IMAGE_FULL
@@ -256,12 +230,14 @@ jobs:
echo "=== Starting deployment to production server ===" echo "=== Starting deployment to production server ==="
cd /opt/mypage cd /opt/mypage
# Registry configuration - insecure registry does not require authentication # Log in to Docker registry (if credentials are configured)
echo "=== Registry Configuration ===" if [ -n "$REGISTRY_USERNAME" ] && [ -n "$REGISTRY_PASSWORD" ]; then
echo "Registry: $REGISTRY_URL" echo "=== Logging in to Docker registry ==="
echo "Type: Insecure (no authentication required)" echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" -u "$REGISTRY_USERNAME" --password-stdin
echo " Skipping registry login" echo "✅ Registry login successful"
echo "" else
echo "⚠️ No registry credentials - using insecure/public registry (no login required)"
fi
# Pull latest image from registry # Pull latest image from registry
echo "=== Pulling latest Docker image ===" echo "=== Pulling latest Docker image ==="
@@ -302,8 +278,8 @@ jobs:
- name: ❤️ Health check - name: ❤️ Health check
uses: appleboy/ssh-action@v1.0.3 uses: appleboy/ssh-action@v1.0.3
with: with:
host: ${{ vars.PRODUCTION_HOST }} host: ${{ secrets.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }} username: ${{ secrets.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }} key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22 port: 22
script: | script: |

View File

@@ -1,366 +0,0 @@
# Gitea Actions Workflow for Next.js Blog Application - Staging Environment
# This workflow builds a Docker image and deploys it to staging
#
# Workflow triggers:
# - Push to staging branch (automatic deployment)
# - Manual trigger via workflow_dispatch
#
# Required Secrets (configure in Gitea repository settings):
# - PRODUCTION_HOST: IP address or hostname of production server (same server hosts staging)
# - PRODUCTION_USER: SSH username (e.g., 'deployer')
# - SSH_PRIVATE_KEY: Private SSH key for authentication
#
# Environment Variables (configured below):
# - REGISTRY: Docker registry URL
# - IMAGE_NAME: Docker image name
#
# Docker Registry Configuration:
# - Current registry (repository.workspace:5000) is INSECURE - no authentication required
# - Registry login steps are SKIPPED to avoid 7+ minute timeout delays
# - Docker push/pull operations work without credentials
# - If switching to authenticated registry: uncomment login steps and configure secrets
name: Build and Deploy Next.js Blog to Staging
on:
push:
branches:
- staging # Trigger on push to staging 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: node-22
# env:
# ACTIONS_RUNTIME_URL: http://192.168.1.53:3000 # Setează la nivel de job
steps:
- name: 🔎 Checkout code
uses: actions/checkout@v4
# with:
# github-server-url: ${{ env.ACTIONS_RUNTIME_URL }}
# - name: 📦 Setup Node.js
# uses: actions/setup-node@v4
# with:
# node-version: "22"
# 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
continue-on-error: true
- 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
# Insecure registry configuration - no authentication required
# The registry at repository.workspace:5000 does not require login
# Docker push/pull operations work without credentials
- name: Registry configuration (insecure - no login required)
run: |
echo "=== Docker Registry Configuration ==="
echo "Registry: ${{ env.REGISTRY }}"
echo "Type: Insecure (no authentication required)"
echo ""
echo " Skipping registry login - insecure registry allows push/pull without credentials"
echo ""
echo "If your registry requires authentication in the future:"
echo " 1. Set REGISTRY_USERNAME and REGISTRY_PASSWORD secrets in Gitea"
echo " 2. Uncomment the login step below this message"
echo " 3. Change registry URL to authenticated registry"
# Uncomment this step if registry requires authentication in the future
# - name: 🔐 Log in to Docker Registry
# timeout-minutes: 1
# run: |
# if [ -n "${{ secrets.REGISTRY_USERNAME }}" ] && [ -n "${{ secrets.REGISTRY_PASSWORD }}" ]; then
# echo "Attempting login to ${{ env.REGISTRY }}..."
# timeout 30s bash -c 'echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin' || {
# echo "⚠️ Login failed - continuing anyway"
# }
# 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 (staging)..."
echo "Build context size:"
du -sh . 2>/dev/null || echo "Cannot measure context size"
# Build the Docker image for staging
# - Uses Dockerfile.nextjs from project root
# - Tags image with 'staging' tag
# - Enables inline cache for faster subsequent builds
docker build \
--progress=plain \
--build-arg BUILDKIT_INLINE_CACHE=1 \
-t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging \
-f Dockerfile.nextjs \
.
echo "✅ Build successful"
echo "Image size:"
docker images ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging
- name: 🚀 Push Docker image to registry
run: |
echo "Pushing staging image to registry..."
# Push staging tag
docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging
echo "✅ Image pushed successfully"
echo " - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging"
# ============================================
# Job 3: Deploy to Staging Server
# ============================================
deploy-staging:
name: 🚀 Deploy to Staging
runs-on: ubuntu-latest
needs: [build-and-push] # Wait for build job to complete
environment:
name: staging
url: http://192.168.1.54:3031
steps:
- name: 🔎 Checkout code (for docker-compose file)
uses: actions/checkout@v4
# Verify Docker is accessible on staging server
# Registry authentication is not required for insecure registry
- name: Verify staging server Docker access
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ vars.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22
script: |
echo "=== Verifying Docker is accessible ==="
docker info > /dev/null 2>&1 || {
echo "❌ Docker is not running or user has no access"
echo "Please ensure Docker is installed and user is in docker group"
exit 1
}
echo "✅ Docker is accessible"
echo ""
echo "=== Registry Configuration ==="
echo "Registry: ${{ env.REGISTRY }}"
echo "Type: Insecure (no authentication)"
echo " Skipping registry login - push/pull will work without credentials"
- name: 📁 Ensure staging directory structure
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ vars.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22
script: |
echo "=== Ensuring staging directory structure ==="
# Verify base directory exists and is writable
# Update /opt/mypage-staging to match your deployment directory
if [ ! -d /opt/mypage-staging ]; then
echo "❌ /opt/mypage-staging does not exist!"
echo "Please run manually on staging server:"
echo " sudo mkdir -p /opt/mypage-staging"
echo " sudo chown -R deployer:docker /opt/mypage-staging"
echo " sudo chmod -R 775 /opt/mypage-staging"
exit 1
fi
if [ ! -w /opt/mypage-staging ]; then
echo "❌ /opt/mypage-staging is not writable by $USER user"
echo "Please run manually on staging server:"
echo " sudo chown -R deployer:docker /opt/mypage-staging"
echo " sudo chmod -R 775 /opt/mypage-staging"
exit 1
fi
# Create data directories for logs
mkdir -p /opt/mypage-staging/data/logs || { echo "❌ Failed to create logs directory"; exit 1; }
echo "✅ Directory structure ready"
ls -la /opt/mypage-staging
- name: 📦 Copy docker-compose.staging.yml to staging server
uses: appleboy/scp-action@v0.1.7
with:
host: ${{ vars.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22
source: "docker-compose.staging.yml"
target: "/opt/mypage-staging/"
overwrite: true
- name: 🐳 Deploy application via Docker Compose
uses: appleboy/ssh-action@v1.0.3
env:
# Optional: only needed if registry requires authentication
REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD || '' }}
REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME || '' }}
REGISTRY_URL: ${{ env.REGISTRY }}
IMAGE_FULL: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging
with:
host: ${{ vars.PRODUCTION_HOST }}
username: ${{ vars.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 staging server ==="
cd /opt/mypage-staging
# Registry configuration - insecure registry does not require authentication
echo "=== Registry Configuration ==="
echo "Registry: $REGISTRY_URL"
echo "Type: Insecure (no authentication required)"
echo " Skipping registry login"
echo ""
# Verify docker-compose.staging.yml exists (copied by previous step)
if [ ! -f docker-compose.staging.yml ]; then
echo "❌ docker-compose.staging.yml not found in /opt/mypage-staging"
echo "File should have been copied by CI/CD workflow"
exit 1
fi
echo "✅ Using docker-compose.staging.yml"
# Pull latest staging image from registry
echo "=== Pulling latest Docker image (staging) ==="
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 staging container ==="
docker compose -f docker-compose.staging.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.staging.yml ps
# Show recent logs for debugging
echo "=== Recent application logs ==="
docker compose -f docker-compose.staging.yml logs --tail=50
# Clean up old/unused images to save disk space
echo "=== Cleaning up old Docker images ==="
docker image prune -f
echo "✅ Staging deployment completed successfully ==="
- name: ❤️ Health check
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ vars.PRODUCTION_HOST }}
username: ${{ vars.PRODUCTION_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
port: 22
script: |
echo "=== Performing health check ==="
cd /opt/mypage-staging
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 3031
if curl -f http://localhost:3031/ > /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.staging.yml ps
echo ""
echo "=== Container Health ==="
docker inspect mypage-staging --format='{{.State.Health.Status}}' 2>/dev/null || echo "No health status"
echo ""
echo "=== Recent Application Logs ==="
docker compose -f docker-compose.staging.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**: Staging" >> $GITHUB_STEP_SUMMARY
echo "- **Image**: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging" >> $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 http://192.168.1.54:3031" >> $GITHUB_STEP_SUMMARY
echo "2. Check application logs for any errors" >> $GITHUB_STEP_SUMMARY
echo "3. Test staging features before promoting to production" >> $GITHUB_STEP_SUMMARY

View File

@@ -1,9 +0,0 @@
node_modules
.next
out
build
dist
.cache
package-lock.json
public
coverage

View File

@@ -1,7 +0,0 @@
{
"semi": false,
"singleQuote": true,
"printWidth": 100,
"arrowParens": "avoid",
"trailingComma": "es5"
}

View File

@@ -74,12 +74,11 @@ lib/
``` ```
**Frontmatter Schema:** **Frontmatter Schema:**
```yaml ```yaml
--- ---
title: string # Required title: string # Required
description: string # Required description: string # Required
date: 'YYYY-MM-DD' # Required, ISO format date: "YYYY-MM-DD" # Required, ISO format
author: string # Required author: string # Required
tags: [string, string?, string?] # Max 3 tags tags: [string, string?, string?] # Max 3 tags
image?: string # Optional hero image image?: string # Optional hero image
@@ -108,25 +107,20 @@ components/
### File Naming Conventions ### File Naming Conventions
**Files and Directories:** **Files and Directories:**
- Use **kebab-case** for all file names: `user-profile.tsx`, `blog-post.tsx` - Use **kebab-case** for all file names: `user-profile.tsx`, `blog-post.tsx`
- Special Next.js files: `page.tsx`, `layout.tsx`, `not-found.tsx`, `loading.tsx` - Special Next.js files: `page.tsx`, `layout.tsx`, `not-found.tsx`, `loading.tsx`
**Component Names (inside files):** **Component Names (inside files):**
- Use **PascalCase**: `export function UserProfile()`, `export default BlogPost` - Use **PascalCase**: `export function UserProfile()`, `export default BlogPost`
**Variables, Functions, Props:** **Variables, Functions, Props:**
- Use **camelCase**: `const userSettings = {}`, `function handleSubmit() {}` - Use **camelCase**: `const userSettings = {}`, `function handleSubmit() {}`
- Hooks: `useTheme`, `useMarkdown` - Hooks: `useTheme`, `useMarkdown`
**Constants:** **Constants:**
- Use **SCREAMING_SNAKE_CASE**: `const API_BASE_URL = "..."` - Use **SCREAMING_SNAKE_CASE**: `const API_BASE_URL = "..."`
**Why kebab-case for files?** **Why kebab-case for files?**
- Cross-platform compatibility (Windows vs Unix) - Cross-platform compatibility (Windows vs Unix)
- URL-friendly (file names often map to routes) - URL-friendly (file names often map to routes)
- Easier to parse and read - Easier to parse and read
@@ -158,7 +152,6 @@ export default function RootLayout({ children }) {
``` ```
**Client Component for Toggle:** **Client Component for Toggle:**
```typescript ```typescript
// components/theme-toggle.tsx // components/theme-toggle.tsx
'use client' 'use client'
@@ -180,7 +173,6 @@ export function ThemeToggle() {
``` ```
**Tailwind Configuration:** **Tailwind Configuration:**
```javascript ```javascript
// tailwind.config.js // tailwind.config.js
module.exports = { module.exports = {
@@ -190,15 +182,14 @@ module.exports = {
colors: { colors: {
// Define custom colors for consistency // Define custom colors for consistency
'dark-primary': '#18181b', 'dark-primary': '#18181b',
accent: { DEFAULT: '#164e63', hover: '#155e75' }, 'accent': { DEFAULT: '#164e63', hover: '#155e75' }
}, }
}, }
}, }
} }
``` ```
**CSS Variables Pattern:** **CSS Variables Pattern:**
```css ```css
/* globals.css */ /* globals.css */
:root { :root {
@@ -228,7 +219,6 @@ module.exports = {
### Next.js 16 Specific Patterns ### Next.js 16 Specific Patterns
**Async Server Components:** **Async Server Components:**
```typescript ```typescript
// app/blog/page.tsx // app/blog/page.tsx
export default async function BlogPage() { export default async function BlogPage() {
@@ -238,7 +228,6 @@ export default async function BlogPage() {
``` ```
**Static Generation with Dynamic Routes:** **Static Generation with Dynamic Routes:**
```typescript ```typescript
// app/blog/[...slug]/page.tsx // app/blog/[...slug]/page.tsx
export async function generateStaticParams() { export async function generateStaticParams() {
@@ -253,7 +242,6 @@ export async function generateMetadata({ params }) {
``` ```
**Parallel Routes for Layout Composition:** **Parallel Routes for Layout Composition:**
```typescript ```typescript
// app/layout.tsx // app/layout.tsx
export default function RootLayout({ export default function RootLayout({
@@ -290,14 +278,12 @@ export default function RootLayout({
### Styling Guidelines ### Styling Guidelines
**Color Palette:** **Color Palette:**
- Backgrounds: `zinc-900`, `slate-900`, `slate-800` - Backgrounds: `zinc-900`, `slate-900`, `slate-800`
- Accents: `cyan-900`, `emerald-900`, `teal-900` - Accents: `cyan-900`, `emerald-900`, `teal-900`
- Text: `slate-100`, `slate-300`, `slate-500` - Text: `slate-100`, `slate-300`, `slate-500`
- Borders: `border-2`, `border-4` (thick, sharp) - Borders: `border-2`, `border-4` (thick, sharp)
**Design Tokens:** **Design Tokens:**
- **NO rounded corners:** Use `rounded-none` or omit (default is sharp) - **NO rounded corners:** Use `rounded-none` or omit (default is sharp)
- **Monospace fonts:** Apply `font-mono` for terminal aesthetic - **Monospace fonts:** Apply `font-mono` for terminal aesthetic
- **Uppercase labels:** Use `uppercase tracking-wider` for headers - **Uppercase labels:** Use `uppercase tracking-wider` for headers
@@ -305,7 +291,6 @@ export default function RootLayout({
- **Classification labels:** Add metadata like "FILE#001", "DOCUMENT LEVEL-1" - **Classification labels:** Add metadata like "FILE#001", "DOCUMENT LEVEL-1"
**Typography:** **Typography:**
- Primary font: `JetBrains Mono` (monospace) - Primary font: `JetBrains Mono` (monospace)
- Headings: `font-mono font-bold uppercase` - Headings: `font-mono font-bold uppercase`
- Body: `font-mono text-sm` - Body: `font-mono text-sm`

View File

@@ -1,4 +1,4 @@
import { Breadcrumbs } from '@/components/layout/Breadcrumbs' import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
export default function AboutBreadcrumb() { export default function AboutBreadcrumb() {
return ( return (
@@ -11,5 +11,5 @@ export default function AboutBreadcrumb() {
}, },
]} ]}
/> />
) );
} }

View File

@@ -1,10 +1,10 @@
import { Breadcrumbs } from '@/components/layout/Breadcrumbs' import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
import { getPostBySlug } from '@/lib/markdown' import { getPostBySlug } from '@/lib/markdown';
interface BreadcrumbItem { interface BreadcrumbItem {
label: string label: string;
href: string href: string;
current?: boolean current?: boolean;
} }
function formatDirectoryName(name: string): string { function formatDirectoryName(name: string): string {
@@ -12,34 +12,34 @@ function formatDirectoryName(name: string): string {
tech: 'Tehnologie', tech: 'Tehnologie',
design: 'Design', design: 'Design',
tutorial: 'Tutoriale', tutorial: 'Tutoriale',
} };
return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1) return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
} }
export default async function BlogPostBreadcrumb({ export default async function BlogPostBreadcrumb({
params, params,
}: { }: {
params: Promise<{ slug: string[] }> params: Promise<{ slug: string[] }>;
}) { }) {
const { slug } = await params const { slug } = await params;
const slugPath = slug.join('/') const slugPath = slug.join('/');
const post = getPostBySlug(slugPath) const post = getPostBySlug(slugPath);
const items: BreadcrumbItem[] = [ const items: BreadcrumbItem[] = [
{ {
label: 'Blog', label: 'Blog',
href: '/blog', href: '/blog',
}, },
] ];
if (slug.length > 1) { if (slug.length > 1) {
for (let i = 0; i < slug.length - 1; i++) { for (let i = 0; i < slug.length - 1; i++) {
const segmentPath = slug.slice(0, i + 1).join('/') const segmentPath = slug.slice(0, i + 1).join('/');
items.push({ items.push({
label: formatDirectoryName(slug[i]), label: formatDirectoryName(slug[i]),
href: `/blog/${segmentPath}`, href: `/blog/${segmentPath}`,
}) });
} }
} }
@@ -47,7 +47,7 @@ export default async function BlogPostBreadcrumb({
label: post ? post.frontmatter.title : slug[slug.length - 1], label: post ? post.frontmatter.title : slug[slug.length - 1],
href: `/blog/${slugPath}`, href: `/blog/${slugPath}`,
current: true, current: true,
}) });
return <Breadcrumbs items={items} /> return <Breadcrumbs items={items} />;
} }

View File

@@ -1,4 +1,4 @@
import { Breadcrumbs } from '@/components/layout/Breadcrumbs' import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
export default function BlogBreadcrumb() { export default function BlogBreadcrumb() {
return ( return (
@@ -11,5 +11,5 @@ export default function BlogBreadcrumb() {
}, },
]} ]}
/> />
) );
} }

View File

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

View File

@@ -1,11 +1,15 @@
import { Breadcrumbs } from '@/components/layout/Breadcrumbs' import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
export default async function TagBreadcrumb({ params }: { params: Promise<{ tag: string }> }) { export default async function TagBreadcrumb({
const { tag } = await params params,
}: {
params: Promise<{ tag: string }>;
}) {
const { tag } = await params;
const tagName = tag const tagName = tag
.split('-') .split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) .map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ') .join(' ');
return ( return (
<Breadcrumbs <Breadcrumbs
@@ -21,5 +25,5 @@ export default async function TagBreadcrumb({ params }: { params: Promise<{ tag:
}, },
]} ]}
/> />
) );
} }

View File

@@ -1,4 +1,4 @@
import { Breadcrumbs } from '@/components/layout/Breadcrumbs' import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
export default function TagsBreadcrumb() { export default function TagsBreadcrumb() {
return ( return (
@@ -11,5 +11,5 @@ export default function TagsBreadcrumb() {
}, },
]} ]}
/> />
) );
} }

View File

@@ -12,8 +12,8 @@ export default function AboutPage() {
<div className="prose dark:prose-invert max-w-none"> <div className="prose dark:prose-invert max-w-none">
<p className="text-lg leading-relaxed mb-6"> <p className="text-lg leading-relaxed mb-6">
Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat în Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie,
dezvoltarea web modernă cu Next.js, React și TypeScript. specializat în dezvoltarea web modernă cu Next.js, React și TypeScript.
</p> </p>
<h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2> <h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
@@ -27,18 +27,10 @@ export default function AboutPage() {
<h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2> <h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
<p>Acest blog este construit cu:</p> <p>Acest blog este construit cu:</p>
<ul className="space-y-2"> <ul className="space-y-2">
<li> <li><strong>Next.js 15</strong> - Framework React pentru producție</li>
<strong>Next.js 15</strong> - Framework React pentru producție <li><strong>TypeScript</strong> - Pentru type safety</li>
</li> <li><strong>Tailwind CSS</strong> - Pentru stilizare rapidă</li>
<li> <li><strong>Markdown</strong> - Pentru conținut</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> </ul>
<h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2> <h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>

View File

@@ -10,16 +10,10 @@ export default function NotFound() {
Ne pare rău, dar articolul pe care îl cauți nu există sau a fost mutat. Ne pare rău, dar articolul pe care îl cauți nu există sau a fost mutat.
</p> </p>
<div className="space-x-4"> <div className="space-x-4">
<Link <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
href="/blog"
className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition"
>
Vezi toate articolele Vezi toate articolele
</Link> </Link>
<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">
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ă Pagina principală
</Link> </Link>
</div> </div>

View File

@@ -10,14 +10,10 @@ import MarkdownRenderer from '@/components/blog/markdown-renderer'
export async function generateStaticParams() { export async function generateStaticParams() {
const posts = await getAllPosts() const posts = await getAllPosts()
return posts.map(post => ({ slug: post.slug.split('/') })) return posts.map((post) => ({ slug: post.slug.split('/') }))
} }
export async function generateMetadata({ export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }): Promise<Metadata> {
params,
}: {
params: Promise<{ slug: string[] }>
}): Promise<Metadata> {
const { slug } = await params const { slug } = await params
const slugPath = slug.join('/') const slugPath = slug.join('/')
const post = getPostBySlug(slugPath) const post = getPostBySlug(slugPath)
@@ -55,10 +51,7 @@ function extractHeadings(content: string) {
while ((match = headingRegex.exec(content)) !== null) { while ((match = headingRegex.exec(content)) !== null) {
const level = match[1].length const level = match[1].length
const text = match[2] const text = match[2]
const id = text const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '')
headings.push({ id, text, level }) headings.push({ id, text, level })
} }
@@ -101,13 +94,12 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
</div> </div>
<div className="flex flex-wrap gap-2 mb-2"> <div className="flex flex-wrap gap-2 mb-2">
{post.frontmatter.tags.map((tag: string) => ( {post.frontmatter.tags.map((tag: string) => (
<Link <span
key={tag} key={tag}
href={`/tags/${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" 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} #{tag}
</Link> </span>
))} ))}
</div> </div>
</div> </div>
@@ -118,8 +110,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
</h1> </h1>
<p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono"> <p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono">
<span className="text-[var(--neon-pink)]">&gt;&gt;</span>{' '} <span className="text-[var(--neon-pink)]">&gt;&gt;</span> {post.frontmatter.description}
{post.frontmatter.description}
</p> </p>
</div> </div>
@@ -130,13 +121,9 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
</span> </span>
</div> </div>
<div> <div>
<p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm"> <p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm">{post.frontmatter.author}</p>
{post.frontmatter.author}
</p>
<div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono"> <div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono">
<time className="text-[var(--neon-magenta)]"> <time className="text-[var(--neon-magenta)]">{formatDate(post.frontmatter.date)}</time>
{formatDate(post.frontmatter.date)}
</time>
<span className="text-[var(--neon-pink)]">//</span> <span className="text-[var(--neon-pink)]">//</span>
<span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span> <span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span>
</div> </div>
@@ -160,25 +147,17 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
{relatedPosts.length > 0 && ( {relatedPosts.length > 0 && (
<section className="mt-12 pt-8 border-t border-zinc-800"> <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"> <h2 className="text-2xl font-mono font-bold uppercase text-[var(--neon-cyan)] mb-6">// Articole similare</h2>
// Articole similare
</h2>
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
{relatedPosts.map(relatedPost => ( {relatedPosts.map((relatedPost) => (
<Link <Link
key={relatedPost.slug} key={relatedPost.slug}
href={`/blog/${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)]" 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"> <h3 className="font-mono font-semibold text-cyan-400 mb-2 line-clamp-2">{relatedPost.frontmatter.title}</h3>
{relatedPost.frontmatter.title} <p className="text-sm text-zinc-400 line-clamp-2">{relatedPost.frontmatter.description}</p>
</h3> <p className="text-xs text-zinc-600 mt-2 font-mono">{formatDate(relatedPost.frontmatter.date)}</p>
<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> </Link>
))} ))}
</div> </div>
@@ -191,12 +170,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
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)]" 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"> <svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg> </svg>
[BACK TO BLOG] [BACK TO BLOG]
</Link> </Link>

View File

@@ -23,14 +23,15 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
const postsPerPage = 9 const postsPerPage = 9
const filteredAndSortedPosts = useMemo(() => { const filteredAndSortedPosts = useMemo(() => {
const result = posts.filter(post => { let result = posts.filter((post) => {
const matchesSearch = const matchesSearch =
searchQuery === '' || searchQuery === '' ||
post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) || post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase()) post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase())
const matchesTags = const matchesTags =
selectedTags.length === 0 || selectedTags.every(tag => post.frontmatter.tags.includes(tag)) selectedTags.length === 0 ||
selectedTags.every((tag) => post.frontmatter.tags.includes(tag))
return matchesSearch && matchesTags return matchesSearch && matchesTags
}) })
@@ -57,12 +58,15 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
) )
const toggleTag = (tag: string) => { const toggleTag = (tag: string) => {
setSelectedTags(prev => (prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag])) setSelectedTags((prev) =>
prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
)
setCurrentPage(1) setCurrentPage(1)
} }
return ( return (
<div className="min-h-screen bg-[rgb(var(--bg-primary))]"> <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
<div className="max-w-7xl mx-auto px-6 py-12"> <div className="max-w-7xl mx-auto px-6 py-12">
{/* Header */} {/* Header */}
<div className="border-l border-[var(--neon-cyan)] pl-6 mb-12"> <div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
@@ -79,12 +83,15 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
<div className="flex flex-col lg:flex-row gap-4"> <div className="flex flex-col lg:flex-row gap-4">
<SearchBar <SearchBar
searchQuery={searchQuery} searchQuery={searchQuery}
onSearchChange={value => { onSearchChange={(value) => {
setSearchQuery(value) setSearchQuery(value)
setCurrentPage(1) setCurrentPage(1)
}} }}
/> />
<SortDropdown sortBy={sortBy} onSortChange={setSortBy} /> <SortDropdown
sortBy={sortBy}
onSortChange={setSortBy}
/>
</div> </div>
</div> </div>
@@ -102,8 +109,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
{/* Results Count */} {/* Results Count */}
<div className="mb-6"> <div className="mb-6">
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase"> <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
FOUND {filteredAndSortedPosts.length}{' '} FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
{filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
</p> </p>
</div> </div>
@@ -136,14 +142,14 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6"> <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button <button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))} onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
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" 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 &lt; PREV
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{Array.from({ length: totalPages }, (_, i) => i + 1).map(page => ( {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<button <button
key={page} key={page}
onClick={() => setCurrentPage(page)} onClick={() => setCurrentPage(page)}
@@ -158,7 +164,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
))} ))}
</div> </div>
<button <button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
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" 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"
> >

View File

@@ -3,7 +3,7 @@ import BlogPageClient from './blog-client'
export default async function BlogPage() { export default async function BlogPage() {
const posts = await getAllPosts() const posts = await getAllPosts()
const allTags = Array.from(new Set(posts.flatMap(post => post.frontmatter.tags))).sort() const allTags = Array.from(new Set(posts.flatMap((post) => post.frontmatter.tags))).sort()
return <BlogPageClient posts={posts} allTags={allTags} /> return <BlogPageClient posts={posts} allTags={allTags} />
} }

View File

@@ -1,4 +1,4 @@
@import 'tailwindcss'; @import "tailwindcss";
@theme { @theme {
--color-*: initial; --color-*: initial;
@@ -70,7 +70,12 @@
/* Scanline effect */ /* Scanline effect */
.scanline { .scanline {
background: linear-gradient(0deg, transparent 0%, rgba(6, 182, 212, 0.1) 50%, transparent 100%); background: linear-gradient(
0deg,
transparent 0%,
rgba(6, 182, 212, 0.1) 50%,
transparent 100%
);
background-size: 100% 3px; background-size: 100% 3px;
pointer-events: none; pointer-events: none;
} }
@@ -130,43 +135,19 @@
} }
@keyframes glitch-1 { @keyframes glitch-1 {
0%, 0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
100% { 20% { clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%); }
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); 40% { clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%); }
transform: translate(0); 60% { clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%); }
} 80% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
20% {
clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%);
}
40% {
clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%);
}
60% {
clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%);
}
80% {
clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%);
}
} }
@keyframes glitch-2 { @keyframes glitch-2 {
0%, 0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
100% { 20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); 40% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); }
transform: translate(0); 60% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
} 80% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); }
20% {
clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%);
}
40% {
clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%);
}
60% {
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}
80% {
clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%);
}
} }
/* Grayscale filter with instant toggle */ /* Grayscale filter with instant toggle */
@@ -181,7 +162,7 @@
/* Cyberpunk Glitch Effect for Button */ /* Cyberpunk Glitch Effect for Button */
.glitch-btn { .glitch-btn {
position: relative; position: relative;
animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: glitch 300ms cubic-bezier(.25, .46, .45, .94);
} }
.glitch-layer { .glitch-layer {
@@ -198,22 +179,21 @@
} }
.glitch-layer:first-of-type { .glitch-layer:first-of-type {
animation: glitch-1 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: glitch-1 300ms cubic-bezier(.25, .46, .45, .94);
color: rgb(6 182 212); /* cyan-500 */ color: rgb(6 182 212); /* cyan-500 */
transform: translate(-2px, 0); transform: translate(-2px, 0);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
} }
.glitch-layer:last-of-type { .glitch-layer:last-of-type {
animation: glitch-2 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: glitch-2 300ms cubic-bezier(.25, .46, .45, .94);
color: rgb(16 185 129); /* emerald-500 */ color: rgb(16 185 129); /* emerald-500 */
transform: translate(2px, 0); transform: translate(2px, 0);
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
} }
@keyframes glitch-1 { @keyframes glitch-1 {
0%, 0%, 100% {
100% {
transform: translate(0, 0); transform: translate(0, 0);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
} }
@@ -232,8 +212,7 @@
} }
@keyframes glitch-2 { @keyframes glitch-2 {
0%, 0%, 100% {
100% {
transform: translate(0, 0); transform: translate(0, 0);
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
} }
@@ -283,8 +262,7 @@
/* SCP-style subtle flicker hover */ /* SCP-style subtle flicker hover */
@keyframes scp-flicker { @keyframes scp-flicker {
0%, 0%, 100% {
100% {
border-color: rgb(71 85 105); border-color: rgb(71 85 105);
box-shadow: 0 0 0 rgba(90, 139, 149, 0); box-shadow: 0 0 0 rgba(90, 139, 149, 0);
transform: translate(0, 0); transform: translate(0, 0);
@@ -314,9 +292,7 @@
.cyber-glitch-hover:hover { .cyber-glitch-hover:hover {
animation: scp-flicker 150ms ease-in-out 3; animation: scp-flicker 150ms ease-in-out 3;
border-color: var(--neon-cyan) !important; border-color: var(--neon-cyan) !important;
box-shadow: box-shadow: 0 1px 4px rgba(90, 139, 149, 0.15), inset 0 0 8px rgba(90, 139, 149, 0.05);
0 1px 4px rgba(90, 139, 149, 0.15),
inset 0 0 8px rgba(90, 139, 149, 0.05);
} }
/* Navbar hide on scroll */ /* Navbar hide on scroll */
@@ -429,9 +405,7 @@
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
position: relative; position: relative;
box-shadow: box-shadow: -4px 0 15px rgba(155,90,142,0.3), inset 0 0 20px rgba(155,90,142,0.05);
-4px 0 15px rgba(155, 90, 142, 0.3),
inset 0 0 20px rgba(155, 90, 142, 0.05);
} }
.cyberpunk-prose blockquote::before { .cyberpunk-prose blockquote::before {
@@ -452,8 +426,8 @@
font-size: 0.875rem; font-size: 0.875rem;
font-family: monospace; font-family: monospace;
border: 2px solid var(--neon-cyan); border: 2px solid var(--neon-cyan);
box-shadow: 0 0 8px rgba(90, 139, 149, 0.3); box-shadow: 0 0 8px rgba(90,139,149,0.3);
text-shadow: 0 0 6px rgba(90, 139, 149, 0.6); text-shadow: 0 0 6px rgba(90,139,149,0.6);
} }
.cyberpunk-prose pre { .cyberpunk-prose pre {
@@ -463,9 +437,7 @@
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
overflow-x: auto; overflow-x: auto;
box-shadow: box-shadow: 0 0 25px rgba(123,101,147,0.6), inset 0 0 25px rgba(123,101,147,0.1);
0 0 25px rgba(123, 101, 147, 0.6),
inset 0 0 25px rgba(123, 101, 147, 0.1);
} }
.cyberpunk-prose pre code { .cyberpunk-prose pre code {
@@ -478,7 +450,7 @@
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border: 4px solid var(--neon-pink); border: 4px solid var(--neon-pink);
box-shadow: 0 0 20px rgba(155, 90, 110, 0.5); box-shadow: 0 0 20px rgba(155,90,110,0.5);
} }
.cyberpunk-prose hr { .cyberpunk-prose hr {
@@ -488,3 +460,4 @@
margin-bottom: 3rem; margin-bottom: 3rem;
} }
} }

View File

@@ -28,7 +28,11 @@ export const metadata: Metadata = {
}, },
} }
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return ( return (
<html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}> <html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}>
<body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300"> <body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300">
@@ -47,9 +51,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="border-2 border-slate-300 dark:border-slate-800 p-6"> <div className="border-2 border-slate-300 dark:border-slate-800 p-6">
<p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider"> <p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider">
© 2025 <span style={{ color: 'var(--neon-cyan)' }}>//</span> BLOG &{' '} © 2025 <span style={{ color: 'var(--neon-cyan)' }}>//</span> BLOG & <span style={{ color: 'var(--neon-pink)' }}>PORTOFOLIU</span> <span style={{ color: 'var(--neon-cyan)' }}>//</span> ALL RIGHTS RESERVED
<span style={{ color: 'var(--neon-pink)' }}>PORTOFOLIU</span>{' '}
<span style={{ color: 'var(--neon-cyan)' }}>//</span> ALL RIGHTS RESERVED
</p> </p>
</div> </div>
</div> </div>

View File

@@ -22,35 +22,19 @@ export default async function HomePage() {
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4"> <div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" /> <Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
<span className="font-mono text-xs text-slate-500 uppercase tracking-widest"> <span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
TERMINAL:// V2.0
</span>
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<Link <Link href="/blog" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[BLOG]</Link>
href="/blog" <Link href="/about" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[ABOUT]</Link>
className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
>
[BLOG]
</Link>
<Link
href="/about"
className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
>
[ABOUT]
</Link>
<ThemeToggle /> <ThemeToggle />
</div> </div>
</div> </div>
<div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8"> <div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2"> <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
DOCUMENT LEVEL-1 // CLASSIFIED
</p>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6"> <h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6">
BUILD. WRITE. BUILD. WRITE.<br/>SHARE.
<br />
SHARE.
</h1> </h1>
<p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl"> <p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl">
&gt; Explorează idei despre dezvoltare, design și tehnologie_ &gt; Explorează idei despre dezvoltare, design și tehnologie_
@@ -58,16 +42,10 @@ export default async function HomePage() {
</div> </div>
<div className="flex gap-4 flex-wrap mt-12"> <div className="flex gap-4 flex-wrap mt-12">
<Link <Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200">
href="/blog"
className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200"
>
[EXPLOREAZĂ BLOG] [EXPLOREAZĂ BLOG]
</Link> </Link>
<Link <Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200">
href="/about"
className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200"
>
[DESPRE MINE] [DESPRE MINE]
</Link> </Link>
</div> </div>
@@ -103,9 +81,7 @@ export default async function HomePage() {
/> />
) : ( ) : (
<div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center"> <div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center">
<span className="font-mono text-6xl text-slate-400 dark:text-slate-700"> <span className="font-mono text-6xl text-slate-400 dark:text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
#{String(index + 1).padStart(2, '0')}
</span>
</div> </div>
)} )}
<div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div> <div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div>
@@ -140,22 +116,16 @@ export default async function HomePage() {
))} ))}
</div> </div>
<div className="mt-12 flex gap-4 justify-center flex-wrap">
{allPosts.length > 6 && ( {allPosts.length > 6 && (
<div className="mt-12 text-center">
<Link <Link
href="/blog" href="/blog"
className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200" className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
> >
[VEZI TOATE ARTICOLELE] &gt;&gt; [VEZI TOATE ARTICOLELE] &gt;&gt;
</Link> </Link>
)}
<Link
href="/tags"
className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
>
[VEZI TOATE TAG-URILE] &gt;&gt;
</Link>
</div> </div>
)}
</div> </div>
</section> </section>

View File

@@ -1,40 +0,0 @@
import Link from 'next/link';
export default function TagNotFound() {
return (
<div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center">
<div className="max-w-2xl mx-auto px-6">
<div className="border-4 border-red-900 bg-red-950 p-12 text-center">
<div className="border-2 border-red-800 bg-red-900 p-4 mb-6 inline-block">
<p className="font-mono text-6xl font-bold text-red-400">404</p>
</div>
<p className="font-mono text-xs text-red-600 uppercase tracking-widest mb-2">
ERROR: TAG NOT FOUND
</p>
<h1 className="font-mono text-3xl font-bold uppercase mb-4 text-red-400">
TAG DOES NOT EXIST
</h1>
<p className="font-mono text-sm text-red-300 mb-8 max-w-md mx-auto">
&gt; THE REQUESTED TAG COULD NOT BE LOCATED IN THE DATABASE
<br />
&gt; IT MAY HAVE BEEN REMOVED OR NEVER EXISTED
</p>
<div className="flex gap-4 justify-center flex-wrap">
<Link
href="/tags"
className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
>
&gt; VIEW ALL TAGS
</Link>
<Link
href="/blog"
className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-slate-600 bg-slate-900 text-slate-300 hover:bg-slate-800 transition"
>
&gt; VIEW ALL POSTS
</Link>
</div>
</div>
</div>
</div>
);
}

View File

@@ -1,203 +0,0 @@
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import {
getAllTags,
getPostsByTag,
getTagInfo,
getRelatedTags
} from '@/lib/tags';
import { TagList } from '@/components/blog/tag-list';
import { formatDate } from '@/lib/utils';
export async function generateStaticParams() {
const tags = await getAllTags();
return tags.map(tag => ({ tag: tag.slug }));
}
export async function generateMetadata({
params,
}: {
params: Promise<{ tag: string }>;
}): Promise<Metadata> {
const { tag } = await params;
const tagInfo = await getTagInfo(tag);
if (!tagInfo) {
return { title: 'Tag negăsit' };
}
return {
title: `Tag: ${tagInfo.name}`,
description: `Articole marcate cu #${tagInfo.name}. ${tagInfo.count} articole disponibile.`,
openGraph: {
title: `Tag: ${tagInfo.name}`,
description: `Explorează ${tagInfo.count} articole despre ${tagInfo.name}`,
},
};
}
function PostCard({ post }: { post: any }) {
return (
<article className="border-2 border-slate-700 bg-slate-900 p-6 hover:border-cyan-400 transition">
{post.frontmatter.image && (
<img
src={post.frontmatter.image}
alt={post.frontmatter.title}
className="w-full h-48 object-cover mb-4 border-2 border-slate-800"
/>
)}
<div className="flex items-center gap-2 font-mono text-xs text-zinc-500 mb-3 uppercase">
<time dateTime={post.frontmatter.date}>
{formatDate(post.frontmatter.date)}
</time>
<span>&gt;</span>
<span>{post.readingTime} min</span>
</div>
<h2 className="font-mono text-lg font-bold mb-3 uppercase">
<Link
href={`/blog/${post.slug}`}
className="text-cyan-400 hover:text-cyan-300 transition"
>
{post.frontmatter.title}
</Link>
</h2>
<p className="text-zinc-400 mb-4 line-clamp-3">
{post.frontmatter.description}
</p>
{post.frontmatter.tags && (
<TagList tags={post.frontmatter.tags} variant="minimal" />
)}
</article>
);
}
export default async function TagPage({
params,
}: {
params: Promise<{ tag: string }>;
}) {
const { tag } = await params;
const tagInfo = await getTagInfo(tag);
if (!tagInfo) {
notFound();
}
const posts = await getPostsByTag(tag);
const relatedTags = await getRelatedTags(tag);
return (
<div className="min-h-screen bg-slate-950 text-slate-100">
<div className="max-w-6xl mx-auto px-6 py-12">
<div className="border-4 border-cyan-800 bg-cyan-950 p-8 mb-8">
<div className="flex items-center justify-between flex-wrap gap-4">
<div>
<p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
TAG ARCHIVE
</p>
<h1 className="font-mono text-3xl font-bold uppercase mb-2">
<span className="text-cyan-400">#{tagInfo.name}</span>
</h1>
<p className="font-mono text-sm text-cyan-300">
&gt; {tagInfo.count} {tagInfo.count === 1 ? 'DOCUMENT' : 'DOCUMENTS'}
</p>
</div>
<div>
<Link
href="/tags"
className="inline-flex items-center px-4 py-2 font-mono text-xs uppercase border-2 border-cyan-400 bg-slate-900 text-cyan-400 hover:bg-cyan-900 transition"
>
&gt; ALL TAGS
</Link>
</div>
</div>
</div>
<div className="grid gap-8 lg:grid-cols-4">
<div className="lg:col-span-3">
{posts.length === 0 ? (
<div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
<p className="font-mono text-zinc-400 mb-6 uppercase">
&gt; NO DOCUMENTS FOUND
</p>
<Link
href="/blog"
className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
>
&gt; VIEW ALL POSTS
</Link>
</div>
) : (
<div className="grid gap-6">
{posts.map(post => (
<PostCard key={post.slug} post={post} />
))}
</div>
)}
</div>
<aside className="lg:col-span-1 space-y-6">
{relatedTags.length > 0 && (
<div className="border-2 border-slate-700 bg-slate-900 p-6">
<div className="border-b-2 border-slate-700 pb-3 mb-4">
<h2 className="font-mono text-sm font-bold uppercase text-cyan-400">
RELATED TAGS
</h2>
</div>
<div className="space-y-2">
{relatedTags.map(tag => (
<Link
key={tag.slug}
href={`/tags/${tag.slug}`}
className="flex items-center justify-between p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
>
<span className="font-mono text-xs uppercase text-zinc-300">
#{tag.name}
</span>
<span className="font-mono text-xs text-zinc-500">
[{tag.count}]
</span>
</Link>
))}
</div>
</div>
)}
<div className="border-2 border-slate-700 bg-slate-900 p-6">
<div className="border-b-2 border-slate-700 pb-3 mb-4">
<h2 className="font-mono text-sm font-bold uppercase text-cyan-400">
QUICK NAV
</h2>
</div>
<div className="space-y-2">
<Link
href="/blog"
className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
>
&gt; ALL POSTS
</Link>
<Link
href="/tags"
className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
>
&gt; ALL TAGS
</Link>
<Link
href="/"
className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
>
&gt; HOME
</Link>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}

View File

@@ -1,16 +0,0 @@
import { Metadata } from 'next'
import { Navbar } from '@/components/blog/navbar'
export const metadata: Metadata = {
title: 'Tag-uri',
description: 'Explorează articolele după tag-uri',
}
export default function TagsLayout({ children }: { children: React.ReactNode }) {
return (
<>
<Navbar />
{children}
</>
)
}

View File

@@ -1,146 +0,0 @@
import { Metadata } from 'next';
import Link from 'next/link';
import { getAllTags, getTagCloud } from '@/lib/tags';
import { TagCloud } from '@/components/blog/tag-cloud';
import { TagBadge } from '@/components/blog/tag-badge';
export const metadata: Metadata = {
title: 'Tag-uri',
description: 'Explorează articolele după tag-uri',
};
export default async function TagsPage() {
const allTags = await getAllTags();
const tagCloud = await getTagCloud();
if (allTags.length === 0) {
return (
<div className="min-h-screen bg-slate-950 text-slate-100">
<div className="max-w-6xl mx-auto px-6 py-12">
<div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
<h1 className="font-mono text-3xl font-bold uppercase mb-4 text-cyan-400">
TAG DATABASE
</h1>
<p className="font-mono text-zinc-400 mb-8">
&gt; NO TAGS AVAILABLE
</p>
<Link
href="/blog"
className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
>
&gt; VIEW ALL POSTS
</Link>
</div>
</div>
</div>
);
}
const groupedTags = allTags.reduce((acc, tag) => {
const firstLetter = tag.name[0].toUpperCase();
if (!acc[firstLetter]) {
acc[firstLetter] = [];
}
acc[firstLetter].push(tag);
return acc;
}, {} as Record<string, typeof allTags>);
const sortedLetters = Object.keys(groupedTags).sort();
return (
<div className="min-h-screen bg-slate-950 text-slate-100">
<div className="max-w-6xl mx-auto px-6 py-12">
<div className="border-4 border-slate-800 bg-slate-900 p-8 mb-8">
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
DOCUMENT TYPE: TAG DATABASE
</p>
<h1 className="font-mono text-4xl font-bold uppercase text-cyan-400 mb-4">
TAG REGISTRY
</h1>
<p className="font-mono text-lg text-zinc-400">
&gt; TOTAL TAGS: {allTags.length}
</p>
</div>
<section className="mb-12">
<div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
SECTION: TAG CLOUD VISUALIZATION
</p>
</div>
<div className="border-2 border-slate-700 bg-zinc-950 p-8">
<TagCloud tags={tagCloud} />
</div>
</section>
<section className="mb-12">
<div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest">
SECTION: ALPHABETICAL INDEX
</p>
</div>
<div className="space-y-8">
{sortedLetters.map(letter => (
<div key={letter}>
<div className="border-2 border-cyan-700 bg-cyan-950 p-4 mb-4">
<h3 className="font-mono text-xl font-bold text-cyan-400 uppercase">
&gt; [{letter}]
</h3>
</div>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{groupedTags[letter].map(tag => (
<Link
key={tag.slug}
href={`/tags/${tag.slug}`}
className="flex items-center justify-between p-4 border-2 border-slate-700 bg-slate-900 hover:border-cyan-400 hover:bg-slate-800 transition"
>
<span className="font-mono text-sm uppercase">#{tag.name}</span>
<TagBadge count={tag.count} />
</Link>
))}
</div>
</div>
))}
</div>
</section>
<section className="border-4 border-cyan-800 bg-cyan-950 p-8">
<div className="mb-6">
<p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
DOCUMENT STATISTICS
</p>
<h2 className="font-mono text-2xl font-bold uppercase text-cyan-400">
TAG METRICS
</h2>
</div>
<div className="grid gap-6 sm:grid-cols-3">
<div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
<div className="font-mono text-3xl font-bold text-cyan-400">
{allTags.length}
</div>
<div className="font-mono text-xs text-zinc-400 uppercase mt-2">
TOTAL TAGS
</div>
</div>
<div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
<div className="font-mono text-3xl font-bold text-cyan-400">
{Math.max(...allTags.map(t => t.count))}
</div>
<div className="font-mono text-xs text-zinc-400 uppercase mt-2">
MAX POSTS/TAG
</div>
</div>
<div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
<div className="font-mono text-3xl font-bold text-cyan-400">
{Math.round(allTags.reduce((sum, t) => sum + t.count, 0) / allTags.length)}
</div>
<div className="font-mono text-xs text-zinc-400 uppercase mt-2">
AVG POSTS/TAG
</div>
</div>
</div>
</section>
</div>
</div>
);
}

View File

@@ -17,8 +17,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
<article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover"> <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)' }}> <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"> <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span>{' '} {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
{formatDate(post.frontmatter.date)}
</span> </span>
</div> </div>
<h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3"> <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
@@ -28,11 +27,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
{post.frontmatter.description} {post.frontmatter.description}
</p> </p>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{post.frontmatter.tags.map(tag => ( {post.frontmatter.tags.map((tag) => (
<span <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
key={tag}
className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
>
#{tag} #{tag}
</span> </span>
))} ))}
@@ -72,11 +68,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
{post.frontmatter.description} {post.frontmatter.description}
</p> </p>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{post.frontmatter.tags.map(tag => ( {post.frontmatter.tags.map((tag) => (
<span <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
key={tag}
className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
>
#{tag} #{tag}
</span> </span>
))} ))}
@@ -106,8 +99,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
<div className="p-6"> <div className="p-6">
<div className="border-l-2 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"> <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span>{' '} {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
{formatDate(post.frontmatter.date)}
</span> </span>
</div> </div>
<h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3"> <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
@@ -117,11 +109,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
{post.frontmatter.description} {post.frontmatter.description}
</p> </p>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{post.frontmatter.tags.map(tag => ( {post.frontmatter.tags.map((tag) => (
<span <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
key={tag}
className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
>
#{tag} #{tag}
</span> </span>
))} ))}

View File

@@ -23,9 +23,7 @@ export function CodeBlock({ code, language, filename, showLineNumbers = true }:
<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 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"> <div className="flex items-center gap-3">
{filename && ( {filename && (
<span className="text-[var(--neon-cyan)] font-mono text-sm uppercase"> <span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">&gt;&gt; {filename}</span>
&gt;&gt; {filename}
</span>
)} )}
<span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase"> <span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
[{language}] [{language}]

View File

@@ -1,13 +1,13 @@
'use client' 'use client';
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm' import remarkGfm from 'remark-gfm';
import Image from 'next/image' import Image from 'next/image';
import Link from 'next/link' import Link from 'next/link';
import { CodeBlock } from './code-block' import { CodeBlock } from './code-block';
interface MarkdownRendererProps { interface MarkdownRendererProps {
content: string content: string;
} }
export default function MarkdownRenderer({ content }: MarkdownRendererProps) { export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
@@ -16,42 +16,48 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{
h1: ({ children }) => { h1: ({ children }) => {
const text = String(children) const text = String(children);
const id = text const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
.toLowerCase() return <h1 id={id}>{children}</h1>;
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '')
return <h1 id={id}>{children}</h1>
}, },
h2: ({ children }) => { h2: ({ children }) => {
const text = String(children) const text = String(children);
const id = text const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
.toLowerCase() return <h2 id={id}>{children}</h2>;
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '')
return <h2 id={id}>{children}</h2>
}, },
h3: ({ children }) => { h3: ({ children }) => {
const text = String(children) const text = String(children);
const id = text const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
.toLowerCase() return <h3 id={id}>{children}</h3>;
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '')
return <h3 id={id}>{children}</h3>
}, },
code: ({ inline, className, children, ...props }: any) => { code: ({ inline, className, children, ...props }: any) => {
const match = /language-(\w+)/.exec(className || '') const match = /language-(\w+)/.exec(className || '');
if (!inline && match) { if (!inline && match) {
return <CodeBlock code={String(children).replace(/\n$/, '')} language={match[1]} /> return (
<CodeBlock
code={String(children).replace(/\n$/, '')}
language={match[1]}
/>
);
} }
return <code {...props}>{children}</code> return (
<code {...props}>
{children}
</code>
);
}, },
img: ({ src, alt }) => { img: ({ src, alt }) => {
if (!src || typeof src !== 'string') return null if (!src || typeof src !== 'string') return null;
const isExternal = src.startsWith('http://') || src.startsWith('https://') const isExternal = src.startsWith('http://') || src.startsWith('https://');
if (isExternal) { if (isExternal) {
return <img src={src} alt={alt || ''} className="w-full h-auto" /> return (
<img
src={src}
alt={alt || ''}
className="w-full h-auto"
/>
);
} }
return ( return (
@@ -64,25 +70,33 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
style={{ width: '100%', height: 'auto' }} style={{ width: '100%', height: 'auto' }}
/> />
</div> </div>
) );
}, },
a: ({ href, children }) => { a: ({ href, children }) => {
if (!href) return <>{children}</> if (!href) return <>{children}</>;
const isExternal = href.startsWith('http://') || href.startsWith('https://') const isExternal = href.startsWith('http://') || href.startsWith('https://');
if (isExternal) { if (isExternal) {
return ( return (
<a href={href} target="_blank" rel="noopener noreferrer"> <a
href={href}
target="_blank"
rel="noopener noreferrer"
>
{children} {children}
</a> </a>
) );
} }
return <Link href={href}>{children}</Link> return (
<Link href={href}>
{children}
</Link>
);
}, },
}} }}
> >
{content} {content}
</ReactMarkdown> </ReactMarkdown>
) );
} }

View File

@@ -28,17 +28,11 @@ export function Navbar() {
}, [lastScrollY]) }, [lastScrollY])
return ( return (
<nav <nav className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}>
className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
>
<div className="max-w-7xl mx-auto px-6 py-4"> <div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-8"> <div className="flex items-center gap-8">
<Link <Link href="/" className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer" style={{ color: 'var(--neon-cyan)' }}>
href="/"
className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
style={{ color: 'var(--neon-cyan)' }}
>
&lt; HOME &lt; HOME
</Link> </Link>
<span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider"> <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
@@ -46,10 +40,7 @@ export function Navbar() {
</span> </span>
</div> </div>
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<Link <Link href="/about" className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer">
href="/about"
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
>
[ABOUT] [ABOUT]
</Link> </Link>
<ThemeToggle /> <ThemeToggle />

View File

@@ -1,44 +0,0 @@
import Link from 'next/link';
import { getPopularTags } from '@/lib/tags';
import { TagBadge } from './tag-badge';
export async function PopularTags({ limit = 5 }: { limit?: number }) {
const tags = await getPopularTags(limit);
if (tags.length === 0) return null;
return (
<div className="border-2 border-slate-700 bg-slate-900 p-6">
<div className="border-b-2 border-slate-700 pb-3 mb-4">
<h3 className="font-mono text-sm font-bold uppercase text-cyan-400">
POPULAR TAGS
</h3>
</div>
<div className="space-y-3">
{tags.map((tag, index) => (
<Link
key={tag.slug}
href={`/tags/${tag.slug}`}
className="flex items-center justify-between group p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
>
<div className="flex items-center space-x-3">
<span className="font-mono text-xs text-zinc-500">
[{index + 1}]
</span>
<span className="font-mono text-xs uppercase group-hover:text-cyan-400 transition">
#{tag.name}
</span>
</div>
<TagBadge count={tag.count} />
</Link>
))}
</div>
<Link
href="/tags"
className="block mt-4 text-center font-mono text-xs text-cyan-400 hover:text-cyan-300 transition uppercase"
>
&gt; VIEW ALL TAGS
</Link>
</div>
);
}

View File

@@ -25,13 +25,15 @@ export function ReadingProgress() {
className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150" className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
style={{ style={{
width: `${progress}%`, width: `${progress}%`,
boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none', boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none'
}} }}
/> />
</div> </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"> <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> <span className="relative z-10">
[{Math.round(progress)}%]
</span>
</div> </div>
</> </>
) )

View File

@@ -6,14 +6,12 @@ interface SearchBarProps {
export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) { export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
return ( return (
<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)]"> <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)' }}> <span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>&gt;</span>
&gt;
</span>
<input <input
type="text" type="text"
placeholder="SEARCH POSTS..." placeholder="SEARCH POSTS..."
value={searchQuery} value={searchQuery}
onChange={e => onSearchChange(e.target.value)} onChange={(e) => onSearchChange(e.target.value)}
className="flex-1 bg-transparent font-mono text-zinc-100 dark:text-zinc-100 px-2 py-3 focus:outline-none placeholder:text-zinc-600 uppercase text-sm" className="flex-1 bg-transparent font-mono text-zinc-100 dark:text-zinc-100 px-2 py-3 focus:outline-none placeholder:text-zinc-600 uppercase text-sm"
/> />
</div> </div>

View File

@@ -9,30 +9,12 @@ export function SortDropdown({ sortBy, onSortChange }: SortDropdownProps) {
return ( return (
<select <select
value={sortBy} value={sortBy}
onChange={e => onSortChange(e.target.value as SortOption)} onChange={(e) => onSortChange(e.target.value as SortOption)}
className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer" className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer"
> >
<option <option value="newest" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>NEWEST FIRST</option>
value="newest" <option value="oldest" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>OLDEST FIRST</option>
className="bg-zinc-900 text-zinc-100" <option value="title" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>BY TITLE</option>
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
>
NEWEST FIRST
</option>
<option
value="oldest"
className="bg-zinc-900 text-zinc-100"
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
>
OLDEST FIRST
</option>
<option
value="title"
className="bg-zinc-900 text-zinc-100"
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
>
BY TITLE
</option>
</select> </select>
) )
} }

View File

@@ -48,9 +48,7 @@ export function StickyFooter({ url, title }: StickyFooterProps) {
${isVisible ? 'translate-y-0' : 'translate-y-full'} ${isVisible ? 'translate-y-0' : 'translate-y-full'}
`} `}
style={{ style={{
boxShadow: isVisible boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
? '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="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
@@ -62,10 +60,7 @@ export function StickyFooter({ url, title }: StickyFooterProps) {
<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-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 className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
</div> </div>
<span <span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
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: &gt;&gt; SHARE:
</span> </span>
</div> </div>
@@ -94,9 +89,7 @@ export function StickyFooter({ url, title }: StickyFooterProps) {
<button <button
onClick={handleCopyLink} 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" 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={{ style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)',
}}
> >
{copied ? '[✓ COPIED]' : '[COPY]'} {copied ? '[✓ COPIED]' : '[COPY]'}
</button> </button>

View File

@@ -17,8 +17,8 @@ export function TableOfContents({ headings }: TOCProps) {
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
entries => { (entries) => {
entries.forEach(entry => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
setActiveId(entry.target.id) setActiveId(entry.target.id)
} }
@@ -43,45 +43,31 @@ export function TableOfContents({ headings }: TOCProps) {
<div className="border-b border-[var(--neon-magenta)] pb-3 mb-4 relative"> <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="flex gap-1.5 mb-2 justify-end">
<div <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Minimize" />
className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Maximize" />
title="Minimize" <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
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> </div>
<h3 <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)' }}>
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 &gt;&gt; NAVIGATION
</h3> </h3>
</div> </div>
<nav className="space-y-1 relative"> <nav className="space-y-1 relative">
{headings.map(heading => ( {headings.map((heading) => (
<a <a
key={heading.id} key={heading.id}
href={`#${heading.id}`} href={`#${heading.id}`}
className={` className={`
block text-sm font-mono py-2 border-l-2 transition-all duration-150 block text-sm font-mono py-2 border-l-2 transition-all duration-150
${heading.level === 2 ? 'pl-3' : 'pl-6'} ${heading.level === 2 ? 'pl-3' : 'pl-6'}
${ ${activeId === heading.id
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-[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)]' : '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)' } : {}} style={activeId === heading.id ? { textShadow: '0 0 4px rgba(90,139,149,0.5)' } : {}}
> >
<span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span> <span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span>{heading.text}
{heading.text}
</a> </a>
))} ))}
</nav> </nav>

View File

@@ -1,20 +0,0 @@
interface TagBadgeProps {
count: number;
className?: string;
}
export function TagBadge({ count, className = '' }: TagBadgeProps) {
return (
<span
className={`
inline-flex items-center justify-center
px-2 py-1 font-mono text-xs font-bold
bg-cyan-900 border border-cyan-700
text-cyan-300
${className}
`}
>
{count}
</span>
);
}

View File

@@ -1,36 +0,0 @@
import Link from 'next/link';
import { TagInfo } from '@/lib/tags';
interface TagCloudProps {
tags: Array<TagInfo & { size: 'sm' | 'md' | 'lg' | 'xl' }>;
}
export function TagCloud({ tags }: TagCloudProps) {
const sizeClasses = {
sm: 'text-xs opacity-70',
md: 'text-sm',
lg: 'text-base font-bold',
xl: 'text-lg font-bold',
};
return (
<div className="flex flex-wrap gap-4 items-baseline">
{tags.map(tag => (
<Link
key={tag.slug}
href={`/tags/${tag.slug}`}
className={`
${sizeClasses[tag.size]}
font-mono uppercase
text-zinc-400
hover:text-cyan-400
transition-colors
`}
title={`${tag.count} ${tag.count === 1 ? 'articol' : 'articole'}`}
>
#{tag.name}
</Link>
))}
</div>
);
}

View File

@@ -14,7 +14,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
FILTER BY TAG FILTER BY TAG
</p> </p>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{allTags.map(tag => ( {allTags.map((tag) => (
<button <button
key={tag} key={tag}
onClick={() => onToggleTag(tag)} onClick={() => onToggleTag(tag)}

View File

@@ -1,37 +0,0 @@
import Link from 'next/link';
import { slugifyTag } from '@/lib/tags';
interface TagListProps {
tags: (string | undefined)[];
variant?: 'default' | 'minimal' | 'colored';
className?: string;
}
export function TagList({ tags, variant = 'default', className = '' }: TagListProps) {
const validTags = tags.filter(Boolean) as string[];
if (validTags.length === 0) return null;
const baseClasses = 'inline-flex items-center font-mono text-xs uppercase border transition-colors';
const variants = {
default: 'px-3 py-1 bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400',
minimal: 'px-2 py-0.5 border-transparent text-zinc-500 hover:text-cyan-400',
colored: 'px-3 py-1 bg-cyan-900 border-cyan-700 text-cyan-300 hover:bg-cyan-800 hover:border-cyan-600',
};
return (
<div className={`flex flex-wrap gap-2 ${className}`}>
{validTags.map(tag => (
<Link
key={tag}
href={`/tags/${slugifyTag(tag)}`}
className={`${baseClasses} ${variants[variant]}`}
>
<span className="mr-1">#</span>
{tag}
</Link>
))}
</div>
);
}

View File

@@ -1,14 +1,14 @@
'use client' 'use client';
import Link from 'next/link' import Link from 'next/link';
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation';
import { Fragment } from 'react' import { Fragment } from 'react';
import { BreadcrumbsSchema } from './breadcrumbs-schema' import { BreadcrumbsSchema } from './breadcrumbs-schema';
interface BreadcrumbItem { interface BreadcrumbItem {
label: string label: string;
href: string href: string;
current?: boolean current?: boolean;
} }
function HomeIcon({ className }: { className?: string }) { function HomeIcon({ className }: { className?: string }) {
@@ -27,15 +27,25 @@ function HomeIcon({ className }: { className?: string }) {
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" 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> </svg>
) );
} }
function ChevronIcon({ className }: { className?: string }) { function ChevronIcon({ className }: { className?: string }) {
return ( return (
<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> 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> </svg>
) );
} }
function formatSegmentLabel(segment: string): string { function formatSegmentLabel(segment: string): string {
@@ -43,36 +53,36 @@ function formatSegmentLabel(segment: string): string {
blog: 'Blog', blog: 'Blog',
tags: 'Tag-uri', tags: 'Tag-uri',
about: 'Despre', about: 'Despre',
} };
if (specialCases[segment]) { if (specialCases[segment]) {
return specialCases[segment] return specialCases[segment];
} }
return segment return segment
.split('-') .split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) .map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ') .join(' ');
} }
export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) { export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
const pathname = usePathname() const pathname = usePathname();
let breadcrumbs: BreadcrumbItem[] = items || [] let breadcrumbs: BreadcrumbItem[] = items || [];
if (!items) { if (!items) {
const segments = pathname.split('/').filter(Boolean) const segments = pathname.split('/').filter(Boolean);
breadcrumbs = segments.map((segment, index) => { breadcrumbs = segments.map((segment, index) => {
const href = '/' + segments.slice(0, index + 1).join('/') const href = '/' + segments.slice(0, index + 1).join('/');
const label = formatSegmentLabel(segment) const label = formatSegmentLabel(segment);
const current = index === segments.length - 1 const current = index === segments.length - 1;
return { label, href, current } return { label, href, current };
}) });
} }
if (pathname === '/') { if (pathname === '/') {
return null return null;
} }
const schemaItems = [ const schemaItems = [
@@ -82,7 +92,7 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
name: item.label, name: item.label,
item: item.href, item: item.href,
})), })),
] ];
return ( return (
<> <>
@@ -102,7 +112,7 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
</Link> </Link>
</li> </li>
{breadcrumbs.map(item => ( {breadcrumbs.map((item) => (
<Fragment key={item.href}> <Fragment key={item.href}>
<li className="text-gray-400 flex-shrink-0"> <li className="text-gray-400 flex-shrink-0">
<ChevronIcon className="w-4 h-4" /> <ChevronIcon className="w-4 h-4" />
@@ -131,5 +141,5 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
</nav> </nav>
<BreadcrumbsSchema items={schemaItems} /> <BreadcrumbsSchema items={schemaItems} />
</> </>
) );
} }

View File

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

View File

@@ -43,8 +43,7 @@ export function ThemeToggle() {
className={` className={`
relative font-mono text-xs uppercase tracking-wider relative font-mono text-xs uppercase tracking-wider
px-3 py-1 border-2 transition-all duration-300 px-3 py-1 border-2 transition-all duration-300
${ ${theme === 'dark'
theme === 'dark'
? 'text-cyan-400 border-cyan-900 hover:border-cyan-700 bg-cyan-950/20' ? 'text-cyan-400 border-cyan-900 hover:border-cyan-700 bg-cyan-950/20'
: 'text-emerald-600 border-emerald-700 hover:border-emerald-500 bg-emerald-50/50' : 'text-emerald-600 border-emerald-700 hover:border-emerald-500 bg-emerald-50/50'
} }
@@ -53,7 +52,9 @@ export function ThemeToggle() {
`} `}
aria-label="Toggle theme" aria-label="Toggle theme"
> >
<span className="relative z-10">{theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}</span> <span className="relative z-10">
{theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
</span>
{isGlitching && ( {isGlitching && (
<> <>
<span className="glitch-layer" aria-hidden="true"> <span className="glitch-layer" aria-hidden="true">

View File

@@ -1,10 +1,10 @@
--- ---
title: 'Getting Started with Next.js 15' title: "Getting Started with Next.js 15"
description: 'Learn how to build modern web applications with Next.js 15 and TypeScript.' description: "Learn how to build modern web applications with Next.js 15 and TypeScript."
date: '2025-01-07' date: "2025-01-07"
author: 'John Doe' author: "John Doe"
category: 'Tutorial' category: "Tutorial"
tags: ['nextjs', 'typescript', 'tutorial'] tags: ["nextjs", "typescript", "tutorial"]
--- ---
# Getting Started with Next.js 15 # Getting Started with Next.js 15

View File

@@ -1,10 +1,10 @@
--- ---
title: 'Articol Tehnic din Subdirector' title: "Articol Tehnic din Subdirector"
description: 'Test pentru subdirectoare și organizare ierarhică' description: "Test pentru subdirectoare și organizare ierarhică"
date: '2025-01-10' date: "2025-01-10"
author: 'Tech Writer' author: "Tech Writer"
category: 'Tehnologie' category: "Tehnologie"
tags: ['nextjs', 'react', 'typescript'] tags: ["nextjs", "react", "typescript"]
draft: false draft: false
--- ---
@@ -25,14 +25,14 @@ Next.js este un framework React puternic care oferă:
```typescript ```typescript
interface User { interface User {
id: number id: number;
name: string name: string;
email: string email: string;
} }
async function fetchUser(id: number): Promise<User> { async function fetchUser(id: number): Promise<User> {
const response = await fetch(`/api/users/${id}`) const response = await fetch(`/api/users/${id}`);
return response.json() return response.json();
} }
``` ```

View File

@@ -1,17 +1,17 @@
--- ---
title: 'Test Complet Markdown' title: "Test Complet Markdown"
description: 'Un articol de test care demonstrează toate elementele markdown suportate' description: "Un articol de test care demonstrează toate elementele markdown suportate"
date: '2025-01-15' date: "2025-01-15"
author: 'Test Author' author: "Test Author"
category: 'Tutorial' category: "Tutorial"
tags: ['markdown', 'test', 'demo'] tags: ["markdown", "test", "demo"]
image: '/38636.jpg' image: "/38636.jpg"
draft: false draft: false
--- ---
# Heading 1 # Heading 1
Acesta este un paragraf normal cu **text bold** și _text italic_. Putem combina **_bold și italic_**. Acesta este un paragraf normal cu **text bold** și *text italic*. Putem combina ***bold și italic***.
## Heading 2 ## Heading 2
@@ -47,11 +47,11 @@ Bloc de cod JavaScript:
```javascript ```javascript
function greet(name) { function greet(name) {
console.log(`Hello, ${name}!`) console.log(`Hello, ${name}!`);
return true return true;
} }
greet('World') greet("World");
``` ```
Bloc de cod Python: Bloc de cod Python:
@@ -85,7 +85,7 @@ print(f"Result: {result}")
## Tabele ## Tabele
| Coloana 1 | Coloana 2 | Coloana 3 | | Coloana 1 | Coloana 2 | Coloana 3 |
| --------- | --------- | --------- | |-----------|-----------|-----------|
| Celula 1 | Celula 2 | Celula 3 | | Celula 1 | Celula 2 | Celula 3 |
| Date 1 | Date 2 | Date 3 | | Date 1 | Date 2 | Date 3 |
| Info 1 | Info 2 | Info 3 | | Info 1 | Info 2 | Info 3 |

View File

@@ -67,14 +67,14 @@ services:
# Resource limits for production # Resource limits for production
# Prevents container from consuming all server resources # Prevents container from consuming all server resources
# deploy: deploy:
# resources: resources:
# limits: limits:
# cpus: '1.0' # Maximum 1 CPU core cpus: '1.0' # Maximum 1 CPU core
# memory: 512M # Maximum 512MB RAM memory: 512M # Maximum 512MB RAM
# reservations: reservations:
# cpus: '0.25' # Reserve at least 0.25 CPU cores cpus: '0.25' # Reserve at least 0.25 CPU cores
# memory: 256M # Reserve at least 256MB RAM memory: 256M # Reserve at least 256MB RAM
# Network configuration # Network configuration
networks: networks:

View File

@@ -1,135 +0,0 @@
# Docker Compose Configuration for Staging Deployment
# This file is used by CI/CD to deploy the application on staging servers
#
# Key differences from production docker-compose.prod.yml:
# - Container name: mypage-staging (vs mypage-prod)
# - Port mapping: 3031:3030 (vs 3030:3030)
# - Network name: mypage-staging-network (vs mypage-network)
# - Image tag: staging (vs latest)
#
# Usage:
# 1. This file is automatically copied to server by CI/CD workflow
# 2. Server pulls image from registry: docker compose -f docker-compose.staging.yml pull
# 3. Server starts container: docker compose -f docker-compose.staging.yml up -d
#
# Manual deployment (if CI/CD is not available):
# ssh user@staging-server
# cd /opt/mypage-staging
# docker compose -f docker-compose.staging.yml pull
# docker compose -f docker-compose.staging.yml up -d --force-recreate
version: '3.8'
services:
mypage:
# Use pre-built image from private registry with staging tag
# This image is built and pushed by the CI/CD workflow
# Format: REGISTRY_URL/IMAGE_NAME:TAG
image: repository.workspace:5000/mypage:staging
container_name: mypage-staging
# Restart policy: always restart on failure or server reboot
# This ensures high availability in staging
restart: always
# Port mapping: host:container
# Staging runs on port 3031 to avoid conflicts with production (3030)
# The application will be accessible at http://SERVER_IP:3031
ports:
- "3031:3030"
# Staging environment variables
environment:
- NODE_ENV=production
- NEXT_TELEMETRY_DISABLED=1
- PORT=3030
- HOSTNAME=0.0.0.0
# Add any other staging-specific environment variables here
# Example:
# - DATABASE_URL=postgresql://user:pass@db:5432/mypage_staging
# - 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 staging
# 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-staging-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-staging-network:
driver: bridge
# ============================================
# Staging Deployment Commands
# ============================================
#
# Pull latest image from registry:
# docker compose -f docker-compose.staging.yml pull
#
# Start/update containers:
# docker compose -f docker-compose.staging.yml up -d --force-recreate
#
# View logs:
# docker compose -f docker-compose.staging.yml logs -f mypage
#
# Check health status:
# docker inspect mypage-staging | grep -A 10 Health
#
# Stop containers:
# docker compose -f docker-compose.staging.yml down
#
# Restart containers:
# docker compose -f docker-compose.staging.yml restart
#
# Remove old/unused images (cleanup):
# docker image prune -f
#
# ============================================
# Troubleshooting
# ============================================
#
# If container keeps restarting:
# 1. Check logs: docker compose -f docker-compose.staging.yml logs --tail=100
# 2. Check health: docker inspect mypage-staging | grep -A 10 Health
# 3. Verify port is not already in use: netstat -tulpn | grep 3031
# 4. Check resource usage: docker stats mypage-staging
#
# If health check fails:
# 1. Test manually: docker exec mypage-staging curl -f http://localhost:3030/
# 2. Check if Next.js server is running: docker exec mypage-staging ps aux
# 3. Verify environment variables: docker exec mypage-staging env
#

View File

@@ -1,33 +0,0 @@
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
export default [
js.configs.recommended,
...tseslint.configs.recommended,
prettier,
{
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
],
'no-console': ['warn', { allow: ['warn', 'error'] }],
},
},
{
ignores: [
'node_modules/',
'.next/',
'out/',
'build/',
'dist/',
'.cache/',
'*.config.js',
'public/',
'coverage/',
],
},
]

View File

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

View File

@@ -1,131 +0,0 @@
import { getAllPosts } from './markdown';
import type { Post } from './types/frontmatter';
export interface TagInfo {
name: string;
slug: string;
count: number;
}
export interface TagWithPosts {
tag: TagInfo;
posts: Post[];
}
export function slugifyTag(tag: string): string {
return tag
.toLowerCase()
.replace(/[ăâ]/g, 'a')
.replace(/[îï]/g, 'i')
.replace(/[șş]/g, 's')
.replace(/[țţ]/g, 't')
.replace(/\s+/g, '-')
.replace(/[^a-z0-9-]/g, '')
.replace(/-+/g, '-')
.replace(/^-|-$/g, '');
}
export async function getAllTags(): Promise<TagInfo[]> {
const posts = getAllPosts();
const tagMap = new Map<string, number>();
posts.forEach(post => {
const tags = post.frontmatter.tags?.filter(Boolean) || [];
tags.forEach(tag => {
const count = tagMap.get(tag) || 0;
tagMap.set(tag, count + 1);
});
});
return Array.from(tagMap.entries())
.map(([name, count]) => ({
name,
slug: slugifyTag(name),
count
}))
.sort((a, b) => b.count - a.count);
}
export async function getPostsByTag(tagSlug: string): Promise<Post[]> {
const posts = getAllPosts();
return posts.filter(post => {
const tags = post.frontmatter.tags?.filter(Boolean) || [];
return tags.some(tag => slugifyTag(tag) === tagSlug);
});
}
export async function getTagInfo(tagSlug: string): Promise<TagInfo | null> {
const allTags = await getAllTags();
return allTags.find(tag => tag.slug === tagSlug) || null;
}
export async function getPopularTags(limit = 10): Promise<TagInfo[]> {
const allTags = await getAllTags();
return allTags.slice(0, limit);
}
export async function getRelatedTags(tagSlug: string, limit = 5): Promise<TagInfo[]> {
const posts = await getPostsByTag(tagSlug);
const relatedTagMap = new Map<string, number>();
posts.forEach(post => {
const tags = post.frontmatter.tags?.filter(Boolean) || [];
tags.forEach(tag => {
const slug = slugifyTag(tag);
if (slug !== tagSlug) {
const count = relatedTagMap.get(tag) || 0;
relatedTagMap.set(tag, count + 1);
}
});
});
return Array.from(relatedTagMap.entries())
.map(([name, count]) => ({
name,
slug: slugifyTag(name),
count
}))
.sort((a, b) => b.count - a.count)
.slice(0, limit);
}
export function validateTags(tags: any): string[] {
if (!tags) return [];
if (!Array.isArray(tags)) {
console.warn('Tags should be an array');
return [];
}
const validTags = tags
.filter(tag => tag && typeof tag === 'string')
.slice(0, 3);
if (tags.length > 3) {
console.warn(`Too many tags provided (${tags.length}). Limited to first 3.`);
}
return validTags;
}
export async function getTagCloud(): Promise<Array<TagInfo & { size: 'sm' | 'md' | 'lg' | 'xl' }>> {
const tags = await getAllTags();
if (tags.length === 0) return [];
const maxCount = Math.max(...tags.map(t => t.count));
const minCount = Math.min(...tags.map(t => t.count));
const range = maxCount - minCount || 1;
return tags.map(tag => {
const normalized = (tag.count - minCount) / range;
let size: 'sm' | 'md' | 'lg' | 'xl';
if (normalized < 0.25) size = 'sm';
else if (normalized < 0.5) size = 'md';
else if (normalized < 0.75) size = 'lg';
else size = 'xl';
return { ...tag, size };
});
}

View File

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

View File

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

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <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 // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

5075
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -6,11 +6,8 @@
"scripts": { "scripts": {
"dev": "next dev -p 3030", "dev": "next dev -p 3030",
"build": "next build", "build": "next build",
"start": "next start -p 3030", "start": "next start",
"lint": "eslint . --ext .ts,.tsx,.js,.jsx", "lint": "next lint",
"lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
"format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
"validate-posts": "node scripts/validate-posts.js" "validate-posts": "node scripts/validate-posts.js"
}, },
"repository": { "repository": {
@@ -41,17 +38,5 @@
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"tailwindcss": "^4.1.17", "tailwindcss": "^4.1.17",
"typescript": "^5.9.3" "typescript": "^5.9.3"
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.1",
"@eslint/js": "^9.39.1",
"@typescript-eslint/eslint-plugin": "^8.46.4",
"@typescript-eslint/parser": "^8.46.4",
"eslint": "^9.39.1",
"eslint-config-next": "^16.0.3",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"prettier": "^3.6.2",
"typescript-eslint": "^8.46.4"
} }
} }

View File

@@ -2,9 +2,9 @@
module.exports = { module.exports = {
darkMode: 'class', darkMode: 'class',
content: [ content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}', "./pages/**/*.{js,ts,jsx,tsx,mdx}",
'./components/**/*.{js,ts,jsx,tsx,mdx}', "./components/**/*.{js,ts,jsx,tsx,mdx}",
'./app/**/*.{js,ts,jsx,tsx,mdx}', "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
extend: { extend: {
@@ -24,7 +24,7 @@ module.exports = {
'dark-primary': '#18181b', 'dark-primary': '#18181b',
'dark-secondary': '#0f172a', 'dark-secondary': '#0f172a',
'dark-tertiary': '#1e293b', 'dark-tertiary': '#1e293b',
accent: { 'accent': {
DEFAULT: '#164e63', DEFAULT: '#164e63',
hover: '#155e75', hover: '#155e75',
light: '#0e7490', light: '#0e7490',
@@ -39,10 +39,10 @@ module.exports = {
}, },
}, },
animation: { animation: {
glitch: 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both', 'glitch': 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
flicker: 'flicker 0.15s infinite', 'flicker': 'flicker 0.15s infinite',
scanline: 'scanline 8s linear infinite', 'scanline': 'scanline 8s linear infinite',
noise: 'noise 0.2s infinite', 'noise': 'noise 0.2s infinite',
}, },
keyframes: { keyframes: {
glitch: { glitch: {

View File

@@ -1,7 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2020", "target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@@ -19,7 +23,9 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./*"] "@/*": [
"./*"
]
} }
}, },
"include": [ "include": [
@@ -29,5 +35,7 @@
".next/types/**/*.ts", ".next/types/**/*.ts",
".next/dev/types/**/*.ts" ".next/dev/types/**/*.ts"
], ],
"exclude": ["node_modules"] "exclude": [
"node_modules"
]
} }