Problem

CrystalBits.org needs a blog platform UI for publishing Crystal-related content and newsletter subscriptions.

Requirements

Blog Homepage

• Display recent blog posts (10-20 posts)
• Show: title, author, excerpt, published date, view count
• Featured post section (sticky/highlighted)
• Pagination for older posts
• Search functionality
• Category/tag filtering (if implemented)

Individual Blog Post Page

• Full post content (markdown rendered)
• Author information
• Published and updated dates
• View count
• Share buttons (optional)
• Related posts section
• Newsletter signup CTA at bottom

Newsletter Signup

• Email signup form (prominent on all pages)
• Validation and confirmation
• Success message after signup
• Double opt-in confirmation email (backend)
• Unsubscribe page

Design

• Clean, readable typography for long-form content
• Good line height and column width for readability
• Professional blog aesthetic
• Mobile-responsive
• Consistent with Crystal ecosystem branding

Implementation

Files to Create/Modify

• apps/crystalbits/src/actions/posts/index.cr - Blog listing action
• apps/crystalbits/src/pages/posts/index_page.cr - Blog listing HTML
• apps/crystalbits/src/actions/posts/show.cr - Post detail action
• apps/crystalbits/src/pages/posts/show_page.cr - Post detail HTML
• apps/crystalbits/src/actions/newsletter/subscribe.cr - Newsletter signup action
• apps/crystalbits/src/pages/newsletter/subscribe_page.cr - Newsletter confirmation HTML
• apps/crystalbits/src/components/newsletter_signup_form.cr - Reusable signup component
• apps/crystalbits/src/css/app.css - Blog styles

Markdown Rendering

• Use markd shard for rendering markdown
• Sanitize HTML output for security
• Syntax highlighting for code blocks (if possible)

Priority

MEDIUM - Secondary app after CrystalShards is complete

Acceptance Criteria

• Blog homepage displays recent posts
• Individual post page with full content
• Markdown content rendered properly
• Newsletter signup form on all pages
• Email validation and confirmation
• View count increments on post views
• Responsive design on all devices
• Good typography and readability
• Specs for all actions
• UI verified with Playwright MCP
• No console errors