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

remove internal documentation before making repo public

Browse Source 
Deleted: AGENTS.md, CLAUDE.md, CODE_OF_CONDUCT.md, DEVELOPMENT.md,
FUTURE_PLANS.md, PROJECT_CONTEXT.md, SECURITY.md, TODO.md,
public/FAVICON_INSTRUCTIONS.md

These were internal planning docs, AI tool context files, and outdated
roadmap/todo files with no value for public visitors. README updated to
remove references to deleted files.
This commit is contained in:
Latte
2026-03-26 19:57:16 +01:00
parent da220d9550
commit e27d00ad86
10 changed files with 0 additions and 1641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
-169
View File
@@ -1,169 +0,0 @@
# AGENTS.md
This file provides guidance to Codex (Codex.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
CLAUDE.md
-172
View File
@@ -1,172 +0,0 @@
# 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 (hybrid SSR), TypeScript, Vanilla CSS, SQLite, Docker + Node.js
**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
Astro **hybrid SSR** site — most pages are statically pre-rendered, but guestbook and admin pages are server-rendered:
- Layouts in `src/layouts/` for reusable page templates
- Pages in `src/pages/` (routes automatically based on filename)
- Server-side lib code in `src/lib/` (db, auth, guestbook, spam)
- API routes in `src/pages/api/` for form handling and admin actions
- CSS custom properties centralized in `BaseLayout.astro` for theming
- `output: 'hybrid'` + `@astrojs/node` adapter — Node.js standalone server in production
- SQLite database (better-sqlite3) for guestbook entries and admin sessions
- Docker runtime is now Node.js (not Nginx); see `docs/guestbook.md` for setup
**Guestbook:** See `docs/guestbook.md` for full setup, token login, and deployment notes.
## 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
CODE_OF_CONDUCT.md
-34
View File
@@ -1,34 +0,0 @@
# Code of Conduct — ${REPO_NAME}
## Our Pledge
We pledge to make participation in this project a harassment-free experience for
everyone, regardless of age, body size, disability, ethnicity, gender identity
and expression, level of experience, nationality, personal appearance, race,
religion, or sexual identity and orientation.
## Our Standards
**Positive behavior includes:**
- Using welcoming and inclusive language
- Being respectful of differing viewpoints
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
**Unacceptable behavior includes:**
- Trolling, insulting comments, and personal attacks
- Public or private harassment
- Publishing others' private information without permission
- Other conduct which could reasonably be considered inappropriate
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the project maintainers. All complaints will be reviewed and
investigated and will result in a response that is deemed necessary and
appropriate to the circumstances.
## Attribution
This Code of Conduct is adapted from the
[Contributor Covenant](https://www.contributor-covenant.org/), version 2.1.
DEVELOPMENT.md
-334
View File
@@ -1,334 +0,0 @@
# 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/
│ ├── content/
│ │ ├── config.ts # Content collection schema
│ │ └── blog/
│ │ └── *.md # Blog posts (Markdown)
│ ├── layouts/
│ │ └── BaseLayout.astro # Base HTML layout with global styles
│ ├── pages/
│ │ ├── index.astro # Main landing page
│ │ ├── 404.astro # Custom 404 error page
│ │ └── blog/
│ │ ├── index.astro # Blog listing page (/blog)
│ │ └── [...slug].astro # Individual post pages (/blog/<slug>)
├── public/
│ ├── favicon.svg # Site favicon (coffee emoji)
│ ├── robots.txt # Search engine directives
│ └── blog/ # Blog post images (per-post subdirectory)
├── astro.config.mjs # Astro configuration with sitemap
├── 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: #1e1e2e /* Dark background (Catppuccin Mocha base) */
--color-text: #cdd6f4 /* Light text */
--color-text-dim: #a6adc8 /* Dimmed text for less emphasis */
--color-accent: #cba6f7 /* Mauve accent */
--color-accent-bright: #f5c2e7 /* Pink accent for highlights */
--color-surface: #313244 /* Surface color for borders/cards */
--color-blue: #89b4fa /* Blue for links */
--color-green: #a6e3a1 /* Green for code */
--color-peach: #fab387 /* Peach for labels */
```
## 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. **Header** - Title
2. **About** - Introduction, age, status
3. **Cryptographic Keys** - PGP fingerprint and SSH public key
4. **Games** - Games Latte plays
5. **Socials** - Links to social platforms
6. **Services** - Self-hosted services
7. **Support** - Crypto donation addresses
8. **Blog** - Link to `/blog`
9. **Footer** - Credits
### blog/index.astro
Blog listing page at `/blog`. Fetches all non-draft posts from the `blog` content collection, sorted by date descending.
### blog/[...slug].astro
Individual blog post page. Renders Markdown content using Astro's `<Content />` component. Styles for prose content (headings, paragraphs, code blocks, images, etc.) are scoped within `.content :global(...)`.
### src/content/config.ts
Defines the `blog` content collection schema:
- `title` (string) — post title
- `date` (date) — publish date, used for sorting
- `description` (string) — shown on the listing page
- `draft` (boolean, optional) — set to `true` to hide from listing
### 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
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/blog/<post-slug>/` directory
2. Reference in Markdown with `/blog/<post-slug>/image.jpg`
3. They'll be served as static assets by nginx
**Adding a blog post:**
1. Create `src/content/blog/my-post-slug.md`
2. Add frontmatter: `title`, `date`, `description` (and optionally `draft: true`)
3. Write content in Markdown below the frontmatter
4. The post appears automatically at `/blog/my-post-slug`
## 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:
- [x] Add blog section using Astro's content collections
- [x] Create custom 404 page
- [ ] Add RSS feed for blog
- [ ] Create reusable components for service items
- [ ] Add more animations and transitions
- [ ] Integrate with analytics (privacy-friendly, self-hosted)
## 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
FUTURE_PLANS.md
-590
View File
@@ -1,590 +0,0 @@
# Cozy Den - Future Enhancement Plan
## Executive Summary
This plan outlines potential future enhancements for the Cozy Den landing page (hiddenden.cafe). The current site is well-built with a solid foundation - clean Astro architecture, cozy coffee-themed aesthetic, Docker deployment, and strong accessibility. This document organizes future possibilities by priority and complexity.
---
## Current State Assessment
**Strengths:**
- ✅ Clean, minimal Astro structure with proper TypeScript configuration
- ✅ Strong accessibility (ARIA labels, semantic HTML, keyboard navigation)
- ✅ Production-ready Docker deployment with Nginx
- ✅ Responsive design with mobile support
- ✅ Custom 404 page with themed styling
- ✅ SEO foundations (sitemap, robots.txt, meta tags)
- ✅ Privacy-first (no tracking, no external dependencies)
- ✅ Well-documented (CLAUDE.md, DEVELOPMENT.md, PROJECT_CONTEXT.md)
**Current Limitations:**
- Single-page site (only 2 routes: index, 404)
- No dynamic content (all hardcoded)
- No reusable components (empty components directory)
- Limited animations (only fade-in on load)
- No image optimization system
- Static service list with "More Coming Soon" placeholder
- Missing OG image for social sharing
- No form handling for contact/donations
---
## Phase 1: Quick Wins (Low Effort, High Impact)
### 1.1 Visual Polish
**Effort:** 1-2 hours | **Impact:** Medium
- **Add social sharing image** - Create og-image.png (1200x630px) with coffee theme
- **Favicon variants** - Add apple-touch-icon.png, favicon-16x16.png, favicon-32x32.png
- **Scroll animations** - Implement Intersection Observer for sections to fade/slide in on scroll
- **Hover effects** - Add subtle transitions for links, buttons, and cards
- **Background texture** - Subtle coffee stain or paper texture overlay on background
**Files to modify:**
- `public/` (add new image assets)
- `src/layouts/BaseLayout.astro` (add meta tags for OG image, favicon variants)
- `src/pages/index.astro` (add scroll animation JavaScript)
### 1.2 Content Updates
**Effort:** 30 minutes | **Impact:** High
- **Update service list** - Replace "More Coming Soon" with actual services
- **Add donation/payment links** - Ko-fi, Liberapay, or crypto addresses
- **Personalize About Me** - Review and update personal section
- **Add social links** - Mastodon, GitHub, etc. if desired
**Files to modify:**
- `src/pages/index.astro` (update content in Services and Support sections)
### 1.3 Component Extraction
**Effort:** 2-3 hours | **Impact:** Medium (code quality)
Extract repeated patterns into reusable Astro components:
- **ServiceItem.astro** - Reusable service card component
- **SupportItem.astro** - Reusable support/help card component
- **Card.astro** - Generic card wrapper component
- **Section.astro** - Section wrapper with consistent spacing
**Files to create:**
- `src/components/ServiceItem.astro`
- `src/components/SupportItem.astro`
- `src/components/Card.astro`
- `src/components/Section.astro`
**Files to modify:**
- `src/pages/index.astro` (replace hardcoded HTML with component calls)
---
## Phase 2: Medium Complexity Enhancements
### 2.1 Blog Implementation
**Effort:** 1-2 days | **Impact:** High
Implement a blog using Astro Content Collections for project updates, tutorials, and thoughts.
**Features:**
- Markdown-based blog posts with frontmatter (title, date, tags, description)
- Blog listing page with pagination
- Individual post pages with reading time estimate
- Tag filtering system
- RSS feed generation
- Code syntax highlighting with Shiki
- Consistent coffee theme styling
**Files to create:**
- `src/content/config.ts` (Content Collections schema)
- `src/content/blog/*.md` (blog posts)
- `src/pages/blog/index.astro` (blog listing)
- `src/pages/blog/[slug].astro` (individual post template)
- `src/pages/blog/tags/[tag].astro` (tag filtering)
- `src/pages/rss.xml.js` (RSS feed)
- `src/components/BlogCard.astro` (blog post preview card)
**Files to modify:**
- `astro.config.mjs` (enable Content Collections)
- `package.json` (add @astrojs/rss if needed)
- `src/pages/index.astro` (add link to blog section)
### 2.2 Projects Showcase
**Effort:** 2-3 days | **Impact:** High
Create a projects page showcasing your work, optionally pulling from Gitea API.
**Features:**
- Projects grid/list with filtering by language/topic
- Project cards with description, tech stack, links
- Option to manually curate or pull from Gitea API
- Search functionality
- "Featured projects" section
**Implementation Options:**
1. **Static** - Manually maintain project list in JSON/frontmatter
2. **Dynamic** - Fetch from Gitea API at build time (SSG)
3. **Hybrid** - Curated featured projects + API for rest
**Files to create:**
- `src/pages/projects.astro` (projects listing)
- `src/components/ProjectCard.astro` (project preview)
- `src/utils/gitea.ts` (Gitea API integration if dynamic)
- `src/data/projects.json` (static project data if manual)
**Files to modify:**
- `src/pages/index.astro` (add link to projects page)
### 2.3 Contact Form
**Effort:** 2-4 days | **Impact:** Medium
Self-hosted contact form with server-side handling (no third-party services).
**Implementation Options:**
1. **Astro SSR + Email** - Use Astro SSR mode with nodemailer
2. **External API** - Simple Node.js/Python microservice on separate port
3. **Static form service** - Self-hosted FormSpree alternative
**Features:**
- Name, email, message fields with validation
- Spam protection (honeypot field, rate limiting)
- Email notification to your address
- Success/error feedback to user
- Maintains privacy-first approach (no tracking)
**Files to create:**
- `src/pages/contact.astro` (contact page)
- `src/pages/api/contact.ts` (API endpoint if using SSR)
- Or separate microservice in `/contact-service/`
**Configuration changes:**
- May need to switch Astro to SSR mode or hybrid mode
- Docker setup updates for email service
### 2.4 Theme Toggle
**Effort:** 1-2 days | **Impact:** Medium
Add light/dark theme toggle or alternate color schemes.
**Implementation:**
- Toggle button in header/footer
- LocalStorage persistence
- CSS custom property switching
- Smooth transition animations
- Respect `prefers-color-scheme` system preference
- Alternate schemes: light mode, extra dark, seasonal themes
**Files to modify:**
- `src/layouts/BaseLayout.astro` (add theme toggle script, alternate color variables)
- `src/pages/index.astro` (add toggle button)
- Consider creating `src/utils/theme.ts` for theme management
---
## Phase 3: Advanced Features
### 3.1 Service Status Dashboard
**Effort:** 3-5 days | **Impact:** Medium-High
Dashboard showing status of self-hosted services with uptime monitoring.
**Features:**
- Real-time or periodic status checks
- Uptime percentage display
- Incident history
- Visual indicators (green/yellow/red)
- Manual status override capability
**Implementation:**
- Build-time health checks for SSG
- Or client-side status checks (fetch API)
- Or separate monitoring service (self-hosted Uptime Kuma integration)
**Files to create:**
- `src/pages/status.astro` (status dashboard)
- `src/components/ServiceStatus.astro` (status indicator)
- `src/utils/healthCheck.ts` (service health checking)
### 3.2 Art/Badge Gallery
**Effort:** 2-4 days | **Impact:** Medium
Showcase furry art, badges, stickers, or commission work.
**Features:**
- Grid layout with lightbox modal
- Categories/tags for filtering
- Artist attribution and links
- Image optimization with Astro Image component
- Lazy loading for performance
- Alt text for accessibility
**Files to create:**
- `src/pages/gallery.astro` (gallery page)
- `src/components/Gallery.astro` (grid component)
- `src/components/Lightbox.astro` (modal viewer)
- `public/gallery/` (image storage)
**Configuration:**
- Add @astrojs/image integration
- Optimize build for image processing
### 3.3 Interactive Hero Section
**Effort:** 2-3 days | **Impact:** Medium
Enhanced hero section with animated coffee cup, steam, or other cozy elements.
**Features:**
- Animated SVG coffee cup with steam
- Parallax scrolling effect
- Subtle particle effects (coffee beans, steam wisps)
- Time-based greeting (morning/evening)
- Optional: cursor trail effect (paw prints)
**Implementation:**
- SVG animations with CSS or GSAP
- Minimal JavaScript for interactivity
- Maintain performance (no heavy libraries)
**Files to modify:**
- `src/pages/index.astro` (enhance hero section)
- `public/` (add animated SVG assets)
### 3.4 Guest Book / Community Section
**Effort:** 4-7 days | **Impact:** Medium
Community guest book for visitors to leave messages.
**Features:**
- Message submission form
- Moderation queue (approve before publishing)
- Optional: user avatars or default furry icons
- Pagination
- Rate limiting and spam protection
- Self-hosted storage (SQLite or JSON files)
**Implementation:**
- Requires backend (Astro SSR or separate microservice)
- Database: SQLite, PostgreSQL, or JSON files
- Admin interface for moderation
- Consider: WebMentions integration for federated comments
**Files to create:**
- `src/pages/guestbook.astro` (guest book display)
- `src/pages/api/guestbook.ts` (API endpoints)
- `src/pages/admin/guestbook.astro` (moderation interface)
- Database schema and migration scripts
### 3.5 Privacy-Friendly Analytics
**Effort:** 2-4 days | **Impact:** Low-Medium
Self-hosted analytics to understand traffic without compromising privacy.
**Options:**
1. **Plausible Analytics** (self-hosted)
2. **GoAccess** (log analysis)
3. **Umami** (self-hosted, lightweight)
4. **Custom solution** (minimal logging in Nginx)
**Features:**
- Page view counts
- Referrer tracking
- No cookies or personal data
- Public dashboard option
- No IP address storage
**Implementation:**
- Deploy separate analytics service in Docker
- Add tracking script to BaseLayout
- Create dashboard page or embed analytics UI
---
## Phase 4: Long-Term Vision
### 4.1 Self-Hosting Hub
**Effort:** Ongoing | **Impact:** High (community value)
Transform site into a resource hub for self-hosting enthusiasts.
**Features:**
- Tutorial blog posts (Docker, Nginx, services)
- Docker Compose examples repository
- Service recommendations and reviews
- Troubleshooting guides
- Link directory of self-hosting resources
**Content needed:**
- Write tutorials based on your experience
- Document your homelab setup
- Create reusable Docker configurations
- Build community through shared knowledge
### 4.2 Multilingual Support (i18n)
**Effort:** 3-5 days + translation time | **Impact:** Medium
Add support for multiple languages.
**Implementation:**
- Use Astro's i18n routing
- Translation files (JSON or YAML)
- Language switcher component
- SEO considerations (hreflang tags)
**Languages to consider:**
- English (current)
- Additional languages based on audience
### 4.3 Furry Community Features
**Effort:** Variable | **Impact:** Medium (niche audience)
Features specifically for furry community engagement.
**Ideas:**
- Fursona information page
- Commission status/prices page
- Convention schedule/attendance
- Furry resource links
- Badge collection showcase
- Art trades or collaborations section
### 4.4 Seasonal Themes
**Effort:** 2-3 days per theme | **Impact:** Low-Medium (delight factor)
Automatic theme changes based on season or holidays.
**Themes:**
- Fall: Orange/brown palette, falling leaves animation
- Winter: Cool tones, snow particles
- Spring: Pastel colors, flower accents
- Summer: Bright colors, sunny vibes
- Special: Pride month, Halloween, winter holidays
**Implementation:**
- CSS custom property switching
- JavaScript date detection
- Optional manual theme selector
- Maintain core cozy aesthetic across all themes
### 4.5 API Integrations
**Effort:** Variable | **Impact:** Medium
Integrate with various services you self-host.
**Possible integrations:**
- **Gitea**: Recent commits, repository stats, contribution graph
- **Mastodon**: Recent toots, follower count (if you run instance)
- **Media server**: Recently watched/listened
- **RSS reader**: Shared articles or reading list
- **Bookmarks**: Public bookmark collection
---
## Phase 5: Performance & Code Quality
### 5.1 Performance Optimization
**Effort:** 2-3 days | **Impact:** Medium
Optimize for speed and efficiency.
**Tasks:**
- Implement lazy loading for images (when added)
- Add preload/prefetch hints for critical resources
- Optimize SVG assets (SVGO)
- Implement service worker for offline support
- Critical CSS inlining
- Font loading optimization (if custom fonts added)
- Reduce bundle size analysis
**Tools:**
- Lighthouse audits
- WebPageTest
- Bundle analyzer
### 5.2 Testing Infrastructure
**Effort:** 3-5 days | **Impact:** Medium (quality)
Add automated testing as site grows.
**Testing types:**
- **Unit tests**: Component logic (Vitest)
- **Integration tests**: Page rendering
- **E2E tests**: User flows (Playwright)
- **Accessibility tests**: axe-core automated checks
- **Visual regression**: Screenshot comparisons
**Files to create:**
- `tests/` directory structure
- `vitest.config.ts` or `playwright.config.ts`
- CI/CD pipeline configuration
### 5.3 Documentation Expansion
**Effort:** Ongoing | **Impact:** Medium
Enhance documentation for contributors and future maintainability.
**Documentation needs:**
- Inline code comments for complex logic
- API documentation (if backend added)
- Component usage examples
- Deployment troubleshooting guide
- Contributing guidelines
- Architecture decision records (ADRs)
---
## Implementation Priority Matrix
### High Priority, Quick Wins
1. ✅ Add social sharing OG image
2. ✅ Update service list content
3. ✅ Add donation/payment links
4. ✅ Implement scroll animations
5. ✅ Add favicon variants
### High Priority, Medium Effort
1. ✅ Blog implementation (Content Collections)
2. ✅ Projects showcase page
3. ✅ Component extraction (ServiceItem, Card, etc.)
### Medium Priority, Nice to Have
1. ✅ Contact form
2. ✅ Theme toggle
3. ✅ Service status dashboard
4. ✅ Art/badge gallery
### Low Priority, Future Exploration
1. ✅ Guest book / community features
2. ✅ Privacy-friendly analytics
3. ✅ Multilingual support
4. ✅ Seasonal themes
---
## Technical Considerations
### Astro Mode Decision
Current: **Static Site Generation (SSG)**
Consider switching to **Hybrid** or **Server (SSR)** if adding:
- Contact forms
- Guest book
- Real-time service status
- User authentication
**Trade-offs:**
- SSG: Fast, cheap hosting, better privacy, limited interactivity
- SSR: Dynamic features, server costs, more complexity
- Hybrid: Best of both (some pages static, some dynamic)
### Database Decisions
If dynamic features are added:
**Options:**
- **SQLite**: Simple, file-based, good for small-medium traffic
- **PostgreSQL**: Robust, scalable, self-hostable
- **JSON files**: Simplest, version-controllable, limited scale
- **Redis**: Fast, good for caching and simple data
**Recommendation:** Start with SQLite or JSON, migrate to PostgreSQL if traffic grows.
### Deployment Architecture Evolution
**Current:** Static site → Nginx container
**Future options:**
- **Hybrid**: Astro SSR + Nginx reverse proxy
- **Microservices**: Static site + separate API services
- **Monolith**: Astro SSR handling everything
**Recommendation:** Stick with static as long as possible, add microservices for specific dynamic needs.
---
## Resource Estimates
### Time Investment by Phase
- **Phase 1 (Quick Wins):** 3-5 hours total
- **Phase 2 (Medium):** 1-2 weeks part-time
- **Phase 3 (Advanced):** 2-4 weeks part-time
- **Phase 4 (Long-term):** Ongoing, months
- **Phase 5 (Quality):** 1 week part-time
### Infrastructure Costs
Current: Minimal (static hosting)
Potential additions:
- Blog: No additional cost (static)
- Contact form: May need email service (self-hosted = free)
- Database: SQLite = free, PostgreSQL = minimal RAM
- Analytics: Self-hosted = minimal resources
- Guest book: Requires backend (modest VPS resources)
---
## Next Steps & Recommendations
### Immediate Actions (This Week)
1. **Create OG image** - Design 1200x630px social sharing image with coffee theme
2. **Update service list** - Replace placeholder with actual services
3. **Add donation links** - Set up Ko-fi/Liberapay and add to Support section
4. **Scroll animations** - Implement Intersection Observer for section reveals
### Short Term (This Month)
1. **Extract components** - Refactor ServiceItem and SupportItem into reusable components
2. **Plan blog structure** - Decide on categories, write first 2-3 posts
3. **Implement blog** - Set up Content Collections and blog pages
4. **Favicon variants** - Generate and add multiple favicon sizes
### Medium Term (Next 3 Months)
1. **Projects showcase** - Decide on Gitea API integration or manual curation
2. **Contact form** - Evaluate SSR vs microservice approach
3. **Theme toggle** - Implement light/dark mode switching
4. **Service status** - Add health checks for self-hosted services
### Long Term (6-12 Months)
1. **Community features** - Guest book or comment system if desired
2. **Analytics** - Self-hosted Plausible or Umami instance
3. **Content creation** - Regular blog posts, tutorials, documentation
4. **Seasonal themes** - Create at least 2 alternate seasonal palettes
---
## Success Metrics
Track progress with these goals:
**Technical:**
- ✅ Lighthouse score >95 (all categories)
- ✅ Zero accessibility violations (axe-core)
- ✅ Build time <30 seconds
- ✅ Page load time <2 seconds
**Content:**
- ✅ 10+ blog posts published
- ✅ 5+ projects showcased
- ✅ All services documented
- ✅ Complete personal information
**Community (if applicable):**
- ✅ Guest book messages
- ✅ GitHub stars/forks
- ✅ Visitor traffic (privacy-respecting measurement)
- ✅ Positive feedback
---
## Conclusion
Cozy Den has a solid foundation and many exciting possibilities for growth. The beauty of this project is its flexibility - you can implement features at your own pace based on your needs and available time.
**Core Philosophy to Maintain:**
- ✅ Cozy, warm aesthetic (coffee theme)
- ✅ Privacy-first (no tracking, self-hosted)
- ✅ Lightweight (fast loading, minimal bloat)
- ✅ Accessible (WCAG compliance)
- ✅ Personal (authentic, not corporate)
**Recommended Approach:**
Start with Phase 1 quick wins to polish the existing site, then move to Phase 2 based on what excites you most (blog for writing, projects for showcasing work, contact form for engagement). Don't feel pressured to implement everything - pick what adds value to your goals.
This is your cozy corner of the internet. Build it in a way that makes you happy! ☕🦊
PROJECT_CONTEXT.md
-127
View File
@@ -1,127 +0,0 @@
# Project Context for Claude Code
## What is this project?
This is a personal landing page for hiddenden.cafe, built with Astro. The owner is Latte, 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 (Latte)
- ✅ Services section (Gitea linked)
- ✅ 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
- 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, 404.astro = error page)
- `src/components/` - Reusable components (empty, ready for future use)
- `public/` - Static assets (favicon.svg, robots.txt)
## 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
Latte 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 Latte and Hidden Den
- Work on all screen sizes
- Be easy to deploy via Docker
- Require minimal maintenance
README.md
-7
View File
@@ -94,13 +94,6 @@ The site is built to be easily customizable:
- 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!
SECURITY.md
-31
View File
@@ -1,31 +0,0 @@
# Security Policy — ${REPO_NAME}
## Reporting a Vulnerability
**Do NOT open a public issue for security vulnerabilities.**
Instead, please report vulnerabilities privately:
1. Email: **security@hiddenden.cafe** (preferred)
2. Or use the Gitea "Security" issue template which reminds reporters to use private channels.
Include:
- Description of the vulnerability
- Steps to reproduce
- Potential impact
- Suggested fix (if any)
We aim to acknowledge reports within **48 hours** and provide a fix or mitigation plan
within **7 days** for critical issues.
## Supported Versions
| Version | Supported |
| ------- | --------- |
| latest | Yes |
## Security Scanning
This repository optionally runs automated security scanning via Gitea Actions.
To enable it, set `ENABLE_SECURITY=true` in `.ci/config.env`.
See [docs/SECURITY.md](docs/SECURITY.md) for details.
TODO.md
-126
View File
@@ -1,126 +0,0 @@
# Cozy Den - Tasks & TODO
## Current Status
✅ 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)
✅ Blog with Astro Content Collections (Markdown, no CMS)
## 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
- [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
- [ ] Consider adding subtle background patterns or textures
#### Medium Term
- [x] Create a blog section using Astro Content Collections
- [ ] Add RSS feed for blog
- [ ] Add a projects page that pulls from Gitea API
- [ ] Create reusable components for repeated elements
- [ ] Add a contact form (self-hosted solution)
#### 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 - blog posts are Markdown files committed to the repo (intentional — no attack surface)
## 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
- [x] Add accessibility audit
- [ ] Optimize images if any are added
- [x] 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
public/FAVICON_INSTRUCTIONS.md
-51
View File
@@ -1,51 +0,0 @@
# Favicon Generation Instructions
The following favicon files are referenced in the site but need to be generated:
- `favicon-16x16.png` - 16x16px PNG favicon
- `favicon-32x32.png` - 32x32px PNG favicon
- `apple-touch-icon.png` - 180x180px PNG for Apple devices
- `og-image.png` - 1200x630px PNG for social media sharing (optional, currently using SVG)
## How to Generate
### Option 1: Use an Online Tool
Visit https://realfavicongenerator.net/ and upload your source image (coffee emoji or custom design).
### Option 2: Use ImageMagick (if available)
If you have a source PNG image:
```bash
# 16x16
convert source.png -resize 16x16 favicon-16x16.png
# 32x32
convert source.png -resize 32x32 favicon-32x32.png
# Apple touch icon
convert source.png -resize 180x180 apple-touch-icon.png
# OG image
convert source.png -resize 1200x630 og-image.png
```
### Option 3: Use the SVG favicon
The current `favicon.svg` (coffee emoji) works in modern browsers. The PNG variants are fallbacks for older browsers and specific platforms.
## Current Status
- ✅ `favicon.svg` - Exists (coffee emoji)
- ❌ `favicon-16x16.png` - Needs to be created
- ❌ `favicon-32x32.png` - Needs to be created
- ❌ `apple-touch-icon.png` - Needs to be created
- ✅ `og-image.svg` - Created (SVG placeholder)
- ⚠️ `og-image.png` - Optional (browsers support SVG, but PNG is more compatible)
## Design Recommendations
Use the cozy coffee theme colors:
- Background: `#1a1410` (dark coffee)
- Accent: `#e8bf8e` (light coffee/cream)
- Text: `#f4e9d8` (cream)
The favicon should be simple and recognizable at small sizes. The coffee emoji ☕ is perfect!