Fixed the broken sort function. Further improvement of css. Implemented Time fields.

.gitignore

@@ -168,3 +168,4 @@ cython_debug/
 **/IntegrationServer/XAStore/
 **/IntegrationServer/packages/Wm*/
 
+fontawesome

index.html

@@ -15,8 +15,10 @@
       <main id="comments">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&display=swap" rel="stylesheet"> 
-	<link rel="stylesheet" href="style.css">
+	<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="fontawesome/css/all.css">
+	<link rel="stylesheet" href="style.css?v=1.11">
+
 
       </main>
 
@@ -43,6 +45,8 @@
 	async function buildArticle(target, statusID) {
 	    const url = buildStatusURL(statusID);
 	    const mastopost = await getJSONObject(url);
+	    const link = document.createElement('a');
+	    link.href = mastopost.url;
 	    const article = document.createElement('article');
 
 	    populateHeader(article, mastopost);
@@ -50,7 +54,7 @@
 	    populateAside(article, mastopost);
 	    populateFooter(article, mastopost);
 	
-	    target.appendChild(article);
+	    target.appendChild(link).appendChild(article);
 
 	}
 
@@ -58,8 +62,12 @@
 	    const url = buildStatusURL(statusID);
 	    const contextURL = url+'/context';	    
 	    const context = await getJSONObject(contextURL);
+	    const sorted_descendants = context.descendants.sort(
+		function (a, b) {
+		    return a.created_at - b.created_at;
+		});
 	    
-	    for (const descendant of context.descendants.sort( function (a, b) { return a.id - b.id; })) {
+	    for (const descendant of sorted_descendants) {
 		buildArticle(target, descendant.id);
 	    }
 
@@ -70,9 +78,14 @@
 
 	  const myHeader = document.createElement('header');
 	  const myCW = document.createElement('summary');
-	 
+	  const myDateTime = document.createElement('time');
+	  
+	  myDateTime.datetime = obj.created_at;
+	  creation_date = new Date(obj.created_at);
+	  myDateTime.textContent = creation_date.toLocaleString();
 	  myCW.textContent = obj.spoiler_text;
 	  myHeader.appendChild(myCW);
+	  myHeader.appendChild(myDateTime);
 	  item.appendChild(myHeader);
 	  
     }
@@ -87,9 +100,11 @@
 	  const aside = document.createElement('aside');
 	  const myImg = document.createElement('img');
 	  myImg.src = obj['account']['avatar'];
+	  myDate = new Date(obj.account['created_at']);
+	  
 	  aside.appendChild(myImg);
 	  const myP = document.createElement('hgroup');
-	  myP.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2>`;
+	  myP.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2><div class="fa-regular fa-clock"></div> <time datetime="${obj.account['created_at']}">${myDate.toLocaleDateString()}</time>`;
 	  aside.appendChild(myP);
 	  item.appendChild(aside);
 	  
@@ -97,8 +112,8 @@
 
       function populateFooter(item, obj){
 	  const footer = document.createElement('footer');
-	  const stats = document.createElement('dl');
-	  stats.innerHTML = `<dt class="replies-icon"></dt><dd class="replies">${obj.replies_count}</dd><dt class="favs-icon"></dt><dd class="favs">${obj.favourites_count}</dd><dt class="boosts-icon"></dt><dd class="boosts">${obj.reblogs_count}</dd>`;
+	  const stats = document.createElement('ul');
+	  stats.innerHTML = `<li class="replies fa-solid fa-retweet">${obj.replies_count}</li><li class="favs fa-solid fa-star">${obj.favourites_count}</li><li class="boosts fa-solid fa-share">${obj.reblogs_count}</li>`;
 	  footer.appendChild(stats);
 	  item.appendChild(footer);
       }

style.css

@@ -5,6 +5,10 @@ html {
     font-weight: 200;
 }
 
+#comments > a {
+    text-decoration: none;
+}
+
 article  {
     font-family: 'Oswald',  sans-serif;
     color: #fff;
@@ -76,8 +80,9 @@ article > footer > ul {
     gap:0em;    
 }
 
-article > footer > ul > li {    
-    width: 25%;
+article > footer > ul > li:before {
+    padding:0 1em;
+
 }
 
 article > footer > ul > li.replies {