\n This is HTML content\n

\n\n### example 2 (Custom Card)\n\n:::customcard1\n{\n \"title\": \"Example Card 1\",\n \"image\": \"https://cdn.midjourney.com/3fb5dc99-7314-43cb-8cb1-7a34a2488558/0_2.png\",\n \"description\": \"This is an example of a custom card component with a primary color border.\",\n \"badges\": [\"New\", \"Featured\"],\n \"tags\": [\"Example\", \"Card\", \"DaisyUI\"],\n \"width\": 200,\n \"link\": \"https://www.duckduckgo.com\",\n \"border\": true,\n \"borderColor\": \"primary\",\n \"group\": \"group1\"\n}\n:::\n\n:::customcard1\n{\n \"title\": \"Example Card 2\",\n \"description\": \"This is an example of a custom card component without an image and with a secondary color border.\",\n \"image\": \"https://cdn.midjourney.com/fc46f1d5-1ae8-47e7-9ecb-4d947e67c15b/0_0.png\",\n \"badges\": [\"New2\", \"Featured2\"],\n \"tags\": [\"example2\", \"card2\", \"daisyUI2\"],\n \"width\": 200,\n \"link\": \"https://www.valtown.com\",\n \"border\": true,\n \"borderColor\": \"secondary\",\n \"group\": \"group1\"\n}\n:::\n\n:::customcard1\n{\n \"title\": \"Example Card 3\",\n \"description\": \"This is an example of a custom card component with an accent color border.\",\n \"image\": \"https://cdn.midjourney.com/3fb5dc99-7314-43cb-8cb1-7a34a2488558/0_2.png\",\n \"badges\": [\"new3\"],\n \"tags\": [\"example3\", \"card3\"],\n \"width\": 250,\n \"link\": \"https://www.duckduckgo.com\",\n \"border\": true,\n \"borderColor\": \"accent\",\n \"group\": \"group2\"\n}\n:::\n\n:::customcard1\n{\n \"title\": \"Example Card 4\",\n \"description\": \"This is an example of a custom card component with a custom Tailwind color border.\",\n \"image\": \"https://cdn.midjourney.com/1272f6de-08b0-45eb-a4f3-80f7e76c1c62/0_0.png\",\n \"badges\": [\"new4\"],\n \"tags\": [\"example4\", \"card4\"],\n \"width\": 250,\n \"border\": true,\n \"borderColor\": \"orange-900 bg-blue-600/70\",\n \"group\": \"group2\"\n}\n:::\n\n:::customcard1\n\n```yaml\nicon: mdi:apple\ntitle: Example Card 5\ndescription: \"This is an example of a custom card component with a custom Tailwind color border\"\nimage: https://cdn.midjourney.com/1272f6de-08b0-45eb-a4f3-80f7e76c1c62/0_0.png\nbadges:\n - new4\ntags:\n - example4\n - card4\nwidth: 250\nborder: true\nborderColor: orange-900 bg-blue-600/70\ngroup: group3\n```\n\n:::\n\n### Container Blocks\n\n:::cblock_info\nThis is an info box.\n:::\n\n:::cblock_success\nThis is a success box.\n:::\n\n:::cblock_warning\nThis is a warning box.\n:::\n\n:::cblock_danger\nThis is a danger box.\n:::\n\n### example 3 (Custom Card 2)\n\n:::customcard2\n{\n \"link\": \"https://x.com/OpenAi\",\n \"imageSrc\": \"https://pbs.twimg.com/profile_images/1885410181409820672/ztsaR0JW_400x400.jpg\",\n \"title\": \"OpenAi\",\n \"description\": \"Follow OpenAI on X for updates!\",\n \"icon\": \"simple-icons:x\",\n \"width\": \"w-48\",\n \"group\": \"Ai\"\n}\n:::\n\n:::customcard2\n{\n \"link\": \"https://x.com/embirico\",\n \"imageSrc\": \"https://pbs.twimg.com/profile_images/1649509163712561153/mTxQ1REO_400x400.jpg\",\n \"title\": \"embirico\",\n \"description\": \"Follow embirico on X for updates!\",\n \"icon\": \"simple-icons:x\",\n \"width\": \"w-48\",\n \"group\": \"Ai\"\n}\n:::\n\n:::customcard2\n{\n \"link\": \"https://x.com/sama\",\n \"imageSrc\": \"https://pbs.twimg.com/profile_images/1904933748015255552/k43GMz63_400x400.jpg\",\n \"title\": \"sama\",\n \"description\": \"Follow sama on X for updates!\",\n \"icon\": \"simple-icons:x\",\n \"width\": \"w-48\",\n \"group\": \"Ai\"\n}\n:::\n\n:::customcard2\n\n```yaml\n link: https://www.youtube.com/watch?v=90Q5bMN6u2w\n imageSrc: \"https://i.ytimg.com/vi/90Q5bMN6u2w/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLDEDBp4i_9cyamHAdM77w-IRZlEow\"\n title: Ek Din Aap - HD VIDEO | Shah Rukh Khan & Juhi Chawla | Yes Boss | 90's Romantic Hindi Songs\n description: \"Follow sama on X for updates!\"\n icon: simple-icons:youtube\n width: 96\n group: Music\n```\n\n:::\n\n\n:::customcard2\n{\n \"link\": \"https://www.youtube.com/watch?v=vzlXfZlH5dk\",\n \"imageSrc\": \"https://i.ytimg.com/vi/vzlXfZlH5dk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAMQdbPdGIA6lEJaK8M9iI2VqZ-tw\",\n \"title\": \"Main Koi Aisa Geet Gaoon - HD VIDEO | Shah Rukh Khan & Juhi Chawla | Yes Boss | 90's Romantic Songs\",\n \"description\": \"This song is a classic romantic number featuring the iconic duo Shah Rukh Khan and Juhi Chawla. It captures the essence of 90's Bollywood romance and is a must-watch for fans of the genre.\",\n \"icon\": \"simple-icons:youtube\",\n \"width\": \"w-96\",\n \"group\": \"Music\"\n}\n:::\n\n:::customcard2\n{\n \"link\": \"https://www.youtube.com/watch?v=bKZTnnFU9HA\",\n \"imageSrc\": \"https://i.ytimg.com/vi/bKZTnnFU9HA/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAAqzUHP-pMvh0ecICwVRVwXlCQXg\",\n \"title\": \"Kuch Kuch Hota Hai: Title Track | 4K Video | Shah Rukh Khan| Kajol| Rani| Alka Yagnik |Udit Narayan\",\n \"description\": \"🌟 - A classic Bollywood love song that continues to touch hearts with its memorable tune and heartfelt lyrics. 💖🎶\\n\\nExperience the romance and nostalgia of Bollywood with the unforgettable Kuch Kuch Hota Hai 4K version Title Track. It's a song that never gets old! 💫📽️\\n\\nA timeless Bollywood melody that beautifully encapsulates the essence of love and friendship, with Shah Rukh Khan, Kajol & Rani's magical chemistry at its heart. 🎶💖\",\n \"icon\": \"simple-icons:youtube\",\n \"width\": \"w-96\",\n \"group\": \"Music\"\n}\n:::\n\n### json table container\n\n:::customtable1\n\n```json\n[\n {\n \"title\": \"Dil Se\",\n \"description\": \"a romantic movie\",\n \"year\": 1998,\n \"image\": \"https://cdn.midjourney.com/3fb5dc99-7314-43cb-8cb1-7a34a2488558/0_2.png\",\n \"link\": \"https://www.duckduckgo.com\"\n },\n {\n \"title\": \"Devdas\",\n \"description\": \"a tragic movie\",\n \"year\": 2002,\n \"image\": \"https://cdn.midjourney.com/3fb5dc99-7314-43cb-8cb1-7a34a2488558/0_2.png\",\n \"link\": \"https://app.squareup.com/dashboard/shifts/timecards\"\n },\n {\n \"title\": \"Phaeli\",\n \"description\": \"a comedy movie\",\n \"year\": 2005,\n \"image\": \" Alt text

