First working output with the starting status and its descendants. Order of statuses has yet to be optimized.

2022-02-12 18:49:42 +01:00
parent 876cdf82a2
commit 4611ee5ce9
2 changed files with 170 additions and 52 deletions
--- a/index.html
+++ b/index.html
@@ -3,10 +3,7 @@
  <head>
    <meta charset="utf-8">

-    <title>Our superheroes</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+    <title>TootKomm</title>
  </head>

  <body>
@@ -15,39 +12,103 @@

      </header>

-      <section>
+      <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">

-      </section>
+      </main>

-    <script>
+      <footer>
+	
+      </footer>

-    async function populate() {
+      <script>

-      const requestURL = 'https://social.tchncs.de/api/v1/statuses/107735248507147283';
-      const request = new Request(requestURL);
+	function buildCommentTree(statusID){
+	    const target = document.querySelector('#comments');
+	    buildArticle(target, statusID);
+       	    buildDescendants(target, statusID);
+	}

-      const response = await fetch(request);
-      const mastopost = await response.json();
+	async function getJSONObject(url){
+	    const requestURL = url;
+	    const request = new Request(requestURL);
+	    const response = await fetch(request);
+	    return await response.json();
+	}
+	    
+	
+	async function buildArticle(target, statusID) {
+	    const url = buildStatusURL(statusID);
+	    const mastopost = await getJSONObject(url);
+	    const article = document.createElement('article');

-      populateHeader(mastopost);
-//      populateHeroes(mastopost);
+	    populateHeader(article, mastopost);
+	    populateSection(article, mastopost);      
+	    populateAside(article, mastopost);
+	    populateFooter(article, mastopost);
+	
+	    target.appendChild(article);

+	}
+
+	async function buildDescendants(target, statusID){
+	    const url = buildStatusURL(statusID);
+	    const contextURL = url+'/context';	    
+	    const context = await getJSONObject(contextURL);
+	    
+	    for (const descendant of context.descendants) {
+		buildArticle(target, descendant.id);
+	    }
+
+	}
+      
+      
+      function populateHeader(item, obj) {
+
+	  const myHeader = document.createElement('header');
+	  const myCW = document.createElement('summary');
+	 
+	  myCW.textContent = obj.spoiler_text;
+	  myHeader.appendChild(myCW);
+	  item.appendChild(myHeader);
+	  
    }

-    function populateHeader(obj) {
-      const header = document.querySelector('header');
-      const myH1 = document.createElement('h1');
-	myH1.textContent = obj['account']['display_name'];
-      header.appendChild(myH1);
+      function populateSection(item, obj){
+	  const mySection = document.createElement('section');
+	  mySection.innerHTML = `${obj['content']}`;
+	  item.appendChild(mySection);
+      }

-      const myPara = document.createElement('article');
-      myPara.innerHTML = `${obj['content']}`;
-      header.appendChild(myPara);
-    }
+      function populateAside(item, obj){
+	  const aside = document.createElement('aside');
+	  const myImg = document.createElement('img');
+	  myImg.src = obj['account']['avatar'];
+	  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>`;
+	  aside.appendChild(myP);
+	  item.appendChild(aside);
+	  
+      }

-   
+      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>`;
+	  footer.appendChild(stats);
+	  item.appendChild(footer);
+      }

-    populate();
+	function buildStatusURL(statusID) {
+	    const apiURL = 'https://social.tchncs.de/api/v1/statuses/';
+	    return apiURL + statusID;
+	}
+
+	buildCommentTree("107735248507147283");

    </script>
  </body>