Make client script

Dockerfile

@@ -26,6 +26,7 @@ ENV TZ="America/New_York"
 # Copy the binary from the build stage
 COPY --from=builder /target/release/umaring /usr/local/bin/umaring
 COPY ./members.json /usr/local/bin/members.json
+COPY ./js /usr/local/bin/js
 
 # Set the command to run the binary
 WORKDIR /usr/local/bin

README.md

@@ -8,7 +8,13 @@ It is a collection of personal websites, blogs, and other web pages.
 2. Once accepted make sure to add the webring to your website in some way.
 
 ### Using our script
-A script has not been made yet, but will be soon.
+Add the following script to your website:
+```html
+<script id="webring_js" src="https://umaring.hamy.cc/ring.js?id=ID"></script>
+```
+
+Replace `ID` with your ID in the members.json file.
+Make sure to keep in the `id="webring_js"` part of the script tag.
 
 ### Using your own script
 Please integrate with the following API:

js/ring.js

@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const webringContainer = document.getElementById('umaring');
+    if (!webringContainer) {
+        console.error('UMass Amherst webring container not found.');
+        return;
+    }
+
+    try {
+        const scriptTag = document.getElementById('webring_js');
+        if (!scriptTag) {
+            console.error('UMass Amherst webring script tag not found.');
+            return;
+        }
+
+        const memberId = new URL(scriptTag.src).searchParams.get('id');
+        if (!memberId) {
+            console.error('Member ID not specified in script tag.');
+            return;
+        }
+
+        const response = await fetch(`https://umaring.hamy.cc/${memberId}`);
+        if (!response.ok) {
+            console.error('Failed to fetch UMass Amherst webring data.');
+            return;
+        }
+
+        const data = await response.json();
+        const { prev, member, next } = data;
+
+        webringContainer.innerHTML = `
+            <a href="${prev.url}" id="umaring_prev">${prev.name}</a> <-
+            <a href="https://github.com/umaring/umaring">UMass Ring</a> ->
+            <a href="${next.url}" id="umaring_next">${next.name}</a>
+        `;
+    } catch (error) {
+        console.error('Error fetching UMass Amherst webring data:', error);
+    }
+});

src/main.rs

@@ -21,13 +21,21 @@ async fn main() {
 
     let state = Arc::new(RwLock::new(state));
 
+    let ring_js = std::fs::read_to_string("./js/ring.js").unwrap();
+
     let app = Router::new()
         .route("/", 
             routing::get(|| async { Redirect::temporary("https://github.com/umaring/umaring") })
         )
         .route("/health", routing::get(health))
         .route("/all", routing::get(get::all))
         .route("/:id", routing::get(get::one))
+        .route("/ring.js", routing::get(move || async move {
+            Response::builder()
+                .header("Content-Type", "text/javascript")
+                .body(ring_js.clone())
+                .unwrap()
+        }))
         .layer(CorsLayer::permissive())
         .with_state(state);
 
@@ -45,4 +53,4 @@ async fn health() -> Response<String> {
         .header("Content-Type", "text/plain")
         .body(format!("OK\n{}", commit))
         .unwrap()
-}
+}