Almost finished about dialog

Cargo.lock

@@ -346,7 +346,7 @@ dependencies = [
 
 [[package]]
 name = "fedirect"
-version = "0.1.0"
+version = "0.1.0-alpha"
 dependencies = [
  "bytes",
  "favicon-scraper",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "fedirect"
-version = "0.1.0"
+version = "0.1.0-alpha"
 edition = "2021"
 
 [dependencies]

src/api/about.rs

@@ -4,6 +4,12 @@ use serde::{Deserialize, Serialize};
 use serde_json::json;
 use std::sync::OnceLock;
 
+/// Gets the FeDirect version
+#[get("/about/version")]
+pub async fn version() -> &'static str {
+    env!("CARGO_PKG_VERSION")
+}
+
 #[derive(Debug, Serialize)]
 pub struct Avatars {
     charlotte: Option<String>,
@@ -21,7 +27,6 @@ fn get_avatar(client: &Client, origin: &str, user_id: &str) -> Option<String> {
         "userId": user_id
     })
     .to_string();
-    println!("{body}");
     let user: MisskeyUser = client
         .post(format!("https://{origin}/api/users/show"))
         .header("content-type", "application/json")
@@ -43,7 +48,7 @@ pub fn init() {
 }
 
 /// Gets (relatively) up-to-date Nekomata avatars
-#[get("/nekomata_avatars")]
+#[get("/about/nekomata_avatars")]
 pub async fn nekomata_avatars() -> Json<&'static Avatars> {
     Json(AVATARS.get().unwrap())
 }

src/api/mod.rs

@@ -1,17 +1,18 @@
 use rocket::Route;
 
+pub mod about;
 pub mod instance_info;
-pub mod nekomata_avatars;
 pub mod proxy;
 
 pub fn init() {
-    nekomata_avatars::init();
+    about::init();
 }
 
 pub fn get_routes() -> Vec<Route> {
     routes![
         instance_info::instance_info,
-        nekomata_avatars::nekomata_avatars,
+        about::version,
+        about::nekomata_avatars,
         // Proxy is temporarily disabled as it's not needed
         // proxy::proxy
     ]

static/about.mts

@@ -1,11 +1,17 @@
-import { findImageOrFail } from "./dom.mjs";
+import { findImageOrFail, findSpanOrFail } from "./dom.mjs";
+
+async function populateVersion(versionSelector: string) {
+    const versionParagraph = findSpanOrFail(document.body, versionSelector);
+    versionParagraph.innerText = await fetch("/api/about/version").then(r => r.text());
+}
 
 async function populateUsers(charlotteSelector: string, kioSelector: string) {
     const charlotteImage = findImageOrFail(document.body, charlotteSelector);
     const kioImage = findImageOrFail(document.body, kioSelector);
-    const { charlotte, kio } = await fetch("/api/nekomata_avatars").then(r => r.json());
+    const { charlotte, kio } = await fetch("/api/about/nekomata_avatars").then(r => r.json());
     if (charlotte) charlotteImage.src = charlotte;
     if (kio) kioImage.src = kio;
 }
 
+populateVersion("#version");
 populateUsers("#charlotteAvatar", "#kioAvatar");

static/crossroad.html

@@ -121,28 +121,32 @@ Unchecking this is not recommended, and this option only exists for exceptional
             <button type="reset" class="close">Cancel</button>
         </form>
     </dialog>
-    <dialog id="about" class="half-width-max half-height-max">
+    <dialog id="about" class="half-width-max half-height">
         <center>
             <div class="flex-row wfit-content">
                 <h1>About FeDirect</h1>
-                <p class="margin-auto-top">&ThickSpace;(v0.1-alpha)</p>
+                <p class="margin-auto-top">&ThickSpace;(v<span id="version"></span>)</p>
             </div>
             <p class="margin-none-top wrap-balance">
                 FeDirect links the Fediverse together by allowing you to create generic links that
                 link people to their native instance!
             </p>
+            <a href="https://kitsunes.dev/Nekomata/FeDirect">Source code</a>
             <h2>About Nekomata</h2>
             <div class="circlingMembers">
-                <center class="member">
+                <center class="absolute-centered member charlotte align-content-center flex-column">
-                    <img id="charlotteAvatar" alt="Charlotte's avatar" />
+                    <img id="charlotteAvatar" class="xl-size" alt="Charlotte's avatar" />
-                    Charlotte
+                    <p class="margin-none">Charlotte</p>
-                    @CenTdemeern1@eepy.moe
+                    <a href="https://eepy.moe/@CenTdemeern1" class="margin-none">@CenTdemeern1@eepy.moe</a>
+                    <p class="margin-none">Programming, design</p>
                 </center>
-                <center class="member">
+                <center class="absolute-centered member kio align-content-center flex-column">
-                    <img id="kioAvatar" alt="Charlotte's avatar" />
+                    <img id="kioAvatar" class="xl-size" alt="Charlotte's avatar" />
-                    Kio
+                    <p class="margin-none">Kio</p>
-                    @Kio@kitsunes.club
+                    <a href="https://kitsunes.club/@Kio" class="margin-none">@Kio@kitsunes.club</a>
+                    <p class="margin-none">Funding, hosting, design</p>
                 </center>
+                <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="absolute-centered xl-size-max" />
             </div>
         </center>
     </dialog>

static/main.css

@@ -147,10 +147,6 @@ abbr[title] {
     max-width: 50%;
 }
 
-.half-height-max {
-    max-height: 50%;
-}
-
 .full-width {
     min-width: 100%;
 }
@@ -163,6 +159,16 @@ abbr[title] {
     height: var(--medium);
 }
 
+.xl-size {
+    width: var(--xl);
+    height: var(--xl);
+}
+
+.xl-size-max {
+    max-width: var(--xl);
+    max-height: var(--xl);
+}
+
 .separator-bottom {
     border-bottom: solid 1px var(--transparent-black);
 }
@@ -191,6 +197,13 @@ abbr[title] {
     aspect-ratio: 1;
 }
 
+.absolute-centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+}
+
 /* Specialized elements */
 
 .iconContainer {
@@ -222,6 +235,31 @@ abbr[title] {
     margin-top: min(var(--xl), 6vh);
 }
 
+.circlingMembers {
+    position: relative;
+    width: 24em;
+    height: 24em;
+    animation-play-state: running;
+    transition: animation-play-state 1s;
+}
+
+.circlingMembers:hover {
+    animation-play-state: paused;
+}
+
+.member {
+    animation: 8s infinite linear orbit;
+    animation-play-state: inherit;
+}
+
+.member.charlotte {
+    --orbit-translate-x: 8em;
+}
+
+.member.kio {
+    --orbit-translate-x: -8em;
+}
+
 /* Animations */
 
 .pulse-red {
@@ -236,4 +274,14 @@ abbr[title] {
     100% {
         box-shadow: 0px 0px 20px var(--red);
     }
+}
+
+@keyframes orbit {
+    0% {
+        transform: rotate(0deg) translateX(var(--orbit-translate-x)) rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg) translateX(var(--orbit-translate-x)) rotate(-360deg);
+    }
 }