\",\n \"link\": \"[](https://app.squareup.com/dashboard/shifts/timecards)\"\n }\n]\n```\n\n:::\n\n:::customtable1\n```json\n[\n {\n \"title\": \"Dil Se\",\n \"description\": \"a romantic movie\",\n \"year\": 1998,\n \"image\": \"dgfhdfgjhfghjfhj\",\n \"link\": \"dfghjfdghjf\"\n },\n {\n \"title\": \"Devdas\",\n \"description\": \"a tragic movie\",\n \"year\": 2002,\n \"image\": \"sdgfhsdfghd\",\n \"link\": \"dfghjfdghjfghj\"\n },\n {\n \"title\": \"Phaeli\",\n \"description\": \"a comedy movie\",\n \"year\": 2005,\n \"image\": \"sdfhsdfghdfgh\",\n \"link\": \"asdfsdf\"\n }\n]\n```\n\n:::\n\n### yaml table container\n\n:::customtable2\n\n```yaml\n\n- title: Dil Se\n description: a romantic movie\n year: 1998\n # Quoted to ensure HTML is treated as a string safely.\n image: ' $\"Alt$ '\n link: https://www.duckduckgo.com\n\n- title: Devdas\n description: a tragic movie\n year: 2002\n image: https://cdn.midjourney.com/3fb5dc99-7314-43cb-8cb1-7a34a2488558/0_2.png\n # This line required quoting to be a valid YAML string due to the initial '[' and Markdown-like syntax.\n link: '[](https://app.squareup.com/dashboard/shifts/timecards)'\n\n- title: Phaeli\n description: a comedy movie\n year: 2005\n # Quoted for robustness, ensuring the Markdown '![...](...)' is treated as a string.\n image: ' $\"a_lololol\"$ '\n link: https://www.duckduckgo.com\n\n- title: Phaeli\n description: a comedy movie\n year: 2005\n # Quoted for robustness, ensuring the Markdown '![...](...)' is treated as a string.\n image: ' $\"a_lololol\"$ '\n link: https://www.duckduckgo.com\n\n```\n\n:::\n\n### Mermaid Diagrams\n\n```mermaid\ngraph TD\n A[Start] --> B{Is it?}\n B -- Yes --> C[OK]\n C --> D[Rethink]\n D --> B\n B -- No ----> E[End]\n```\n\n### Visible text versus invisible note\n\nHere's a paragraph that will be visible.\n\n[This is a comment that will be hidden.]: #\n\nAnd here's another paragraph that's visible.\n\n### Superscript and Subscript\n\n- 19^th^\n- H~2~O\n\n### Marked and Inserted Text\n\n==Marked text==\n\n++Inserted text++\n\n## Escaping\n\n\\* This is not italic \\*\n\n## Line Breaks\n\nThis is the first line. \nThis is the second line.\n\n## not supported\n\n### Math (if supported)\n\nInline math: $E = mc^2$\n\nDisplay math:\n\n$$\n\\\\frac{\\\\partial f}{\\\\partial x} = \\\\lim_{h \\\\to 0} \\\\frac{f(x + h) - f(x)}{h}\n$$\n\nand more math:\n\n$$\n\\\\int_{-\\\\infty}^{\\\\infty} e^{-x^2} \\\\, dx = \\\\sqrt{\\\\pi}\n$$\n\n### Footnotes\n\nHere's a sentence with a footnote. [^1]\n\n[^1]: This is the footnote.\n\n### Definition Lists\n\nTerm 1\n: Definition 1\n\nTerm 2\n: Definition 2\n\n### Emoji\n\n:smile: :heart: :rocket:\n⛽ ✔︎ 🔫\n\n### Abbreviations\n\nThe HTML specification is maintained by the W3C.\n\n*[HTML]: Hyper Text Markup Language\n*[W3C]: World Wide Web Consortium",[],[150,189],[150],{"_105":198,"_98":199,"_151":200,"_153":-5,"_154":138,"_155":201,"_157":119,"_107":202,"_102":173,"_160":203,"_162":204,"_163":27,"_164":-5,"_165":205,"_101":206},"9eb2102c-436f-11f0-a242-76b3cceeab13","App.tsx","b421c642-436e-11f0-9f1d-76b3cceeab13",43,["D",1749280713130],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { BlogHeader } from \"./components.tsx\";\nimport type { PostData } from \"./config.ts\";\nimport { Post } from \"./Post.tsx\";\n\ninterface AppProps {\n posts: PostData[];\n}\n\n/**\n * Homepage component displaying blog header and post previews\n */\nexport function App({ posts }: AppProps) {\n return (\n <>\n \n \n

