Add 'Now' page and update navigation; refine styles and metadata #42
@@ -0,0 +1,169 @@
|
||||
# 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
|
||||
@@ -5,6 +5,7 @@ const links = [
|
||||
{ href: "/", label: "home" },
|
||||
{ href: "/about", label: "about" },
|
||||
{ href: "/projects", label: "projects" },
|
||||
{ href: "/now", label: "now" },
|
||||
{ href: "/blog", label: "blog" },
|
||||
];
|
||||
|
||||
@@ -39,7 +40,7 @@ function isActive(href: string, current: string): boolean {
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: rgba(30, 30, 46, 0.85);
|
||||
background: var(--color-glass-nav);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: "Welcome to the Den"
|
||||
date: 2026-03-04
|
||||
date: 2026-03-01
|
||||
description: "First proper post. Why I built this site, what it runs on, and what to expect."
|
||||
draft: true
|
||||
draft: false
|
||||
---
|
||||
|
||||
So I finally got around to setting up a proper blog. Welcome.
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
Living snapshot of what I am building, learning, and focusing on right now.
|
||||
|
||||
Last updated: 2026-03-06
|
||||
|
||||
## Current Projects
|
||||
|
||||
- **GuardDen** - tightening moderation and security workflows for community spaces.
|
||||
- **loyal_companion** - active work-in-progress with feature and stability passes.
|
||||
- **Cozy Den** - improving structure and adding pages that are easier to maintain over time.
|
||||
|
||||
## Learning Right Now
|
||||
|
||||
- Better Astro content organization for small personal sites.
|
||||
- Cleaner Docker + nginx deployment routines for self-hosted services.
|
||||
- Practical writing habits for short, regular project updates.
|
||||
|
||||
## Focus Areas
|
||||
|
||||
- Privacy-first self-hosting with minimal external dependencies.
|
||||
- Building lightweight tools that stay understandable and maintainable.
|
||||
- Sustainable progress: consistent small steps instead of burnout sprints.
|
||||
|
||||
## Next Check-In
|
||||
|
||||
I try to refresh this page every few weeks so it stays useful and current.
|
||||
@@ -54,8 +54,18 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
name="keywords"
|
||||
content="self-hosted, privacy, open-source, furry, developer, cozy, hidden den"
|
||||
/>
|
||||
<meta name="theme-color" content="#cba6f7" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="theme-color" content="#1e1e2e" />
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
content="#1e1e2e"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: light)"
|
||||
content="#f6efe6"
|
||||
/>
|
||||
<meta name="color-scheme" content="dark light" />
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
@@ -101,6 +111,9 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
--color-blue: #89b4fa;
|
||||
--color-green: #a6e3a1;
|
||||
--color-peach: #fab387;
|
||||
--color-glass: rgba(30, 30, 46, 0.8);
|
||||
--color-glass-nav: rgba(30, 30, 46, 0.85);
|
||||
color-scheme: dark;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 0.5rem;
|
||||
@@ -113,6 +126,25 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
--font-body: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-bg: #f6efe6;
|
||||
--color-bg-light: #efe1cf;
|
||||
--color-surface: #d8c2a8;
|
||||
--color-text: #35251a;
|
||||
--color-text-dim: #6b5442;
|
||||
--color-accent: #8b5e3c;
|
||||
--color-accent-bright: #a16c45;
|
||||
--color-warm: #b6794f;
|
||||
--color-blue: #326b8f;
|
||||
--color-green: #3f7c47;
|
||||
--color-peach: #b5693e;
|
||||
--color-glass: rgba(246, 239, 230, 0.82);
|
||||
--color-glass-nav: rgba(246, 239, 230, 0.88);
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
+1
-1
@@ -66,7 +66,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -105,7 +105,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -76,7 +76,7 @@ function formatDate(date: Date) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -83,7 +83,7 @@ function formatDate(date: Date) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -210,7 +210,7 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import NowContent from "../data/now.md";
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Now - Hidden Den Cafe"
|
||||
description="A living snapshot of what Latte is building, learning, and focusing on right now."
|
||||
>
|
||||
<div class="matrix-bg" aria-hidden="true"></div>
|
||||
|
||||
<main class="main">
|
||||
<article class="now-card fade-in">
|
||||
<header class="header">
|
||||
<h1 class="title">Now</h1>
|
||||
<div class="divider">══════════════════════════════</div>
|
||||
</header>
|
||||
<NowContent />
|
||||
</article>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.matrix-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.03;
|
||||
background:
|
||||
linear-gradient(var(--color-accent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: grid-move 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes grid-move {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
padding-top: calc(var(--space-lg) + 3rem);
|
||||
}
|
||||
|
||||
.now-card {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: var(--color-surface);
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
margin: var(--space-md) 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.now-card :global(h2) {
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.now-card :global(p),
|
||||
.now-card :global(li) {
|
||||
color: var(--color-text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.now-card :global(p) {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.now-card :global(ul) {
|
||||
margin-left: 1.2rem;
|
||||
display: grid;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.now-card :global(strong) {
|
||||
color: var(--color-accent-bright);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.now-card {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.matrix-bg {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -126,7 +126,7 @@ function getPrimaryLink(project: Project): string | undefined {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user