First working output with the starting status and its descendants. Order of statuses has yet to be optimized.
This commit is contained in:
maste9
parent
876cdf82a2
commit
4611ee5ce9
113
index.html
113
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>
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
||||
async function populate() {
|
||||
function buildCommentTree(statusID){
|
||||
const target = document.querySelector('#comments');
|
||||
buildArticle(target, statusID);
|
||||
buildDescendants(target, statusID);
|
||||
}
|
||||
|
||||
const requestURL = 'https://social.tchncs.de/api/v1/statuses/107735248507147283';
|
||||
async function getJSONObject(url){
|
||||
const requestURL = url;
|
||||
const request = new Request(requestURL);
|
||||
|
||||
const response = await fetch(request);
|
||||
const mastopost = await response.json();
|
||||
|
||||
populateHeader(mastopost);
|
||||
// populateHeroes(mastopost);
|
||||
|
||||
}
|
||||
|
||||
function populateHeader(obj) {
|
||||
const header = document.querySelector('header');
|
||||
const myH1 = document.createElement('h1');
|
||||
myH1.textContent = obj['account']['display_name'];
|
||||
header.appendChild(myH1);
|
||||
|
||||
const myPara = document.createElement('article');
|
||||
myPara.innerHTML = `${obj['content']}`;
|
||||
header.appendChild(myPara);
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
|
||||
async function buildArticle(target, statusID) {
|
||||
const url = buildStatusURL(statusID);
|
||||
const mastopost = await getJSONObject(url);
|
||||
const article = document.createElement('article');
|
||||
|
||||
populate();
|
||||
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 populateSection(item, obj){
|
||||
const mySection = document.createElement('section');
|
||||
mySection.innerHTML = `${obj['content']}`;
|
||||
item.appendChild(mySection);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function buildStatusURL(statusID) {
|
||||
const apiURL = 'https://social.tchncs.de/api/v1/statuses/';
|
||||
return apiURL + statusID;
|
||||
}
|
||||
|
||||
buildCommentTree("107735248507147283");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
111
style.css
111
style.css
|
|
@ -1,48 +1,105 @@
|
|||
/* || general styles */
|
||||
|
||||
html {
|
||||
font-family: 'helvetica neue', helvetica, arial, sans-serif;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
article {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: #fff;
|
||||
background:#313543;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"profile header "
|
||||
"profile content"
|
||||
"footer footer";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 0.5em;
|
||||
width: 30em;
|
||||
padding: 1em 0.25em 0em 0.25em;
|
||||
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Faster One', cursive;
|
||||
article a {
|
||||
color: #4d9fdb;
|
||||
}
|
||||
|
||||
/* header styles */
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
article header {
|
||||
width:100%;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
article header summary {
|
||||
font-weight: 300;
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
/* section styles */
|
||||
|
||||
section article {
|
||||
width: 33%;
|
||||
float: left;
|
||||
article aside {
|
||||
grid-area: profile;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
section p {
|
||||
margin: 5px 0;
|
||||
article aside h1 {
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
padding:0; margin-bottom:0;
|
||||
}
|
||||
|
||||
section ul {
|
||||
margin-top: 0;
|
||||
article aside h2 {
|
||||
font-size: 1.0em;
|
||||
font-weight: 200;
|
||||
padding:0; margin:0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -5px;
|
||||
margin-bottom: 10px;
|
||||
article aside img {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
article section {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
article footer {
|
||||
grid-area: footer;
|
||||
background: #282c37;
|
||||
}
|
||||
|
||||
|
||||
article footer dl {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"replies-icon replies favs-icon favs boosts-icon boosts";
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap:0em;
|
||||
}
|
||||
|
||||
article footer dl > .replies {
|
||||
grid-area: replies;
|
||||
}
|
||||
|
||||
article footer dl > .favs {
|
||||
grid-area: favs;
|
||||
}
|
||||
|
||||
article footer dl > . boosts {
|
||||
grid-area: boosts;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
strong, b {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hashtag {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue