umaring · adityanaithani · Apr 3, 2025 · Apr 3, 2025 · Apr 11, 2025 · Apr 12, 2025
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -7,7 +7,7 @@ edition = "2021"
 
 [dependencies]
 axum = { version = "0.7.4", features = ["macros"] }
-tower-http = { version = "0.5.0", features = ["cors"] }
+tower-http = { version = "0.5.1", features = ["fs", "cors"] }
 rand = "0.8.5"
 serde = { version = "1.0.173", features = ["derive"] }
 serde_json = "1.0.103"

diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 # Build stage
-FROM rust:1.75-alpine3.19 as builder
+FROM rust:1.75-alpine3.19 AS builder
 
 RUN apk add musl-dev
 # Copy the source code
@@ -14,6 +14,7 @@ FROM alpine:3.19
 ARG REF=""
 ARG COMMIT=""
 ARG TIME=""
+ARG CT=""
 
 ENV COMMIT=${COMMIT}
 ENV REF=${REF}
@@ -24,6 +25,9 @@ ENV TZ="America/New_York"
 # Copy the binary from the build stage
 COPY --from=builder /target/release/umaring /usr/local/bin/umaring
 
+# Copy the public directory
+COPY --from=builder /public /usr/local/bin/public
+
 # Set the command to run the binary
 WORKDIR /usr/local/bin
 CMD ["umaring"]

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="UMass Amherst Webring" />
+    <title>UMass Amherst Web Ring</title>
+    <link rel="stylesheet" href="/public/styles.css" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Forum&family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap");
+    </style>
+  </head>
+  <body>
+    <header><h1>UMass Amherst Web Ring</h1></header>
+    <main>
+      <div id="memberlist">
+        <ul id="list"></ul>
+      </div>
+    </main>
+    <hr />
+    <footer>
+      <a id="addsite" href="https://github.com/umacabal/umaring/"
+        >add your site here ❯</a
+      >
+      <a href="https://en.wikipedia.org/wiki/Webring">what's a web ring?</a>
+    </footer>
+
+    <script>
+      async function fetchMembers() {
+        try {
+          const response = await fetch("/all");
+
+          if (!response.ok) {
+            throw new Error("Failed to fetch member list!");
+          }
+
+          const members = await response.json();
+          const memberList = document.getElementById("list");
+          let cleanLink = "";
+
+          members.forEach((member) => {
+            const listItem = document.createElement("li");
+            const link = document.createElement("a");
+
+            if (member.url.startsWith("https://")) {
+              cleanLink = member.url.replace(/https?:\/\//, "");
+              cleanLink = cleanLink.replace(/\/$/, "");
+            }
+
+            link.href = member.url;
+            link.textContent = cleanLink;
+            link.target = "_blank";
+            listItem.appendChild(link);
+            memberList.appendChild(listItem);
+          });
+        } catch (error) {
+          console.error("Error fetching members:", error);
+
+          const memberList = document.getElementById("list");
+          const errorItem = document.createElement("a");
+          errorItem.textContent = "Error fetching members. Please try again.";
+          memberList.appendChild(errorItem);
+        }
+      }
+
+      fetchMembers();
+    </script>
+  </body>
+</html>
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,109 @@
+header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 65%;
+}
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100vh;
+  flex-direction: column;
+  letter-spacing: 0.1em;
+
+  background-color: #111111;
+
+  font-family: "IBM Plex Mono", monospace;
+  font-weight: 400;
+
+  transition: all 1s ease;
+}
+
+main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+
+  width: 65%;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+  padding: 20px;
+}
+
+h1,
+h2 {
+  text-align: center;
+  margin-bottom: 50px;
+
+  color: #d9d9d9;
+
+  font-size: 45px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+
+a {
+  color: #a3a3a3;
+
+  text-decoration: none;
+
+  transition: color 0.3s ease;
+}
+a:hover {
+  color: #d9d9d9;
+}
+
+hr {
+  width: 65%;
+  height: 1px;
+
+  background-color: #d9d9d9;
+  border: none;
+}
+
+#list {
+  margin: 0px;
+  padding: 0px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: row wrap;
+
+  margin-bottom: 50px;
+
+  list-style: none;
+  gap: 40px;
+  top: 0px;
+  border-collapse: collapse;
+}
+
+#addsite {
+  padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+
+  background-color: #222222;
+  color: #d9d9d9;
+
+  text-align: center;
+  text-decoration: none;
+  font-size: 0.9em;
+
+  opacity: 0.8;
+}
+#addsite:hover {
+  background-color: #333333;
+  transition: 1s ease;
+}
diff --git a/src/get.rs b/src/get.rs
@@ -1,10 +1,10 @@
 use axum::{
     extract::{Path, Query, State},
-    response::Response,
+    response::Response
 };
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
-use tokio::sync::RwLock;
+use tokio::{sync::RwLock};
 
 use crate::ring::{Member, Ring};
 

diff --git a/src/main.rs b/src/main.rs
@@ -1,10 +1,12 @@
 use axum::{
-    response::{Redirect, Response},
+    response::Response,
     routing, Router,
 };
-use std::sync::Arc;
+use std::{sync::Arc};
 use tokio::sync::RwLock;
 use tower_http::cors::CorsLayer;
+use tower_http::services::ServeDir;
+
 
 mod get;
 mod ring;
@@ -25,18 +27,19 @@ async fn main() {
             ring.shuffle();
         }
     });
+
+    // serve static files from /public
+    let landing_page = ServeDir::new("public")
+    .append_index_html_on_directories(true);
 
     let app = Router::new()
-        .route(
-            "/",
-            routing::get(|| async { Redirect::temporary("https://github.com/umacabal/umaring") }),
-        )
         .route("/health", routing::get(health))
         .route("/all", routing::get(get::all))
         .route("/:id", routing::get(get::one))
         .route("/:id/prev", routing::get(get::prev))
         .route("/:id/next", routing::get(get::next))
         .route("/ring.js", routing::get(get::ring_js))
+        .fallback_service(landing_page)
         .layer(CorsLayer::permissive())
         .with_state(ring);