Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 damjan_savic
|
39697ae857 | ||
|
damjan_savic
|
4cc19386fe | ||
 damjan_savicandClaude Sonnet 4.5
|
2bb0003902 |
@@ -5,6 +5,7 @@ import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import type { Metadata } from 'next';
|
||||
import { getAllBlogPosts, BlogPost } from '@/lib/blog';
|
||||
import { legacyBlogPosts } from '@/data/legacyBlogPosts';
|
||||
|
||||
const POSTS_PER_PAGE = 12;
|
||||
|
||||
@@ -13,232 +14,6 @@ type Props = {
|
||||
searchParams: Promise<{ page?: string }>;
|
||||
};
|
||||
|
||||
// Legacy blog posts with translations (these have manual translations)
|
||||
const legacyBlogPosts: Record<string, BlogPost[]> = {
|
||||
de: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
|
||||
category: 'SaaS-Entwicklung',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
|
||||
category: 'System Integration',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
en: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: From API Key to Production-Ready Application',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
|
||||
category: 'AI Development',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
|
||||
category: 'AI Development',
|
||||
tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
|
||||
category: 'SaaS Development',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
|
||||
category: 'System Integration',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
sr: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
|
||||
category: 'SaaS Razvoj',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
|
||||
category: 'Sistemska Integracija',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface UserSettings {
|
||||
theme: 'light' | 'dark';
|
||||
notifications: boolean;
|
||||
language: string;
|
||||
}
|
||||
|
||||
export default function TestLocalStoragePage() {
|
||||
// Test 1: Simple string value
|
||||
const [name, setName, removeName] = useLocalStorage('test-name', 'Guest');
|
||||
|
||||
// Test 2: Complex object
|
||||
const [settings, setSettings, removeSettings] = useLocalStorage<UserSettings>(
|
||||
'test-settings',
|
||||
{
|
||||
theme: 'light',
|
||||
notifications: true,
|
||||
language: 'en',
|
||||
}
|
||||
);
|
||||
|
||||
// Test 3: Array
|
||||
const [items, setItems, removeItems] = useLocalStorage<string[]>('test-items', []);
|
||||
|
||||
// Test 4: Number
|
||||
const [count, setCount, removeCount] = useLocalStorage('test-count', 0);
|
||||
|
||||
const [newItem, setNewItem] = useState('');
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1>useLocalStorage Hook Test Page</h1>
|
||||
<p style={{ color: '#666', marginBottom: '2rem' }}>
|
||||
Open DevTools (F12) → Application → Local Storage to see values update in real-time.
|
||||
Refresh the page to verify persistence.
|
||||
</p>
|
||||
|
||||
{/* Test 1: String */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 1: String Value</h2>
|
||||
<p>Current Name: <strong>{name}</strong></p>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter your name"
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
/>
|
||||
<button onClick={() => removeName()} style={{ padding: '0.5rem' }}>
|
||||
Reset
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-name</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 2: Complex Object */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 2: Complex Object</h2>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<p>Theme: <strong>{settings.theme}</strong></p>
|
||||
<button
|
||||
onClick={() => setSettings((prev) => ({ ...prev, theme: prev.theme === 'light' ? 'dark' : 'light' }))}
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
>
|
||||
Toggle Theme
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.notifications}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, notifications: e.target.checked }))}
|
||||
/>
|
||||
{' '}Enable Notifications
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label>Language: </label>
|
||||
<select
|
||||
value={settings.language}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
|
||||
style={{ padding: '0.5rem' }}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="de">German</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onClick={() => removeSettings()} style={{ padding: '0.5rem' }}>
|
||||
Reset Settings
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-settings</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 3: Array */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 3: Array Value</h2>
|
||||
<p>Items ({items.length}):</p>
|
||||
<ul style={{ minHeight: '60px' }}>
|
||||
{items.map((item, index) => (
|
||||
<li key={index}>
|
||||
{item}{' '}
|
||||
<button
|
||||
onClick={() => setItems((prev) => prev.filter((_, i) => i !== index))}
|
||||
style={{ padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={newItem}
|
||||
onChange={(e) => setNewItem(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter' && newItem.trim()) {
|
||||
setItems((prev) => [...prev, newItem.trim()]);
|
||||
setNewItem('');
|
||||
}
|
||||
}}
|
||||
placeholder="Add new item"
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newItem.trim()) {
|
||||
setItems((prev) => [...prev, newItem.trim()]);
|
||||
setNewItem('');
|
||||
}
|
||||
}}
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
>
|
||||
Add Item
|
||||
</button>
|
||||
<button onClick={() => removeItems()} style={{ padding: '0.5rem' }}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-items</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 4: Number */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 4: Number Value</h2>
|
||||
<p>Count: <strong>{count}</strong></p>
|
||||
<button onClick={() => setCount((prev) => prev + 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||
Increment
|
||||
</button>
|
||||
<button onClick={() => setCount((prev) => prev - 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||
Decrement
|
||||
</button>
|
||||
<button onClick={() => removeCount()} style={{ padding: '0.5rem' }}>
|
||||
Reset
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-count</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
|
||||
<h3>Verification Checklist:</h3>
|
||||
<ul>
|
||||
<li>✓ Open DevTools → Application → Local Storage → http://localhost:3000</li>
|
||||
<li>✓ Interact with the controls above and watch localStorage update in real-time</li>
|
||||
<li>✓ Refresh the page (F5) - all values should persist</li>
|
||||
<li>✓ Check Console for hydration errors (there should be none)</li>
|
||||
<li>✓ Check Console for any errors (there should be none)</li>
|
||||
<li>✓ Verify TypeScript has no errors in your editor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
import type { BlogPost } from '@/lib/blog';
|
||||
|
||||
export type LegacyBlogPostsData = Record<string, BlogPost[]>;
|
||||
|
||||
export const legacyBlogPosts: LegacyBlogPostsData = {
|
||||
de: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
|
||||
category: 'SaaS-Entwicklung',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
|
||||
category: 'System Integration',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
en: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: From API Key to Production-Ready Application',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
|
||||
category: 'AI Development',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
|
||||
category: 'AI Development',
|
||||
tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
|
||||
category: 'SaaS Development',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
|
||||
category: 'System Integration',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
sr: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
|
||||
category: 'SaaS Razvoj',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
|
||||
date: '2024-02-09',
|
||||
excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
|
||||
category: 'Sistemska Integracija',
|
||||
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
|
||||
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,235 +0,0 @@
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
||||
import { useLocalStorage } from './useLocalStorage';
|
||||
|
||||
// Mock the error handling utility
|
||||
vi.mock('../utils/errorHandling', () => ({
|
||||
handleError: vi.fn()
|
||||
}));
|
||||
|
||||
// Mock localStorage
|
||||
const localStorageMock = (() => {
|
||||
let store: Record<string, string> = {};
|
||||
|
||||
return {
|
||||
getItem: (key: string) => store[key] || null,
|
||||
setItem: (key: string, value: string) => {
|
||||
store[key] = value.toString();
|
||||
},
|
||||
removeItem: (key: string) => {
|
||||
delete store[key];
|
||||
},
|
||||
clear: () => {
|
||||
store = {};
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
describe('useLocalStorage', () => {
|
||||
beforeEach(() => {
|
||||
// Setup localStorage mock
|
||||
Object.defineProperty(window, 'localStorage', {
|
||||
value: localStorageMock,
|
||||
writable: true
|
||||
});
|
||||
localStorageMock.clear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should return initial value when localStorage is empty', () => {
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
|
||||
const [value] = result.current;
|
||||
|
||||
expect(value).toBe('initial-value');
|
||||
});
|
||||
|
||||
it('should return initial value from function when localStorage is empty', () => {
|
||||
const initializer = vi.fn(() => 'computed-value');
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', initializer));
|
||||
const [value] = result.current;
|
||||
|
||||
expect(value).toBe('computed-value');
|
||||
expect(initializer).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should set value in localStorage', () => {
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue('new-value');
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe('new-value');
|
||||
expect(JSON.parse(localStorage.getItem('test-key')!)).toBe('new-value');
|
||||
});
|
||||
|
||||
it('should handle updater function in setValue', () => {
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 10));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue((prev) => prev + 5);
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe(15);
|
||||
});
|
||||
|
||||
it('should read existing value from localStorage', () => {
|
||||
localStorage.setItem('test-key', JSON.stringify('existing-value'));
|
||||
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
|
||||
const [value] = result.current;
|
||||
|
||||
expect(value).toBe('existing-value');
|
||||
});
|
||||
|
||||
it('should handle complex objects', () => {
|
||||
const complexObject = { name: 'John', age: 30, hobbies: ['reading', 'coding'] };
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', complexObject));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue({ ...complexObject, age: 31 });
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toEqual({ name: 'John', age: 31, hobbies: ['reading', 'coding'] });
|
||||
});
|
||||
|
||||
it('should remove value from localStorage', () => {
|
||||
localStorage.setItem('test-key', JSON.stringify('existing-value'));
|
||||
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'initial-value'));
|
||||
|
||||
act(() => {
|
||||
const [, , removeValue] = result.current;
|
||||
removeValue();
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe('initial-value');
|
||||
expect(localStorage.getItem('test-key')).toBeNull();
|
||||
});
|
||||
|
||||
it('should handle invalid JSON in localStorage', () => {
|
||||
localStorage.setItem('test-key', 'invalid-json{');
|
||||
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'fallback-value'));
|
||||
const [value] = result.current;
|
||||
|
||||
expect(value).toBe('fallback-value');
|
||||
});
|
||||
|
||||
it('should be SSR-safe (no window)', () => {
|
||||
const originalWindow = global.window;
|
||||
// @ts-ignore - Temporarily remove window for SSR test
|
||||
delete global.window;
|
||||
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'ssr-value'));
|
||||
const [value] = result.current;
|
||||
|
||||
expect(value).toBe('ssr-value');
|
||||
|
||||
// Restore window
|
||||
global.window = originalWindow;
|
||||
});
|
||||
|
||||
it('should handle localStorage quota exceeded', () => {
|
||||
const { handleError } = require('../utils/errorHandling');
|
||||
|
||||
// Mock setItem to throw quota exceeded error
|
||||
const originalSetItem = localStorage.setItem;
|
||||
localStorage.setItem = vi.fn(() => {
|
||||
throw new DOMException('QuotaExceededError');
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue('new-value');
|
||||
});
|
||||
|
||||
expect(handleError).toHaveBeenCalled();
|
||||
|
||||
// Restore original setItem
|
||||
localStorage.setItem = originalSetItem;
|
||||
});
|
||||
|
||||
it('should serialize and deserialize arrays', () => {
|
||||
const initialArray = [1, 2, 3, 4, 5];
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', initialArray));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue([...initialArray, 6]);
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toEqual([1, 2, 3, 4, 5, 6]);
|
||||
expect(JSON.parse(localStorage.getItem('test-key')!)).toEqual([1, 2, 3, 4, 5, 6]);
|
||||
});
|
||||
|
||||
it('should handle boolean values', () => {
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', false));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue(true);
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe(true);
|
||||
expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle number values', () => {
|
||||
const { result } = renderHook(() => useLocalStorage('test-key', 0));
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue(42);
|
||||
});
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe(42);
|
||||
expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(42);
|
||||
});
|
||||
|
||||
it('should handle null values', () => {
|
||||
const { result } = renderHook(() => useLocalStorage<string | null>('test-key', null));
|
||||
|
||||
const [value] = result.current;
|
||||
expect(value).toBe(null);
|
||||
});
|
||||
|
||||
it('should update localStorage when key changes', () => {
|
||||
const { result, rerender } = renderHook(
|
||||
({ key, value }) => useLocalStorage(key, value),
|
||||
{ initialProps: { key: 'key1', value: 'value1' } }
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue('updated-value1');
|
||||
});
|
||||
|
||||
expect(localStorage.getItem('key1')).toBe(JSON.stringify('updated-value1'));
|
||||
|
||||
// Change the key
|
||||
rerender({ key: 'key2', value: 'value2' });
|
||||
|
||||
act(() => {
|
||||
const [, setValue] = result.current;
|
||||
setValue('updated-value2');
|
||||
});
|
||||
|
||||
expect(localStorage.getItem('key2')).toBe(JSON.stringify('updated-value2'));
|
||||
});
|
||||
});
|
||||
@@ -1,99 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { handleError } from '../utils/errorHandling';
|
||||
|
||||
/**
|
||||
* Function type for updating the stored value
|
||||
* @template T - The type of the stored value
|
||||
* @param value - Either a new value of type T or an updater function that takes the current value and returns a new value
|
||||
*/
|
||||
type SetValue<T> = (value: T | ((val: T) => T)) => void;
|
||||
|
||||
/**
|
||||
* Custom hook for managing state in localStorage with automatic serialization
|
||||
*
|
||||
* @template T - The type of the stored value
|
||||
* @param {string} key - The localStorage key to use
|
||||
* @param {T | (() => T)} initialValue - The initial value or a function that returns the initial value
|
||||
* @returns {[T, SetValue<T>, () => void]} A tuple containing:
|
||||
* - The current stored value
|
||||
* - A function to update the stored value
|
||||
* - A function to remove the value from storage
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light');
|
||||
* setTheme('dark'); // Updates both state and localStorage
|
||||
* removeTheme(); // Removes from localStorage and resets to initial value
|
||||
* ```
|
||||
*
|
||||
* @remarks
|
||||
* - SSR-safe: Returns initial value during server-side rendering
|
||||
* - Automatically serializes/deserializes JSON
|
||||
* - Handles localStorage quota exceeded errors
|
||||
* - Handles invalid JSON gracefully
|
||||
*/
|
||||
export function useLocalStorage<T>(
|
||||
key: string,
|
||||
initialValue: T | (() => T)
|
||||
): [T, SetValue<T>, () => void] {
|
||||
// Get initial value - SSR safe
|
||||
const getInitialValue = useCallback((): T => {
|
||||
// Check if we're in a browser environment
|
||||
if (typeof window === 'undefined') {
|
||||
return initialValue instanceof Function ? initialValue() : initialValue;
|
||||
}
|
||||
|
||||
try {
|
||||
const item = window.localStorage.getItem(key);
|
||||
if (item) {
|
||||
return JSON.parse(item) as T;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `LocalStorage Read (key: ${key})`);
|
||||
}
|
||||
|
||||
return initialValue instanceof Function ? initialValue() : initialValue;
|
||||
}, [key, initialValue]);
|
||||
|
||||
const [storedValue, setStoredValue] = useState<T>(getInitialValue);
|
||||
|
||||
// Update localStorage whenever storedValue changes
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
window.localStorage.setItem(key, JSON.stringify(storedValue));
|
||||
} catch (error) {
|
||||
handleError(error, `LocalStorage Write (key: ${key})`);
|
||||
}
|
||||
}, [key, storedValue]);
|
||||
|
||||
// Set value function that supports both direct values and updater functions
|
||||
const setValue: SetValue<T> = useCallback((value) => {
|
||||
try {
|
||||
setStoredValue((prevValue) => {
|
||||
const newValue = value instanceof Function ? value(prevValue) : value;
|
||||
return newValue;
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, `LocalStorage Update (key: ${key})`);
|
||||
}
|
||||
}, [key]);
|
||||
|
||||
// Remove value from localStorage and reset to initial value
|
||||
const removeValue = useCallback(() => {
|
||||
try {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
const resetValue = initialValue instanceof Function ? initialValue() : initialValue;
|
||||
setStoredValue(resetValue);
|
||||
} catch (error) {
|
||||
handleError(error, `LocalStorage Remove (key: ${key})`);
|
||||
}
|
||||
}, [key, initialValue]);
|
||||
|
||||
return [storedValue, setValue, removeValue];
|
||||
}
|
||||
+15
-1
@@ -1,5 +1,6 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { cache } from '@/utils/cache';
|
||||
|
||||
export interface BlogPost {
|
||||
slug: string;
|
||||
@@ -130,6 +131,14 @@ function parseMarkdownPost(filename: string, content: string): BlogPost | null {
|
||||
}
|
||||
|
||||
export function getAllBlogPosts(): BlogPost[] {
|
||||
const cacheKey = 'blog:all-posts';
|
||||
|
||||
// Check cache first
|
||||
const cachedPosts = cache.get<BlogPost[]>(cacheKey);
|
||||
if (cachedPosts) {
|
||||
return cachedPosts;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(BLOG_POSTS_DIR)) {
|
||||
console.warn('Blog posts directory not found:', BLOG_POSTS_DIR);
|
||||
return [];
|
||||
@@ -151,7 +160,12 @@ export function getAllBlogPosts(): BlogPost[] {
|
||||
}
|
||||
|
||||
// Sort by date descending (newest first)
|
||||
return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
const sortedPosts = posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
|
||||
// Cache the results
|
||||
cache.set(cacheKey, sortedPosts);
|
||||
|
||||
return sortedPosts;
|
||||
}
|
||||
|
||||
export function getBlogPostBySlug(slug: string): BlogPost | null {
|
||||
|
||||
Reference in New Issue
Block a user