Hiddenden/Cozy-Den
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #5

Merged
Latte merged 8 commits from dev into main 2026-01-01 14:04:36 +00:00
Conversation 3 Commits 8 Files Changed 27
+196 -245
5 changed files with 196 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ee324596ba - Show all commits
CLAUDE.MD
-236
View File
@@ -1,236 +0,0 @@
# 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:** 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
```
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 (Latte)
- 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
Latte 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 Latte 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+
CLAUDE.md
+169
View File
@@ -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
DEVELOPMENT.md
+13 -3
View File
@@ -19,11 +19,13 @@ cozy-den/
│ ├── layouts/
│ │ └── BaseLayout.astro # Base HTML layout with global styles
│ ├── pages/
│ │ └── index.astro # Main landing page
│ │ ├── index.astro # Main landing page
│ │ └── 404.astro # Custom 404 error page
│ └── components/ # (Empty - ready for future components)
├── public/
│ └── favicon.svg # Site favicon (coffee emoji)
├── astro.config.mjs # Astro configuration
│ ├── favicon.svg # Site favicon (coffee emoji)
│ └── robots.txt # Search engine directives
├── astro.config.mjs # Astro configuration with sitemap
├── package.json # Node dependencies
├── tsconfig.json # TypeScript configuration
├── Dockerfile # Multi-stage Docker build
@@ -67,6 +69,14 @@ The main page includes these sections:
5. **Support** - Ways to help/contribute
6. **Footer** - Links and credits
### 404.astro
Custom error page with:
- Themed styling matching the cozy aesthetic
- Clear error message ("Lost in the Den?")
- Action buttons to return home or visit Gitea
- Responsive design for all devices
## Development Workflow
### Local Development
PROJECT_CONTEXT.md
+6 -2
View File
@@ -29,6 +29,10 @@ The site currently has:
- ✅ Support section
- ✅ Docker deployment setup
- ✅ Responsive design
- ✅ Custom 404 page with themed styling
- ✅ Sitemap integration for SEO
- ✅ robots.txt for search engines
- ✅ Accessibility improvements (ARIA labels, semantic HTML)
## What Might Be Added Later
@@ -55,9 +59,9 @@ Main content is in `src/pages/index.astro`. Each section is wrapped in semantic
### File Organization
- `src/layouts/` - Reusable layouts (currently just BaseLayout)
- `src/pages/` - Routes (index.astro = homepage)
- `src/pages/` - Routes (index.astro = homepage, 404.astro = error page)
- `src/components/` - Reusable components (empty, ready for future use)
- `public/` - Static assets (favicon, images)
- `public/` - Static assets (favicon.svg, robots.txt)
## Communication Style
TODO.md
+8 -4
View File
@@ -1,10 +1,14 @@
# Cozy Den - Tasks & TODO
## Current Status
✅ Initial project structure created
✅ Initial project structure created (proper src/ directory)
✅ Landing page with all main sections
✅ Docker deployment setup
✅ Responsive design
✅ Custom 404 page
✅ Sitemap integration
✅ robots.txt
✅ Accessibility improvements (ARIA labels, semantic HTML)
## Immediate Next Steps
@@ -17,7 +21,7 @@
### Optional Enhancements
#### Short Term
- [ ] Add a custom 404 page
- [x] 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
@@ -90,9 +94,9 @@ Pull repository data from Gitea API and display:
- [ ] Consider breaking large components into smaller ones
- [ ] Add comments for complex CSS
- [ ] Set up automated testing if site grows
- [ ] Add accessibility audit
- [x] Add accessibility audit
- [ ] Optimize images if any are added
- [ ] Consider adding a sitemap.xml
- [x] Consider adding a sitemap.xml
## Performance Optimization