From 6ed0eee514576ff924bdc6060ecbf27984cdf76f Mon Sep 17 00:00:00 2001 From: latte Date: Wed, 31 Dec 2025 18:12:11 +0000 Subject: [PATCH] feat: Implement Phase 1 enhancements - components and animations Components: - Extract ServiceItem component with hover effects - Extract SupportItem component with hover animations - Extract Card component with scroll animations - Extract Section component for consistent layout Enhancements: - Add Intersection Observer for scroll-triggered animations - Implement hover effects on cards, services, and support items - Add PWA manifest (site.webmanifest) - Create SVG OG image placeholder for social sharing - Add comprehensive favicon meta tags (16x16, 32x32, apple-touch-icon) - Respect prefers-reduced-motion for accessibility Files modified: - src/pages/index.astro - Refactored to use new components - src/layouts/BaseLayout.astro - Enhanced favicon and meta tags Files created: - src/components/Card.astro - src/components/Section.astro - src/components/ServiceItem.astro - src/components/SupportItem.astro - public/og-image.svg - public/site.webmanifest - public/FAVICON_INSTRUCTIONS.md Note: PNG favicon variants still need to be generated (see FAVICON_INSTRUCTIONS.md) --- public/FAVICON_INSTRUCTIONS.md | 51 +++++ public/og-image.svg | 30 +++ public/site.webmanifest | 32 ++++ src/components/Card.astro | 74 +++++++ src/components/Section.astro | 27 +++ src/components/ServiceItem.astro | 68 +++++++ src/components/SupportItem.astro | 58 ++++++ src/layouts/BaseLayout.astro | 313 ++++++++++++++++-------------- src/pages/index.astro | 320 +++++++++++-------------------- 9 files changed, 622 insertions(+), 351 deletions(-) create mode 100644 public/FAVICON_INSTRUCTIONS.md create mode 100644 public/og-image.svg create mode 100644 public/site.webmanifest create mode 100644 src/components/Card.astro create mode 100644 src/components/Section.astro create mode 100644 src/components/ServiceItem.astro create mode 100644 src/components/SupportItem.astro diff --git a/public/FAVICON_INSTRUCTIONS.md b/public/FAVICON_INSTRUCTIONS.md new file mode 100644 index 0000000..2ad1af3 --- /dev/null +++ b/public/FAVICON_INSTRUCTIONS.md @@ -0,0 +1,51 @@ +# 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! diff --git a/public/og-image.svg b/public/og-image.svg new file mode 100644 index 0000000..e4801b9 --- /dev/null +++ b/public/og-image.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + ☕ + + + + Hidden Den Cafe + + + + + A cozy corner of the internet + + + + + Self-hosted • Privacy-focused • Furry-friendly + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..e8022b0 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,32 @@ +{ + "name": "Hidden Den Cafe", + "short_name": "Hidden Den", + "description": "A cozy, self-hosted corner of the internet", + "icons": [ + { + "src": "/favicon.svg", + "sizes": "any", + "type": "image/svg+xml" + }, + { + "src": "/favicon-16x16.png", + "sizes": "16x16", + "type": "image/png" + }, + { + "src": "/favicon-32x32.png", + "sizes": "32x32", + "type": "image/png" + }, + { + "src": "/apple-touch-icon.png", + "sizes": "180x180", + "type": "image/png" + } + ], + "theme_color": "#d4a574", + "background_color": "#1a1410", + "display": "standalone", + "start_url": "/", + "orientation": "portrait" +} diff --git a/src/components/Card.astro b/src/components/Card.astro new file mode 100644 index 0000000..7159b1a --- /dev/null +++ b/src/components/Card.astro @@ -0,0 +1,74 @@ +--- +interface Props { + class?: string; +} + +const { class: className } = Astro.props; +--- + +
+ +
+ + diff --git a/src/components/Section.astro b/src/components/Section.astro new file mode 100644 index 0000000..98b9e45 --- /dev/null +++ b/src/components/Section.astro @@ -0,0 +1,27 @@ +--- +interface Props { + class?: string; + ariaLabelledby?: string; +} + +const { class: className, ariaLabelledby } = Astro.props; +--- + +
+
+ +
+
+ + diff --git a/src/components/ServiceItem.astro b/src/components/ServiceItem.astro new file mode 100644 index 0000000..4eafd7d --- /dev/null +++ b/src/components/ServiceItem.astro @@ -0,0 +1,68 @@ +--- +interface Props { + title: string; + description: string; + url?: string; + comingSoon?: boolean; +} + +const { title, description, url, comingSoon = false } = Astro.props; +--- + +
+

+ {url ? ( + + {title} + + ) : ( + title + )} +

+

{description}

