Init Astro site with Docker and AI workflows

- Add landing page and base layout with cozy theme - Configure Astro, TypeScript, and project settings - Add Dockerfile, Nginx config, and docker-compose - Include favicon and site metadata - Add documentation: README, DEVELOPMENT, PROJECT_CONTEXT, TODO, CLAUDE - Add Gitea workflows for AI chat, PR review, issue triage, and codebase review
2025-12-23 11:36:55 +01:00
parent bc13afe171
commit 9e02eefbe0
19 changed files with 1593 additions and 1 deletions
@@ -0,0 +1,42 @@
+name: AI Chat (Bartender)
+
+on:
+  issue_comment:
+    types: [created]
+
+# CUSTOMIZE YOUR BOT NAME:
+# Change '@ai-bot' below to match your config.yml mention_prefix
+# Examples: '@bartender', '@uni', '@joey', '@codebot'
+
+jobs:
+  ai-chat:
+    # Only run if comment mentions the bot
+    if: contains(github.event.comment.body, '@codebot') # <-- Change this to your bot name
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/checkout@v4
+        with:
+          repository: Hiddenden/openrabbit
+          path: .ai-review
+          token: ${{ secrets.AI_REVIEW_TOKEN }}
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      - run: pip install requests pyyaml
+
+      - name: Run AI Chat
+        env:
+          AI_REVIEW_TOKEN: ${{ secrets.AI_REVIEW_TOKEN }}
+          AI_REVIEW_REPO: ${{ gitea.repository }}
+          AI_REVIEW_API_URL: https://git.hiddenden.cafe/api/v1
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+          OLLAMA_HOST: ${{ secrets.OLLAMA_HOST }}
+          SEARXNG_URL: ${{ secrets.SEARXNG_URL }}
+        run: |
+          cd .ai-review/tools/ai-review
+          python main.py comment ${{ gitea.repository }} ${{ gitea.event.issue.number }} "${{ gitea.event.comment.body }}"
@@ -0,0 +1,58 @@
+name: AI Codebase Quality Review
+
+on:
+  # Weekly scheduled run
+  schedule:
+    - cron: "0 0 * * 0" # Every Sunday at midnight
+
+  # Manual trigger
+  workflow_dispatch:
+    inputs:
+      report_type:
+        description: "Type of report to generate"
+        required: false
+        default: "full"
+        type: choice
+        options:
+          - full
+          - security
+          - quick
+
+jobs:
+  ai-codebase-review:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Full history for analysis
+
+      # Checkout central AI tooling
+      - uses: actions/checkout@v4
+        with:
+          repository: Hiddenden/openrabbit
+          path: .ai-review
+          token: ${{ secrets.AI_REVIEW_TOKEN }}
+
+      # Setup Python
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      # Install dependencies
+      - run: pip install requests pyyaml
+
+      # Run AI codebase analysis
+      - name: Run AI Codebase Analysis
+        env:
+          AI_REVIEW_TOKEN: ${{ secrets.AI_REVIEW_TOKEN }}
+          AI_REVIEW_REPO: ${{ gitea.repository }}
+          AI_REVIEW_API_URL: https://git.hiddenden.cafe/api/v1
+
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+          OLLAMA_HOST: ${{ secrets.OLLAMA_HOST }}
+        run: |
+          cd .ai-review/tools/ai-review
+          python main.py codebase ${{ gitea.repository }}
@@ -0,0 +1,41 @@
+name: AI Comment Reply
+
+on:
+  issue_comment:
+    types: [created]
+
+# CUSTOMIZE YOUR BOT NAME:
+# Change '@ai-bot' below to match your config.yml mention_prefix
+# Examples: '@bartender', '@uni', '@joey', '@codebot'
+
+jobs:
+  ai-reply:
+    runs-on: ubuntu-latest
+    if: contains(github.event.comment.body, '@codebot') # <-- Change this to your bot name
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/checkout@v4
+        with:
+          repository: Hiddenden/openrabbit
+          path: .ai-review
+          token: ${{ secrets.AI_REVIEW_TOKEN }}
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      - run: pip install requests pyyaml
+
+      - name: Run AI Comment Response
+        env:
+          AI_REVIEW_TOKEN: ${{ secrets.AI_REVIEW_TOKEN }}
+          AI_REVIEW_REPO: ${{ gitea.repository }}
+          AI_REVIEW_API_URL: https://git.hiddenden.cafe/api/v1
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+          OLLAMA_HOST: ${{ secrets.OLLAMA_HOST }}
+        run: |
+          cd .ai-review/tools/ai-review
+          python main.py comment ${{ gitea.repository }} ${{ gitea.event.issue.number }} \
+            "${{ gitea.event.comment.body }}"
@@ -0,0 +1,36 @@
+name: AI Issue Triage
+
+on:
+  issues:
+    types: [opened, labeled]
+
+jobs:
+  ai-triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/checkout@v4
+        with:
+          repository: Hiddenden/openrabbit
+          path: .ai-review
+          token: ${{ secrets.AI_REVIEW_TOKEN }}
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      - run: pip install requests pyyaml
+
+      - name: Run AI Issue Triage
+        env:
+          AI_REVIEW_TOKEN: ${{ secrets.AI_REVIEW_TOKEN }}
+          AI_REVIEW_REPO: ${{ gitea.repository }}
+          AI_REVIEW_API_URL: https://git.hiddenden.cafe/api/v1
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+          OLLAMA_HOST: ${{ secrets.OLLAMA_HOST }}
+        run: |
+          cd .ai-review/tools/ai-review
+          python main.py issue ${{ gitea.repository }} ${{ gitea.event.issue.number }} \
+            --title "${{ gitea.event.issue.title }}"
@@ -0,0 +1,53 @@
+name: Enterprise AI Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  ai-review:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the PR repository
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # Checkout the CENTRAL AI tooling repo
+      - uses: actions/checkout@v4
+        with:
+          repository: Hiddenden/openrabbit
+          path: .ai-review
+          token: ${{ secrets.AI_REVIEW_TOKEN }}
+
+      # Setup Python
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      # Install dependencies
+      - run: pip install requests pyyaml
+
+      # Run the AI review
+      - name: Run Enterprise AI Review
+        env:
+          AI_REVIEW_TOKEN: ${{ secrets.AI_REVIEW_TOKEN }}
+          AI_REVIEW_REPO: ${{ gitea.repository }}
+          AI_REVIEW_API_URL: https://git.hiddenden.cafe/api/v1
+          AI_REVIEW_PR_NUMBER: ${{ gitea.event.pull_request.number }}
+
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+          OLLAMA_HOST: ${{ secrets.OLLAMA_HOST }}
+        run: |
+          cd .ai-review/tools/ai-review
+          python main.py pr ${{ gitea.repository }} ${{ gitea.event.pull_request.number }} \
+            --title "${{ gitea.event.pull_request.title }}"
+
+      # Fail CI on HIGH severity (optional)
+      - name: Check Review Result
+        if: failure()
+        run: |
+          echo "AI Review found HIGH severity issues. Please address them before merging."
+          exit 1
@@ -0,0 +1,93 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Hidden Den Cafe - A cozy corner of the internet" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    /* Cozy Den Color Palette */
+    --color-bg: #1a1410;
+    --color-bg-light: #2a1f18;
+    --color-text: #f4e9d8;
+    --color-text-dim: #c4b5a0;
+    --color-accent: #d4a574;
+    --color-accent-bright: #e8bf8e;
+    --color-warm: #8b6f47;
+    
+    /* Spacing */
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2rem;
+    --space-xl: 3rem;
+    
+    /* Typography */
+    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    font-family: var(--font-body);
+    background: var(--color-bg);
+    color: var(--color-text);
+  }
+
+  body {
+    min-height: 100vh;
+    line-height: 1.6;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-accent-bright);
+    line-height: 1.2;
+  }
+
+  a {
+    color: var(--color-accent-bright);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  a:hover {
+    color: var(--color-accent);
+  }
+
+  /* Smooth animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.6s ease-out;
+  }
+</style>
@@ -0,0 +1,236 @@
+# CLAUDE.MD - AI Assistant Guide
+
+This file provides guidance for Claude Code and other AI assistants when working with the Cozy Den project.
+
+## Project Quick Reference
+
+**Project:** Cozy Den - Personal landing page for hiddenden.cafe
+**Owner:** Mats (gay furry developer, values self-hosting and privacy)
+**Tech Stack:** Astro 4.x, TypeScript, Vanilla CSS, Docker + Nginx
+**Aesthetic:** Warm coffee/cappuccino theme, cozy hidden den vibes
+**Deployment:** Docker containers pushed to Gitea registry at git.hiddenden.cafe
+
+## Core Design Principles
+
+1. **Cozy Aesthetic** - Warm colors, coffee/cappuccino theme, hidden den vibes
+2. **Self-Hosted** - Everything runs on personal infrastructure (homelab/VPS)
+3. **Privacy First** - No tracking, no external dependencies
+4. **Lightweight** - Static HTML/CSS, minimal JavaScript
+5. **Docker-Ready** - Easy deployment via containers
+
+## File Structure
+
+```
+src/
+├── layouts/
+│   └── BaseLayout.astro      # Base HTML layout + global styles + CSS variables
+├── pages/
+│   └── index.astro            # Main landing page (all sections here)
+└── components/                # Empty - ready for future components
+public/
+└── favicon.svg                # Coffee emoji favicon
+```
+
+**Key Files:**
+- `src/layouts/BaseLayout.astro` - CSS variables, global styles, base HTML structure
+- `src/pages/index.astro` - All page content and section-specific styles
+- `astro.config.mjs` - Astro configuration
+- `Dockerfile` - Multi-stage build (Node builder + Nginx server)
+- `docker-compose.yml` - Local Docker Compose setup
+- `nginx.conf` - Production Nginx configuration
+
+## Color System
+
+All colors use CSS custom properties in `src/layouts/BaseLayout.astro`:
+
+```css
+--color-bg: #1a1410           /* Dark background (deep coffee) */
+--color-bg-light: #2a1f18     /* Lighter background for cards */
+--color-text: #f4e9d8          /* Cream text */
+--color-text-dim: #c4b5a0      /* Dimmed text */
+--color-accent: #d4a574        /* Warm accent (coffee with cream) */
+--color-accent-bright: #e8bf8e /* Brighter accent for highlights */
+--color-warm: #8b6f47          /* Warm brown for borders/accents */
+```
+
+**To change theme:** Edit these variables. All components update automatically.
+
+## Common Modification Patterns
+
+### Adding a Section
+```astro
+<section class="section new-section">
+  <div class="container">
+    <div class="card fade-in">
+      <h2>Section Title</h2>
+      <p>Content</p>
+    </div>
+  </div>
+</section>
+```
+
+### Adding a Service
+```astro
+<div class="service-item">
+  <h3><a href="https://service.hiddenden.cafe">🔧 Service Name</a></h3>
+  <p>Description of the service</p>
+</div>
+```
+
+### Adding a New Page
+Create `src/pages/newpage.astro`:
+```astro
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="New Page">
+  <div class="container">
+    <h1>New Page</h1>
+  </div>
+</BaseLayout>
+```
+
+## Development Workflow
+
+```bash
+npm install          # Install dependencies
+npm run dev          # Start dev server (http://localhost:4321)
+npm run build        # Build for production (output to dist/)
+npm run preview      # Preview production build
+```
+
+## Docker Workflow
+
+```bash
+# Build image
+docker build -t cozy-den .
+
+# Run locally
+docker run -d -p 3000:80 --name cozy-den cozy-den
+
+# Or use Docker Compose
+docker-compose up -d
+
+# Tag for Gitea registry
+docker tag cozy-den git.hiddenden.cafe/mats/cozy-den:latest
+
+# Push to Gitea
+docker login git.hiddenden.cafe
+docker push git.hiddenden.cafe/mats/cozy-den:latest
+```
+
+## Important Implementation Guidelines
+
+### DO:
+- Maintain the cozy, warm aesthetic (coffee theme)
+- Keep the site lightweight and fast (static HTML/CSS)
+- Use CSS custom properties for all colors
+- Add `.fade-in` class for animations
+- Test both dev and production builds
+- Verify Docker build works after changes
+- Use semantic HTML with consistent `.card` class styling
+- Ensure responsive design works on mobile
+- Be warm and friendly in communication (matches site vibe)
+- Focus on practical implementation
+- Respect the furry community context
+
+### DON'T:
+- Add tracking or external dependencies
+- Make the site heavy or complex
+- Use JavaScript unless absolutely necessary (site is pure HTML/CSS)
+- Create sterile or corporate design elements
+- Add features not explicitly requested
+- Break the coffee/warm color theme
+- Ignore accessibility considerations
+
+## Astro-Specific Notes
+
+- **File Extensions:** `.astro` for components, `.mjs` for config
+- **Frontmatter:** Code between `---` runs at build time
+- **Styling:** `<style>` tags are scoped by default, use `<style is:global>` for global styles
+- **Static Generation:** Astro generates static HTML at build time
+- **No Runtime:** This site outputs pure HTML/CSS with no JavaScript runtime needed
+
+## Current Project Status
+
+**Completed:**
+- Landing page with hero section
+- About Hidden Den section
+- About Me section (Mats)
+- Services section (Gitea linked)
+- Support section
+- Docker deployment setup
+- Responsive design
+
+**Future Possibilities:**
+- Blog section using Astro Content Collections
+- More self-hosted services
+- Payment/donation links
+- Project showcase pulling from Gitea API
+- Custom 404 page
+- Theme toggle
+- Contact form
+- RSS feed
+
+## Owner Preferences
+
+Mats typically:
+- Works in bursts of creative energy
+- Uses Docker for all deployments
+- Pushes to personal Gitea at git.hiddenden.cafe
+- Values complete control over hosting
+- Prefers warm, personal styling over corporate design
+- Is learning Astro (normally uses Python/Flask)
+
+## Testing Checklist
+
+Before deploying changes:
+- [ ] `npm run dev` - Check locally
+- [ ] `npm run build` - Ensure build succeeds
+- [ ] `docker build -t cozy-den .` - Verify Docker build
+- [ ] Test on mobile viewport
+- [ ] Check all links work
+- [ ] Verify color contrast for accessibility
+
+## Success Criteria
+
+The site should:
+- Load fast (static HTML)
+- Feel warm and welcoming
+- Accurately represent Mats and Hidden Den
+- Work on all screen sizes
+- Be easy to deploy via Docker
+- Require minimal maintenance
+
+## Troubleshooting Quick Reference
+
+**Build fails:** Check TypeScript config, ensure Node 18+
+**Styles not applying:** Check if you need `is:global`, verify CSS variables are in BaseLayout
+**Docker build fails:** Ensure package.json and package-lock.json are present
+**Changes not showing:** Hard refresh (Ctrl+Shift+R), restart dev server, or clear `.astro` cache
+
+## Documentation Files
+
+- **CLAUDE.MD** (this file) - AI assistant guide
+- **PROJECT_CONTEXT.md** - Project context and design principles
+- **DEVELOPMENT.md** - Developer documentation and architecture
+- **TODO.md** - Current tasks and future features
+- **README.md** - User-facing documentation
+
+## Communication Style
+
+When working with this project:
+- Be warm and friendly (matches the site vibe)
+- Use clear, direct language
+- Respect the furry community context
+- Focus on practical implementation
+- Acknowledge this is a learning project with Astro
+- Personal and authentic over polished and corporate
+
+---
+
+**Last Updated:** 2025-12-23
+**Project Version:** Initial release
+**Astro Version:** 4.x
+**Node Version:** 18+
@@ -0,0 +1,292 @@
+# Cozy Den - Developer Documentation
+
+## Project Overview
+
+Cozy Den is a landing page for hiddenden.cafe built with Astro. The site features a warm, cozy aesthetic inspired by coffee shops and hidden dens, representing values of privacy, self-hosting, and open-source software.
+
+**Tech Stack:**
+- Astro 4.x (Static Site Generator)
+- TypeScript (strict mode)
+- Vanilla CSS with CSS Custom Properties
+- Docker + Nginx for deployment
+- Node.js 18+
+
+## Project Structure
+
+```
+cozy-den/
+├── src/
+│   ├── layouts/
+│   │   └── BaseLayout.astro      # Base HTML layout with global styles
+│   ├── pages/
+│   │   └── index.astro            # Main landing page
+│   └── components/                # (Empty - ready for future components)
+├── public/
+│   └── favicon.svg                # Site favicon (coffee emoji)
+├── astro.config.mjs               # Astro configuration
+├── package.json                   # Node dependencies
+├── tsconfig.json                  # TypeScript configuration
+├── Dockerfile                     # Multi-stage Docker build
+├── docker-compose.yml             # Docker Compose setup
+├── nginx.conf                     # Nginx configuration for production
+├── .gitignore                     # Git ignore rules
+└── README.md                      # User-facing documentation
+```
+
+## Color Palette
+
+The site uses CSS custom properties for theming. All colors are defined in `src/layouts/BaseLayout.astro`:
+
+```css
+--color-bg: #1a1410           /* Dark background (deep coffee) */
+--color-bg-light: #2a1f18     /* Lighter background for cards */
+--color-text: #f4e9d8          /* Cream text */
+--color-text-dim: #c4b5a0      /* Dimmed text for less emphasis */
+--color-accent: #d4a574        /* Warm accent (coffee with cream) */
+--color-accent-bright: #e8bf8e /* Brighter accent for highlights */
+--color-warm: #8b6f47          /* Warm brown for borders/accents */
+```
+
+## Component Architecture
+
+### BaseLayout.astro
+
+The base layout provides:
+- HTML structure and meta tags
+- Global CSS reset and typography
+- CSS custom properties for theming
+- Global animations (fadeIn)
+
+### index.astro
+
+The main page includes these sections:
+1. **Hero** - Title and subtitle
+2. **About Hidden Den** - Information about the site/space
+3. **About Me** - Information about Mats
+4. **Services** - List of self-hosted services
+5. **Support** - Ways to help/contribute
+6. **Footer** - Links and credits
+
+## Development Workflow
+
+### Local Development
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Start dev server (with hot reload):
+```bash
+npm run dev
+```
+Server runs at `http://localhost:4321`
+
+3. Build for production:
+```bash
+npm run build
+```
+Output goes to `dist/` directory
+
+4. Preview production build:
+```bash
+npm run preview
+```
+
+### Making Changes
+
+**Adding a new section:**
+1. Edit `src/pages/index.astro`
+2. Add a new `<section class="section new-section">` block
+3. Style it in the `<style>` tag at the bottom
+4. Use the `.card` class for consistent styling
+
+**Changing colors:**
+1. Edit CSS custom properties in `src/layouts/BaseLayout.astro`
+2. All components will automatically update
+
+**Adding a service:**
+1. Add a new `.service-item` div in the Services section
+2. Follow the existing structure with h3 link and description
+
+**Adding images:**
+1. Place images in `public/` directory
+2. Reference them with `/image.jpg` in your code
+3. They'll be served as static assets
+
+## Docker Deployment
+
+### Building the Image
+
+The Dockerfile uses a multi-stage build:
+- Stage 1: Node builder (builds Astro site)
+- Stage 2: Nginx server (serves static files)
+
+```bash
+docker build -t cozy-den .
+```
+
+### Running Locally
+
+```bash
+docker run -d -p 3000:80 --name cozy-den cozy-den
+```
+
+Access at `http://localhost:3000`
+
+### Using Docker Compose
+
+```bash
+# Start
+docker-compose up -d
+
+# Stop
+docker-compose down
+
+# View logs
+docker-compose logs -f
+```
+
+### Deploying to Gitea Registry
+
+```bash
+# Tag for Gitea registry
+docker tag cozy-den git.hiddenden.cafe/mats/cozy-den:latest
+
+# Login to Gitea
+docker login git.hiddenden.cafe
+
+# Push
+docker push git.hiddenden.cafe/mats/cozy-den:latest
+```
+
+## Astro-Specific Information
+
+### File Extensions
+- `.astro` - Astro components (HTML-like syntax with embedded JS)
+- `.mjs` - ES module JavaScript files
+
+### Frontmatter
+Code between `---` at the top of .astro files runs at build time:
+```astro
+---
+// This runs at build time (server-side)
+const title = "My Page";
+---
+<h1>{title}</h1>
+```
+
+### Styling
+- `<style>` tags in .astro files are scoped by default
+- Use `<style is:global>` for global styles
+- CSS is processed and optimized automatically
+
+### Static Generation
+Astro generates static HTML at build time. No JavaScript runtime needed for this site (pure HTML/CSS output).
+
+## Common Tasks
+
+### Task: Add a new page
+
+1. Create `src/pages/newpage.astro`
+2. Import BaseLayout
+3. Add content
+4. Page will be available at `/newpage`
+
+Example:
+```astro
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="New Page">
+  <div class="container">
+    <h1>New Page</h1>
+  </div>
+</BaseLayout>
+```
+
+### Task: Add a new section to homepage
+
+1. Open `src/pages/index.astro`
+2. Add new section before footer:
+```astro
+<section class="section my-section">
+  <div class="container">
+    <div class="card fade-in">
+      <h2>My Section</h2>
+      <p>Content here</p>
+    </div>
+  </div>
+</section>
+```
+
+3. Add styles in the `<style>` tag if needed
+
+### Task: Change the accent color
+
+1. Open `src/layouts/BaseLayout.astro`
+2. Modify `--color-accent` and `--color-accent-bright`
+3. Site updates automatically
+
+### Task: Add animation to new element
+
+1. Add `fade-in` class to element
+2. Or create new animation in BaseLayout.astro:
+```css
+@keyframes slideIn {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+.slide-in { animation: slideIn 0.6s ease-out; }
+```
+
+## Troubleshooting
+
+### Build fails with TypeScript errors
+- Check `tsconfig.json` extends correct config
+- Ensure all props are properly typed in components
+
+### Styles not applying
+- Check if you need `is:global` on style tag
+- Verify CSS custom properties are defined in BaseLayout
+
+### Docker build fails
+- Ensure `package.json` and `package-lock.json` are present
+- Check Node version compatibility (needs 18+)
+
+### Changes not showing in dev
+- Hard refresh browser (Ctrl+Shift+R)
+- Restart dev server
+- Clear `.astro` cache directory
+
+## Future Enhancements
+
+Ideas for future development:
+- [ ] Add blog section using Astro's content collections
+- [ ] Create reusable components for service items
+- [ ] Add dark/light theme toggle
+- [ ] Implement contact form
+- [ ] Add RSS feed for blog
+- [ ] Create custom 404 page
+- [ ] Add more animations and transitions
+- [ ] Integrate with analytics (privacy-friendly)
+
+## Resources
+
+- [Astro Documentation](https://docs.astro.build)
+- [Astro Components](https://docs.astro.build/en/core-concepts/astro-components/)
+- [Astro Styling](https://docs.astro.build/en/guides/styling/)
+- [Docker Documentation](https://docs.docker.com)
+
+## Notes for AI Assistants
+
+When working with this project:
+1. Maintain the cozy aesthetic (warm colors, soft animations)
+2. Keep the site lightweight and fast (static HTML/CSS)
+3. Follow the existing component structure
+4. Use CSS custom properties for theming
+5. Ensure responsive design for mobile
+6. Add appropriate TypeScript types when needed
+7. Test both dev and production builds
+8. Verify Docker build works after changes
@@ -0,0 +1,28 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the site
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files to nginx
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,123 @@
+# Project Context for Claude Code
+
+## What is this project?
+
+This is a personal landing page for hiddenden.cafe, built with Astro. The owner is Mats, a gay furry developer who values self-hosting, privacy, and cozy aesthetics.
+
+## Key Design Principles
+
+1. **Cozy Aesthetic** - Warm colors, coffee/cappuccino theme, hidden den vibes
+2. **Self-Hosted** - Everything runs on personal infrastructure (homelab/VPS)
+3. **Privacy First** - No tracking, no external dependencies
+4. **Lightweight** - Static HTML/CSS, minimal JavaScript
+5. **Docker-Ready** - Easy deployment via containers
+
+## Owner Preferences
+
+- **Tech Stack**: Python/Flask normally, learning Astro for this project
+- **Deployment**: Docker containers pushed to personal Gitea registry at git.hiddenden.cafe
+- **Aesthetic**: Warm, comfy, coffee-themed, furry-friendly
+- **Content**: Honest and authentic, not corporate or sterile
+
+## Current Status
+
+The site currently has:
+- ✅ Landing page with hero section
+- ✅ About Hidden Den section
+- ✅ About Me section (Mats)
+- ✅ Services section (Gitea linked)
+- ✅ Support section
+- ✅ Docker deployment setup
+- ✅ Responsive design
+
+## What Might Be Added Later
+
+- Blog section for project updates
+- More self-hosted services as they're deployed
+- Payment/donation links when ready
+- Project showcase pulling from Gitea
+- Community features
+
+## Important Implementation Details
+
+### Color System
+All colors use CSS custom properties. To change theme, edit variables in `BaseLayout.astro`. Current palette is coffee/earth tones.
+
+### Content Updates
+Main content is in `src/pages/index.astro`. Each section is wrapped in semantic HTML with consistent styling via `.card` class.
+
+### Deployment Flow
+1. Develop locally with `npm run dev`
+2. Build with `npm run build`
+3. Create Docker image with `docker build`
+4. Push to Gitea registry
+5. Deploy on homelab/VPS
+
+### File Organization
+- `src/layouts/` - Reusable layouts (currently just BaseLayout)
+- `src/pages/` - Routes (index.astro = homepage)
+- `src/components/` - Reusable components (empty, ready for future use)
+- `public/` - Static assets (favicon, images)
+
+## Communication Style
+
+When discussing this project:
+- Be warm and friendly (matches the site vibe)
+- Use clear, direct language
+- Respect the furry community context
+- Focus on practical implementation
+- Acknowledge this is a learning project with Astro
+
+## Common Modification Patterns
+
+**Adding a service:**
+```astro
+<div class="service-item">
+  <h3><a href="https://service.hiddenden.cafe">🔧 Service Name</a></h3>
+  <p>Description of the service</p>
+</div>
+```
+
+**Adding a section:**
+```astro
+<section class="section new-section">
+  <div class="container">
+    <div class="card fade-in">
+      <h2>Section Title</h2>
+      <p>Content</p>
+    </div>
+  </div>
+</section>
+```
+
+**Modifying colors:**
+Edit the `:root` variables in `src/layouts/BaseLayout.astro`
+
+## Testing Checklist
+
+Before deploying changes:
+- [ ] `npm run dev` - Check locally
+- [ ] `npm run build` - Ensure build succeeds
+- [ ] `docker build -t hiddenden-cafe .` - Verify Docker build
+- [ ] Test on mobile viewport
+- [ ] Check all links work
+- [ ] Verify color contrast for accessibility
+
+## Owner's Workflow
+
+Mats typically:
+1. Works in bursts of creative energy
+2. Uses Docker for all deployments
+3. Pushes to personal Gitea at git.hiddenden.cafe
+4. Values complete control over hosting
+5. Prefers warm, personal styling over corporate design
+
+## Success Criteria
+
+The site should:
+- Load fast (static HTML)
+- Feel warm and welcoming
+- Accurately represent Mats and Hidden Den
+- Work on all screen sizes
+- Be easy to deploy via Docker
+- Require minimal maintenance
@@ -1,2 +1,107 @@
-# Cozy-Den
+# Cozy Den 🏡☕

+A cozy landing page for hiddenden.cafe built with Astro.
+
+## About
+
+Cozy Den is a warm, self-hosted corner of the internet. This landing page represents the values of privacy, open-source software, and creating comfortable digital spaces.
+
+## Features
+
+- ☕ Cozy, warm aesthetic with hidden den theme
+- 🎨 Custom color palette inspired by coffee and warmth
+- 📱 Responsive design
+- ⚡ Built with Astro for blazing fast performance
+- 🐳 Docker support for easy deployment
+
+## Setup
+
+### Prerequisites
+
+- Node.js 18+ and npm
+- (Optional) Docker for containerized deployment
+
+### Installation
+
+1. Clone or download this project
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+4. Build for production:
+```bash
+npm run build
+```
+
+5. Preview production build:
+```bash
+npm run preview
+```
+
+## Docker Deployment
+
+### Building the Docker Image
+
+```bash
+docker build -t cozy-den .
+```
+
+### Running the Container
+
+```bash
+docker run -d -p 3000:3000 --name cozy-den cozy-den
+```
+
+Or with docker-compose:
+
+```bash
+docker-compose up -d
+```
+
+### Pushing to Gitea Registry
+
+```bash
+# Tag the image
+docker tag cozy-den git.hiddenden.cafe/mats/cozy-den:latest
+
+# Login to your Gitea registry
+docker login git.hiddenden.cafe
+
+# Push the image
+docker push git.hiddenden.cafe/mats/cozy-den:latest
+```
+
+## Customization
+
+The site is built to be easily customizable:
+
+- **Colors**: Edit the CSS variables in `src/layouts/BaseLayout.astro`
+- **Content**: Update sections in `src/pages/index.astro`
+- **Favicon**: Replace `public/favicon.svg`
+
+## Technology Stack
+
+- [Astro](https://astro.build/) - Static site generator
+- Vanilla CSS with custom properties
+- TypeScript for type safety
+
+## Documentation
+
+For developers and AI assistants working on this project:
+- **[DEVELOPMENT.md](DEVELOPMENT.md)** - Detailed developer documentation, architecture, and common tasks
+- **[PROJECT_CONTEXT.md](PROJECT_CONTEXT.md)** - Project context, design principles, and owner preferences
+- **[TODO.md](TODO.md)** - Current tasks, future features, and enhancement ideas
+
+## License
+
+Personal project - feel free to use as inspiration for your own cozy corners of the internet!
+
+---
+
+Made with 💖 by Mats
@@ -0,0 +1,121 @@
+# Cozy Den - Tasks & TODO
+
+## Current Status
+✅ Initial project structure created
+✅ Landing page with all main sections
+✅ Docker deployment setup
+✅ Responsive design
+
+## Immediate Next Steps
+
+### Content Customization
+- [ ] Review and personalize the "About Me" section
+- [ ] Add any additional services beyond Gitea
+- [ ] Add payment/donation links when ready
+- [ ] Update footer with any additional links
+
+### Optional Enhancements
+
+#### Short Term
+- [ ] Add a custom 404 page
+- [ ] Add favicon variants for different platforms (apple-touch-icon, etc.)
+- [ ] Add Open Graph meta tags for social media sharing
+- [ ] Add animation on scroll for sections
+- [ ] Consider adding subtle background patterns or textures
+
+#### Medium Term
+- [ ] Create a blog section using Astro Content Collections
+- [ ] Add a projects page that pulls from Gitea API
+- [ ] Create reusable components for repeated elements
+- [ ] Add a contact form (self-hosted solution)
+- [ ] Add RSS feed if blog is implemented
+
+#### Long Term
+- [ ] Theme toggle (dark/light, or alternate color schemes)
+- [ ] Multilingual support if desired
+- [ ] Integration with other self-hosted services
+- [ ] Community features (guest book, comments)
+- [ ] Analytics dashboard (privacy-friendly, self-hosted)
+
+## Known Limitations
+
+- Network is required for npm install (packages not included in repo)
+- Gitea registry requires authentication (document login process)
+- No CMS - content updates require code changes (intentional for now)
+
+## Deployment Checklist
+
+When ready to deploy:
+- [ ] Review all content for accuracy
+- [ ] Test all links
+- [ ] Verify Gitea service URL is correct
+- [ ] Update any placeholder text
+- [ ] Test Docker build locally
+- [ ] Push to Gitea registry
+- [ ] Deploy container on homelab/VPS
+- [ ] Configure reverse proxy/DNS if needed
+- [ ] Test live site on multiple devices
+- [ ] Add SSL certificate
+
+## Ideas for Future Features
+
+### Project Showcase
+Pull repository data from Gitea API and display:
+- Recent commits
+- Project descriptions
+- Download/clone stats
+- Language breakdown
+
+### Furry Community Section
+- Links to furry-friendly resources
+- Badge/sticker collection showcase
+- Art gallery
+- Commission info (if applicable)
+
+### Self-Hosting Hub
+- Documentation for self-hosted setups
+- Docker compose examples
+- Tutorial blog posts
+- Service recommendations
+
+### Interactive Elements
+- Coffee cup animation on hero
+- Paw print cursor (optional, subtle)
+- Seasonal themes (fall colors, winter snow)
+- Easter eggs for regular visitors
+
+## Code Quality Tasks
+
+- [ ] Add TypeScript types where beneficial
+- [ ] Consider breaking large components into smaller ones
+- [ ] Add comments for complex CSS
+- [ ] Set up automated testing if site grows
+- [ ] Add accessibility audit
+- [ ] Optimize images if any are added
+- [ ] Consider adding a sitemap.xml
+
+## Performance Optimization
+
+- [ ] Audit bundle size (should be tiny already)
+- [ ] Add preload hints for critical resources
+- [ ] Optimize font loading strategy if custom fonts added
+- [ ] Consider service worker for offline support
+- [ ] Implement lazy loading for images when added
+
+## Documentation Tasks
+
+- [x] Create DEVELOPMENT.md
+- [x] Create PROJECT_CONTEXT.md
+- [ ] Add inline code comments where helpful
+- [ ] Document deployment process in detail
+- [ ] Create troubleshooting guide
+- [ ] Add contributing guidelines if accepting contributions
+
+## Notes
+
+Remember:
+- Keep it cozy and warm
+- Maintain the coffee/cappuccino theme
+- Fast and lightweight is a feature
+- Self-hosted and private by design
+- Personal and authentic over polished and corporate
@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://hiddenden.cafe',
+});
@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  cozy-den:
+    build: .
+    container_name: cozy-den
+    ports:
+      - "3000:80"
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="#1a1410"/>
+  <text x="50" y="70" font-size="60" text-anchor="middle" fill="#d4a574">☕</text>
+</svg>
@@ -0,0 +1,294 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="Hidden Den Cafe">
+  <main>
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content fade-in">
+          <h1 class="hero-title">🏡 Hidden Den Cafe</h1>
+          <p class="hero-subtitle">A cozy corner of the internet</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- About Hidden Den Section -->
+    <section class="section about-den">
+      <div class="container">
+        <div class="card fade-in">
+          <h2>☕ About Hidden Den</h2>
+          <p>
+            Welcome to Hidden Den Cafe - a warm, self-hosted space where technology 
+            meets comfort. This is a personal corner of the internet built with love, 
+            care, and a strong belief in privacy and open-source values.
+          </p>
+          <p>
+            Everything here runs on self-hosted infrastructure, giving complete control 
+            over data and services. No cloud dependencies, no tracking, just a cozy 
+            digital home.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- About Mats Section -->
+    <section class="section about-me">
+      <div class="container">
+        <div class="card fade-in">
+          <h2>🦊 About Me</h2>
+          <p>
+            Hey there! I'm Mats, a gay furry developer who loves building things 
+            and being part of the warm, welcoming furry community. I'm passionate 
+            about self-hosting, open-source software, and creating cozy spaces 
+            both online and off.
+          </p>
+          <p>
+            I work primarily with Python and Flask, though I'm always learning new 
+            things (currently exploring JavaScript and the C stack). When I get those 
+            surges of creative energy, I love diving into new projects - from Reddit 
+            downloaders to Telegram sticker tools, and everything in between.
+          </p>
+          <p>
+            Coffee enthusiast ☕ • Linux lover 🐧 • Self-hosting advocate 🏠
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services Section -->
+    <section class="section services">
+      <div class="container">
+        <div class="card fade-in">
+          <h2>🛠️ Services</h2>
+          <p>Here are the services currently running in the den:</p>
+          
+          <div class="service-list">
+            <div class="service-item">
+              <h3>
+                <a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">
+                  📦 Gitea
+                </a>
+              </h3>
+              <p>Self-hosted Git service for all my projects and code repositories.</p>
+            </div>
+            
+            <div class="service-item coming-soon">
+              <h3>🔜 More Coming Soon</h3>
+              <p>The den is always growing! More services will be added as they're developed and deployed.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Support Section -->
+    <section class="section support">
+      <div class="container">
+        <div class="card fade-in">
+          <h2>💝 How to Help Out</h2>
+          <p>
+            If you'd like to support the Hidden Den and help keep the lights on, 
+            here are some ways you can contribute:
+          </p>
+          
+          <div class="support-list">
+            <div class="support-item">
+              <h3>🌟 Share & Spread the Word</h3>
+              <p>Tell others about the projects and services hosted here!</p>
+            </div>
+            
+            <div class="support-item">
+              <h3>🐛 Report Issues</h3>
+              <p>Found a bug or have a suggestion? Let me know!</p>
+            </div>
+            
+            <div class="support-item">
+              <h3>☕ Buy Me a Coffee</h3>
+              <p>
+                Donations help cover server costs and keep the den cozy. 
+                <span class="coming-soon-text">(Payment links coming soon!)</span>
+              </p>
+            </div>
+
+            <div class="support-item">
+              <h3>🤝 Contribute</h3>
+              <p>Check out the projects on Gitea - contributions are always welcome!</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <p>Made with 💖 by Mats</p>
+        <p class="footer-links">
+          <a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">Gitea</a>
+          <span class="separator">•</span>
+          <a href="https://dmush.cloud" target="_blank" rel="noopener noreferrer">dmush.cloud</a>
+        </p>
+      </div>
+    </footer>
+  </main>
+</BaseLayout>
+
+<style>
+  main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+    width: 100%;
+  }
+
+  /* Hero Section */
+  .hero {
+    padding: var(--space-xl) 0;
+    text-align: center;
+    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-light) 100%);
+  }
+
+  .hero-title {
+    font-size: 3rem;
+    margin-bottom: var(--space-sm);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--color-text-dim);
+  }
+
+  /* Sections */
+  .section {
+    padding: var(--space-lg) 0;
+  }
+
+  .card {
+    background: var(--color-bg-light);
+    border-radius: 12px;
+    padding: var(--space-lg);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(212, 165, 116, 0.1);
+  }
+
+  .card h2 {
+    font-size: 2rem;
+    margin-bottom: var(--space-md);
+  }
+
+  .card p {
+    margin-bottom: var(--space-md);
+    color: var(--color-text);
+  }
+
+  .card p:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Services Section */
+  .service-list {
+    margin-top: var(--space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .service-item {
+    background: var(--color-bg);
+    padding: var(--space-md);
+    border-radius: 8px;
+    border-left: 4px solid var(--color-accent);
+  }
+
+  .service-item h3 {
+    margin-bottom: var(--space-xs);
+    font-size: 1.25rem;
+  }
+
+  .service-item p {
+    color: var(--color-text-dim);
+    margin: 0;
+  }
+
+  .service-item.coming-soon {
+    border-left-color: var(--color-warm);
+    opacity: 0.8;
+  }
+
+  /* Support Section */
+  .support-list {
+    margin-top: var(--space-md);
+    display: grid;
+    gap: var(--space-md);
+  }
+
+  .support-item {
+    background: var(--color-bg);
+    padding: var(--space-md);
+    border-radius: 8px;
+  }
+
+  .support-item h3 {
+    margin-bottom: var(--space-xs);
+    font-size: 1.25rem;
+  }
+
+  .support-item p {
+    color: var(--color-text-dim);
+    margin: 0;
+  }
+
+  .coming-soon-text {
+    font-style: italic;
+    color: var(--color-warm);
+  }
+
+  /* Footer */
+  .footer {
+    margin-top: auto;
+    padding: var(--space-lg) 0;
+    text-align: center;
+    border-top: 1px solid rgba(212, 165, 116, 0.2);
+    background: var(--color-bg-light);
+  }
+
+  .footer p {
+    color: var(--color-text-dim);
+    margin-bottom: var(--space-xs);
+  }
+
+  .footer-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .separator {
+    color: var(--color-warm);
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .hero-title {
+      font-size: 2rem;
+    }
+
+    .hero-subtitle {
+      font-size: 1rem;
+    }
+
+    .card h2 {
+      font-size: 1.5rem;
+    }
+  }
+</style>
@@ -0,0 +1,31 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript application/json;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Cache static assets
+    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Main location
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Custom error pages
+    error_page 404 /404.html;
+}
@@ -0,0 +1,15 @@
+{
+  "name": "cozy-den",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^4.16.18"
+  }
+}
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}