🧠 RxDev Man

The Developer's Living Knowledge Base. A high-performance, interactive knowledge graph built for modern software engineers.

RxDev Man is more than just a blog—it's a modular, interactive documentation system designed to help developers master their craft. Built on Astro's Island Architecture, it delivers static content with lightning-fast performance while seamlessly hydrating interactive elements like search and analytics.

---

� Key Features

📚 Rich Content Experience

• MDX-Powered: Author content in Markdown with the power of embedded components.
• Interactive Blocks:
  • <CodeExplainer />: Break down complex logic line-by-line.
  • <InfoBox />: Highlight critical warnings, tips, and notes.
  • <ProsCons />: Visual comparison tables for architectural decisions.
  • <GitCommand />: Copy-paste friendly terminal snippets.
• Syntax Highlighting: Beautiful code blocks powered by Shiki (GitHub Dark theme).

⚡ Performance & Architecture

• Zero-JS by Default: HTML-first rendering for optimal SEO and load times.
• Hybrid Rendering: Static Site Generation (SSG) for content, with Server-Side Rendering (SSR) capabilities for dynamic features.
• Client-Side Search: Instant, typo-tolerant search using Pagefind.

📊 Analytics & Data

• Real-Time View Counts: Integrated with Supabase to track article engagement.
• Type-Safe Content: Validated frontmatter schemas using Zod.

---

🛠️ Tech Stack

Category	Technology	Usage
Core	Astro 5.x	Framework & Build Tool
Language	TypeScript	Type Safety
Content	MDX	Interactive Markdown
Styling	CSS Variables	Scoped, theme-aware styling
Database	Supabase	View counters & Analytics
Search	Pagefind	Static search indexing
Icons	Iconify	astro-icon integration
Deploy	Vercel	Edge Network Deployment

---

📂 Project Structure

/
├── public/             # Static assets (images, fonts)
├── src/
│   ├── components/     # Reusable UI & MDX components
│   │   ├── CodeExplainer.astro
│   │   ├── InfoBox.astro
│   │   ├── Search.astro
│   │   └── ...
│   ├── content/
│   │   └── blog/       # The Knowledge Base (MDX files)
│   ├── layouts/        # Page layouts (Base, Post, etc.)
│   ├── lib/            # External services (Supabase client)
│   ├── pages/          # File-based routing
│   │   ├── api/        # Server-side API endpoints
│   │   └── ...
│   └── styles/         # Global styles & CSS variables
├── astro.config.mjs    # Astro configuration
└── package.json        # Dependencies & Scripts

---

🧞 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js: v18.17.1 or higher
• Package Manager: npm, pnpm, or yarn

Installation

1. Clone the repository

   git clone https://github.com/pharmacist-sabot/rxdevnotes.git
   cd rxdevnotes

2. Install dependencies

   npm install

3. Configure Environment Variables Create a .env file in the root directory and add your Supabase credentials:

   PUBLIC_SUPABASE_URL=your_supabase_project_url
   PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server

   npm run dev

   Visit http://localhost:4321 to see the site.

Building for Production

To build the static site and index the search:

npm run build

This command will:

1. Build the Astro site.
2. Run pagefind to index the content for search.

---

📝 Contributing

We welcome contributions from the community!

1. Fork the repository.
2. Create a Feature Branch (git checkout -b feat/new-topic).
3. Commit your changes with Conventional Commits (feat: add guide on system design).
4. Push to your branch.
5. Open a Pull Request.

---

📜 License

This project is open source and available under the MIT License.

“The best developers are eternal students.”