Indra Site

A personal website and blog built with Astro featuring React islands for interactive components. This project was migrated from Next.js to Astro to leverage static site generation with optimal performance.

🚀 Tech Stack

• Framework: Astro 5 with static site generation
• UI Components: React islands for interactivity
• Language: TypeScript with strict mode
• Styling: Tailwind CSS v4 with PostCSS
• UI Library: shadcn/ui (Radix UI components)
• Icons: Lucide React
• Content: MDX with frontmatter-driven blog posts
• Package Manager: Bun
• Code Quality: ESLint, Prettier, Husky, lint-staged

📖 Migration Documentation

Comprehensive documentation for the Next.js to Astro migration:

• docs/MIGRATION_OVERVIEW.md - High-level migration overview and current state
• docs/ASTRO_ARCHITECTURE.md - Target Astro architecture and technical decisions
• docs/MIGRATION_PLAN.md - Step-by-step migration plan with verification gates

🛠️ Getting Started

First, install dependencies using Bun:

bun install

Then, run the development server:

bun run dev

Open http://localhost:4321 with your browser to see the result.

You can start editing pages by modifying files in src/pages/. Astro will automatically reload as you edit files.

📁 Project Structure

src/
├── pages/              # File-based routing
│   ├── index.astro    # Home page
│   ├── about.astro    # About page
│   └── blog/          # Blog pages
├── layouts/           # Astro layouts
├── components/        # UI components
│   ├── react/        # Interactive React components
│   └── ui/           # shadcn/ui components
├── content/          # Content collections (blog posts)
├── styles/           # Global styles
├── lib/              # Utility functions
├── data/             # Static data
└── types/            # TypeScript types

✨ Features

• Static Site Generation: Pre-rendered pages for optimal performance
• MDX Blog: Write blog posts in MDX with frontmatter metadata
• Dark Mode: System preference detection with manual toggle
• Syntax Highlighting: Code blocks with rehype-pretty-code
• Reading Time: Automatic reading time calculation
• Table of Contents: Interactive TOC for blog posts
• Social Sharing: Share buttons for blog posts
• SEO Optimized: Meta tags, sitemap, and structured data
• Responsive Design: Mobile-first responsive layout

📝 Available Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build
• bun run lint - Run ESLint
• bun run format - Check code formatting with Prettier
• bun run format:fix - Fix code formatting issues

🌐 Deployment

This static site can be deployed to any static hosting service:

• Vercel: Connect your repository for automatic deployments
• Netlify: Deploy from Git with build command bun run build
• GitHub Pages: Use GitHub Actions for deployment
• Cloudflare Pages: Connect repository with build settings

Build output is generated in the dist/ directory.

📚 Learn More

To learn more about the technologies used:

• Astro Documentation - Learn about Astro features and concepts
• Astro Tutorial - Step-by-step Astro tutorial
• React Islands - Understand the islands architecture
• Tailwind CSS - Utility-first CSS framework
• MDX - Write JSX in your Markdown content