Posts

\n\n

\n {posts.map(post => (\n \n ))}\n

\n \n );\n}",[],[199],{"_105":208,"_98":209,"_151":210,"_153":-5,"_154":138,"_155":211,"_157":119,"_107":212,"_102":213,"_160":203,"_162":214,"_163":27,"_164":-5,"_165":215,"_101":216},"8c3c5ab8-4376-11f0-99de-76b3cceeab13","Layout.tsx","a97fd0d0-436e-11f0-99f4-76b3cceeab13",67,["D",1749283688637],17,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { type ReactNode } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified theme management script\nconst THEME_SCRIPT = `\nfunction switchTheme(el) { \n document.documentElement.setAttribute('data-theme', el.value);\n localStorage.setItem('blog-theme', el.value);\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n const savedTheme = localStorage.getItem('blog-theme');\n const themeSelect = document.getElementById('theme');\n \n if (savedTheme && themeSelect) {\n document.documentElement.setAttribute('data-theme', savedTheme);\n themeSelect.value = savedTheme;\n }\n \n if (themeSelect) {\n themeSelect.addEventListener('change', function() { switchTheme(this); });\n }\n});\n`;\n\n/**\n * Simple layout wrapper\n */\nexport function Layout({ children }: { children: ReactNode }) {\n return

