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

seo #17

Merged
michael_dileo merged 5 commits from seo into main 2025-09-28 18:00:58 +00:00
Conversation 0 Commits 5 Files Changed 8 +327 -30
8 changed files with 327 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
minify-build.js
View File

@@ -35,10 +35,12 @@ async function createOptimizedBuild() {
const purgeResults = await new PurgeCSS().purge({ const purgeResults = await new PurgeCSS().purge({
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',
// 'public/css/pico.colors.min.css' // 'public/css/pico.colors.min.css'
], ],
safelist: { safelist: {

6
nginx.conf
View File

@@ -16,6 +16,7 @@ http {
include /etc/nginx/mime.types; include /etc/nginx/mime.types;
default_type application/octet-stream; default_type application/octet-stream;
charset utf-8;
access_log /dev/stdout; access_log /dev/stdout;
error_log /dev/stderr; error_log /dev/stderr;
@@ -56,6 +57,11 @@ http {
# add_header Pragma "no-cache"; # add_header Pragma "no-cache";
# add_header Expires "0"; # add_header Expires "0";
} }
location ~* \.json$ {
expires 1d;
add_header Cache-Control "public, must-revalidate";
}
location /health { location /health {
access_log off; access_log off;

10
public/about.html
View File

@@ -65,12 +65,12 @@
Your data is yours and you can download it at any time through the apps. Your data is yours and you can download it at any time through the apps.
The servers are run in a cluster with data redundancy across nodes + nightly and weekly backups to offline storage.</p> The servers are run in a cluster with data redundancy across nodes + nightly and weekly backups to offline storage.</p>
<p><strong>Should shutdown happen</strong> - <p><strong>Should shutdown happen</strong> -
There will be a 3 month announcement in advance, in accordance with the <a href="https://joinmastodon.org/covenant" target="_blank">Mastodon Server Covenant</a>.</p> There will be a 3 month announcement in advance, in accordance with the <a href="https://joinmastodon.org/covenant" rel="nofollow" target="_blank">Mastodon Server Covenant</a>.</p>
<p><strong>Funding</strong> - <p><strong>Funding</strong> -
Keyboard Mastodon is currently funded by the admin, for a cost of ~$40 - $45 per month. Donations may be opened in the future, but have not been set up at this time.</p> Keyboard Mastodon is currently funded by the admin, for a cost of ~$40 - $45 per month. Donations may be opened in the future, but have not been set up at this time.</p>
<section> <section>
<h1>The Dirty Technicals</h1> <h2>The Dirty Technicals</h2>
<p>If you're not a mega-nerd, turn back now.</p> <p>If you're not a mega-nerd, turn back now.</p>
<p>I warned you.</p> <p>I warned you.</p>
<p>Keyboard Vagabond is run on a 3 node Kubernetes cluster running on 3x Arm VPSs hosted by NetCup in Amsterdam. I chose Amsterdam because I thought that Europe would be more centrally located for people who are traveling the world.</p> <p>Keyboard Vagabond is run on a 3 node Kubernetes cluster running on 3x Arm VPSs hosted by NetCup in Amsterdam. I chose Amsterdam because I thought that Europe would be more centrally located for people who are traveling the world.</p>
@@ -79,7 +79,7 @@
<h4>The Specs</h4> <h4>The Specs</h4>
<dl> <dl>
<dt><strong>Servers</strong></dt> <dt><strong>Servers</strong></dt>
<dd>3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev">Talos</a> and Kubernetespan.</dd> <dd>3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev" rel="nofollow">Talos</a> and Kubernetespan.</dd>
<dt><strong>Storage</strong></dt> <dt><strong>Storage</strong></dt>
<dd>Longhorn ensures that there are at least 2 copies across the nodes.</dd> <dd>Longhorn ensures that there are at least 2 copies across the nodes.</dd>
<dt><strong>Backups and Content</strong></dt> <dt><strong>Backups and Content</strong></dt>
@@ -87,7 +87,7 @@
<dt><strong>CDN</strong></dt> <dt><strong>CDN</strong></dt>
<dd>CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</dd> <dd>CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</dd>
<dt><strong>Security</strong></dt> <dt><strong>Security</strong></dt>
<dd>Ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.</dd> <dd>Ports are closed off to the world and secured with CloudFlare tunnels and secure VPN as the only means of access outside of website access.</dd>
<dt><strong>Observability and Logging</strong></dt> <dt><strong>Observability and Logging</strong></dt>
<dd>OpenObserve dashboards and log aggregation.</dd> <dd>OpenObserve dashboards and log aggregation.</dd>
<dt><strong>Domain</strong></dt> <dt><strong>Domain</strong></dt>
@@ -113,7 +113,7 @@
<footer class="container"> <footer class="container">
<p> <p>
<span>Contact: <a href="mailto:admin@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@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>

125
public/index.html
View File

@@ -5,9 +5,44 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<!-- Primary SEO Meta Tags -->
<title>Keyboard Vagabond - Fediverse for Digital Nomads</title>
<meta name="title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
<meta name="description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
<meta name="keywords" content="fediverse, digital nomad, remote work, travel, mastodon, piefed, pixelfed, bookwyrm, write freely, social media alternative, keyboard vagabond">
<meta name="author" content="Keyboard Vagabond">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.keyboardvagabond.com/">
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.keyboardvagabond.com/">
<meta property="og:title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
<meta property="og:description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
<meta property="og:image" content="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=1200">
<meta property="og:site_name" content="Keyboard Vagabond">
<meta property="og:locale" content="en_US">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.keyboardvagabond.com/">
<meta property="twitter:title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
<meta property="twitter:description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
<meta property="twitter:image" content="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=1200">
<!-- Additional SEO -->
<meta name="theme-color" content="#2d5a27">
<meta name="msapplication-TileColor" content="#2d5a27">
<meta name="application-name" content="Keyboard Vagabond">
<!-- Structured Data -->
<script type="application/ld+json" src="/structured-data.json"></script>
<link rel="stylesheet" href="css/pico.jade.min.css"> <link rel="stylesheet" href="css/pico.jade.min.css">
<link rel="stylesheet" href="site-styles/style.css"> <link rel="stylesheet" href="site-styles/style.css">
<title>Keyboard Vagabond</title>
</head> </head>
<body> <body>
@@ -52,29 +87,58 @@
</nav> </nav>
</header> </header>
<div class="banner-container"> <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" 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 class="banner-title">Welcome to Keyboard Vagabond</h1> <h1 id="main-heading" class="banner-title">Keyboard Vagabond</h1>
<p class="banner-subtitle">A space in the fediverse for travelers, nomads, and vagabonds of all kinds</p> <p class="banner-subtitle">A comprehensive fediverse community for digital nomads, remote workers, and travel enthusiasts</p>
</div> </section>
<!-- Main content --> <!-- Main content -->
<main class="container"> <main class="container">
<p>We welcome you to this space to connect with others, share information, create memories, and help each other <section aria-labelledby="intro-heading">
to travel responsibly and considerately as we explore the world.</p> <h2 id="intro-heading" class="sr-only">About Keyboard Vagabond</h2>
<p>&lt;mascot here? :D &gt; <p>We welcome you to this space to connect with others, share information, create memories, and help each other
<strong>mascot intro and why it was chosen</strong> to travel responsibly and considerately as we explore the world.</p>
</p> <p><strong>Here, you are a member, not just a user</strong> - We want to create community in this space, being
<p><strong>Here, you are a member, not just a user</strong> - 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.
respectful of each other as well as the places go and the people we see. This space is what we make of it. </p>
</p> </section>
<h2>What you'll find here</h2>
<p>Keyboard Vagabond hosts the various fediverse alternatives to big tech and participates in the network. <section aria-labelledby="services-heading">
Available to you is:</p> <h2 id="services-heading">Our Fediverse Services</h2>
<p>Keyboard Vagabond hosts various fediverse alternatives to big tech and participates in the network.
Available to you are:</p>
<!-- Services Summary for SEO -->
<div class="services-summary" role="region" aria-label="Quick access to all services">
<h3>Quick Access to All Services</h3>
<div class="service-links">
<a href="https://mastodon.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Mastodon - Social Media Alternative">
<strong>Mastodon</strong> - Social Media
</a>
<a href="https://piefed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Piefed - Community Forum">
<strong>Piefed</strong> - Community Forum
</a>
<a href="https://pixelfed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Pixelfed - Photo Sharing">
<strong>Pixelfed</strong> - Photo Sharing
</a>
<a href="https://bookwyrm.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Bookwyrm - Book Reviews">
<strong>Bookwyrm</strong> - Book Reviews
</a>
<a href="https://blog.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Write Freely - Blogging">
<strong>Write Freely</strong> - Blogging
</a>
<a href="https://picsur.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Picsur - Image Hosting">
<strong>Picsur</strong> - Image Hosting
</a>
</div>
</div>
<h3>Detailed Service Information</h3>
<ul> <ul>
<li><strong><a href="https://piefed.keyboardvagabond.com">Piefed</a></strong> - Similar to and compatible <li><strong><a href="https://piefed.keyboardvagabond.com">Piefed</a></strong> - An alternative to Reddit and similar to and compatible
with <a href="https://join-lemmy.org">Lemmy</a>, but with extra features for topics and communities. with <a href="https://join-lemmy.org">Lemmy</a>, but with extra features for topics and communities.
Both are an alternative to Reddit. See more at <a href="https://join-lemmy.org">join-lemmy.org</a> and See more at <a href="https://join-lemmy.org">join-lemmy.org</a> and
<a href="https://join.piefed.social/try/">join.piefed.social</a>.</li> <a href="https://join.piefed.social/try/">join.piefed.social</a>.</li>
<li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - Like old instagram, where you can share your photos, albums, and create stories. See more at <a <li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - Like old instagram, where you can share your photos, albums, and create stories. See more at <a
href="https://pixelfed.org/servers">pixelfed.org</a>.</li> href="https://pixelfed.org/servers">pixelfed.org</a>.</li>
@@ -109,7 +173,7 @@
<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> </p>
<h1>What is the Fediverse</h1> <h2>What is the Fediverse</h2>
<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
@@ -119,12 +183,12 @@
make a video on PeerTube (Youtube alternative) and discuss on Mastodon. Your Write Freely blog posts will, make a video on PeerTube (Youtube alternative) and discuss on Mastodon. Your Write Freely blog posts will,
if you enable it, be visible on Mastodon and people can follow your blog account.</p> if you enable it, be visible on Mastodon and people can follow your blog account.</p>
<p>Check out this amazing four minute video by <a href="https://news.elenarossini.com">Elena Rossini</a>. You can follow her <p>Check out this amazing four minute video by <a href="https://news.elenarossini.com">Elena Rossini</a>. You can follow her
on Mastodon by searching @_elena@mastodon.social.</p> on Mastodon by searching <a href="https://mastodon.social/@_elena@mastodon.social" target="_blank">@_elena@mastodon.social</a>.</p>
<div class="video-container"> <div class="video-container">
<iframe title="Introducing the Fediverse: a New Era of Social Media" <iframe title="Introducing the Fediverse: a New Era of Social Media"
src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" frameborder="0" allowfullscreen="" src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" frameborder="0" allowfullscreen=""
sandbox="allow-same-origin allow-scripts allow-popups allow-forms" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
loading="lazy"></iframe> loading="lazy" alt="video link to Introducing the Fediverse: a New Era of Social Media"></iframe>
</div> </div>
<h2>Getting started in the Fediverse</h2> <h2>Getting started in the Fediverse</h2>
<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
@@ -190,7 +254,22 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer></footer> <footer class="container" role="contentinfo">
<hr>
<section aria-labelledby="footer-heading">
<h2 id="footer-heading" class="sr-only">Footer Information</h2>
<p><strong>Keyboard Vagabond</strong> - A fediverse community for digital nomads, remote workers, and travel enthusiasts.</p>
<span>Connect with us across the fediverse:</span><br/>
<ul>
<li><a href="https://mastodon.keyboardvagabond.com">Mastodon</a>&nbsp;- Social Media</li>
<li><a href="https://piefed.keyboardvagabond.com">Piefed</a>&nbsp;- Community Forum</li>
<li><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a>&nbsp;- Photo Sharing</li>
<li><a href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a>&nbsp;- Book Reviews</li>
<li><a href="https://blog.keyboardvagabond.com">Write Freely</a>&nbsp;- Blogging</li>
</ul>
<p><small>&copy; 2025 Keyboard Vagabond. Part of the decentralized fediverse network.</small></p>
</section>
</footer>
<script src="scripts/bundle.js"></script> <script src="scripts/bundle.js"></script>
</body> </body>

22
public/robots.txt Normal file
View File

@@ -0,0 +1,22 @@
User-agent: *
Allow: /
# Sitemap location
Sitemap: https://www.keyboardvagabond.com/sitemap.xml
# Disallow crawling of fediverse subdomains to focus on main site
Disallow: /mastodon/
Disallow: /piefed/
Disallow: /pixelfed/
Disallow: /bookwyrm/
Disallow: /blog/
Disallow: /picsur/
# Allow important pages
Allow: /about.html
Allow: /css/
Allow: /scripts/
Allow: /site-styles/
# Crawl delay to be respectful
Crawl-delay: 1

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

@@ -327,4 +327,113 @@
.mobile-nav li { .mobile-nav li {
position: relative; position: relative;
} }
}
/* Services Summary Styling */
.services-summary {
background: var(--pico-muted-color);
background: rgba(var(--pico-muted-color-rgb, 0, 0, 0), 0.05);
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
padding: var(--pico-spacing);
margin: var(--pico-typography-spacing-vertical) 0;
}
.services-summary h3 {
margin-top: 0;
margin-bottom: var(--pico-typography-spacing-vertical);
color: var(--pico-primary);
}
.service-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: calc(var(--pico-spacing) * 0.75);
margin: 0;
}
.service-link {
display: block;
padding: calc(var(--pico-spacing) * 0.75);
background: var(--pico-background-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
text-decoration: none;
color: var(--pico-color);
transition: all 0.2s ease;
text-align: center;
}
.service-link:hover {
background: var(--pico-primary);
color: var(--pico-primary-inverse);
border-color: var(--pico-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.service-link strong {
display: block;
font-size: 1.1em;
margin-bottom: calc(var(--pico-spacing) * 0.25);
}
/* Screen reader only class */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Responsive service links */
@media (max-width: 768px) {
.service-links {
grid-template-columns: 1fr;
gap: calc(var(--pico-spacing) * 0.5);
}
.service-link {
padding: calc(var(--pico-spacing) * 0.5);
}
}
footer ul {
display: flex;
flex-wrap: wrap;
gap: calc(var(--pico-spacing) * 0.5);
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
footer li {
margin: 0;
display: flex;
align-items: center;
}
footer li:not(:last-child)::after {
content: "|";
margin: 0 calc(var(--pico-spacing) * 0.5);
color: var(--pico-muted-color);
font-weight: normal;
}
@media (max-width: 480px) {
footer ul {
flex-direction: column;
align-items: center;
gap: calc(var(--pico-spacing) * 0.5);
}
footer li:not(:last-child)::after {
content: none; /* Remove delimiters on mobile */
}
} }

15
public/sitemap.xml Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.keyboardvagabond.com/</loc>
<lastmod>2024-12-19</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.keyboardvagabond.com/about.html</loc>
<lastmod>2024-12-19</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>

64
public/structured-data.json Normal file
View File

@@ -0,0 +1,64 @@
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Keyboard Vagabond",
"url": "https://www.keyboardvagabond.com",
"logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?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",
"https://piefed.keyboardvagabond.com",
"https://pixelfed.keyboardvagabond.com",
"https://bookwyrm.keyboardvagabond.com",
"https://blog.keyboardvagabond.com"
],
"foundingDate": "2025",
"areaServed": "Global",
"knowsAbout": ["Fediverse", "Digital Nomadism", "Remote Work", "Travel", "Social Media Alternatives"],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Fediverse Services",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "Mastodon",
"description": "Decentralized social media alternative to Twitter"
}
},
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "Piefed",
"description": "Community forum alternative to Reddit with enhanced features"
}
},
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "Pixelfed",
"description": "Photo sharing platform alternative to Instagram"
}
},
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "Bookwyrm",
"description": "Book discussion and review platform"
}
},
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "Write Freely",
"description": "Minimalist federated blogging platform"
}
}
]
}
}