Prettier profile output

create-circle.js

@@ -703,6 +703,30 @@ function incConnectionValue(connectionList, user, plus) {
     connectionList.get(user.id).conStrength += plus;
 }
 
+// TODO: Store the profile URL in the handle
+async function webfingerVisit(name, instance) {
+    const webfingerUrl = `https://${instance}/.well-known/webfinger?resource=acct:${name}@${instance}`;
+    const response = await apiRequest(webfingerUrl);
+
+    if (!response) {
+        return;
+    }
+
+    const links = response.links;
+
+    if (!Array.isArray(links)) {
+        return;
+    }
+
+    const profileLink = links.find(link => link.rel === "http://webfinger.net/rel/profile-page");
+
+    if (!profileLink) {
+        return;
+    }
+
+    window.open(profileLink.href, "_blank");
+}
+
 /**
  * @param {FediUser} localUser
  * @param {Map<string, RatedUser>} connectionList
@@ -723,11 +747,29 @@ function showConnections(localUser, connectionList) {
 
     usersDivs.forEach((div) => div.innerHTML = "")
 
-    for (let i= 0; i < items.length; i++) {
-        let newUser = document.createElement("p");
-        newUser.innerText = "@" + items[i].handle;
+    const [inner, middle, outer] = usersDivs;
+    inner.innerHTML = "<div><h3>Inner Circle</h3></div>";
+    middle.innerHTML = "<div><h3>Middle Circle</h3></div>";
+    outer.innerHTML = "<div><h3>Outer Circle</h3></div>";
 
-        createUserObj(items[i]);
+    for (let i= 0; i < items.length; i++) {
+        const newUser = document.createElement("a");
+        newUser.className = "userItem";
+        newUser.innerText = items[i].handle.name;
+        newUser.title = items[i].name;
+        const handle = items[i].handle;
+        newUser.href = `javascript: webfingerVisit(${JSON.stringify(handle.name)}, ${JSON.stringify(handle.instance)})`;
+
+        const newUserHost = document.createElement("span");
+        newUserHost.className = "userHost";
+        newUserHost.innerText = "@" + items[i].handle.instance;
+        newUser.appendChild(newUserHost);
+
+        const newUserImg = document.createElement("img");
+        newUserImg.src = items[i].avatar;
+        newUserImg.title = newUserImg.alt = stripName(items[i].name || items[i].handle.name) + "'s avatar";
+        newUserImg.className = "userImg";
+        newUser.prepend(newUserImg);
 
         let udNum = 0;
         if (i > numb[0]) udNum = 1;
@@ -735,15 +777,22 @@ function showConnections(localUser, connectionList) {
         usersDivs[udNum].appendChild(newUser);
     }
 
+    usersDivs.forEach((div) => {
+        const items = div.querySelectorAll(".userItem");
+
+        for (let i = 0; i < items.length - 1; i++) {
+            const item = items[i];
+            item.innerHTML += ", ";
+        }
+    });
+
+    const outDiv = document.getElementById("outDiv");
+    outDiv.style.display = "block";
+    document.getElementById("outSelfUser").innerText = stripName(localUser.name || localUser.handle.name);
+
     render(items, localUser);
 }
 
-/**
- * @param {FediUser} usr
- */
-function createUserObj(usr) {
-    let usrElement = document.createElement("div");
-    usrElement.innerHTML = `<img src="${usr.avatar}" width="20px">&nbsp;&nbsp;&nbsp;<b>${usr.name}</b>&nbsp;&nbsp;`;
-    document.getElementById("outDiv").appendChild(usrElement);
+function stripName(name) {
+    return name.replaceAll(/:[a-zA-Z0-9_]+:/g, "").trim();
 }
-

index.html

@@ -28,18 +28,21 @@
     </canvas>
     <br>
     <!-- List of all people in Circle -->
+    <div id="outDiv">
+        <em>Click a user below to visit their profile.</em>
+        <h2><span id="outSelfUser"></span>'s Fedi Circle</h2>
+
         <div id="usersDiv">
             <div id="ud1" class="userSubDiv"></div>
             <div id="ud2" class="userSubDiv"></div>
             <div id="ud3" class="userSubDiv"></div>
         </div>
+    </div>
     <br><br><br>
     <div id="credits" style="width: 100%;">
         <p>Contribute on <a href="https://github.com/AMNatty/Mastodon-Circles">GitHub: AMNatty/Mastodon-Circles</a></p>
         <p>Based on <a href="https://github.com/andigandhi/Mastodon-Circles">andigandhi/Mastodon-Circles</a> </p>
     </div>
-    <!-- output for further projects ;) -->
-    <div id="outDiv" style="display: none;"></div>
     <!-- Preload the background image -->
     <div style="display:none;"><img id="mieke_bg" src="background.png" width="1000" height="1000" /></div>
 </body>

style.css

@@ -13,11 +13,11 @@ body {
     }
 
     a:link {
-        color: #dd87ff;
+        color: #aaa0ff;
     }
 
     a:visited {
-        color: #6153ff;
+        color: #dd87ff;
     }
 }
 
@@ -34,6 +34,7 @@ button {
 canvas {
     max-width: 1000px;
     width: 90%;
+    image-rendering: smooth;
 }
 
 a:hover {
@@ -45,7 +46,8 @@ a:active {
 }
 
 #outDiv {
-    font-size: 20%;
+    display: none;
+    margin-top: 30px;
 }
 
 #outInfo {
@@ -53,16 +55,52 @@ a:active {
 }
 
 #usersDiv {
-    margin-top: 30px;
-    line-height: 100%;
+    line-height: 150%;
     font-size: 100%;
-}
-
-#credits {
-    min-width: 90%;
+    display: flex;
+    justify-content: center;
+    gap: 2em;
+    flex-wrap: wrap;
 }
 
 .userSubDiv {
     min-width: 400px;
     max-width: 90%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: start;
+}
+
+.userItem {
+    display: inline;
+    text-align: left;
+}
+
+.userItem {
+    text-decoration: underline 1px;
+    text-decoration-style: dotted;
+}
+
+.userItem:hover {
+    text-decoration-style: solid;
+}
+
+.userHost {
+    opacity: 0.75;
+}
+
+.userImg {
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+    margin-right: 0.5em;
+}
+
+#credits {
+    min-width: 90%;
 }