Technical Problem Solver's Blog

A clean, readable blog built with Astro and React. Focus on practical insights and learning notes.

Features

• Clean Architecture: Modular React components for article elements
• TypeScript: Full type safety throughout
• MDX Support: Write content with JSX components
• Fast: Static site generation with Astro
• Readable: Carefully designed typography and spacing

Project Structure

src/
├── components/          # Modular React components
│   ├── ArticleHeading.tsx
│   ├── ArticleParagraph.tsx
│   ├── ArticleList.tsx
│   ├── ArticleBlockquote.tsx
│   ├── BlogPostCard.tsx
│   └── Container.tsx
├── data/
│   └── blogPosts.ts    # Blog post metadata
├── layouts/            # Astro layouts
│   ├── BaseLayout.astro
│   └── BlogLayout.astro
└── pages/              # Routes
    ├── index.astro     # Home page
    └── blog/           # Blog posts
        ├── first-note.astro
        └── debugging-tips.astro

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Writing Posts

1. Add post metadata to src/data/blogPosts.ts
2. Create a new .astro file in src/pages/blog/
3. Import and use the modular components
4. The post will automatically appear on the home page

Components

The blog uses modular React components for article elements:

• H1, H2, H3 - Headings with consistent styling
• Paragraph, LeadParagraph - Text with proper spacing
• UL, OL, LI - Lists with proper indentation
• Blockquote, CodeBlock, InlineCode - Code and quotes

Design Philosophy

• Readability First: Clear typography, generous spacing
• No Distractions: Clean layout, focus on content
• Practical: Tools and techniques that work
• Calm: No hype, just facts