+
+ + diff --git a/src/components/SupportItem.astro b/src/components/SupportItem.astro new file mode 100644 index 0000000..ba5546e --- /dev/null +++ b/src/components/SupportItem.astro @@ -0,0 +1,58 @@ +--- +interface Props { + title: string; + description: string; + comingSoonNote?: string; +} + +const { title, description, comingSoonNote } = Astro.props; +--- + +
+

{title}

+

+ {description} + {comingSoonNote && ( + ({comingSoonNote}) + )} +

+
+ + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 94c86f8..205b91a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,16 +1,16 @@ --- interface Props { - title: string; - description?: string; - ogImage?: string; - canonicalURL?: string; + title: string; + description?: string; + ogImage?: string; + canonicalURL?: string; } const { - title, - description = "Hidden Den Cafe - A cozy, self-hosted corner of the internet. Privacy-focused, furry-friendly, and built with love.", - ogImage = "/og-image.png", - canonicalURL = Astro.url.pathname + title, + description = "Hidden Den Cafe - A cozy, self-hosted corner of the internet. Privacy-focused, furry-friendly, and built with love.", + ogImage = "/og-image.png", + canonicalURL = Astro.url.pathname, } = Astro.props; const fullCanonicalURL = new URL(canonicalURL, Astro.site).href; @@ -19,156 +19,183 @@ const fullOgImage = new URL(ogImage, Astro.site).href; - - - - + + + + - - {title} - - - + + {title} + + + - - - - - - - - + + + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - + + + + + + - - - - - - + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 0cad766..4eebc54 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,9 @@ --- import BaseLayout from "../layouts/BaseLayout.astro"; +import Card from "../components/Card.astro"; +import Section from "../components/Section.astro"; +import ServiceItem from "../components/ServiceItem.astro"; +import SupportItem from "../components/SupportItem.astro"; --- -
-
-
-

About Hidden Den

-

- Welcome to Hidden Den Cafe - a warm, self-hosted space - where technology meets comfort. This is a personal - corner of the internet built with love, care, and a - strong belief in privacy and open-source values. -

-

- Everything here runs on self-hosted infrastructure, - giving complete control over data and services. No cloud - dependencies, no tracking, just a cozy digital home. -

-
-
-
+
+ +

About Hidden Den

+

+ Welcome to Hidden Den Cafe - a warm, self-hosted space where + technology meets comfort. This is a personal corner of the + internet built with love, care, and a strong belief in + privacy and open-source values. +

+

+ Everything here runs on self-hosted infrastructure, giving + complete control over data and services. No cloud + dependencies, no tracking, just a cozy digital home. +

+ +
-
-
-
-

About Me

-

- Hey there! I'm Latte, a gay furry developer who loves - building things and being part of the warm, welcoming - furry community. I'm passionate about self-hosting, - open-source software, and creating cozy spaces both - online and off. -

-

- I work primarily with Python and Flask, though I'm - always learning new things (currently exploring - JavaScript and the C stack). When I get those surges of - creative energy, I love diving into new projects - from - Reddit downloaders to Telegram sticker tools, and - everything in between. -

-

- Coffee enthusiast • Linux lover • Self-hosting advocate -

-
-
-
+
+ +

About Me

+

+ Hey there! I'm Latte, a gay furry developer who loves + building things and being part of the warm, welcoming furry + community. I'm passionate about self-hosting, open-source + software, and creating cozy spaces both online and off. +

+

+ I work primarily with Python and Flask, though I'm always + learning new things (currently exploring JavaScript and the + C stack). When I get those surges of creative energy, I love + diving into new projects - from Reddit downloaders to + Telegram sticker tools, and everything in between. +

+

Coffee enthusiast • Linux lover • Self-hosting advocate

+ +
-
-
-
-

Services

-

Here are the services currently running in the den:

+
+ +

Services

+

Here are the services currently running in the den:

-
-
-

- - Gitea - -

-

- Self-hosted Git service for all my projects and - code repositories. -

-
- -
-

More Coming Soon

-

- The den is always growing! More services will be - added as they're developed and deployed. -

-
-
+
+ +
-
-
+ + -
-
-
-

How to Help Out

-

- If you'd like to support the Hidden Den and help keep - the lights on, here are some ways you can contribute: -

+
+ +

How to Help Out

+

+ If you'd like to support the Hidden Den and help keep the + lights on, here are some ways you can contribute: +

-
-
-

Share & Spread the Word

-

- Tell others about the projects and services - hosted here! -

-
- -
-

Report Issues

-

- Found a bug or have a suggestion? Let me know! -

-
- -
-

Buy Me a Coffee

-

- Donations help cover server costs and keep the - den cozy. - (Payment links coming soon!) -

-
- -
-

Contribute

-

- Check out the projects on Gitea - contributions - are always welcome! -

-
-
+
+ + + +
-
-
+ +
@@ -166,6 +128,32 @@ import BaseLayout from "../layouts/BaseLayout.astro";
+ + +