first template launch
This commit is contained in:
Michael DiLeo
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<link rel="stylesheet" href="css/pico.green.min.css">
|
||||
<link rel="stylesheet" href="css/pico.colors.min.css">
|
||||
<link rel="stylesheet" href="site-styles/style.css">
|
||||
<title>Keyboard Vagabond - About</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a target="_blank"href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li>
|
||||
<li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li>
|
||||
<li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li>
|
||||
<li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li>
|
||||
<li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li>
|
||||
<li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
|
||||
<span id="theme-icon">🌙</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="container">
|
||||
<h1>About Keyboard Vagabond</h1>
|
||||
<p>Keyboard Vagabond is a place where nomads, travelers, backpacker, whoever, can come together in a digital space that is free of advertising and the attention economy to share information and experiences. It is a place of mutual respect, courtesy, and understanding not just for the members who join, but also for those people and places we encounter on our journeys.</p>
|
||||
|
||||
<h4>Why Keyboard Vagabond</h4>
|
||||
<p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was a space specifically for nomads, so I thought I would make it.</p>
|
||||
|
||||
<h2>What to expect and commitments</h2>
|
||||
<p><strong>Moderation style</strong> -
|
||||
An online community of respect and courtesy that is simultaneously light on moderation and banning, yet firm on not tolerating bigotry, hatred, etc. Be kind and we'll all have a good time.</p>
|
||||
<p><strong>Sign ups</strong> -
|
||||
Sign ups require manual approval to prevent spam.</p>
|
||||
<p><strong>Data protection</strong> -
|
||||
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>
|
||||
<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">Mastodon Server Covenant</a>.</p>
|
||||
<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>
|
||||
<h1>The Dirty Technicals</h1>
|
||||
<p>If you're not a mega-nerd, turn back now.</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>
|
||||
<h4>The Specs</h4>
|
||||
<p><strong>Servers</strong> - 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 Kubernetes.
|
||||
<p><strong>Storage</strong> - Longhorn ensures that there are at least 2 copies across the nodes.</p>
|
||||
<p><strong>Backups and Content</strong> - Backups and content are stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</p>
|
||||
<p><strong>CDN</strong> - CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</p>
|
||||
<p><strong>Security</strong> - ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.</p>
|
||||
<p><strong>Observability and Logging</strong> - OpenObserve dashboards and log aggregation.</p>
|
||||
<p><strong>Domain</strong> - domain is provided by CloudFlare</p>
|
||||
<p><strong>Services</strong> - Typical arrangement for services is that web services get 2 instances and workers get 1 instance with autoscaling. Web pods scale horizontally and workers scale vertically, then horizontally.</p>
|
||||
<p><strong>Source Code</strong> - If I get the source code to where I'm comfortable sharing, I'll post a link here. And if you're experienced in k8s, I'd always appreciate a review. :)</p>
|
||||
<p><strong>Costs</strong><br />
|
||||
VPS servers - 3x ~$13 / mth = $40/mth<br />
|
||||
Domain name - $12/year<br />
|
||||
Backblaze - $6/TB/mth = ~$2/mth<br />
|
||||
Total: ~$45/mth</p>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p>Contact: <a href="mailto:admin@keyboardvagabond.com">admin@keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</p>
|
||||
<p></p>
|
||||
<p>Copyright 2025 Keyboard Vagabond</p>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,24 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<link rel="stylesheet" href="css/pico.green.min.css">
|
||||
<link rel="stylesheet" href="css/pico.colors.min.css">
|
||||
<link rel="stylesheet" href="site-styles/style.css">
|
||||
<title>Hello world!</title>
|
||||
<title>Keyboard Vagabond</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
|
||||
<header class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a target="_blank"href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li>
|
||||
<li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li>
|
||||
<li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li>
|
||||
<li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li>
|
||||
<li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li>
|
||||
<li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li>
|
||||
<button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
|
||||
<span id="theme-icon">🌙</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="assets/banner.jpg" alt="Scenic mountain road with snow-capped peaks" class="banner">
|
||||
<img src="https://picsur.michaeldileo.org/i/36516edf-1a67-4565-aa8e-c10dbe743fd6.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks" class="banner">
|
||||
<h1 class="banner-title">Welcome to Keyboard Vagabond</h1>
|
||||
<p class="banner-subtitle">A space in the fediverse for travelers, nomads, and vagabonds of all kinds</p>
|
||||
</div>
|
||||
@@ -30,7 +47,7 @@
|
||||
<p><mascot here? :D >
|
||||
<strong>mascot intro and why it was chosen</strong>
|
||||
</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 go and the people we see. This space is what we make of it.
|
||||
</p>
|
||||
<h2>What you'll find here</h2>
|
||||
@@ -67,12 +84,13 @@
|
||||
<p>You can make a post on Mastodon, tag a community on Lemmy/Piefed and people there can respond. Someone can
|
||||
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>
|
||||
<p>Check out this amazing 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@aseachange.com.</p>
|
||||
<div class="video-container">
|
||||
<iframe title="Introducing the Fediverse: a New Era of Social Media"
|
||||
src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" frameborder="0" allowfullscreen=""
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
||||
loading="lazy"></iframe>
|
||||
</div>
|
||||
<h2>How to get 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
|
||||
@@ -84,7 +102,7 @@
|
||||
<p><strong>Popular places to get started are</strong>:</p>
|
||||
<strong><a href="https://lemmy.zip">Lemmy.zip</a></strong> for Lemmy or <strong><a
|
||||
href="https://piefed.social">Piefed.social</a></strong> for PieFed, which is the software that this
|
||||
community runs. Like Reddit, you can browse
|
||||
community runs.
|
||||
</p>
|
||||
<p><strong><a href="https://mastodon.social">Mastodon.social</a></strong> - the largest mastodon instance.
|
||||
Search for hashtags or check out whats trending and follow them to create your timeline.</p>
|
||||
@@ -101,18 +119,32 @@
|
||||
<div class="photo-item">
|
||||
<small>Check out that Explore button on the main page.</small>
|
||||
<img src="https://picsur.keyboardvagabond.com/i/48624639-e731-4e50-a166-f88cf9eccded.jpg?width=400"
|
||||
alt="Explore button on main page">
|
||||
alt="Explore button on main page" loading="lazy" />
|
||||
</div>
|
||||
<div class="photo-item">
|
||||
<small>Visit the Posts, Hashtags, and News tabs to see what's on the server</small>
|
||||
<img src="https://picsur.keyboardvagabond.com/i/d05996c7-5c23-450e-9ca0-b7e532d1c700.jpg?width=700"
|
||||
alt="Posts, Hashtags, and News tabs">
|
||||
alt="Posts, Hashtags, and News tabs" loading="lazy" />
|
||||
</div>
|
||||
<div class="photo-item">
|
||||
<small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following.
|
||||
Following communities on other instances will result in them being shown here.
|
||||
</small>
|
||||
<img src="https://picsur.michaeldileo.org/i/e07dddbc-d264-4f12-8877-17eed896026a.jpg?width=700"
|
||||
alt="Communities, Local Communities" loading="lazy" />
|
||||
</div>
|
||||
<div class="photo-item">
|
||||
<small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
|
||||
<img src="https://picsur.michaeldileo.org/i/5a977aa0-b9bb-4376-a348-f879c7162f63.jpg?width=700"
|
||||
alt="Local topics" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer></footer>
|
||||
|
||||
<script src="scripts/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
73
public/site-scripts/theme-toggle.js
Normal file
73
public/site-scripts/theme-toggle.js
Normal file
@@ -0,0 +1,73 @@
|
||||
(function() {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
|
||||
function getStoredTheme() {
|
||||
return localStorage.getItem('picoPreferredColorScheme') || 'auto';
|
||||
}
|
||||
|
||||
function storeTheme(theme) {
|
||||
localStorage.setItem('picoPreferredColorScheme', theme);
|
||||
}
|
||||
|
||||
function getSystemTheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function applyTheme() {
|
||||
const storedTheme = getStoredTheme();
|
||||
let actualTheme;
|
||||
|
||||
if (storedTheme === 'auto') {
|
||||
actualTheme = getSystemTheme();
|
||||
} else {
|
||||
actualTheme = storedTheme;
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute('data-theme', actualTheme);
|
||||
|
||||
if (actualTheme === 'dark') {
|
||||
themeIcon.textContent = '☀️';
|
||||
themeToggle.setAttribute('aria-pressed', 'true');
|
||||
} else {
|
||||
themeIcon.textContent = '🌙';
|
||||
themeToggle.setAttribute('aria-pressed', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const currentStored = getStoredTheme();
|
||||
let nextTheme;
|
||||
|
||||
if (currentStored === 'auto') {
|
||||
nextTheme = 'light';
|
||||
} else if (currentStored === 'light') {
|
||||
nextTheme = 'dark';
|
||||
} else {
|
||||
nextTheme = 'auto';
|
||||
}
|
||||
|
||||
storeTheme(nextTheme);
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (themeToggle) {
|
||||
applyTheme();
|
||||
|
||||
themeToggle.addEventListener('click', toggleTheme);
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (getStoredTheme() === 'auto') {
|
||||
applyTheme();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState !== 'loading') {
|
||||
init();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
}
|
||||
})();
|
||||
@@ -17,8 +17,9 @@
|
||||
|
||||
.banner-title {
|
||||
position: absolute;
|
||||
top: var(--pico-typography-spacing-vertical);
|
||||
top: var(--pico-spacing);
|
||||
left: var(--pico-spacing);
|
||||
right: var(--pico-spacing);
|
||||
color: white; /* Keep white for banner overlay readability */
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
margin: 0;
|
||||
@@ -42,11 +43,47 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Responsive positioning to match Pico container */
|
||||
@media (min-width: 576px) {
|
||||
.banner-title {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
max-width: 510px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.banner-title {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.banner-title {
|
||||
max-width: 950px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.banner-title {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.banner-title {
|
||||
max-width: 1450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner-title {
|
||||
font-size: 1.8rem;
|
||||
top: calc(var(--pico-typography-spacing-vertical) * 0.5);
|
||||
left: var(--pico-spacing);
|
||||
right: var(--pico-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,8 +188,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Make headers use primary green color */
|
||||
:root {
|
||||
/* Make headers use primary green color - only for light theme and default */
|
||||
:root:not([data-theme="dark"]) {
|
||||
--pico-h1-color: var(--pico-primary);
|
||||
--pico-h2-color: var(--pico-primary);
|
||||
--pico-h3-color: var(--pico-primary);
|
||||
@@ -175,4 +212,26 @@
|
||||
/* Test: Force green color on ALL headings */
|
||||
/* h1, h2, h3, h4, h5, h6 {
|
||||
color: #2d5016 !important;
|
||||
} */
|
||||
} */
|
||||
|
||||
/* Theme toggle button styling */
|
||||
#theme-toggle {
|
||||
margin: 0;
|
||||
padding: calc(var(--pico-spacing) * 0.5);
|
||||
min-height: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--pico-border-radius);
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#theme-toggle #theme-icon {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user