Log inSign up
arfan
arfanmin-md-blog
Public
Like
min-md-blog
Code
10
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Search
Open in new tab
README.md

Minimal Markdown Blog

A clean, modern blog built with React, DaisyUI, and Val Town. Features enhanced markdown rendering, theme switching, and responsive design.

Features

  • 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

Recent Improvements

✅ Markdown Enhancements

  • 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

Markdown Component Features

Headings with Icons

  • H1: 📖 (Book icon)
  • H2: 📝 (Memo icon)
  • H3: 📌 (Pushpin icon)
  • H4: 🔸 (Diamond icon)
  • H5: ▪️ (Small square icon)
  • H6: • (Bullet icon)

Lists

  • 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

Code Blocks

  • 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

Tables

  • 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

Project Structure

├── 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

Architecture

Design Principles Applied

  • 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

Key Components

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

Refactoring Results

Code Improvements

  • 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

Eliminated Issues

  • ❌ Math rendering dependencies (KaTeX)
  • ❌ Broken table rendering
  • ❌ Plain text task lists
  • ❌ Poor list indentation
  • ❌ Basic code blocks without copy functionality

New Features

  • ✅ 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

Usage

  1. Add .md files to posts/ directory
  2. Use standard markdown syntax with GitHub extensions
  3. Task lists with - [ ] and - [x] syntax
  4. Tables with proper header/body structure
  5. Code blocks with automatic copy functionality
  6. Click post cards to view full content
  7. Use theme selector to change appearance

Technical Highlights

  • 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.

Code