Badger Catalog 🚀

A utilitarian catalog of hacks, apps, and documentation for the Badger 2350. Built with Astro, React, TypeScript, and Tailwind CSS for fast iteration and easy contributions.

✨ Features

• 🎨 Purposeful UI – Terminal-inspired dark theme with subtle neon accents
• 📚 Comprehensive Catalog – Browse hacks by difficulty, duration, and tags
• 📖 Detailed Tutorials – Step-by-step guides with runnable code snippets
• 📝 MDX Content – Markdown-first authoring with React components when needed
• 🚀 Static Site – Optimised for GitHub Pages or any static host

🛠️ Tech Stack

• Framework: Astro
• UI: React + TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui
• Icons: Lucide
• Content: MDX

🚦 Quick Start

Prerequisites

• Node.js 22+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/badger/badger.github.io.git
   cd badger.github.io

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open the app

   http://localhost:4321/
   

Available Scripts

npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview the production build
npm run astro # Run Astro CLI commands

📁 Project Structure

badger.github.io/
├── public/
│ ├── images/ # Static images and assets
│ └── favicon.svg
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui primitives
│ │ ├── hack-card.tsx
│ │ ├── navigation.tsx
│ │ └── ...
│ ├── content/ # MDX content collections
│ ├── layouts/ # Astro layouts
│ ├── lib/ # Utilities
│ ├── pages/ # Astro routes
│ └── styles/ # Global styles
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json

✏️ Adding New Hacks

1. Create a new MDX file in src/content/hacks/your-hack-name.mdx
2. Add assets to public/images/hacks/
3. Preview locally with npm run dev

Each MDX document supports frontmatter for metadata:

---title: "Your Hack Title"description: "Brief description of what this hack does"difficulty: "easy"# easy | medium | hardduration: 30# minutestags: ["LED", "WiFi", "Sensors"]thumbnail: "/images/hacks/your-hack.jpg"author: "Your Name"date: "2025-01-15"hardware:
- "Badger 2350"
- "Additional components..."github: "https://github.com/your-repo/hack-code"---

🎨 Customising the Design

• Update tokens in tailwind.config.mjs
• Extend typography and utilities in src/styles/globals.css
• Component overrides live in src/components/ui/

🚀 Deployment

GitHub Pages

1. Configure Astro:

   exportdefaultdefineConfig({site: 'https://badger.github.io',base: '/',// ...})

2. Build the project:

   npm run build

3. Push to main (GitHub Pages is already wired for this repo).

🤝 Contributing

1. Fork the repo: https://github.com/badger/badger.github.io/fork
2. Create a feature branch: git checkout -b feature/my-update
3. Make changes and run npm run build
4. Commit, push, and open a pull request

Community Links

• 🐛 Issues: https://github.com/badger/badger.github.io/issues

📄 License

MIT License. See LICENSE.

🙏 Acknowledgements

• Built for the Badger 2350 community
• Powered by open source contributors and hardware experimenters everywhere

---

Keep shipping badge hacks.