michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix-typo (#18)

Browse Source 
add SEO adjustments, apply html segments

Reviewed-on: #18
Co-authored-by: Michael DiLeo <michael_dileo@proton.me>
Co-committed-by: Michael DiLeo <michael_dileo@proton.me>
This commit was merged in pull request #18.
This commit is contained in:
Michael DiLeo
2025-09-29 18:57:15 +00:00
committed by michael_dileo
parent 5e87f52e5e
commit e0572f4471
6 changed files with 296 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
minify-build.js
View File

@@ -36,8 +36,6 @@ async function createOptimizedBuild() {
content: [ content: [
'public/index.html', 'public/index.html',
'public/about.html', 'public/about.html',
'public/robots.txt',
'public/sitemap.xml',
], ],
css: [ css: [
'public/css/pico.jade.css', 'public/css/pico.jade.css',
@@ -155,8 +153,8 @@ async function createOptimizedBuild() {
await minifyHTMLFile('public/index.html', 'dist/index.html'); await minifyHTMLFile('public/index.html', 'dist/index.html');
await minifyHTMLFile('public/about.html', 'dist/about.html'); await minifyHTMLFile('public/about.html', 'dist/about.html');
// Step 5: Copy assets // Step 5: Copy assets and SEO files
console.log('📁 Step 5: Copying assets...'); console.log('📁 Step 5: Copying assets and SEO files...');
try { try {
const assets = await fs.readdir('public/assets'); const assets = await fs.readdir('public/assets');
for (const asset of assets) { for (const asset of assets) {
@@ -169,6 +167,16 @@ async function createOptimizedBuild() {
console.log(' No assets directory found, skipping...'); console.log(' No assets directory found, skipping...');
} }
// Copy SEO files
try {
await fs.copyFile('public/structured-data.json', 'dist/structured-data.json');
await fs.copyFile('public/sitemap.xml', 'dist/sitemap.xml');
await fs.copyFile('public/robots.txt', 'dist/robots.txt');
console.log(' ✅ SEO files copied (structured-data.json, sitemap.xml, robots.txt)');
} catch (err) {
console.log(' ⚠️ Some SEO files not found, skipping...');
}
// Calculate compression results // Calculate compression results
const originalCSSSize = (await fs.stat('public/css/pico.jade.min.css')).size + const originalCSSSize = (await fs.stat('public/css/pico.jade.min.css')).size +
(await fs.stat('public/css/pico.min.css')).size; (await fs.stat('public/css/pico.min.css')).size;

2
public/about.html
View File

@@ -113,7 +113,7 @@
<footer class="container"> <footer class="container">
<p> <p>
<span>Contact: <a href="mailto:admin@mail.keyboardvagabond.com">admin@keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</span></br> <span>Contact: <a href="mailto:admin@mail.keyboardvagabond.com">admin@mail.keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</span></br>
<span>Copyright 2025 Keyboard Vagabond</span> <span>Copyright 2025 Keyboard Vagabond</span>
</p> </p>
</footer> </footer>

55
public/index.html
View File

@@ -38,6 +38,18 @@
<meta name="msapplication-TileColor" content="#2d5a27"> <meta name="msapplication-TileColor" content="#2d5a27">
<meta name="application-name" content="Keyboard Vagabond"> <meta name="application-name" content="Keyboard Vagabond">
<!-- Additional SEO for sitelinks -->
<meta name="format-detection" content="telephone=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Keyboard Vagabond">
<!-- Help search engines understand site structure -->
<link rel="home" href="https://www.keyboardvagabond.com/">
<link rel="index" href="https://www.keyboardvagabond.com/">
<!-- Structured Data --> <!-- Structured Data -->
<script type="application/ld+json" src="/structured-data.json"></script> <script type="application/ld+json" src="/structured-data.json"></script>
@@ -48,15 +60,15 @@
<body> <body>
<!-- Header --> <!-- Header -->
<header class="container"> <header class="container">
<nav> <nav role="navigation" aria-label="Main navigation">
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<ul class="desktop-nav"> <ul class="desktop-nav">
<li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li> <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public" rel="noopener">Mastodon</a></li>
<li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li> <li><a target="_blank" href="https://piefed.keyboardvagabond.com" rel="noopener">Piefed</a></li>
<li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li> <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com" rel="noopener">Pixelfed</a></li>
<li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li> <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com" rel="noopener">Bookwyrm</a></li>
<li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li> <li><a target="_blank" href="https://blog.keyboardvagabond.com" rel="noopener">Write Freely</a></li>
<li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li> <li><a target="_blank" href="https://picsur.keyboardvagabond.com" rel="noopener">Picsur</a></li>
</ul> </ul>
<!-- Mobile Navigation --> <!-- Mobile Navigation -->
@@ -65,12 +77,12 @@
<details class="dropdown"> <details class="dropdown">
<summary role="button" class="secondary">Sites</summary> <summary role="button" class="secondary">Sites</summary>
<ul> <ul>
<li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li> <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public" rel="noopener">Mastodon</a></li>
<li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li> <li><a target="_blank" href="https://piefed.keyboardvagabond.com" rel="noopener">Piefed</a></li>
<li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li> <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com" rel="noopener">Pixelfed</a></li>
<li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li> <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com" rel="noopener">Bookwyrm</a></li>
<li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li> <li><a target="_blank" href="https://blog.keyboardvagabond.com" rel="noopener">Write Freely</a></li>
<li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li> <li><a target="_blank" href="https://picsur.keyboardvagabond.com" rel="noopener">Picsur</a></li>
</ul> </ul>
</details> </details>
</li> </li>
@@ -90,7 +102,7 @@
<section class="banner-container" role="banner" aria-labelledby="main-heading"> <section class="banner-container" role="banner" aria-labelledby="main-heading">
<img src="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks representing the journey of digital nomads and travelers" class="banner"> <img src="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks representing the journey of digital nomads and travelers" class="banner">
<h1 id="main-heading" class="banner-title">Keyboard Vagabond</h1> <h1 id="main-heading" class="banner-title">Keyboard Vagabond</h1>
<p class="banner-subtitle">A comprehensive fediverse community for digital nomads, remote workers, and travel enthusiasts</p> <p class="banner-subtitle">A fediverse community for digital nomads, remote workers, and travel enthusiasts</p>
</section> </section>
<!-- Main content --> <!-- Main content -->
@@ -114,7 +126,7 @@
<h3>Quick Access to All Services</h3> <h3>Quick Access to All Services</h3>
<div class="service-links"> <div class="service-links">
<a href="https://mastodon.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Mastodon - Social Media Alternative"> <a href="https://mastodon.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Mastodon - Social Media Alternative">
<strong>Mastodon</strong> - Social Media <strong>Mastodon</strong> - Microblogging
</a> </a>
<a href="https://piefed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Piefed - Community Forum"> <a href="https://piefed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Piefed - Community Forum">
<strong>Piefed</strong> - Community Forum <strong>Piefed</strong> - Community Forum
@@ -133,6 +145,7 @@
</a> </a>
</div> </div>
</div> </div>
</section>
<h3>Detailed Service Information</h3> <h3>Detailed Service Information</h3>
<ul> <ul>
@@ -157,7 +170,7 @@
signup, as there's no automated signup process.</li> signup, as there's no automated signup process.</li>
</ul> </ul>
<strong>Mobile Apps</strong> <strong>Mobile Apps</strong>
<p> <section>
<ul> <ul>
<li> <li>
<strong>Piefed</strong> - Piefed has support in <a href="https://www.lemmyapps.com/Interstellar" target="_blank">Interstellar (cross platform)</a> and experimental support in <strong>Piefed</strong> - Piefed has support in <a href="https://www.lemmyapps.com/Interstellar" target="_blank">Interstellar (cross platform)</a> and experimental support in
@@ -172,8 +185,9 @@
</ul> </ul>
<span>The rest of the applications are accessible on the websites and can be added to your homescreen.</span><br/> <span>The rest of the applications are accessible on the websites and can be added to your homescreen.</span><br/>
<span><strong>Signing in</strong> - you'll search the server that you want to join, such as mastodon.social or mastodon.keyboardvagabond.com, or use the provided default instances.</span> <span><strong>Signing in</strong> - you'll search the server that you want to join, such as mastodon.social or mastodon.keyboardvagabond.com, or use the provided default instances.</span>
</p> </section>
<h2>What is the Fediverse</h2> <h2>What is the Fediverse</h2>
<section>
<p>The fediverse is a collection of big-tech alternative social media that all communicate with each other using <p>The fediverse is a collection of big-tech alternative social media that all communicate with each other using
the same protocol, called ActivityPub. This means that not only can different “instances,” such as this the same protocol, called ActivityPub. This means that not only can different “instances,” such as this
community, participate with discussions on other servers, but also with the different applications. You can community, participate with discussions on other servers, but also with the different applications. You can
@@ -190,7 +204,9 @@
sandbox="allow-same-origin allow-scripts allow-popups allow-forms" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
loading="lazy" alt="video link to Introducing the Fediverse: a New Era of Social Media"></iframe> loading="lazy" alt="video link to Introducing the Fediverse: a New Era of Social Media"></iframe>
</div> </div>
</section>
<h2>Getting started in the Fediverse</h2> <h2>Getting started in the Fediverse</h2>
<section>
<p>The best way to see what's available in the fediverse is to start off on a larger instance, which will be <p>The best way to see what's available in the fediverse is to start off on a larger instance, which will be
following the most content. From there you can follow communities and members on Keyboard Vagabond, or following the most content. From there you can follow communities and members on Keyboard Vagabond, or
export your profiles, follows, etc over to Keyboard Vagabond. You can, of course, have multiple profiles export your profiles, follows, etc over to Keyboard Vagabond. You can, of course, have multiple profiles
@@ -218,9 +234,9 @@
Each instance should have one, including those of Keyboard Vagabond. These agreements help us to Each instance should have one, including those of Keyboard Vagabond. These agreements help us to
create welcoming spaces that are free of harassment and bigotry. create welcoming spaces that are free of harassment and bigotry.
</span> </span>
</p> </section>
<h2>Creating your experience</h2> <h2>Creating your experience</h2>
<section>
<p> <p>
In the fediverse, there are no algorithms. No one is trying to harvest your data or monetize your attention. In the fediverse, there are no algorithms. No one is trying to harvest your data or monetize your attention.
No one is trying to push anything in front of you. Try searching for hashtags like <a No one is trying to push anything in front of you. Try searching for hashtags like <a
@@ -251,6 +267,7 @@
alt="Local topics" loading="lazy" /> alt="Local topics" loading="lazy" />
</div> </div>
</div> </div>
</section>
</main> </main>
<!-- Footer --> <!-- Footer -->

73
public/site-styles/style.css
View File

@@ -391,6 +391,79 @@
border: 0; border: 0;
} }
/* Main Navigation Structure */
.main-nav {
display: flex;
align-items: center;
gap: calc(var(--pico-spacing) * 0.5);
margin: 0;
padding: 0;
list-style: none;
}
.main-nav li {
margin: 0;
}
.main-nav a[aria-current="page"] {
font-weight: bold;
color: var(--pico-primary);
}
/* Services Navigation */
.services-nav {
margin-top: calc(var(--pico-spacing) * 0.5);
padding-top: calc(var(--pico-spacing) * 0.5);
border-top: 1px solid var(--pico-muted-border-color);
}
.services-nav h2 {
margin: 0 0 calc(var(--pico-spacing) * 0.5) 0;
font-size: 1em;
color: var(--pico-muted-color);
}
/* Navigation Layout */
header nav {
display: flex;
flex-direction: column;
gap: calc(var(--pico-spacing) * 0.5);
}
/* Desktop navigation layout */
@media (min-width: 768px) {
header nav {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.main-nav {
order: 1;
flex: 0 0 auto;
}
.services-nav {
order: 2;
margin-top: 0;
padding-top: 0;
border-top: none;
flex: 1 1 100%;
margin-top: calc(var(--pico-spacing) * 0.5);
}
}
/* Mobile navigation layout */
@media (max-width: 767px) {
.services-nav {
margin-top: calc(var(--pico-spacing) * 0.5);
padding-top: calc(var(--pico-spacing) * 0.5);
border-top: 1px solid var(--pico-muted-border-color);
}
}
/* Responsive service links */ /* Responsive service links */
@media (max-width: 768px) { @media (max-width: 768px) {
.service-links { .service-links {

43
public/sitemap.xml
View File

@@ -2,14 +2,51 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>https://www.keyboardvagabond.com/</loc> <loc>https://www.keyboardvagabond.com/</loc>
<lastmod>2024-12-19</lastmod> <lastmod>2025-09-28</lastmod>
<changefreq>monthly</changefreq> <changefreq>weekly</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://www.keyboardvagabond.com/about.html</loc> <loc>https://www.keyboardvagabond.com/about.html</loc>
<lastmod>2024-12-19</lastmod> <lastmod>2025-09-28</lastmod>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<priority>0.8</priority> <priority>0.8</priority>
</url> </url>
<!-- Fediverse Services - These are external but part of our ecosystem -->
<url>
<loc>https://mastodon.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://piefed.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://pixelfed.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://bookwyrm.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://blog.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://picsur.keyboardvagabond.com/</loc>
<lastmod>2025-09-28</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
</urlset> </urlset>

83
public/structured-data.json
View File

@@ -1,4 +1,82 @@
{ [
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Keyboard Vagabond",
"url": "https://www.keyboardvagabond.com",
"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.",
"publisher": {
"@type": "Organization",
"name": "Keyboard Vagabond",
"logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400",
"foundingDate": "2025",
"areaServed": "Global",
"knowsAbout": ["Fediverse", "Digital Nomadism", "Remote Work", "Travel", "Social Media Alternatives"]
},
"mainEntity": {
"@type": "ItemList",
"name": "Keyboard Vagabond Services",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"url": "https://www.keyboardvagabond.com/",
"description": "Keyboard Vagabond main landing page"
},
{
"@type": "ListItem",
"position": 2,
"name": "About",
"url": "https://www.keyboardvagabond.com/about.html",
"description": "Learn more about Keyboard Vagabond community"
},
{
"@type": "ListItem",
"position": 3,
"name": "Mastodon",
"url": "https://mastodon.keyboardvagabond.com",
"description": "Social media alternative to Twitter"
},
{
"@type": "ListItem",
"position": 4,
"name": "Piefed",
"url": "https://piefed.keyboardvagabond.com",
"description": "Community forum alternative to Reddit"
},
{
"@type": "ListItem",
"position": 5,
"name": "Pixelfed",
"url": "https://pixelfed.keyboardvagabond.com",
"description": "Photo sharing platform alternative to Instagram"
},
{
"@type": "ListItem",
"position": 6,
"name": "Bookwyrm",
"url": "https://bookwyrm.keyboardvagabond.com",
"description": "Book discussion and review platform"
},
{
"@type": "ListItem",
"position": 7,
"name": "Write Freely",
"url": "https://blog.keyboardvagabond.com",
"description": "Minimalist federated blogging platform"
},
{
"@type": "ListItem",
"position": 8,
"name": "Picsur",
"url": "https://picsur.keyboardvagabond.com",
"description": "Image hosting service"
}
]
}
},
{
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "Organization", "@type": "Organization",
"name": "Keyboard Vagabond", "name": "Keyboard Vagabond",
@@ -61,4 +139,5 @@
} }
] ]
} }
} }
]