add that pixelfed is like old instagram

collapse navbar on smaller screens. #9

Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com>
Reviewed-on: #14

minify-build.js

@@ -289,12 +289,12 @@ async function bundleAndMinifyJS() {
 async function minifyHTMLFile(inputPath, outputPath) {
     const html = await fs.readFile(inputPath, 'utf8');
     
-    // Update CSS references for production and update script reference
+    // Update CSS references for production and add script reference
     let updatedHTML = html
         .replace(/<link rel="stylesheet" href="css\/pico\.jade\.min\.css">/g, '')
         .replace(/<link rel="stylesheet" href="site-styles\/style\.css">/g, 
                 '<link rel="stylesheet" href="css/bundle.css">')
-        .replace(/<script src="site-scripts\/theme-toggle\.js"><\/script>/g, ''); // Remove individual script references
+        .replace(/<\/body>/g, '<script src="scripts/bundle.js"></script></body>');
 
     const minified = await htmlMinify(updatedHTML, {
         collapseWhitespace: true,

nginx.conf

@@ -42,19 +42,19 @@ http {
         
         # Temporary: Disable caching during development
         location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
-            expires 10m;
+            # expires 1w;
-            add_header Cache-Control "public, immutable";
+            # add_header Cache-Control "public, immutable";
-            # add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
-            # add_header Pragma "no-cache";
+            add_header Pragma "no-cache";
-            # add_header Expires "0";
+            add_header Expires "0";
         }
         
         location ~* \.html$ {
-            expires 10m;
+            # expires 1h;
-            add_header Cache-Control "public";
+            # add_header Cache-Control "public";
-        #     add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
-        #     add_header Pragma "no-cache";
+            add_header Pragma "no-cache";
-        #     add_header Expires "0";
+            add_header Expires "0";
         }
         
         location /health {

public/about.html

@@ -51,10 +51,10 @@
     
     <main class="container">
         <h1>About Keyboard Vagabond</h1>
-        <p>Keyboard Vagabond is a place where nomads, travelers, backpackers, 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>
+        <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 not a space specifically for nomads, so I thought I would make it.</p>
+        <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> - 
@@ -65,33 +65,57 @@
         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" 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">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>
+        
+        <section>
         <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>
+        </section>
+        <section>
         <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" target="_blank">Talos</a> and Kubernetes.
+        <dl>
-        <p><strong>Storage</strong> - Longhorn ensures that there are at least 2 copies across the nodes.</p>
+        <dt><strong>Servers</strong></dt>
-        <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>
+        <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>
-        <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>
+        <dt><strong>Storage</strong></dt>
-        <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>
+        <dd>Longhorn ensures that there are at least 2 copies across the nodes.</dd>
-        <p><strong>Observability and Logging</strong> - OpenObserve dashboards and log aggregation.</p>
+        <dt><strong>Backups and Content</strong></dt>
-        <p><strong>Domain</strong> - domain is provided by CloudFlare</p>
+        <dd>Stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</dd>
-        <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>
+        <dt><strong>CDN</strong></dt>
-        <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>
+        <dd>CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</dd>
-        <p><strong>Costs</strong><br />
+        <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>
+        <dt><strong>Observability and Logging</strong></dt>
+        <dd>OpenObserve dashboards and log aggregation.</dd>
+        <dt><strong>Domain</strong></dt>
+        <dd>Domain is provided by CloudFlare</dd>
+        <dt><strong>Services</strong></dt>
+        <dd>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.</dd>
+        <dt><strong>Source Code</strong></dt>
+        <dd>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.  :)</dd>
+        </dl>
+    </section>
+
+        <p>
+        <span><strong>Costs</strong></span><br />
+        
+            <span>
             VPS servers - 3x ~$13 / mth = $40/mth<br />
             Domain name - $12/year<br />
             Backblaze - $6/TB/mth = ~$2/mth<br />
-        Total: ~$45/mth</p>
+            Total: ~$45/mth
+            </span>
+        </p>
     </main>
 
     <footer class="container">
-        <p>Contact: <a href="mailto:sysadmin@mailkeyboardvagabond.com">sysadmin@mail.keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</p>
+        <p>
-        <p>Copyright 2025 Keyboard Vagabond</p>
+            <span>Contact: <a href="mailto:admin@keyboardvagabond.com">admin@keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</span></br>
+            <span>Copyright 2025 Keyboard Vagabond</span>
+        </p>
     </footer>
 
     <script src="scripts/bundle.js"></script>

public/index.html

@@ -53,7 +53,7 @@
     </header>
 
     <div class="banner-container">
-        <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.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>
@@ -76,8 +76,7 @@
                 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
                 <a href="https://join.piefed.social/try/">join.piefed.social</a>.</li>
-            <li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - An alternative to
+            <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
-                instagram, where you can share your photos, albums, and create stories. See more at <a
                     href="https://pixelfed.org/servers">pixelfed.org</a>.</li>
             <li><strong><a href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong> - An alternative to
                 twitter. Create your timeline by following users and hashtags. See more at <a
@@ -93,23 +92,6 @@
                 hosting, to use for images in your blogs. You can also use Pixelfed. Contact the admin for Picsur
                 signup, as there's no automated signup process.</li>
         </ul>
-        <strong>Mobile Apps</strong>
-        <p>
-            <ul>
-            <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 
-                <a href="https://vger.app/settings/install">Voyager (Android)</a>, though features like topics and communities are best served on the website.
-            </li>
-            <li>
-                <strong><a href="https://pixelfed.org/mobile-apps" target="_blank">Pixelfed</a></strong>, <strong><a href="https://joinmastodon.org/apps" target="_blank">Mastodon</a></strong> - have native mobile apps
-            </li>
-            <li>
-                <strong>Lemmy</strong> - many of your favorite reddit apps can be used with Lemmy
-            </li>
-            </ul>
-            <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>  
-        </p>
         <h1>What is the Fediverse</h1>
         <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
@@ -120,71 +102,57 @@
             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 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 @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"
                         loading="lazy"></iframe>
         </div>
-        <h2>Getting started in the Fediverse</h2>
+        <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
             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
             across instances.</p>
         <p>Once you choose and place and sign up, wait for your admin approval. Many instances require manual account
             approval to prevent spam.</p>
-        <strong>Popular places to get started are</strong>:<br/>
+        <p><strong>Popular places to get started are</strong>:</p>
-        <ul>
+            <strong><a href="https://lemmy.zip">Lemmy.zip</a></strong> for Lemmy or <strong><a
-            <li>
+                    href="https://piefed.social">Piefed.social</a></strong> for PieFed, which is the software that this
-            <strong><a href="https://lemmy.zip" target="_blank">Lemmy.zip</a></strong> for Lemmy or <strong><a
-                    href="https://piefed.social" target="_blank">Piefed.social</a></strong> for PieFed, which is the software that this
             community runs.
-        </li>
-        <li><strong><a href="https://mastodon.social" target="_blank">Mastodon.social</a></strong> - the largest mastodon instance.
-            Search for hashtags or check out whats trending and follow them to create your timeline.
-        </li>
-        <li><strong><a href="https://pixelfed.social" target="_blank">Pixelfed.social</a></strong> - the largest Pixelfed instance. Also
-            search for timelines and hashtags of things that you're interested in or what may be trending.
-        </li>
-        </ul>
-        <strong>Codes of Conduct</strong><br />
-        <span>
-            While corporate media is primarily interested in the Terms of Service, the Fediverse cares about the 
-            Code of Conduct, the agreement of how we treat each other and what behavior is and is not tolerated.
-            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.
-        </span>
         </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>
+        <p><strong><a href="https://pixelfed.social">Pixelfed.social</a></strong> - the largest Pixelfed instance. Also
+            search for timelines and hashtags of things that you're interested in or what may be trending.</p>
 
         <h2>Creating your experience</h2>
         <p>
             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
-                href="https://mastodon.keyboardvagabond.com/tags/travel" target="_blank">#travel</a>, <a
+                href="https://mastodon.keyboardvagabond.com/tags/travel">#travel</a> or <a
-                href="https://mastodon.keyboardvagabond.com/tags/travelphotography" target="_blank">#travelphotography</a>, or <a 
+                href="https://mastodon.keyboardvagabond.com/tags/travelphotography">#travelphotography</a>.</p>
-                href="https://mastodon.keyboardvagabond.com/tags/EscapeFlights" target="_blank">#EscapeFlights</a>.</p>
         <div class="photo-gallery">
             <div class="photo-item">
                 <small>Check out that Explore button on the main page.</small>
-                <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=400"
+                <img src="https://picsur.keyboardvagabond.com/i/48624639-e731-4e50-a166-f88cf9eccded.jpg?width=400"
                     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/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
+                <img src="https://picsur.keyboardvagabond.com/i/d05996c7-5c23-450e-9ca0-b7e532d1c700.jpg?width=700"
                     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.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?width=700"
+                <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.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
+                <img src="https://picsur.michaeldileo.org/i/5a977aa0-b9bb-4376-a348-f879c7162f63.jpg?width=700"
                     alt="Local topics" loading="lazy" />
             </div>
         </div>

public/site-scripts/theme-toggle.js

@@ -2,24 +2,31 @@
     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 getStoredTheme() {
+    function getSystemTheme() {
-        return localStorage.getItem('picoPreferredColorScheme');
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     
-    function getCurrentTheme() {
+    function applyTheme() {
-        return document.documentElement.getAttribute('data-theme') || 
+        const storedTheme = getStoredTheme();
-            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        let actualTheme;
+        
+        if (storedTheme === 'auto') {
+            actualTheme = getSystemTheme();
+        } else {
+            actualTheme = storedTheme;
         }
         
-    function applyTheme(currentTheme) {
+        document.documentElement.setAttribute('data-theme', actualTheme);
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
-        document.documentElement.setAttribute('data-theme', newTheme);
+        if (actualTheme === 'dark') {
-        if (newTheme === 'dark') {
             themeIcon.textContent = '☀️';
             themeToggle.setAttribute('aria-pressed', 'true');
         } else {
@@ -28,27 +35,34 @@
         }
     }
     
-    themeToggle.addEventListener('click', () => {
+    function toggleTheme() {
-        const currentTheme = getCurrentTheme();
+        const currentStored = getStoredTheme();
+        let nextTheme;
         
-        applyTheme(currentTheme);
+        if (currentStored === 'auto') {
-        storeTheme(currentTheme);
+            nextTheme = 'light';
-    });
+        } else if (currentStored === 'light') {
+            nextTheme = 'dark';
+        } else {
+            nextTheme = 'auto';
+        }
+        
+        storeTheme(nextTheme);
+        applyTheme();
+    }
     
     function init() {
-        let storedTheme = getStoredTheme() || getCurrentTheme();
+        if (themeToggle) {
-        
+            applyTheme();
-        applyTheme(storedTheme);
             
             themeToggle.addEventListener('click', toggleTheme);
             
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            // Only apply theme if user hasn't made an explicit choice
+                if (getStoredTheme() === 'auto') {
-            const storedTheme = getStoredTheme();
-            if (storedTheme === 'auto') {
                     applyTheme();
                 }
-        })
+            });
+        }
     }
     
     if (document.readyState !== 'loading') {