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.
A clean, modern blog built with React, DaisyUI, and Val Town. Features enhanced markdown rendering, theme switching, and responsive design.
- Modern UI: DaisyUI components with 18 curated themes
- Enhanced Markdown: Improved rendering with icons, proper indentation, and styling
- 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
- Responsive Design: Mobile-friendly layout
- DaisyUI Styling: Consistent design system with Tailwind CSS classes
- Removed Math/KaTeX Support: Cleaned up unnecessary dependencies
- Fixed Table Rendering: Proper table structure with headers, body, and responsive wrapper
- Added Heading Icons: Each heading level has a unique icon (📖, 📝, 📌, 🔸, ▪️, •)
- Fixed List Indentation: Proper
ml-6
indentation for nested lists - DaisyUI Task Lists: Task list items now show proper DaisyUI checkboxes instead of plain text
- Enhanced Code Blocks:
w-fit
sizing for better layout- Copy button (📋) with hover effects
- Proper positioning and styling
- H1: 📖 (Book icon)
- H2: 📝 (Memo icon)
- H3: 📌 (Pushpin icon)
- H4: 🔸 (Diamond icon)
- H5: ▪️ (Small square icon)
- H6: • (Bullet icon)
- Unordered/Ordered Lists: Proper
ml-6
indentation for nested items - Task Lists: DaisyUI checkbox components with
checkbox checkbox-sm
classes - Support for
[ ]
,[x]
, and[X]
syntax
- Inline Code: Styled with
bg-base-300 px-2 py-1 rounded
- Code Blocks:
w-fit max-w-full
sizing- Relative positioning for copy button
- Copy button with clipboard emoji (📋)
- Hover effects and proper accessibility
- Responsive Wrapper:
overflow-x-auto
container - DaisyUI Styling:
table table-zebra w-full
- Proper Structure:
thead
,tbody
,tr
,th
,td
elements - Enhanced Headers:
bg-base-300
background for distinction
├── 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 # Enhanced post component with improved markdown
├── Layout.tsx # HTML layout (KaTeX removed)
├── posts/ # Markdown blog posts
│ ├── test.md # Comprehensive test file
│ └── showcase.md # Clean showcase of features
└── 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 (KaTeX) and excessive complexity
- SRP: Each component has a single, clear purpose
Post.tsx - Enhanced markdown rendering
- Custom markdown components with DaisyUI styling
- Icon-enhanced headings for better visual hierarchy
- Proper list indentation and task list checkboxes
- Code blocks with copy functionality
- Responsive table rendering
- Support for remark-gfm (GitHub Flavored Markdown)
Layout.tsx - Cleaned up HTML generation
- Removed KaTeX dependencies
- Streamlined CSS and JavaScript loading
- Maintained theme management functionality
- Enhanced Markdown: Better visual hierarchy and functionality
- Removed Dependencies: KaTeX scripts eliminated
- Better UX: Copy buttons, proper checkboxes, responsive tables
- Consistent Styling: All elements use DaisyUI classes
- ❌ Math rendering dependencies (KaTeX)
- ❌ Broken table rendering
- ❌ Plain text task lists
- ❌ Poor list indentation
- ❌ Basic code blocks without copy functionality
- ✅ Heading icons for visual hierarchy
- ✅ Proper DaisyUI task list checkboxes
- ✅ Copy buttons on code blocks
- ✅ Responsive table containers
- ✅ Enhanced list indentation
- ✅ GitHub Flavored Markdown support
- Add
.md
files toposts/
directory - Use standard markdown syntax with GitHub extensions
- Task lists with
- [ ]
and- [x]
syntax - Tables with proper header/body structure
- Code blocks with automatic copy functionality
- Click post cards to view full content
- Use theme selector to change appearance
- TypeScript: Full type safety with interfaces
- React 18: Modern JSX with proper imports
- DaisyUI: Utility-first CSS framework
- Enhanced Markdown: react-markdown with remark-gfm
- Theme System: Persistent theme switching with 18 curated options
- Responsive Design: Mobile-first approach with Tailwind CSS
- Accessibility: Proper ARIA labels and semantic HTML
The blog now provides a superior markdown experience with better visual design, enhanced functionality, and cleaner code architecture.