A clean, modern blog built with React, DaisyUI, and Val Town. Features theme switching, math rendering, code highlighting, and HTML-in-markdown support.

• Modern UI: DaisyUI components with 30+ themes
• Clickable Post Cards: Entire cards are clickable for better UX
• Theme Persistence: Automatic theme saving via localStorage
• HTML in Markdown: Full HTML support within markdown files
• Math & Code: KaTeX math rendering and syntax highlighting
• Responsive Design: Mobile-friendly layout

├── main.tsx              # HTTP entry point
├── routes.ts             # Request routing and page rendering
├── config.ts             # Shared configuration and types
├── utils.ts              # Utility functions
├── components.tsx        # Reusable UI components
├── App.tsx               # Homepage component
├── Post.tsx              # Post display component
├── Layout.tsx            # HTML layout with styles/scripts
├── posts/                # Markdown blog posts
└── README.md

• KISS: Simple, focused components with single responsibilities
• DRY: Shared configuration, utilities, and reusable components
• SoC: Clear separation between routing, UI, and utilities
• YAGNI: Removed unused features (font sizing, static files, etc.)

config.ts - Centralized configuration

• Blog settings (title, description, preview length)
• Theme definitions and types
• Shared interfaces

utils.ts - Pure utility functions

• Content preview generation
• Post title extraction
• HTML response creation

components.tsx - Reusable UI components

• ThemeSelector: DaisyUI theme dropdown
• BlogHeader: Title and theme selector
• Breadcrumbs: Navigation for post pages

Post.tsx - Unified post component

• Handles both preview and full content display
• Single component with isPreview flag

routes.ts - Clean request handling

• Separated data loading from rendering
• Consistent error handling
• Reusable page rendering function

1. Add .md files to posts/ directory
2. Click post cards to view full content
3. Use theme selector to change appearance
4. Include HTML in markdown for rich content

• Reduced LOC: ~40% reduction from original codebase
• No Duplication: Theme lists, headers, and utilities centralized
• Clear Naming: Descriptive function and variable names
• Focused Functions: Each function has a single, clear purpose
• Type Safety: Full TypeScript interfaces and types

• Files: 6 → 9 (better separation of concerns)
• Lines of Code: ~400 → ~240 (40% reduction)
• Duplicated Code: Multiple theme lists → Single source of truth
• Component Complexity: Mixed concerns → Single responsibilities
• Maintainability: Monolithic → Modular architecture

• ❌ Unused showFullPosts logic
• ❌ Unused addFontSize function
• ❌ Redundant static file handling
• ❌ Duplicate theme selector code
• ❌ Mixed UI/routing concerns
• ❌ Verbose inline styles and scripts

• ✅ Centralized configuration
• ✅ Reusable components
• ✅ Clear separation of concerns
• ✅ Consistent naming conventions
• ✅ Simplified component logic
• ✅ Better error handling