# Blog with D1 Database In this tutorial, you'll build a complete blog application with: - **D1 Database** for storing posts - **Tailwind CSS** for styling - **Static Site Generation** for fast page loads - **Dynamic routing** for individual post pages [View Source on GitHub](https://github.com/squirrelsoft-dev/cloudwerk/tree/main/examples/blog) ## Project Overview The final project structure: - app/ - layout.tsx - page.tsx - globals.css - about/ - page.tsx - posts/ - [slug]/ - page.tsx - lib/ - db.ts - markdown.ts - components/ - PostCard.tsx - migrations/ - 0001_create_posts.sql - cloudwerk.config.ts - wrangler.toml - package.json ## Step 1: Create the Project 1. Create a new Cloudwerk app: ```bash pnpm dlx @cloudwerk/create-app blog --renderer hono-jsx cd blog ``` 2. Install dependencies: ```bash pnpm install ``` ## Step 2: Set Up D1 Database The starter template already includes Tailwind CSS configured in `app/globals.css`. 1. Add a D1 database binding using the Cloudwerk CLI: ```bash npm run bindings add d1 ``` When prompted: - **Binding name**: `DB` - **Database name**: `blog-db` - **Add to wrangler.toml?**: Yes This creates the database and automatically configures `wrangler.toml`. 2. Generate TypeScript types for your bindings: ```bash npm run bindings generate-types ``` This creates type definitions so you can export interface Post { id: string slug: string title: string excerpt: string | null content: string published_at: string | null created_at: string } export async function getPosts(): Promise { const result = await DB .prepare( 'SELECT id, slug, title, excerpt, published_at, created_at FROM posts WHERE published_at IS NOT NULL ORDER BY published_at DESC' ) .all() return result.results } export async function getPostBySlug(slug: string): Promise { const result = await DB .prepare('SELECT * FROM posts WHERE slug = ?') .bind(slug) .first() return result } export async function getAllSlugs(): Promise { const result = await DB .prepare('SELECT slug FROM posts WHERE published_at IS NOT NULL') .all<{ slug: string }>() return result.results.map((r: { slug: string }) => r.slug) } ``` ## Step 4: Create a Markdown Renderer Create a simple markdown renderer for blog posts: ```typescript title="app/lib/markdown.ts" type MarkdownNode = { type: string content?: string level?: number lang?: string items?: string[] } function parseMarkdown(source: string): MarkdownNode[] { const lines = source.split('\n') const nodes: MarkdownNode[] = [] let i = 0 while (i < lines.length) { const line = lines[i] // Headers const headerMatch = line.match(/^(#{1,6})\s+(.+)$/) if (headerMatch) { nodes.push({ type: 'heading', level: headerMatch[1].length, content: headerMatch[2], }) i++ continue } // Code blocks if (line.startsWith('```')) { const lang = line.slice(3).trim() const codeLines: string[] = [] i++ while (i < lines.length && !lines[i].startsWith('```')) { codeLines.push(lines[i]) i++ } nodes.push({ type: 'code', lang: lang || undefined, content: codeLines.join('\n'), }) i++ continue } // Unordered lists if (line.match(/^[-*]\s+/)) { const items: string[] = [] while (i < lines.length && lines[i].match(/^[-*]\s+/)) { items.push(lines[i].replace(/^[-*]\s+/, '')) i++ } nodes.push({ type: 'list', items }) continue } // Empty lines if (line.trim() === '') { i++ continue } // Paragraphs const paragraphLines: string[] = [] while (i < lines.length && lines[i].trim() !== '' && !lines[i].match(/^[#\-*`]/)) { paragraphLines.push(lines[i]) i++ } if (paragraphLines.length > 0) { nodes.push({ type: 'paragraph', content: paragraphLines.join(' ') }) } } return nodes } function formatInlineText(text: string): string { return text .replace(/\*\*(.+?)\*\*/g, '$1') .replace(/\*(.+?)\*/g, '$1') .replace(/`(.+?)`/g, '$1') } function escapeHtml(text: string): string { return text .replace(/&/g, '&') .replace(//g, '>') } export function renderMarkdown(source: string): string { const nodes = parseMarkdown(source) const parts: string[] = [] for (const node of nodes) { switch (node.type) { case 'heading': { const Tag = `h${node.level}` const classes: Record = { 1: 'text-3xl font-bold mt-8 mb-4', 2: 'text-2xl font-semibold mt-6 mb-3', 3: 'text-xl font-medium mt-4 mb-2', } parts.push( `<${Tag} class="${classes[node.level!] || 'font-medium mt-4 mb-2'}">${formatInlineText(node.content!)}` ) break } case 'paragraph': parts.push( `

${formatInlineText(node.content!)}

` ) break case 'code': parts.push( `
${escapeHtml(node.content!)}
` ) break case 'list': parts.push('
    ') for (const item of node.items!) { parts.push(`
  • ${formatInlineText(item)}
    • `) } parts.push('
') break } } return parts.join('\n') } ``` ## Step 5: Update the Root Layout Update the layout to set the blog title: ```tsx title="app/layout.tsx" export default function RootLayout({ children }: LayoutProps) { return ( Blog - Cloudwerk {children} ) } ```