From 217c1d660e884abec68712acd2b7c691fd161cf2 Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Thu, 10 Aug 2023 14:36:51 +0100 Subject: [PATCH] feat: use Handlebars to render template excerpt card --- OliverBooth/Pages/Blog/Index.cshtml | 86 ++++++++--------------------- src/ts/UI.ts | 4 ++ src/ts/app.ts | 76 +++++++------------------ 3 files changed, 47 insertions(+), 119 deletions(-) diff --git a/OliverBooth/Pages/Blog/Index.cshtml b/OliverBooth/Pages/Blog/Index.cshtml index a3631d0..2bd051a 100644 --- a/OliverBooth/Pages/Blog/Index.cshtml +++ b/OliverBooth/Pages/Blog/Index.cshtml @@ -1,9 +1,5 @@ @page -@using Humanizer -@using OliverBooth.Data.Blog -@using OliverBooth.Services @model OliverBooth.Pages.Blog.Index -@inject BlogService BlogService
@@ -13,67 +9,33 @@
-@foreach (BlogPost post in ArraySegment.Empty /*BlogService.AllPosts*/) -{ - BlogService.TryGetAuthor(post, out Author? author); - DateTimeOffset published = post.Published; - DateTimeOffset timestamp = post.Updated ?? published; - bool isUpdated = post.Updated.HasValue; - var year = published.ToString("yyyy"); - var month = published.ToString("MM"); - var day = published.ToString("dd"); + -} \ No newline at end of file + \ No newline at end of file diff --git a/src/ts/UI.ts b/src/ts/UI.ts index 93d27d4..f3cae5e 100644 --- a/src/ts/UI.ts +++ b/src/ts/UI.ts @@ -2,6 +2,10 @@ public static get blogPostContainer(): HTMLDivElement { return document.querySelector("#all-blog-posts"); } + + public static get blogPostTemplate(): HTMLDivElement { + return document.querySelector("#blog-post-template"); + } } export default UI; \ No newline at end of file diff --git a/src/ts/app.ts b/src/ts/app.ts index e0bbed7..be64a9d 100644 --- a/src/ts/app.ts +++ b/src/ts/app.ts @@ -4,10 +4,12 @@ import UI from "./UI"; declare const bootstrap: any; declare const katex: any; +declare const Handlebars: any; (() => { const blogPostContainer = UI.blogPostContainer; if (blogPostContainer) { + const template = Handlebars.compile(UI.blogPostTemplate.innerHTML); API.getBlogPostCount().then(async (count) => { for (let i = 0; i < count; i++) { const posts = await API.getBlogPosts(i, 5); @@ -21,63 +23,23 @@ declare const katex: any; card.classList.add("animate__fadeIn"); card.style.marginBottom = "50px"; - const cardBody = document.createElement("div"); - cardBody.classList.add("card-body"); - card.appendChild(cardBody); - - const postTitle = document.createElement("h2"); - postTitle.classList.add("card-title"); - cardBody.appendChild(postTitle); - - const titleLink = document.createElement("a"); - titleLink.href = post.url; - titleLink.innerText = post.title; - postTitle.appendChild(titleLink); - - const metadata = document.createElement("p"); - metadata.classList.add("text-muted"); - cardBody.appendChild(metadata); - - const authorIcon = document.createElement("img"); - authorIcon.classList.add("blog-author-icon"); - authorIcon.src = `https://gravatar.com/avatar/${author.avatarHash}?s=28`; - authorIcon.alt = author.name; - metadata.appendChild(authorIcon); - - const authorName = document.createElement("span"); - authorName.innerHTML = ` ${author.name} • `; - metadata.appendChild(authorName); - - const postDate = document.createElement("span"); - if (post.updated) { - postDate.innerHTML = `Updated ${TimeUtility.formatRelativeTimestamp(post.updated)}`; - } else { - postDate.innerHTML = `Published ${TimeUtility.formatRelativeTimestamp(post.published)}`; - } - metadata.appendChild(postDate); - - if (post.commentsEnabled) { - const bullet = document.createElement("span"); - bullet.innerHTML = " • "; - metadata.appendChild(bullet); - - const commentCount = document.createElement("a"); - commentCount.href = post.url + "#disqus_thread"; - commentCount.innerHTML = "0 Comments"; - commentCount.setAttribute("data-disqus-identifier", post.identifier); - metadata.appendChild(commentCount); - } - - const postExcerpt = document.createElement("p"); - postExcerpt.innerHTML = post.excerpt; - cardBody.appendChild(postExcerpt); - - if (post.trimmed) { - const readMoreLink = document.createElement("a"); - readMoreLink.href = post.url; - readMoreLink.innerHTML = "Read more …"; - cardBody.appendChild(readMoreLink); - } + const body = template({ + post: { + title: post.title, + excerpt: post.excerpt, + url: post.url, + date: TimeUtility.formatRelativeTimestamp(post.published), + 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(); blogPostContainer.appendChild(card); }