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>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
<title>Our superheroes</title>
|
<title>TootKomm</title>
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -15,39 +12,103 @@
|
||||||
|
|
||||||
</header>
|
</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>
|
<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 request = new Request(requestURL);
|
||||||
|
|
||||||
const response = await fetch(request);
|
const response = await fetch(request);
|
||||||
const mastopost = await response.json();
|
return 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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
109
style.css
109
style.css
|
|
@ -1,48 +1,105 @@
|
||||||
/* || general styles */
|
/* || general styles */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: 'helvetica neue', helvetica, arial, sans-serif;
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
article {
|
||||||
width: 800px;
|
font-family: 'Oswald', sans-serif;
|
||||||
margin: 0 auto;
|
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 {
|
article a {
|
||||||
font-family: 'Faster One', cursive;
|
color: #4d9fdb;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* header styles */
|
|
||||||
|
|
||||||
h1 {
|
article header {
|
||||||
font-size: 4rem;
|
width:100%;
|
||||||
|
grid-area: header;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header summary {
|
||||||
|
font-weight: 300;
|
||||||
|
width:100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article aside {
|
||||||
|
grid-area: profile;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
header p {
|
article aside h1 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.2em;
|
||||||
font-weight: bold;
|
font-weight: 300;
|
||||||
text-align: center;
|
padding:0; margin-bottom:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* section styles */
|
article aside h2 {
|
||||||
|
font-size: 1.0em;
|
||||||
section article {
|
font-weight: 200;
|
||||||
width: 33%;
|
padding:0; margin:0;
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section p {
|
article aside img {
|
||||||
margin: 5px 0;
|
max-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section ul {
|
article section {
|
||||||
margin-top: 0;
|
grid-area: content;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
article footer {
|
||||||
font-size: 2.5rem;
|
grid-area: footer;
|
||||||
letter-spacing: -5px;
|
background: #282c37;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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