feat: home page links + version upgrade on all pages

src/_components/diffuse/status.vto

···
+<span id="status">
+  <a href="/latest/" title="Upgrade to latest" class="animate-spin">
+    <i class="ph-bold ph-spinner"></i>
+  </a>
+  <a href="/chronicle/" title="Browse versions of Diffuse">
+    <i class="ph-fill ph-star-four"></i>
+  </a>
+</span>

src/_includes/layouts/facets.vto

···
 
 scripts:
   - facets/common/ppr.js
+  - common/pages/version-upgrade.js
 ---
 
 <style>
···
 
 <header style="overflow: hidden">
   <div style="min-width: var(--container-md)">
-    <div>
-      <a class="diffuse-logo" href="./" style="display: inline-block;">
+    <div class="diffuse-logo-container">
+      <a href="./" style="display: inline-block;">
         {{ await comp.diffuse.logo() }}
       </a>
+      {{ await comp.diffuse.status() }}
     </div>
     <p class="construct dither-mask" style="margin-top: 0; max-width: none;">
       Facets

src/common/pages/version-upgrade.js

···
+// Version upgrade (only works with `diffuse-artifacts` deployments)
+if (document.location.hostname.endsWith("diffuse.sh")) {
+  document.querySelectorAll("#status").forEach(async (status) => {
+    const versionOrCid =
+      document.location.pathname.slice(1).split("/")[0]?.toLowerCase() ?? "";
+    const usesCid = versionOrCid.startsWith("bafy");
+    const { default: artifacts } = await import(
+      `${document.location.origin}/artifacts.json`,
+      { with: { type: "json" } }
+    );
+
+    // Latest is located at the end
+    const lastArtifact = Object.values(artifacts).reverse()[0];
+
+    // Check if using latest
+    const isLatest = usesCid
+      ? versionOrCid === lastArtifact.cid
+      : versionOrCid === lastArtifact.version;
+
+    // Remove loading animation
+    status.querySelectorAll(".ph-spinner").forEach((icon) => {
+      icon.parentElement?.classList.add("hidden");
+
+      setTimeout(() => {
+        icon.parentElement?.classList.remove("animate-spin");
+        icon.classList.remove("ph-spinner");
+        icon.classList.add("ph-arrow-fat-lines-up");
+      }, 500);
+    });
+
+    // If using CID, append `/hash/` to href
+    status.querySelectorAll(`[href="/latest/"]`).forEach((a) => {
+      if (usesCid) a.setAttribute("href", "/latest/hash/");
+      if (!isLatest) {
+        setTimeout(() => {
+          a.classList.remove("hidden");
+        }, 750);
+      }
+    });
+  });
+} else {
+  document.querySelectorAll("#status").forEach((status) => {
+    status.remove();
+  });
+}

src/index.js

···
 }
 
 addDemoBtn?.addEventListener("click", addSampleContent);
-
-// Version upgrade (only works with `diffuse-artifacts` deployments)
-if (document.location.hostname.endsWith("diffuse.sh")) {
-  document.querySelectorAll("#status").forEach(async (status) => {
-    const versionOrCid =
-      document.location.pathname.slice(1).split("/")[0]?.toLowerCase() ?? "";
-    const usesCid = versionOrCid.startsWith("bafy");
-    const { default: artifacts } = await import(
-      `${document.location.origin}/artifacts.json`,
-      { with: { type: "json" } }
-    );
-
-    // Latest is located at the end
-    const lastArtifact = Object.values(artifacts).reverse()[0];
-
-    // Check if using latest
-    const isLatest = usesCid
-      ? versionOrCid === lastArtifact.cid
-      : versionOrCid === lastArtifact.version;
-
-    // Remove loading animation
-    status.querySelectorAll(".ph-spinner").forEach((icon) => {
-      icon.parentElement?.classList.add("hidden");
-
-      setTimeout(() => {
-        icon.parentElement?.classList.remove("animate-spin");
-        icon.classList.remove("ph-spinner");
-        icon.classList.add("ph-arrow-fat-lines-up");
-      }, 500);
-    });
-
-    // If using CID, append `/hash/` to href
-    status.querySelectorAll(`[href="/latest/"]`).forEach((a) => {
-      if (usesCid) a.setAttribute("href", "/latest/hash/");
-      if (!isLatest) {
-        setTimeout(() => {
-          a.classList.remove("hidden");
-        }, 750);
-      }
-    });
-  });
-} else {
-  document.querySelectorAll("#status").forEach((status) => {
-    status.remove();
-  });
-}

src/index.vto

···
 
 scripts:
   - index.js
+  - common/pages/version-upgrade.js
 
 # ELEMENTS
 
···
       A bundle of tracks.
     url: "definitions/output/trackBundle.json"
 
+# LINKS
+
+links:
+  - title: "Bluesky"
+    url: "https://bsky.app/profile/tokono.ma"
+    desc: "Follow Diffuse updates."
+  - title: "Discord"
+    url: "https://discord.gg/KUnhstJV"
+    desc: "Chat with us in the U&A Discord #diffuse channel."
+  - title: "Github"
+    url: "https://github.com/icidasset/diffuse"
+    desc: "Source code."
+  - title: "Tangled"
+    url: "https://tangled.org/tokono.ma/diffuse"
+    desc: "Source code."
+
 ---
 
 <header>
   <div>
-    <h1 class="diffuse-logo">
+    <h1 hidden>Diffuse</h1>
+    <div class="diffuse-logo-container">
       {{ await comp.diffuse.logo() }}
-      <span id="status">
-        <a href="/latest/" title="Upgrade to latest" class="animate-spin">
-          <i class="ph-bold ph-spinner"></i>
-        </a>
-        <a href="/chronicle/" title="Browse versions of Diffuse">
-          <i class="ph-fill ph-star-four"></i>
-        </a>
-      </span>
-    </h1>
+      {{ await comp.diffuse.status() }}
+    </div>
     <p class="construct dither-mask">
       Your audio<br />your data<br />your rules
     </p>
···
       <li><a href="#agency">Agency</a></li>
       <li><a href="#elements">Elements</a></li>
       <li><a href="#definitions">Definitions</a></li>
+      <li><a href="#links">Links</a></li>
     </ul>
     <p>
       <small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
···
     </div>
   </section>
 
-  <!-- DEFINITIONS -->
-  <section>
-    <h2 id="definitions">Definitions</h2>
+  <!-- DEFINITIONS + LINKS -->
+  <div class="columns">
+    <section>
+      <h2 id="definitions">Definitions</h2>
 
-    <p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
+      <p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
 
-    {{ await comp.list({ items: definitions }) }}
-  </section>
+      {{ await comp.list({ items: definitions }) }}
+    </section>
+
+    <section>
+      <h2 id="links">Links</h2>
+
+      {{ await comp.list({ items: links }) }}
+    </section>
+  </div>
 </main>

src/styles/diffuse/page.css

···
  * Logo
  */
 
-.diffuse-logo {
+.diffuse-logo-container {
   align-items: center;
   display: flex;
   font-size: var(--fs-lg);

src/themes/index.vto

···
 
 scripts:
   - themes/index.js
+  - common/pages/version-upgrade.js
 
 # THEMES
 
···
 
 <header>
   <div>
-    <div>
-      <a class="diffuse-logo" href="./" style="display: inline-block;">
+    <div class="diffuse-logo-container">
+      <a href="./" style="display: inline-block;">
         {{ await comp.diffuse.logo() }}
       </a>
+      {{ await comp.diffuse.status() }}
     </div>
 
     <p class="construct dither-mask" style="margin-top: 0">