\n \n 📝\n

Beautiful Blog

\n \n

Thoughts, stories, and ideas

\n \n

\n );\n}",[],[223,230,246],{"_102":253,"_95":254,"_153":255,"_155":231,"_156":138,"_157":256,"_159":116,"_104":257,"_99":32,"_161":180,"_163":258,"_164":22,"_165":-5,"_166":259,"_98":260},"9a85af80-2c37-11f0-98bc-569c3dd06744","PostList.tsx","9a85b02a-2c37-11f0-98bc-569c3dd06744",11,["D",1746727777571],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"https://esm.sh/react-router-dom@6.20.1?deps=react@18.2.0\";\nimport { PostWithTags } from \"../../shared/types.ts\";\n\ninterface PostListProps {\n posts: PostWithTags[];\n}\n\nexport function PostList({ posts }: PostListProps) {\n if (posts.length === 0) {\n return (\n

No Posts Found

There are no blog posts available at the moment. Check back later!

\n );\n }\n\n // Format date function\n const formatDate = (timestamp: number) => {\n return new Date(timestamp).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n };\n\n return (\n

Latest Posts

\n \n {/* Featured post (first post) */}\n {posts.length > 0 && (\n

\n \n

\n {posts[0].featuredImage && (\n

\n ${posts[0].title}\n$ \n

\n )}\n

\n {formatDate(posts[0].publishedAt)}\n •\n

\n {posts[0].tags.map(tag => (\n \n {tag.name}\n \n ))}\n

{posts[0].title}

\n {posts[0].excerpt || posts[0].content.substring(0, 150) + '...'}\n

\n Read more →\n

\n \n

\n )}\n \n {/* Rest of the posts in a grid */}\n

\n {posts.slice(1).map(post => (\n \n

\n {post.featuredImage && (\n

\n ${post.title}\n$ \n

\n )}\n

\n {formatDate(post.publishedAt)}\n {post.tags.length > 0 && (\n <>\n •\n

\n {post.tags.slice(0, 2).map(tag => (\n \n {tag.name}\n \n ))}\n {post.tags.length > 2 && (\n +{post.tags.length - 2}\n )}\n

\n \n )}\n

{post.title}

\n {post.excerpt || post.content.substring(0, 100) + '...'}\n

\n Read more →\n

\n \n ))}\n

\n );\n}",[],[223,230,254],{"_102":262,"_95":263,"_153":264,"_155":231,"_156":138,"_157":265,"_159":116,"_104":266,"_99":32,"_161":180,"_163":267,"_164":22,"_165":-5,"_166":268,"_98":269},"a7481c1c-2c37-11f0-8318-569c3dd06744","PostView.tsx","a7481cc6-2c37-11f0-8318-569c3dd06744",12,["D",1746727798975],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"https://esm.sh/react-router-dom@6.20.1?deps=react@18.2.0\";\nimport { PostWithTags } from \"../../shared/types.ts\";\n\n// @ts-ignore - marked is loaded from CDN\ndeclare const marked: any;\n// @ts-ignore - hljs is loaded from CDN\ndeclare const hljs: any;\n\ninterface PostViewProps {\n post: PostWithTags;\n}\n\nexport function PostView({ post }: PostViewProps) {\n // Format date\n const formatDate = (timestamp: number) => {\n return new Date(timestamp).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n };\n\n // Configure marked with syntax highlighting\n React.useEffect(() => {\n if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {\n marked.setOptions({\n highlight: function(code: string, language: string) {\n if (language && hljs.getLanguage(language)) {\n return hljs.highlight(code, { language }).value;\n }\n return hljs.highlightAuto(code).value;\n },\n breaks: true,\n gfm: true\n });\n }\n }, []);\n\n // Render markdown content\n const renderMarkdown = (content: string) => {\n if (typeof marked === 'undefined') {\n return content;\n }\n return { __html: marked.parse(content) };\n };\n\n return (\n

\n {/* Back button */}\n

\n \n \n Back to all posts\n \n

\n \n {/* Post header */}\n

{post.title}

\n {formatDate(post.publishedAt)}\n {post.tags.length > 0 && (\n <>\n •\n

\n {post.tags.map(tag => (\n \n {tag.name}\n \n ))}\n

\n \n )}\n

\n \n {/* Featured image */}\n {post.featuredImage && (\n

\n ${post.title}\n$ \n

\n )}\n

\n \n {/* Post content */}\n

\n \n {/* Post footer */}\n \n

\n );\n}",[],[223,230,263],[223,230],{"_102":272,"_95":273,"_153":274,"_155":224,"_156":138,"_157":225,"_159":116,"_104":275,"_99":32,"_161":276,"_163":277,"_164":22,"_165":-5,"_166":278,"_98":279},"7430f25e-2c37-11f0-9ddf-569c3dd06744","index.html","7430f2f4-2c37-11f0-9ddf-569c3dd06744",["D",1746727713260],"file","\n\n\n \n \n Beautiful Blog\n \n \n \n \n \n \n \n\n\n

\n \n\n",[],[223,273],{"_102":281,"_95":282,"_153":283,"_155":224,"_156":138,"_157":284,"_159":116,"_104":285,"_99":32,"_161":180,"_163":286,"_164":22,"_165":-5,"_166":287,"_98":288},"7fa6a926-2c37-11f0-99d4-569c3dd06744","index.tsx","7fa6a9e4-2c37-11f0-99d4-569c3dd06744",8,["D",1746727732486],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { BrowserRouter, Routes, Route, useParams, Link, useNavigate } from \"https://esm.sh/react-router-dom@6.20.1?deps=react@18.2.0\";\nimport { PostWithTags } from \"../shared/types.ts\";\nimport { Header } from \"./components/Header.tsx\";\nimport { Footer } from \"./components/Footer.tsx\";\nimport { PostList } from \"./components/PostList.tsx\";\nimport { PostView } from \"./components/PostView.tsx\";\n\n// Main App component\nfunction App() {\n return (\n \n

\n \n } />\n } />\n } />\n \n

\n \n );\n}\n\n// Home page component\nfunction Home() {\n const [posts, setPosts] = React.useState([]);\n const [loading, setLoading] = React.useState(true);\n const [error, setError] = React.useState(null);\n\n React.useEffect(() => {\n async function fetchPosts() {\n try {\n const response = await fetch('/api/posts');\n if (!response.ok) {\n throw new Error('Failed to fetch posts');\n }\n const data = await response.json();\n setPosts(data.posts);\n } catch (err) {\n setError('Failed to load blog posts. Please try again later.');\n console.error(err);\n } finally {\n setLoading(false);\n }\n }\n\n fetchPosts();\n }, []);\n\n if (loading) {\n return (\n

\n );\n }\n\n if (error) {\n return (\n

{error}

\n );\n }\n\n return ;\n}\n\n// Single post page component\nfunction Post() {\n const { slug } = useParams<{ slug: string }>();\n const [post, setPost] = React.useState(null);\n const [loading, setLoading] = React.useState(true);\n const [error, setError] = React.useState(null);\n const navigate = useNavigate();\n\n React.useEffect(() => {\n async function fetchPost() {\n if (!slug) return;\n \n try {\n const response = await fetch(`/api/posts/${slug}`);\n if (response.status === 404) {\n navigate('/not-found');\n return;\n }\n if (!response.ok) {\n throw new Error('Failed to fetch post');\n }\n const data = await response.json();\n setPost(data.post);\n } catch (err) {\n setError('Failed to load blog post. Please try again later.');\n console.error(err);\n } finally {\n setLoading(false);\n }\n }\n\n fetchPost();\n }, [slug, navigate]);\n\n if (loading) {\n return (\n

\n );\n }\n\n if (error) {\n return (\n

{error}

\n );\n }\n\n if (!post) {\n return (\n

Post not found

The blog post you're looking for doesn't exist or has been removed.

\n \n Back to Home\n \n

\n );\n }\n\n return ;\n}\n\n// 404 Not Found component\nfunction NotFound() {\n return (\n

Page Not Found

The page you're looking for doesn't exist or has been moved.

\n \n Back to Home\n \n

\n );\n}\n\n// Render the app\nconst root = createRoot(document.getElementById('app')!);\nroot.render();",[],[223,282],{"_102":290,"_95":291,"_153":292,"_155":224,"_156":138,"_157":137,"_159":116,"_104":293,"_99":32,"_161":276,"_163":294,"_164":22,"_165":-5,"_166":295,"_98":296},"cd7dded0-2c37-11f0-b57c-569c3dd06744","test.html","cd7de114-2c37-11f0-b57c-569c3dd06744",["D",1746727863083],"\n\n\n \n \n TEST BIG\n \n \n\n\n

TEST

BIG

