mirror of
https://github.com/AMNatty/Mastodon-Circles.git
synced 2024-11-09 12:51:26 -07:00
Prettier profile output
This commit is contained in:
parent
4bb2385432
commit
e3aa14b8b1
3 changed files with 120 additions and 30 deletions
|
@ -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"> <b>${usr.name}</b> `;
|
||||
document.getElementById("outDiv").appendChild(usrElement);
|
||||
function stripName(name) {
|
||||
return name.replaceAll(/:[a-zA-Z0-9_]+:/g, "").trim();
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
56
style.css
56
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%;
|
||||
}
|
Loading…
Reference in a new issue