From 9cab9e8b1cb7886df26d1c10020212730575af89 Mon Sep 17 00:00:00 2001
From: Max L <privat@maxlissowski.de>
Date: Thu, 23 Nov 2023 20:44:43 +0100
Subject: [PATCH] Display username

---
 script.js  | 4 ++--
 styles.css | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 8f40f29..d79e7d4 100644
--- a/script.js
+++ b/script.js
@@ -113,7 +113,7 @@ const displayPost = function(post) {
             <div class="card m-2 p-2">
                 <div class="d-flex align-items-center mb-2">
                     <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
+                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}  <span class="user-name">@${DOMPurify.sanitize(post.account.username)}</span></p>
                 </div>
                 ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
                 <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
@@ -175,7 +175,7 @@ const updateCarousel = function(slides, posts) {
             <div class="card-big">
                 <div class="d-flex align-items-center mb-4">
                     <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
-                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)}</p>
+                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.username)}</span></p>
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
diff --git a/styles.css b/styles.css
index 658b319..b2f4fc5 100644
--- a/styles.css
+++ b/styles.css
@@ -139,6 +139,11 @@ body {
     padding-top:0.3em
 }
 
+.user-name {
+    font-weight: normal;
+    opacity: 0.7;
+}
+
 .container {
   max-width: 2000px !important;
   }