refactor: reorganize blog types and improve code structure

- Move BlogPost types from content to lib/blog-data.d
- Clean up test files by removing CSS-based tests and duplicate logic
- Update all imports to use centralized type definitions
- Remove unused blog.ts content file
- Fix client-server code separation to prevent Node.js module imports
- Improve component mocking structure and test organization
- Ensure all 73 tests pass and build succeeds

Author: attarchi

src/__tests__/content/blog-posts.test.ts

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import { BlogPostFrontmatter } from '@/content';
+import { describe, it, expect } from '@jest/globals';
+import { type BlogPostFrontmatter } from '@/lib';
 
 describe('Blog Posts Content Validation', () => {
     const postsDirectory = path.join(process.cwd(), 'src/content/posts');

src/components/blog/__mocks__/blog-post-card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 interface BlogPostCardProps {
   post: BlogPost;

src/components/blog/__mocks__/blog-post-page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 interface BlogPostPageProps {
   post: BlogPost;

src/components/blog/__mocks__/post-navigation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 interface PostNavigationProps {
   prev?: BlogPost;

src/components/blog/__tests__/blog-post-card.navigation.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { BlogPostCard } from '../blog-post-card';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 const mockPost: BlogPost = {
   title: 'Building Offline-First Apps',

src/components/blog/__tests__/blog-post-card.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { BlogPostCard } from '../blog-post-card';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 const mockBlogPost: BlogPost = {
   title: 'Building Offline-First Apps',

src/components/blog/__tests__/blog-post-page.test.tsx

@@ -1,57 +1,48 @@
 import { render, screen } from '@testing-library/react';
 import { BlogPostPage } from '../blog-post-page';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
-// Mock the markdown parser
-jest.mock('@/lib/markdown-parser', () => ({
+// Mock sub-components
+jest.mock('../post-navigation', () => ({
+  PostNavigation: jest.fn(() => <div data-testid="post-navigation" />)
+}));
+
+jest.mock('@/components/ui', () => ({
+  ThemeToggle: jest.fn(() => <div data-testid="theme-toggle" />),
+  Badge: jest.fn(({ children, ...props }) => <span data-testid="badge" {...props}>{children}</span>),
+  Card: jest.fn(({ children, ...props }) => <div data-testid="card" {...props}>{children}</div>),
+  CardContent: jest.fn(({ children, ...props }) => <div data-testid="card-content" {...props}>{children}</div>)
+}));
+
+jest.mock('@/components/sections', () => ({
+  Footer: jest.fn(({ content }) => <footer data-testid="footer">{JSON.stringify(content)}</footer>)
+}));
+
+jest.mock('@/lib', () => ({
   parseMarkdown: jest.fn((content: string) => ({
-    content: `<div class="markdown-content">
-      <h1>Building Offline-First Apps</h1>
-      <p>This is a comprehensive guide to building offline-first applications.</p>
-      <h2>Code Example</h2>
-      <pre><code>const syncData = async () => {
-  const offlineData = await getOfflineData();
-  const onlineData = await fetchOnlineData();
-  return mergeData(offlineData, onlineData);
-};</code></pre>
-      <h2>Key Points</h2>
-      <ul>
-        <li>Real-time synchronization</li>
-        <li>Conflict resolution</li>
-        <li>Data persistence</li>
-      </ul>
-    </div>`
+    content: `<div class="markdown-content">${content}</div>`
   }))
 }));
 
+// Mock footer content
+jest.mock('@/content', () => ({
+  ...jest.requireActual('@/content'),
+  footerContent: {
+    copyright: { title: 'Test', companyName: 'Test', showcaseMessage: 'Test' },
+    repository: { title: 'Test', url: 'test', text: 'Test' },
+    license: { title: 'Test', name: 'Test', description: 'Test' },
+    buildInfo: 'Test'
+  }
+}));
+
 const mockBlogPost: BlogPost = {
   title: 'Building Offline-First Apps',
   slug: 'building-offline-first-apps',
   date: new Date('2025-01-15'),
   excerpt: 'Real-time synchronization strategies for mobile applications',
   tags: ['React Native', 'Offline', 'Sync'],
   category: 'Mobile Development',
-  content: `
-# Building Offline-First Apps
-
-This is a comprehensive guide to building offline-first applications.
-
-## Code Example
-
-\`\`\`javascript
-const syncData = async () => {
-  const offlineData = await getOfflineData();
-  const onlineData = await fetchOnlineData();
-  return mergeData(offlineData, onlineData);
-};
-\`\`\`
-
-## Key Points
-
-- Real-time synchronization
-- Conflict resolution
-- Data persistence
-`,
+  content: '# Test Content\nThis is test content.',
   readingTime: 8,
   published: true
 };
@@ -61,6 +52,7 @@ const prevPost = {
   title: 'Prev Post',
   slug: 'prev-post',
 };
+
 const nextPost = {
   ...mockBlogPost,
   title: 'Next Post',
@@ -69,109 +61,51 @@ const nextPost = {
 
 describe('BlogPostPage', () => {
   beforeEach(() => {
-    // Clear all mocks before each test
     jest.clearAllMocks();
   });
 
-  it('renders blog post content', () => {
+  it('renders blog post title', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    // There are two h1s (header and markdown), so use getAllByText
-    expect(screen.getAllByText('Building Offline-First Apps').length).toBeGreaterThan(0);
-    expect(screen.getByText('Real-time synchronization strategies for mobile applications')).toBeInTheDocument();
+    expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
   });
 
-  it('displays metadata correctly', () => {
+  it('displays post metadata', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    // Check date
     expect(screen.getByText('2025-01-15')).toBeInTheDocument();
-    
-    // Check reading time
     expect(screen.getByText('8 min read')).toBeInTheDocument();
-    
-    // Check category
     expect(screen.getByText('Mobile Development')).toBeInTheDocument();
   });
 
-  it('displays tags as badges', () => {
+  it('displays post excerpt', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    expect(screen.getByText('React Native')).toBeInTheDocument();
-    expect(screen.getByText('Offline')).toBeInTheDocument();
-    expect(screen.getByText('Sync')).toBeInTheDocument();
-  });
-
-  it('renders markdown content with proper styling', () => {
-    render(<BlogPostPage post={mockBlogPost} />);
-    // Markdown content is in a <p> and <h2> etc, so use getByText for each
-    expect(screen.getByText('This is a comprehensive guide to building offline-first applications.')).toBeInTheDocument();
-    expect(screen.getByText('Code Example')).toBeInTheDocument();
-    expect(screen.getByText('Key Points')).toBeInTheDocument();
-  });
-
-  it('renders code blocks with proper styling', () => {
-    render(<BlogPostPage post={mockBlogPost} />);
-    // Use regex to match code lines, since they may be split by whitespace
-    expect(screen.getByText(/const syncData = async/)).toBeInTheDocument();
-    expect(screen.getByText(/const offlineData = await getOfflineData/)).toBeInTheDocument();
-    expect(screen.getByText(/const onlineData = await fetchOnlineData/)).toBeInTheDocument();
-    expect(screen.getByText(/return mergeData\(offlineData, onlineData\)/)).toBeInTheDocument();
-    expect(screen.getByText(/};/)).toBeInTheDocument();
+    expect(screen.getByText('Real-time synchronization strategies for mobile applications')).toBeInTheDocument();
   });
 
-  it('includes navigation links', () => {
+  it('renders tags as badges', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    // Check for back to blog list link
-    expect(screen.getByText('← Back to Blog')).toBeInTheDocument();
+    expect(screen.getByText('React Native')).toBeInTheDocument();
+    expect(screen.getByText('Offline')).toBeInTheDocument();
+    expect(screen.getByText('Sync')).toBeInTheDocument();
   });
 
-  it('includes SEO elements', () => {
+  it('renders markdown content', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    // There are two h1s, so use getAllByRole
-    const h1s = screen.getAllByRole('heading', { level: 1 });
-    expect(h1s[0]).toHaveTextContent('Building Offline-First Apps');
-    // Check for article element
-    expect(screen.getByRole('article')).toBeInTheDocument();
+    expect(screen.getByTestId('blog-content')).toBeInTheDocument();
   });
 
-  it('applies proper typography classes', () => {
+  it('includes navigation components', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    // There are two h1s, so use getAllByRole
-    const h1s = screen.getAllByRole('heading', { level: 1 });
-    expect(h1s[0]).toHaveClass('font-mono');
-    // Check that body text uses Inter
-    const article = screen.getByRole('article');
-    expect(article).toHaveClass('font-sans');
+    expect(screen.getByTestId('post-navigation')).toBeInTheDocument();
   });
 
-  it('displays metadata with muted colors', () => {
+  it('includes theme toggle', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    // Check that metadata elements have muted text color
-    const dateElement = screen.getByText('2025-01-15');
-    expect(dateElement).toHaveClass('text-muted');
-    
-    const readingTimeElement = screen.getByText('8 min read');
-    expect(readingTimeElement).toHaveClass('text-muted');
+    expect(screen.getByTestId('theme-toggle')).toBeInTheDocument();
   });
 
-  it('renders navigation with accent colors', () => {
+  it('includes footer', () => {
     render(<BlogPostPage post={mockBlogPost} />);
-    
-    const backLink = screen.getByText('← Back to Blog');
-    expect(backLink).toHaveClass('text-accent');
-  });
-
-  it('handles empty content gracefully', () => {
-    const emptyPost: BlogPost = {
-      ...mockBlogPost,
-      content: ''
-    };
-    render(<BlogPostPage post={emptyPost} />);
-    expect(screen.getAllByText('Building Offline-First Apps').length).toBeGreaterThan(0);
-    expect(screen.getByRole('article')).toBeInTheDocument();
+    expect(screen.getByTestId('footer')).toBeInTheDocument();
   });
 
   it('handles posts without tags', () => {
@@ -180,16 +114,12 @@ describe('BlogPostPage', () => {
       tags: []
     };
     render(<BlogPostPage post={postWithoutTags} />);
-    expect(screen.getAllByText('Building Offline-First Apps').length).toBeGreaterThan(0);
+    expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
     expect(screen.queryByText('React Native')).not.toBeInTheDocument();
   });
 
-  it('renders post navigation with prev and next links', () => {
+  it('passes navigation props correctly', () => {
     render(<BlogPostPage post={mockBlogPost} prev={prevPost} next={nextPost} />);
-    expect(screen.getByText('← Prev Post')).toBeInTheDocument();
-    expect(screen.getByText('Next Post →')).toBeInTheDocument();
-    expect(screen.getByText('← Prev Post').closest('a')).toHaveAttribute('href', '/blog/prev-post');
-    expect(screen.getByText('Next Post →').closest('a')).toHaveAttribute('href', '/blog/next-post');
-    expect(screen.getByText('← Back to Blog')).toBeInTheDocument();
+    expect(screen.getByTestId('post-navigation')).toBeInTheDocument();
   });
 }); 

src/components/blog/__tests__/post-navigation.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { PostNavigation } from '../post-navigation';
-import { BlogPost } from '@/content';
+import { type BlogPost } from '@/lib';
 
 const prevPost: BlogPost = {
   title: 'Prev Post',

src/components/blog/blog-post-card.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { type BlogPost } from '@/content';
-import { Card, CardHeader, Badge } from '@/components/ui';
+import { type BlogPost } from '@/lib';
+import { Badge, Card, CardHeader } from '@/components/ui';
 
 interface BlogPostCardProps {
   post: BlogPost;

src/components/blog/blog-post-list.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React, { useState, useMemo } from 'react';
-import { type BlogPost, blogFiltersContent } from '@/content';
+import { type BlogPost } from '@/lib';
+import { blogFiltersContent } from '@/content';
 import { BlogPostCard } from './blog-post-card';
 import { BlogFilters } from './blog-filters';