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"
 }