oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor: delegate card creation to UI class

This commit is contained in:
Oliver Booth 2023-08-10 16:18:24 +01:00
parent 5bb6463a4b
commit ab5277bacb
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
2 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/ts/UI.ts
View File

@ -1,3 +1,7 @@
import BlogPost from "./BlogPost";
import Author from "./Author";
import TimeUtility from "./TimeUtility";
declare const bootstrap: any;
declare const katex: any;
declare const Prism: any;
@ -23,7 +27,42 @@ class UI {
}
/**
* Forces all UI elements to update.
* Creates a blog post card from the given template, post, and author.
* @param template The Handlebars template to use.
* @param post The blog post to use.
* @param author The author of the blog post.
*/
public static createBlogPostCard(template: any, post: BlogPost, author: Author): HTMLDivElement {
const card = document.createElement("div") as HTMLDivElement;
card.classList.add("card");
card.classList.add("blog-card");
card.classList.add("animate__animated");
card.classList.add("animate__fadeIn");
card.style.marginBottom = "50px";
const body = template({
post: {
title: post.title,
excerpt: post.excerpt,
url: post.url,
date: TimeUtility.formatRelativeTimestamp(post.published),
formattedDate: post.formattedDate,
date_humanized: `${post.updated ? "Updated" : "Published"} ${post.humanizedTimestamp}`,
enable_comments: post.commentsEnabled,
disqus_identifier: post.identifier,
trimmed: post.trimmed,
},
author: {
name: author.name,
avatar: `https://gravatar.com/avatar/${author.avatarHash}?s=28`,
}
});
card.innerHTML = body.trim();
return card;
}
/**
* Forces all UI elements under the given element to update their rendering.
*/
public static updateUI(element?: Element) {
element = element || document.body;

28
src/ts/app.ts
View File

@ -13,33 +13,7 @@ declare const Handlebars: any;
const posts = await API.getBlogPosts(i, 5);
for (const post of posts) {
const author = await API.getAuthor(post.authorId);
const card = document.createElement("div") as HTMLDivElement;
card.classList.add("card");
card.classList.add("blog-card");
card.classList.add("animate__animated");
card.classList.add("animate__fadeIn");
card.style.marginBottom = "50px";
const body = template({
post: {
title: post.title,
excerpt: post.excerpt,
url: post.url,
date: TimeUtility.formatRelativeTimestamp(post.published),
formattedDate: post.formattedDate,
date_humanized: `${post.updated ? "Updated" : "Published"} ${post.humanizedTimestamp}`,
enable_comments: post.commentsEnabled,
disqus_identifier: post.identifier,
trimmed: post.trimmed,
},
author: {
name: author.name,
avatar: `https://gravatar.com/avatar/${author.avatarHash}?s=28`,
}
});
card.innerHTML = body.trim();
const card = UI.createBlogPostCard(template, post, author);
blogPostContainer.appendChild(card);
UI.updateUI(card);
}