A minimalist theme for personal websites and blogs built with Astro, React, and TypeScript. Focused on clean design, performance, and accessibility.

• 🎨 Modern UI Components - Built on shadcn/ui and Radix primitives
• 🚀 Performance First - Static site generation with Astro, instant state changes
• ♿ Accessible - WCAG compliant with full keyboard navigation
• 🌙 Dark Mode - Instant theme switching with system preference support
• 📱 Responsive - Mobile-first design approach
• 🔍 SEO Ready - Built-in SEO components and meta tags
• 📝 MDX Support - Write content in MDX with component support
• 🎯 Type Safe - Full TypeScript support
• 🐳 Docker First - Containerized development environment

• Astro - Static site generation
• React - Interactive components
• TypeScript - Type safety
• Tailwind CSS - Styling
• shadcn/ui - UI components
• Radix UI - Accessible primitives
• react-hook-form - Form handling
• zod - Schema validation

src/
├── components/         # UI Components
│   ├── ui/           # shadcn/ui components
│   ├── showcase/     # Component demos
│   ├── display/      # Content display components
│   ├── forms/        # Form-related components
│   ├── interactive/  # Client-side interactive components
│   ├── layout/       # Layout components
│   ├── media/        # Media handling components
│   ├── mdx/          # MDX-specific components
│   └── seo/          # SEO components
├── content/          # Content collections
│   ├── pages/        # Static pages
│   ├── posts/        # Blog posts
│   └── showcase/     # Component documentation
├── styles/           # Global styles
│   └── tokens/       # Design tokens
└── types/            # TypeScript definitions

We use shadcn/ui as our component foundation, with a focus on:

• Zero-Runtime CSS - All styling through Tailwind
• Accessibility - Built on Radix UI primitives
• Customization - Fully customizable through Tailwind and CSS variables
• Type Safety - Full TypeScript support

Current implementation status:

• ✅ Core components (Accordion, Alert, Button, etc.)
• ✅ Form components (Input, Label, etc.)
• ✅ Navigation components
• 🚧 Advanced components (ongoing)

See src/content/showcase/shadcn-gallery.mdx for live examples.

Components are organized by responsibility:

• ui/ - shadcn/ui components and primitives
• showcase/ - Component demonstrations and documentation
• interactive/ - Client-side interactive components
• forms/ - Form-related components
• display/ - Content display components
• media/ - Media handling components

Each directory includes its own README with detailed documentation.

1. Start the development environment:

   docker compose up -d

2. View logs (optional):

   docker compose logs -f

3. Stop the environment:

   docker compose down

To add a new shadcn/ui component:

1. Start the development container:

   docker compose -f docker-compose.dev.yml up -d

2. Add the component:

   docker compose -f docker-compose.dev.yml exec app bun run ui:add $COMPONENT_NAME

See src/content/showcase/theme.mdx for component customization docs.

• Clean Code - Type-safe, elegant solutions without hacks
• Docker First - All development in containers
• Tailwind First - Utility classes over custom CSS
• Component Driven - Consistent patterns with shadcn/ui
• Zero Runtime - No unnecessary JavaScript or animations
• Accessibility - WCAG compliance and screen reader support

Comprehensive documentation in src/content/showcase/:

• theme.mdx - Theme system and customization
• shadcn-gallery.mdx - Component examples
• token-system.mdx - Design tokens
• accessibility.mdx - ARIA implementation
• keyboard-navigation.mdx - Keyboard support

We're currently working on:

1. Component System Refinement

   • Standardizing file naming conventions
   • Simplifying token system
   • Aligning closer with shadcn/ui patterns

2. Documentation Improvements

   • Expanding component examples
   • Adding more usage guidelines
   • Improving accessibility documentation

1. Fork the repository
2. Create a feature branch
3. Follow our coding standards:
   • Use TypeScript for type safety
   • Follow Astro's component patterns
   • Use React for interactive components
   • Implement proper accessibility
   • Write meaningful documentation
4. Submit a pull request

MIT License - See LICENSE file for details.

Images are stored in src/assets/ and optimized using Astro's built-in image processing:

src/
├── assets/           # Image assets
│   ├── posts/       # Blog post images
│   ├── launches/    # Launch images
│   └── showcase/    # Documentation images

For content collections, use relative paths from the content file:

---
title: My Post
heroImage: "../../assets/posts/my-image.png"
heroImageAlt: "Image description"
---

Use the OptimizedImage component for consistent image handling:

---
import OptimizedImage from '@/components/media/OptimizedImage.astro';
import myImage from '@/assets/posts/my-image.png';
---

<OptimizedImage 
  src={myImage}
  alt="Image description"
  variant="hero"
/>

Images are automatically:

• Converted to WebP
• Optimized for size
• Loaded with zero layout shift
• Properly typed with TypeScript