\n \n \n\n",[],[223,291],[223],{"_102":299,"_95":300,"_153":301,"_155":-5,"_156":138,"_157":302,"_159":116,"_104":303,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":304,"_98":313},"65c7571c-2c37-11f0-bcb4-569c3dd06744","shared","a090259e-2fa0-4432-addf-7a1dda28d076",5,["D",1746727689078],[305],{"_102":306,"_95":307,"_153":308,"_155":301,"_156":138,"_157":302,"_159":116,"_104":309,"_99":32,"_161":180,"_163":310,"_164":22,"_165":-5,"_166":311,"_98":312},"65c725a8-2c37-11f0-bcb4-569c3dd06744","types.ts","65c7267a-2c37-11f0-bcb4-569c3dd06744",["D",1746727689078],"/**\n * Blog post type\n */\nexport interface Post {\n id: number;\n title: string;\n slug: string;\n content: string;\n excerpt?: string;\n publishedAt: number; // timestamp\n updatedAt?: number; // timestamp\n isPublished: boolean;\n featuredImage?: string;\n}\n\n/**\n * Tag type\n */\nexport interface Tag {\n id: number;\n name: string;\n slug: string;\n}\n\n/**\n * Post with associated tags\n */\nexport interface PostWithTags extends Post {\n tags: Tag[];\n}\n\n/**\n * API response for posts list\n */\nexport interface PostsResponse {\n posts: PostWithTags[];\n total: number;\n}\n\n/**\n * API response for a single post\n */\nexport interface PostResponse {\n post: PostWithTags;\n}\n\n/**\n * API response for tags list\n */\nexport interface TagsResponse {\n tags: Tag[];\n}",[],[300,307],[300],{"_102":315,"_95":316,"_153":317,"_155":-5,"_156":138,"_157":215,"_159":116,"_104":318,"_99":32,"_161":276,"_163":319,"_164":22,"_165":-5,"_166":320,"_98":321},"471a6692-2c37-11f0-a1d8-569c3dd06744","README.md","471a675a-2c37-11f0-a1d8-569c3dd06744",["D",1746727637595],"# Beautiful Blog\n\nA modern, elegant blog built on Val Town with a clean design and simple content management.\n\n## Features\n\n- Clean, responsive design with Tailwind CSS\n- Markdown support for blog posts\n- SQLite database for content storage\n- API endpoints for managing blog content\n- Beautiful typography and reading experience\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ └── queries.ts # DB query functions\n│ ├── routes/ # Route modules\n│ │ ├── posts.ts # Blog post routes\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main entry point\n├── frontend/\n│ ├── components/\n│ │ ├── Header.tsx # Blog header\n│ │ ├── Footer.tsx # Blog footer\n│ │ ├── PostList.tsx # List of blog posts\n│ │ └── PostView.tsx # Single post view\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend JS entry point\n└── shared/\n └── types.ts # Shared types\n```\n\n## Getting Started\n\nVisit the blog at the HTTP endpoint URL. To add new posts, use the `/admin` route.",[],[316],"files",[150,168,175,184,194,201,210,221,228,235,244,252,261,271,280,289,298,305,314],"counts",{"_326":32,"_327":215,"_328":32,"_329":32},"pulls","branches","forks","envVars","contents",[332,335,338,341],{"_102":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":116,"_104":333,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":334},["D",1746727645920],[152],{"_102":222,"_95":223,"_153":224,"_155":-5,"_156":138,"_157":225,"_159":116,"_104":336,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":337},["D",1746727713260],[223],{"_102":299,"_95":300,"_153":301,"_155":-5,"_156":138,"_157":302,"_159":116,"_104":339,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":340},["D",1746727689078],[300],{"_102":315,"_95":316,"_153":317,"_155":-5,"_156":138,"_157":215,"_159":116,"_104":342,"_99":32,"_161":276,"_163":319,"_164":22,"_165":-5,"_98":343},["D",1746727637595],[316],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branches",{"_93":94,"_95":96,"_100":352,"_327":357},{"_102":103,"_95":96,"_104":353,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":354,"_132":355,"_135":356,"_147":22},["D",1746727613446],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[358],{"_102":138,"_104":359,"_360":361,"_95":43,"_139":103,"_99":137,"_140":-5,"_141":-5,"_362":363,"_106":-5},["D",1746727613446],"updatedAt",["D",1746727863083],"lockfileKey","1757973011193-esm.town_v_charmaine_testtownie@14-main","actionData","errors"]

charmaine

testtownie

Branches1

Branches
1