diff --git a/minify-build.js b/minify-build.js index 8e0ad07..219e7c4 100644 --- a/minify-build.js +++ b/minify-build.js @@ -156,13 +156,8 @@ async function createOptimizedBuild() { // Step 5: Copy assets and SEO files console.log('📁 Step 5: Copying assets and SEO files...'); try { - const assets = await fs.readdir('public/assets'); - for (const asset of assets) { - await fs.copyFile( - path.join('public/assets', asset), - path.join('dist/assets', asset) - ); - } + await copyDirectoryRecursive('public/assets', 'dist/assets'); + console.log(' ✅ Assets directory copied recursively'); } catch (err) { console.log(' No assets directory found, skipping...'); } @@ -296,6 +291,27 @@ async function bundleAndMinifyJS() { } } +async function copyDirectoryRecursive(src, dest) { + // Create destination directory if it doesn't exist + await fs.mkdir(dest, { recursive: true }); + + // Read all items in source directory + const entries = await fs.readdir(src, { withFileTypes: true }); + + for (const entry of entries) { + const srcPath = path.join(src, entry.name); + const destPath = path.join(dest, entry.name); + + if (entry.isDirectory()) { + // Recursively copy subdirectories + await copyDirectoryRecursive(srcPath, destPath); + } else { + // Copy files + await fs.copyFile(srcPath, destPath); + } + } +} + async function minifyHTMLFile(inputPath, outputPath) { const html = await fs.readFile(inputPath, 'utf8'); diff --git a/nginx.conf b/nginx.conf index 41757a0..1247922 100644 --- a/nginx.conf +++ b/nginx.conf @@ -41,6 +41,12 @@ http { add_header X-XSS-Protection "1; mode=block" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; + # Logo assets: 1 hour cache + location ~* ^/assets/logos/ { + expires 1h; + add_header Cache-Control "public, max-age=3600"; + } + # Temporary: Disable caching during development location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 10m; diff --git a/public/assets/logos/bookwyrm-dark.svg b/public/assets/logos/bookwyrm-dark.svg new file mode 100644 index 0000000..abd8125 --- /dev/null +++ b/public/assets/logos/bookwyrm-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/bookwyrm-light.svg b/public/assets/logos/bookwyrm-light.svg new file mode 100644 index 0000000..8ca0e7a --- /dev/null +++ b/public/assets/logos/bookwyrm-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/default-dark.svg b/public/assets/logos/default-dark.svg new file mode 100644 index 0000000..6662ef2 --- /dev/null +++ b/public/assets/logos/default-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/default-light.svg b/public/assets/logos/default-light.svg new file mode 100644 index 0000000..6946ad8 --- /dev/null +++ b/public/assets/logos/default-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/mastodon-dark.svg b/public/assets/logos/mastodon-dark.svg new file mode 100644 index 0000000..ddbe2fb --- /dev/null +++ b/public/assets/logos/mastodon-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/mastodon-light.svg b/public/assets/logos/mastodon-light.svg new file mode 100644 index 0000000..dca7d6c --- /dev/null +++ b/public/assets/logos/mastodon-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/piefed-dark.svg b/public/assets/logos/piefed-dark.svg new file mode 100644 index 0000000..6c3b741 --- /dev/null +++ b/public/assets/logos/piefed-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/piefed-light.svg b/public/assets/logos/piefed-light.svg new file mode 100644 index 0000000..da920f7 --- /dev/null +++ b/public/assets/logos/piefed-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/pixelfed-dark.svg b/public/assets/logos/pixelfed-dark.svg new file mode 100644 index 0000000..e191994 --- /dev/null +++ b/public/assets/logos/pixelfed-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/pixelfed-light.svg b/public/assets/logos/pixelfed-light.svg new file mode 100644 index 0000000..410979a --- /dev/null +++ b/public/assets/logos/pixelfed-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/primary-dark.svg b/public/assets/logos/primary-dark.svg new file mode 100644 index 0000000..c3c4b36 --- /dev/null +++ b/public/assets/logos/primary-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos/primary-light.svg b/public/assets/logos/primary-light.svg new file mode 100644 index 0000000..4832327 --- /dev/null +++ b/public/assets/logos/primary-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 29940bc..6ea878a 100644 --- a/public/index.html +++ b/public/index.html @@ -100,8 +100,12 @@ @@ -114,34 +118,92 @@

Here, you are a member, not just a user - We want to create community in this space, being respectful of each other as well as the places we go and the people we see. This space is what we make of it.

+ +
+
+ + + + Otter mascot holding a laptop with the words Keyboard Vagabond circling it + +
+ + Seymour is the official mascot of Keyboard Vagabond and a nomadic otter who always wants to see more! + He makes his home wherever he goes and adapts to his new environments. + Let our adorable friend guide you through the fediverse and give you a break from the + algorithms and attention grabbing of corporate social media. + He was lovingly created by nomad and designer Lori Kendall at branddesigncreate.com, + Instagram at @branddesigncreate. + +
+ +
-

Our Fediverse Services

-

Keyboard Vagabond hosts various fediverse alternatives to big tech and participates in the network. - Available to you are:

-
-

Quick Access to All Services

+

Our Fediverse Services

- Mastodon - Microblogging + + + + Mastodon mascot holding a phone with mastodon mascot + + + Mastodon - Microblogging + - Piefed - Community Forum + + + + Piefed mascot holding a pie + + + Piefed - Community Forum + - Pixelfed - Photo Sharing + + + + Pixelfed mascot holding camera + + + Pixelfed - Photo Sharing + - Bookwyrm - Book Reviews + + + + Bookwyrm mascot holding book + + + Bookwyrm - Book Reviews + - Write Freely - Blogging + + + + Default mascot holding laptop + + + Write Freely - Blogging + - Picsur - Image Hosting + + + + Default mascot holding laptop + + + Picsur - Image Hosting +
@@ -246,7 +308,7 @@
Check out that Explore button on the main page. - Explore button on main page
diff --git a/public/site-styles/style.css b/public/site-styles/style.css index 66c663d..225ee03 100644 --- a/public/site-styles/style.css +++ b/public/site-styles/style.css @@ -1,11 +1,20 @@ .banner-container { position: relative; width: 100%; - max-height: 40vh; - min-height: 200px; overflow: hidden; } +.banner-container picture { + width: 100%; + display: block; +} + +.banner-container img { + width: 100%; + height: auto; + display: block; +} + .banner { width: 100%; max-height: 40vh; @@ -380,7 +389,10 @@ } .service-link { - display: block; + display: flex; + flex-direction: column; + align-items: center; + gap: calc(var(--pico-spacing) * 0.75); padding: calc(var(--pico-spacing) * 0.75); background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); @@ -399,6 +411,28 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } +.service-icon { + flex-shrink: 0; + display: block; + width: 60px; + height: 60px; +} + +.service-icon img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; +} + +.service-text { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + .service-link strong { display: block; font-size: 1.1em; @@ -536,4 +570,65 @@ footer li:not(:last-child)::after { footer li:not(:last-child)::after { content: none; /* Remove delimiters on mobile */ } +} + +/* Mascot section styling */ +.mascot-section { + display: flex; + align-items: center; + gap: calc(var(--pico-spacing) * 2); + margin: var(--pico-typography-spacing-vertical) 0; +} + +.mascot-image { + flex-shrink: 0; + min-width: 120px; /* Prevent image from disappearing on thin screens */ +} + +.mascot-image picture, +.mascot-image img { + display: block; + max-width: 100%; + height: auto; +} + +.mascot-image img { + width: 200px; + max-width: min(200px, 30vw); + min-width: 120px; /* Ensure image stays visible on very thin screens */ +} + +.mascot-text { + flex: 1; + min-width: 0; /* Allows text to shrink properly */ +} + +/* Stack on small devices */ +@media (max-width: 576px) { + .mascot-section { + flex-direction: column; + align-items: center; + gap: var(--pico-spacing); + } + + .mascot-image { + min-width: auto; /* Reset min-width when stacked */ + } + + .mascot-image img { + width: 100%; + max-width: 200px; + min-width: 120px; /* Keep minimum size even when stacked */ + } + + .mascot-text { + text-align: center; + } +} + +/* Very thin screens - ensure image stays visible */ +@media (max-width: 400px) { + .mascot-image img { + min-width: 100px; /* Smaller but still visible on very thin screens */ + } } \ No newline at end of file diff --git a/public/structured-data.json b/public/structured-data.json index 34db92b..a9915f9 100644 --- a/public/structured-data.json +++ b/public/structured-data.json @@ -8,7 +8,7 @@ "publisher": { "@type": "Organization", "name": "Keyboard Vagabond", - "logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400", + "logo": "https://picsur.michaeldileo.org/i/b4579222-367e-4601-b634-87e6d66e3a99.png?width=400", "foundingDate": "2025", "areaServed": "Global", "knowsAbout": ["Fediverse", "Digital Nomadism", "Remote Work", "Travel", "Social Media Alternatives"] @@ -81,7 +81,7 @@ "@type": "Organization", "name": "Keyboard Vagabond", "url": "https://www.keyboardvagabond.com", - "logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400", + "logo": "https://picsur.michaeldileo.org/i/b4579222-367e-4601-b634-87e6d66e3a99.png?width=400", "description": "A fediverse community for digital nomads, remote workers, and travel enthusiasts offering multiple social media alternatives including Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.", "sameAs": [ "https://mastodon.keyboardvagabond.com",