{children}

;\n}\n\n/**\n * Creates complete HTML document with DaisyUI styling\n */\nexport function createHtmlDocument(bodyContent: string): string {\n return `\n\n \n \n \n My blog\n \n \n \n \n \n \n \n \n \n

\n ${bodyContent}\n

\n \n`;\n}",[],[209],{"_105":218,"_98":219,"_151":220,"_153":-5,"_154":138,"_155":137,"_157":119,"_107":221,"_102":222,"_160":203,"_162":223,"_163":27,"_164":-5,"_165":224,"_101":225},"5ef8aeca-43f4-11f0-8bb8-76b3cceeab13","Post.tsx","9e64351a-436e-11f0-bb8b-76b3cceeab13",["D",1749337729283],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Markdown from \"https://esm.sh/react-markdown@9?deps=react@18.2.0\";\nimport rehypeRaw from \"https://esm.sh/rehype-raw@7?deps=react@18.2.0\";\nimport remarkGfm from \"https://esm.sh/remark-gfm@4?deps=react@18.2.0\";\nimport { createPreview, getPostTitle } from \"./utils.ts\";\n\ninterface PostProps {\n content: string;\n filename: string;\n isPreview?: boolean;\n}\n\n/**\n * Copy button component for code blocks\n */\nfunction CopyButton({ text }: { text: string }) {\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n };\n\n return (\n \n 📋\n \n );\n}\n\n/**\n * Custom components for markdown rendering with DaisyUI classes\n */\nconst markdownComponents = {\n h1: ({ children }: any) => (\n

\n 📖\n {children}\n

\n ),\n h2: ({ children }: any) => (\n

\n 📝\n {children}\n

\n ),\n h3: ({ children }: any) => (\n

\n 📌\n {children}\n

\n ),\n h4: ({ children }: any) => (\n

\n 🔸\n {children}\n

\n ),\n h5: ({ children }: any) => (\n

\n ▪️\n {children}\n

\n ),\n h6: ({ children }: any) => (\n

\n •\n {children}\n

\n ),\n p: ({ children }: any) =>

{children}

,\n ul: ({ children }: any) =>

{children},\n ol: ({ children }: any) =>

{children},\n li: ({ children, className }: any) => {\n // Handle task list items - check if the first child is an input element (task list)\n if (Array.isArray(children) && children[0]?.type === \"input\" && children[0]?.props?.type === \"checkbox\") {\n const checkbox = children[0];\n const text = children.slice(1);\n\n return (\n

\n \n {text}\n

\n );\n }\n\n // Fallback: Handle task list items by text content\n if (typeof children === \"string\" || (Array.isArray(children) && typeof children[0] === \"string\")) {\n const content = Array.isArray(children) ? children.join(\"\") : children;\n\n // Check for task list pattern\n if (content.startsWith(\"[ ] \") || content.startsWith(\"[x] \") || content.startsWith(\"[X] \")) {\n const isChecked = content.startsWith(\"[x] \") || content.startsWith(\"[X] \");\n const text = content.substring(4);\n\n return (\n

\n \n {text}\n

\n );\n }\n }\n\n return

{children}

