Prettier profile output

This commit is contained in:
Natty 2023-08-31 23:41:36 +02:00
parent 4bb2385432
commit e3aa14b8b1
No known key found for this signature in database
GPG key ID: BF6CB659ADEE60EC
3 changed files with 120 additions and 30 deletions

View file

@ -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();
}

View file

@ -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>

View file

@ -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%;
}