add fediring

src/components/Footer.astro

@@ -1,19 +1,19 @@
 ---
-import buttons from '../buttons/buttons.json';
-import { Image } from 'astro:assets';
+import buttons from "../buttons/buttons.json";
+import { Image } from "astro:assets";
 const today = new Date();
 let themeObj = await import("../../public/themes.json");
 let themes = new Map(
   Object.entries(themeObj).sort((a, b) =>
-    a[0].localeCompare(b[0], "en", { sensitivity: "base" })
-  )
+    a[0].localeCompare(b[0], "en", { sensitivity: "base" }),
+  ),
 );
 
 themes.delete("default");
 ---
 
-<footer>
-  <div class="h-card" style="display:inline">
+<footer style="display: flex;flex-direction: column;">
+  <div class="h-card" style="display:inline;margin:auto;">
     This work &copy; {today.getFullYear()} by
     <!-- Author Info -->
     <a href="https://argentumcation.com/links" rel="author">
@@ -22,7 +22,7 @@ themes.delete("default");
     </a>
     <!-- Author Metadata -->
     <div hidden="">
-      <span class="p-honorific-suffix">Kendo 3-Kyu</span>
+      <span class="p-honorific-suffix">Kendo 3-Kyu Emeritus</span>
       <img
         style="float:left; margin-right:4px"
         src="https://argentumcation.com/links/images/mira.jpg"
@@ -39,41 +39,48 @@ themes.delete("default");
         ><!-- Yes I know the spec says sound file but fuck you -->miɹʌ</span
       >
     </div>
-      <wbr>
+    <wbr />
     is licensed under
     <!-- License -->
     <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license"
       >CC BY-NC-SA 4.0</a
     >
   </div>
-  &ensp;
   <!-- Theme Switcher box -->
-  <form style="display:inline-flex">
-    <div class="form-group" style="display:inline-flex">
-      <select
-        style="width:8em"
-        id="theme"
-        title="theme"
-        onchange="switchTheme(this.selectedOptions[0].id);"
-           >
-        {
-          Array.from(themes).map(([themeID, themeName]) => {
-            return <option id={themeID}>{themeName}</option>;
-          })
-        }
-      </select>
-    </div>
-  </form>
+  <div style="margin:auto">
+    Theme:
+    <form style="display:inline-flex;margin:auto">
+      <div class="form-group" style="display:inline-flex;margin-bottom:0">
+        <select
+          style="width:8em"
+          id="theme"
+          title="theme"
+          onchange="switchTheme(this.selectedOptions[0].id);"
+        >
+          {
+            Array.from(themes).map(([themeID, themeName]) => {
+              return <option id={themeID}>{themeName}</option>;
+            })
+          }
+        </select>
+      </div>
+    </form>
+  </div>
+  <p style="margin:auto">
+    <a href="https://fediring.net/previous?host=argentumcation.com">←</a>
+    <a href="https://fediring.net/">Fediring</a>
+    <a href="https://fediring.net/next?host=argentumcation.com">→</a>
+  </p>
   <!-- Theme Switcher Script -->
   <script is:inline>
     function switchTheme(theme) {
       window.localStorage.setItem("theme", theme);
       let htmlNode = document.getElementsByTagName("html")[0];
       let currentTheme = Array.from(htmlNode.classList).find((el) =>
-        el.startsWith("theme_")
+        el.startsWith("theme_"),
       );
       console.log(
-        `CurrentTheme: ${currentTheme}, Theme:${JSON.stringify(theme)}`
+        `CurrentTheme: ${currentTheme}, Theme:${JSON.stringify(theme)}`,
       );
       htmlNode.classList.replace(currentTheme, theme);
       document.getElementById(theme).setAttribute("selected", true);
@@ -81,23 +88,36 @@ themes.delete("default");
   </script>
   <script is:inline>
     document.addEventListener("DOMContentLoaded", () =>
-      document.getElementById(theme)?.setAttribute("selected", "true")
+      document.getElementById(theme)?.setAttribute("selected", "true"),
     );
   </script>
-  <marquee >
+  <marquee>
     {
-    buttons.map((button) => {
-              const image = <Image class="marquee-button" src={`/buttons/${button.image}`} alt={button.name} width={88} height={31} />;
+      buttons.map((button) => {
+        const image = (
+          <Image
+            class="marquee-button"
+            src={`/buttons/${button.image}`}
+            alt={button.name}
+            width={88}
+            height={31}
+          />
+        );
 
-      return !button.link?.startsWith('javascript:') ? (
-        <a href={button.link ?? undefined} title={button.name} target="_blank">
-          {image}
-        </a>
-      ) : (
-        <button title={button.name} onclick={button.link}>
-          {image}
-        </button>);
+        return !button.link?.startsWith("javascript:") ? (
+          <a
+            href={button.link ?? undefined}
+            title={button.name}
+            target="_blank"
+          >
+            {image}
+          </a>
+        ) : (
+          <button title={button.name} onclick={button.link}>
+            {image}
+          </button>
+        );
       })
     }
-    </marquee>
+  </marquee>
 </footer>