;\n },\n blockquote: ({ children }: any) => (\n

\n {children}\n

\n ),\n code: ({ children, className }: any) => {\n // If it's a code block (has className), it will be wrapped in

 by the markdown parser\n    // So we just style the inline code here\n    if (!className) {\n      return {children};\n    }\n    // For code blocks, return the code element that will be wrapped by \n    return {children};\n  },\n  pre: ({ children }: any) => {\n    // Extract the text content for the copy button\n    const codeText = children?.props?.children || \"\";\n\n    return (\n      \n        \n          {children}\n        
\n        \n      
\n    );\n  },\n  a: ({ children, href }: any) => {children},\n  img: ({ src, alt, title }: any) => (\n    \n  ),\n  table: ({ children }: any) => (\n    \n      \n        {children}\n      
\n    
\n  ),\n  thead: ({ children }: any) => {children},\n  tbody: ({ children }: any) => {children},\n  tr: ({ children }: any) => {children},\n  th: ({ children }: any) => {children},\n  td: ({ children }: any) => {children},\n  input: ({ type, checked, ...props }: any) => {\n    if (type === \"checkbox\") {\n      return (\n        \n      );\n    }\n    return ;\n  },\n  hr: () => 
,\n  strong: ({ children }: any) => {children},\n  em: ({ children }: any) => {children},\n};\n\n/**\n * Unified post component for both preview and full content display\n */\nexport function Post({ content, filename, isPreview = true }: PostProps) {\n  const displayContent = isPreview ? createPreview(content) : content;\n  const title = getPostTitle(filename);\n  const cardClasses = `card bg-base-200 shadow-lg ${\n    isPreview ? \"hover:shadow-xl transition-shadow cursor-pointer\" : \"\"\n  }`;\n\n  const postCard = (\n    \n      \n        {isPreview && {title}
}\n        \n          \n            {displayContent}\n          \n        
\n      
\n    
\n  );\n\n  return isPreview\n    ? (\n      \n        {postCard}\n      \n    )\n    : postCard;\n}",[],[219],{"_105":227,"_98":228,"_151":229,"_153":-5,"_154":138,"_155":230,"_157":119,"_107":231,"_102":232,"_160":174,"_162":233,"_163":27,"_164":-5,"_165":234,"_101":235},"3506ddee-4377-11f0-9b95-76b3cceeab13","README.md","e0bbbaa0-436e-11f0-b0c9-76b3cceeab13",72,["D",1749283971818],9,"# Minimal Markdown Blog\n\nA clean, modern blog built with React, DaisyUI, and Val Town. Features enhanced markdown rendering, theme switching, and responsive design.\n\n## Features\n\n- **Modern UI**: DaisyUI components with 18 curated themes\n- **Enhanced Markdown**: Improved rendering with icons, proper indentation, and styling\n- **Clickable Post Cards**: Entire cards are clickable for better UX\n- **Theme Persistence**: Automatic theme saving via localStorage\n- **HTML in Markdown**: Full HTML support within markdown files\n- **Responsive Design**: Mobile-friendly layout\n- **DaisyUI Styling**: Consistent design system with Tailwind CSS classes\n\n## Recent Improvements\n\n### ✅ Markdown Enhancements\n- **Removed Math/KaTeX Support**: Cleaned up unnecessary dependencies\n- **Fixed Table Rendering**: Proper table structure with headers, body, and responsive wrapper\n- **Added Heading Icons**: Each heading level has a unique icon (📖, 📝, 📌, 🔸, ▪️, •)\n- **Fixed List Indentation**: Proper `ml-6` indentation for nested lists\n- **DaisyUI Task Lists**: Task list items now show proper DaisyUI checkboxes instead of plain text\n- **Enhanced Code Blocks**: \n  - `w-fit` sizing for better layout\n  - Copy button (📋) with hover effects\n  - Proper positioning and styling\n\n### Markdown Component Features\n\n#### Headings with Icons\n- H1: 📖 (Book icon)\n- H2: 📝 (Memo icon) \n- H3: 📌 (Pushpin icon)\n- H4: 🔸 (Diamond icon)\n- H5: ▪️ (Small square icon)\n- H6: • (Bullet icon)\n\n#### Lists\n- **Unordered/Ordered Lists**: Proper `ml-6` indentation for nested items\n- **Task Lists**: DaisyUI checkbox components with `checkbox checkbox-sm` classes\n- Support for `[ ]`, `[x]`, and `[X]` syntax\n\n#### Code Blocks\n- **Inline Code**: Styled with `bg-base-300 px-2 py-1 rounded`\n- **Code Blocks**: \n  - `w-fit max-w-full` sizing\n  - Relative positioning for copy button\n  - Copy button with clipboard emoji (📋)\n  - Hover effects and proper accessibility\n\n#### Tables\n- **Responsive Wrapper**: `overflow-x-auto` container\n- **DaisyUI Styling**: `table table-zebra w-full`\n- **Proper Structure**: `thead`, `tbody`, `tr`, `th`, `td` elements\n- **Enhanced Headers**: `bg-base-300` background for distinction\n\n## Project Structure\n\n```\n├── main.tsx              # HTTP entry point\n├── routes.ts             # Request routing and page rendering\n├── config.ts             # Shared configuration and types\n├── utils.ts              # Utility functions\n├── components.tsx        # Reusable UI components\n├── App.tsx               # Homepage component\n├── Post.tsx              # Enhanced post component with improved markdown\n├── Layout.tsx            # HTML layout (KaTeX removed)\n├── posts/                # Markdown blog posts\n│   ├── test.md          # Comprehensive test file\n│   └── showcase.md      # Clean showcase of features\n└── README.md\n```\n\n## Architecture\n\n### Design Principles Applied\n- **KISS**: Simple, focused components with single responsibilities\n- **DRY**: Shared configuration, utilities, and reusable components\n- **SoC**: Clear separation between routing, UI, and utilities\n- **YAGNI**: Removed unused features (KaTeX) and excessive complexity\n- **SRP**: Each component has a single, clear purpose\n\n### Key Components\n\n**Post.tsx** - Enhanced markdown rendering\n- Custom markdown components with DaisyUI styling\n- Icon-enhanced headings for better visual hierarchy\n- Proper list indentation and task list checkboxes\n- Code blocks with copy functionality\n- Responsive table rendering\n- Support for remark-gfm (GitHub Flavored Markdown)\n\n**Layout.tsx** - Cleaned up HTML generation\n- Removed KaTeX dependencies\n- Streamlined CSS and JavaScript loading\n- Maintained theme management functionality\n\n## Refactoring Results\n\n### Code Improvements\n- **Enhanced Markdown**: Better visual hierarchy and functionality\n- **Removed Dependencies**: KaTeX scripts eliminated\n- **Better UX**: Copy buttons, proper checkboxes, responsive tables\n- **Consistent Styling**: All elements use DaisyUI classes\n\n### Eliminated Issues\n- ❌ Math rendering dependencies (KaTeX)\n- ❌ Broken table rendering\n- ❌ Plain text task lists\n- ❌ Poor list indentation\n- ❌ Basic code blocks without copy functionality\n\n### New Features\n- ✅ Heading icons for visual hierarchy\n- ✅ Proper DaisyUI task list checkboxes\n- ✅ Copy buttons on code blocks\n- ✅ Responsive table containers\n- ✅ Enhanced list indentation\n- ✅ GitHub Flavored Markdown support\n\n## Usage\n\n1. Add `.md` files to `posts/` directory\n2. Use standard markdown syntax with GitHub extensions\n3. Task lists with `- [ ]` and `- [x]` syntax\n4. Tables with proper header/body structure\n5. Code blocks with automatic copy functionality\n6. Click post cards to view full content\n7. Use theme selector to change appearance\n\n## Technical Highlights\n\n- **TypeScript**: Full type safety with interfaces\n- **React 18**: Modern JSX with proper imports\n- **DaisyUI**: Utility-first CSS framework\n- **Enhanced Markdown**: react-markdown with remark-gfm\n- **Theme System**: Persistent theme switching with 18 curated options\n- **Responsive Design**: Mobile-first approach with Tailwind CSS\n- **Accessibility**: Proper ARIA labels and semantic HTML\n\nThe blog now provides a superior markdown experience with better visual design, enhanced functionality, and cleaner code architecture.",[],[228],{"_105":237,"_98":238,"_151":239,"_153":-5,"_154":138,"_155":240,"_157":119,"_107":241,"_102":173,"_160":203,"_162":242,"_163":27,"_164":-5,"_165":243,"_101":244},"9b7a5a2c-436f-11f0-919e-76b3cceeab13","components.tsx","8e5b4f1e-436e-11f0-84f0-76b3cceeab13",42,["D",1749280707719],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { BLOG_CONFIG, THEMES } from \"./config.ts\";\n\n/**\n * Theme selector dropdown\n */\nexport function ThemeSelector() {\n  return (\n    \n  );\n}\n\n/**\n * Blog header with title, description and theme selector\n */\nexport function BlogHeader() {\n  return (\n    \n      {BLOG_CONFIG.title}
\n      \n        \n          Choose Theme\n        \n        \n      
\n      {BLOG_CONFIG.description}
\n    
\n  );\n}\n\n/**\n * Simple back navigation\n */\nexport function Breadcrumbs() {\n  return (\n    \n      \n        \n          ← Back to home\n        
\n      
\n    
\n  );\n}",[],[238],{"_105":246,"_98":247,"_151":248,"_153":-5,"_154":138,"_155":249,"_157":119,"_107":250,"_102":173,"_160":203,"_162":251,"_163":27,"_164":-5,"_165":252,"_101":253},"ba81d5d0-436f-11f0-8e81-76b3cceeab13","config.ts","7e479218-436e-11f0-aee6-76b3cceeab13",47,["D",1749280759790],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// Blog configuration\nexport const BLOG_CONFIG = {\n  title: \"My Blog!\",\n  description: \"Welcome to my blog where I share thoughts and ideas.\",\n  maxPreviewLength: 200,\n} as const;\n\n// Essential DaisyUI themes (reduced from 30+ to most popular)\nexport const THEMES = [\n  \"light\",\n  \"dark\", \n  \"cupcake\",\n  \"emerald\",\n  \"corporate\",\n  \"synthwave\",\n  \"retro\",\n  \"cyberpunk\",\n  \"valentine\",\n  \"garden\",\n  \"forest\",\n  \"lofi\",\n  \"pastel\",\n  \"wireframe\",\n  \"luxury\",\n  \"dracula\",\n  \"business\",\n  \"night\",\n] as const;\n\nexport type Theme = typeof THEMES[number];\n\n// Post data interface\nexport interface PostData {\n  content: string;\n  filename: string;\n}",[],[247],{"_105":255,"_98":256,"_151":117,"_153":-5,"_154":138,"_155":173,"_157":119,"_107":257,"_102":258,"_160":259,"_162":260,"_163":27,"_164":-5,"_165":261,"_101":262},"55676224-436e-11f0-bb8b-76b3cceeab13","main.tsx",["D",1749280160671],2,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { handleRequest } from \"./routes.ts\";\n\n/**\n * Main HTTP handler - entry point for all requests\n */\nexport default async function(req: Request): Promise {\n  return handleRequest(req);\n}",[],[256],{"_105":264,"_98":265,"_151":266,"_153":-5,"_154":138,"_155":267,"_157":119,"_107":268,"_102":269,"_160":203,"_162":270,"_163":27,"_164":-5,"_165":271,"_101":272},"a554e62a-436f-11f0-a242-76b3cceeab13","routes.ts","5b36af02-436e-11f0-a69f-76b3cceeab13",44,["D",1749280724264],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { App } from \"./App.tsx\";\nimport { BlogHeader, Breadcrumbs } from \"./components.tsx\";\nimport type { PostData } from \"./config.ts\";\nimport { Layout, createHtmlDocument } from \"./Layout.tsx\";\nimport { Post } from \"./Post.tsx\";\nimport { createHtmlResponse } from \"./utils.ts\";\n\n/**\n * Loads all blog posts from the posts directory\n */\nasync function loadPosts(): Promise {\n  const files = await listFiles(import.meta.url);\n  const postFiles = files.filter(file => file.path.startsWith(\"posts/\"));\n\n  return Promise.all(\n    postFiles.map(async file => ({\n      content: await readFile(file.path, import.meta.url),\n      filename: file.name,\n    }))\n  );\n}\n\n/**\n * Renders React component to complete HTML document\n */\nfunction renderPage(children: React.ReactNode): Response {\n  const bodyContent = renderToString({children});\n  const html = createHtmlDocument(bodyContent);\n  return createHtmlResponse(html);\n}\n\n/**\n * Main request handler with routing logic\n */\nexport async function handleRequest(req: Request): Promise {\n  const { pathname } = new URL(req.url);\n\n  // Homepage - show all post previews\n  if (pathname === \"/\") {\n    const posts = await loadPosts();\n    return renderPage();\n  }\n\n  // Individual post pages\n  if (pathname.startsWith(\"/posts/\")) {\n    try {\n      const content = await readFile(pathname, import.meta.url);\n      const filename = pathname.split(\"/\").pop() || \"\";\n\n      return renderPage(\n        <>\n          \n          \n          \n        \n      );\n    } catch {\n      return new Response(\"Post not found\", { status: 404 });\n    }\n  }\n\n  return new Response(\"Not found\", { status: 404 });\n}",[],[265],{"_105":274,"_98":275,"_151":276,"_153":-5,"_154":138,"_155":277,"_157":119,"_107":278,"_102":173,"_160":203,"_162":279,"_163":27,"_164":-5,"_165":280,"_101":281},"a94d0a28-436f-11f0-85cd-76b3cceeab13","utils.ts","68a7b528-436e-11f0-84c6-76b3cceeab13",45,["D",1749280730922],"import { BLOG_CONFIG } from \"./config.ts\";\n\n/**\n * Creates a preview of markdown content by taking first paragraph or truncating\n */\nexport function createPreview(content: string): string {\n  const firstParagraph = content.split(\"\\n\\n\")[0];\n  \n  if (firstParagraph.length <= BLOG_CONFIG.maxPreviewLength) {\n    return firstParagraph + (content.length > firstParagraph.length ? \"...\" : \"\");\n  }\n  \n  return content.substring(0, BLOG_CONFIG.maxPreviewLength) + \"...\";\n}\n\n/**\n * Extracts clean post title from filename\n */\nexport function getPostTitle(filename: string): string {\n  return filename.replace(\".md\", \"\");\n}\n\n/**\n * Creates HTML response with proper content type\n */\nexport function createHtmlResponse(html: string): Response {\n  return new Response(html, {\n    headers: { \"content-type\": \"text/html;\" },\n  });\n}",[],[275],"files",[148,167,178,187,197,207,217,226,236,245,254,263,273],"counts",{"_286":31,"_287":288,"_289":31,"_290":31},"pulls","branches",6,"forks","envVars","contents",[293,296,299,302,305,308,311,314,317,320],{"_105":149,"_98":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":119,"_107":294,"_102":159,"_160":161,"_162":-5,"_163":27,"_164":-5,"_101":295},["D",1749280338847],[150],{"_105":198,"_98":199,"_151":200,"_153":-5,"_154":138,"_155":201,"_157":119,"_107":297,"_102":173,"_160":203,"_162":204,"_163":27,"_164":-5,"_101":298},["D",1749280713130],[199],{"_105":208,"_98":209,"_151":210,"_153":-5,"_154":138,"_155":211,"_157":119,"_107":300,"_102":213,"_160":203,"_162":214,"_163":27,"_164":-5,"_101":301},["D",1749283688637],[209],{"_105":218,"_98":219,"_151":220,"_153":-5,"_154":138,"_155":137,"_157":119,"_107":303,"_102":222,"_160":203,"_162":223,"_163":27,"_164":-5,"_101":304},["D",1749337729283],[219],{"_105":227,"_98":228,"_151":229,"_153":-5,"_154":138,"_155":230,"_157":119,"_107":306,"_102":232,"_160":174,"_162":233,"_163":27,"_164":-5,"_101":307},["D",1749283971818],[228],{"_105":237,"_98":238,"_151":239,"_153":-5,"_154":138,"_155":240,"_157":119,"_107":309,"_102":173,"_160":203,"_162":242,"_163":27,"_164":-5,"_101":310},["D",1749280707719],[238],{"_105":246,"_98":247,"_151":248,"_153":-5,"_154":138,"_155":249,"_157":119,"_107":312,"_102":173,"_160":203,"_162":251,"_163":27,"_164":-5,"_101":313},["D",1749280759790],[247],{"_105":255,"_98":256,"_151":117,"_153":-5,"_154":138,"_155":173,"_157":119,"_107":315,"_102":258,"_160":259,"_162":260,"_163":27,"_164":-5,"_101":316},["D",1749280160671],[256],{"_105":264,"_98":265,"_151":266,"_153":-5,"_154":138,"_155":267,"_157":119,"_107":318,"_102":269,"_160":203,"_162":270,"_163":27,"_164":-5,"_101":319},["D",1749280724264],[265],{"_105":274,"_98":275,"_151":276,"_153":-5,"_154":138,"_155":277,"_157":119,"_107":321,"_102":173,"_160":203,"_162":279,"_163":27,"_164":-5,"_101":322},["D",1749280730922],[275],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.remixes",{"_96":97,"_98":99,"_103":329,"_289":333,"_334":-5},{"_105":106,"_98":99,"_107":330,"_109":-5,"_110":27,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":117,"_118":119,"_120":-5,"_121":31,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":27,"_21":331,"_135":332},["D",1749280122533],{"_96":97,"_133":134},{"_102":137,"_98":42,"_105":138,"_139":106,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":99,"_145":97},[],"upstream","routes/_app","actionData","errors"]