Unlisted
Like
min-md-blog
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v50View latest version
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 18 curated 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 # Unified post 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 and excessive complexity
- SRP: Each component has a single, clear purpose
config.ts - Centralized configuration
- Blog settings (title, description, preview length)
- Curated theme list (reduced from 30+ to 18 essential themes)
- Shared TypeScript interfaces
utils.ts - Pure utility functions
- Content preview generation with smart truncation
- Post title extraction from filenames
- HTML response creation with proper headers
components.tsx - Reusable UI components
ThemeSelector
: DaisyUI theme dropdownBlogHeader
: Title, description and theme selectorBreadcrumbs
: Simple navigation for post pages
Post.tsx - Unified post component
- Handles both preview and full content display
- Single component with conditional rendering
- Eliminates code duplication
Layout.tsx - Minimal HTML document generation
- Consolidated CSS styles (reduced redundancy)
- Simplified theme management script
- Essential external dependencies only
routes.ts - Clean request handling
- Separated data loading from rendering
- Consistent error handling
- Reusable page rendering function
- Lines of Code: ~400 → ~180 (55% reduction)
- CSS Rules: Consolidated similar styles, removed redundancy
- Theme List: 30+ themes → 18 curated themes
- Script Complexity: Simplified theme management logic
- ❌ Unused theme configuration complexity
- ❌ Redundant CSS rules and duplicate styles
- ❌ Verbose inline scripts and unnecessary dependencies
- ❌ Mixed UI/routing concerns
- ❌ Duplicate component logic
- ❌ Excessive external library dependencies
- ✅ Centralized configuration management
- ✅ Reusable, focused components
- ✅ Clear separation of concerns
- ✅ Consistent naming conventions
- ✅ Simplified component logic
- ✅ Better error handling
- ✅ Reduced bundle size and complexity
- Faster Load Times: Reduced CSS and JavaScript
- Smaller Bundle: Fewer external dependencies
- Better Caching: Consolidated styles and scripts
- Cleaner HTML: Minimal, semantic markup
- Add
.md
files toposts/
directory - Click post cards to view full content
- Use theme selector to change appearance
- Include HTML in markdown for rich content
- TypeScript: Full type safety with interfaces
- React 18: Modern JSX with proper imports
- DaisyUI: Utility-first CSS framework
- Markdown: Rich content with HTML support
- Math Rendering: KaTeX for mathematical expressions
- Code Highlighting: Syntax highlighting for code blocks
- Theme System: Persistent theme switching
The refactored codebase is now more maintainable, performant, and follows modern development best practices while maintaining all original functionality.