Update documentation to reflect current project structure

- Rename CLAUDE.MD to CLAUDE.md for correct case-sensitive formatting - Update file structure diagrams across all documentation files - Document standard Astro src/ directory structure (layouts, pages) - Add 404.astro custom error page to documentation - Include robots.txt and sitemap integration in docs - Update current status to reflect completed features: - Custom 404 page with themed styling - Sitemap integration for SEO - Accessibility improvements (ARIA labels, semantic HTML) - Update code examples to use proper import paths from src/ - Mark completed TODO items (404 page, sitemap, accessibility) All documentation now accurately reflects the standard Astro project structure with layouts in src/layouts/ and pages in src/pages/. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-30 13:43:08 +00:00
parent f318a6bdaf
commit ee324596ba
5 changed files with 196 additions and 245 deletions
@@ -0,0 +1,169 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Quick Reference
+
+**Project:** Cozy Den - Personal landing page for hiddenden.cafe
+**Owner:** Latte (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
+
+```
+cozy-den/
+├── src/
+│   ├── layouts/
+│   │   └── BaseLayout.astro      # Base layout + global styles
+│   └── pages/
+│       ├── index.astro            # Main landing page
+│       └── 404.astro              # Custom 404 page
+├── public/
+│   ├── favicon.svg                # Coffee emoji favicon
+│   └── robots.txt                 # Search engine directives
+├── astro.config.mjs               # Astro config with sitemap
+├── package.json                   # Dependencies (Astro 4.x, @astrojs/sitemap)
+├── Dockerfile                     # Multi-stage: Node builder + Nginx
+├── docker-compose.yml             # Local container orchestration
+└── nginx.conf                     # Production web server config
+```
+
+## Architecture Notes
+
+This is a simple static site following standard Astro conventions:
+- Layouts in `src/layouts/` for reusable page templates
+- Pages in `src/pages/` (routes automatically based on filename)
+- All content is on a single page (`index.astro`) with multiple sections
+- Custom 404 page with cozy theming
+- No client-side JavaScript - pure static HTML/CSS output
+- CSS custom properties centralized in `BaseLayout.astro` for theming
+- Accessibility improvements with ARIA labels and semantic HTML
+
+## Commands
+
+```bash
+# Development
+npm install          # Install dependencies
+npm run dev          # Start dev server at http://localhost:4321
+npm run build        # Build for production (runs astro check + astro build)
+npm run preview      # Preview production build
+
+# Docker
+docker build -t cozy-den .
+docker run -d -p 3000:80 --name cozy-den cozy-den
+docker-compose up -d
+
+# Deployment to Gitea registry
+docker tag cozy-den git.hiddenden.cafe/mats/cozy-den:latest
+docker login git.hiddenden.cafe
+docker push git.hiddenden.cafe/mats/cozy-den:latest
+```
+
+## Color System
+
+All colors use CSS custom properties in `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 new `.astro` file in `src/pages/`:
+```astro
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="New Page">
+  <div class="container">
+    <h1>New Page</h1>
+  </div>
+</BaseLayout>
+```
+Note: Pages route based on filename (e.g., `about.astro` → `/about`)
+
+## Implementation Guidelines
+
+**DO:**
+- Maintain cozy, warm aesthetic (coffee/cappuccino theme)
+- Keep site lightweight - static HTML/CSS only, no JavaScript runtime
+- Use CSS custom properties for all colors (defined in `src/layouts/BaseLayout.astro`)
+- Use `.fade-in` class for animations, `.card` class for consistent card styling
+- Test production builds and Docker builds after changes
+- Ensure responsive design works on mobile
+- Follow standard Astro structure (layouts in `src/layouts/`, pages in `src/pages/`)
+
+**DON'T:**
+- Add tracking or external dependencies (privacy-first approach)
+- Add client-side JavaScript unless absolutely necessary
+- Break the coffee/warm color theme
+- Create sterile or corporate design elements
+
+## Astro-Specific Notes
+
+- Frontmatter (code between `---`) runs at build time only
+- `<style>` tags are scoped by default; use `<style is:global>` for global styles (see `src/layouts/BaseLayout.astro`)
+- Site generates static HTML at build time - no JavaScript runtime
+- Sitemap integration configured in `astro.config.mjs` via `@astrojs/sitemap`
+- Custom 404 page at `src/pages/404.astro` with warm, themed styling
+
+## Context & Preferences
+
+- **Owner:** Latte (gay furry developer who values self-hosting, privacy, and open-source)
+- **Deployment:** All deployments via Docker to personal Gitea registry (git.hiddenden.cafe)
+- **Design Philosophy:** Warm, personal, cozy aesthetic over corporate/sterile design
+- **Technical Background:** Owner typically uses Python/Flask, learning Astro with this project
+
+## Troubleshooting
+
+**Build fails:** Check TypeScript config, ensure Node 18+, run `astro check`
+**Styles not applying:** Verify CSS variables are in `BaseLayout.astro`, check if you need `is:global`
+**Docker build fails:** Ensure `package.json` and `package-lock.json` exist
+**Changes not showing:** Hard refresh browser, restart dev server, or clear `.astro` cache
+
+## Related Documentation
+
+- **PROJECT_CONTEXT.md** - Design principles and project philosophy
+- **DEVELOPMENT.md** - Detailed developer documentation
+- **TODO.md** - Current tasks and future feature ideas
+- **README.md** - User-facing setup and deployment guide