.gitignore

@@ -4,7 +4,6 @@ project.lock.json
 .DS_Store
 *.pyc
 nupkg/
-tmp/
 
 # Visual Studio Code
 .vscode

Gulpfile.js

@@ -18,13 +18,11 @@ function compileSCSS() {
 }
 
 function compileTS() {
-    return gulp.src(`${srcDir}/ts/**/*.ts`)
+    gulp.src(`${srcDir}/ts/**/*.ts`)
         .pipe(ts("tsconfig.json"))
         .pipe(terser())
         .pipe(gulp.dest(`tmp/js`));
-}
 
-function bundleJS() {
     return gulp.src('tmp/js/*.js')
         .pipe(webpack({ mode: 'production', output: { filename: 'app.min.js' } }))
         .pipe(gulp.dest(`${destDir}/js`));
@@ -48,4 +46,4 @@ function copyImages() {
 }
 
 exports.default = compileSCSS;
-exports.default = gulp.parallel(compileSCSS, gulp.series(compileTS, bundleJS), copyCSS, copyJS, copyImages);
+exports.default = gulp.parallel(compileSCSS, compileTS, copyCSS, copyJS, copyImages);

OliverBooth.sln

@@ -26,7 +26,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ts", "ts", "{BB9F76AC-292A-
 		src\ts\BlogPost.ts = src\ts\BlogPost.ts
 		src\ts\Author.ts = src\ts\Author.ts
 		src\ts\TimeUtility.ts = src\ts\TimeUtility.ts
-		src\ts\UI.ts = src\ts\UI.ts
 	EndProjectSection
 EndProject
 Global

OliverBooth/Controllers/BlogApiController.cs

@@ -1,5 +1,4 @@
-using Humanizer;
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Primitives;
 using OliverBooth.Data.Blog;
 using OliverBooth.Services;
@@ -44,7 +43,6 @@ public sealed class BlogApiController : ControllerBase
             title = post.Title,
             published = post.Published.ToUnixTimeSeconds(),
             updated = post.Updated?.ToUnixTimeSeconds(),
-            humanizedTimestamp = post.Updated?.Humanize() ?? post.Published.Humanize(), 
             excerpt = _blogService.GetExcerpt(post, out bool trimmed),
             trimmed,
             url = Url.Page("/Blog/Article",

OliverBooth/Pages/Blog/Index.cshtml

@@ -1,41 +1,79 @@
 @page
+@using Humanizer
+@using OliverBooth.Data.Blog
+@using OliverBooth.Services
 @model OliverBooth.Pages.Blog.Index
+@inject BlogService BlogService
 
-<div id="all-blog-posts">
-    <div id="blog-loading-spinner" class="d-flex justify-content-center">
+<div id="all_blog_posts">
+    <div id="blog_loading_spinner" class="d-flex justify-content-center">
         <div class="spinner-border text-light" role="status">
             <p class="text-center sr-only">Loading...</p>
         </div>
     </div>
 </div>
 
-<script id="blog-post-template" type="text/x-handlebars-template">
-    <div class="card-body">
-        <h2>
-            <a href="{{post.url}}"> {{post.title}}</a>
-        </h2>
+@foreach (BlogPost post in ArraySegment<BlogPost>.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");
 
-        <p class="text-muted">
-            <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
-            <span>{{author.name}}<span>
-            <span> &bull; </span>
-            <span title="{{ post.date }}">{{ post.date_humanized }}</span>
-            {{#if post.enable_comments}}
-                <span> &bull; </span>
-                <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
-                    0 Comments
+    <div class="card blog-card" style="margin-bottom: 50px;">
+        <div class="card-body">
+            <h2>
+                <a asp-page="/blog/article"
+                   asp-route-year="@year"
+                   asp-route-month="@month"
+                   asp-route-day="@day"
+                   asp-route-slug="@post.Slug">
+                    @post.Title
                 </a>
-            {{/if}}
-        </p>
+            </h2>
 
-        <p>{{{post.excerpt}}}</p>
+            <p class="text-muted">
+                <img class="blog-author-icon" src="https://gravatar.com/avatar/@author?.AvatarHash?s=28" alt="@author?.Name">
+                @author?.Name &bull;
 
-        {{#if post.trimmed}}
-            <p>
-                <a href="{{post.url}}">
-                    Read more...
-                </a>
+                <abbr data-bs-toggle="tooltip" data-bs-title="@timestamp.ToString("f")">
+                    @(isUpdated ? "Updated" : "Published") @timestamp.Humanize()
+                </abbr>
+
+                @if (post.EnableComments)
+                {
+                    <span> &bull;</span>
+                    <a asp-page="/blog/article"
+                       asp-fragment="disqus_thread"
+                       asp-route-year="@year"
+                       asp-route-month="@month"
+                       asp-route-day="@day"
+                       asp-route-slug="@post.Slug"
+                       data-disqus-identifier="@post.GetDisqusIdentifier()">
+                        0 Comments
+                    </a>
+                }
             </p>
-        {{/if}}
+
+            <p>@Html.Raw(BlogService.GetExcerpt(post, out bool trimmed))</p>
+
+            @if (trimmed)
+            {
+                <p>
+                    <a asp-page="/blog/article"
+                       asp-route-year="@year"
+                       asp-route-month="@month"
+                       asp-route-day="@day"
+                       asp-route-slug="@post.Slug">
+                        Read more...
+                    </a>
+                </p>
+            }
+        </div>
     </div>
-</script>
+
+    <script id="dsq-count-scr" src="https://oliverbooth-dev.disqus.com/count.js" async></script>
+}

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -70,7 +70,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js" integrity="sha512-ToL6UYWePxjhDQKNioSi4AyJ5KkRxY+F1+Fi7Jgh0Hp5Kk2/s8FD7zusJDdonfe5B00Qw+B8taXxF6CFLnqNCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js" integrity="sha512-aoZChv+8imY/U1O7KIHXvO87EOzCuKO0GhFtpD6G2Cyjo/xPeTgdf3/bchB10iB+AojMTDkMHDPLKNxPJVqDcw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js" integrity="sha512-E1dSFxg+wsfJ4HKjutk/WaCzK7S2wv1POn1RRPGh8ZK+ag9l244Vqxji3r6wgz9YBf6+vhQEYJZpSjqWFPg9gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="~/js/prism.min.js" asp-append-version="true"></script>
 <script src="~/js/app.min.js" asp-append-version="true"></script>
 

OliverBooth/Program.cs

@@ -1,5 +1,4 @@
 using Markdig;
-using Markdig.Extensions.MediaLinks;
 using NLog.Extensions.Logging;
 using OliverBooth.Data;
 using OliverBooth.Markdown;

OliverBooth/Services/BlogService.cs

@@ -61,25 +61,7 @@ public sealed class BlogService
         int moreIndex = span.IndexOf("<!--more-->", StringComparison.Ordinal);
         trimmed = moreIndex != -1 || span.Length > 256;
         string result = moreIndex != -1 ? span[..moreIndex].Trim().ToString() : post.Body.Truncate(256);
-        return RenderContent(result).Trim();
-    }
-
-    /// <summary>
-    ///     Attempts to find the author by ID.
-    /// </summary>
-    /// <param name="id">The ID of the author.</param>
-    /// <param name="author">
-    ///     When this method returns, contains the <see cref="Author" /> associated with the specified ID, if the author
-    ///     is found; otherwise, <see langword="null" />.
-    /// </param>
-    /// <returns><see langword="true" /> if the author is found; otherwise, <see langword="false" />.</returns>
-    /// <exception cref="ArgumentNullException"><paramref name="post" /> is <see langword="null" />.</exception>
-    public bool TryGetAuthor(int id, [NotNullWhen(true)] out Author? author)
-    {
-        using BlogContext context = _dbContextFactory.CreateDbContext();
-        author = context.Authors.FirstOrDefault(a => a.Id == id);
-
-        return author is not null;
+        return RenderContent(result);
     }
 
     /// <summary>
@@ -89,7 +71,6 @@ public sealed class BlogService
     /// <param name="author">
     ///     When this method returns, contains the <see cref="Author" /> associated with the specified blog post, if the
     ///     author is found; otherwise, <see langword="null" />.
-    /// </param>
     /// <returns><see langword="true" /> if the author is found; otherwise, <see langword="false" />.</returns>
     /// <exception cref="ArgumentNullException"><paramref name="post" /> is <see langword="null" />.</exception>
     public bool TryGetAuthor(BlogPost post, [NotNullWhen(true)] out Author? author)

src/scss/app.scss

@@ -212,7 +212,7 @@ div.alert *:last-child {
   margin-bottom: 0 !important;
 }
 
-#blog-loading-spinner {
+#blog_loading_spinner {
   margin: 20px;
 
   &.removed {

src/ts/Author.ts

@@ -1,6 +1,6 @@
 class Author {
-    private readonly _name: string;
-    private readonly _avatarHash: string;
+    private _name: string;
+    private _avatarHash: string;
 
     constructor(json: any) {
         this._name = json.name;

src/ts/BlogPost.ts

@@ -9,7 +9,6 @@
     private readonly _url: string;
     private readonly _trimmed: boolean;
     private readonly _identifier: string;
-    private readonly _humanizedTimestamp: string;
 
     constructor(json: any) {
         this._id = json.id;
@@ -22,7 +21,6 @@
         this._url = json.url;
         this._trimmed = json.trimmed;
         this._identifier = json.identifier;
-        this._humanizedTimestamp = json.humanizedTimestamp;
     }
 
     get id(): number {
@@ -64,10 +62,6 @@
     get identifier(): string {
         return this._identifier;
     }
-
-    get humanizedTimestamp(): string {
-        return this._humanizedTimestamp;
-    }
 }
 
 export default BlogPost;

src/ts/UI.ts

@@ -1,11 +0,0 @@
-class UI {
-    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;

src/ts/app.ts

@@ -1,15 +1,12 @@
 import API from "./API";
 import TimeUtility from "./TimeUtility";
-import UI from "./UI";
 
 declare const bootstrap: any;
 declare const katex: any;
-declare const Handlebars: any;
 
 (() => {
-    const blogPostContainer = UI.blogPostContainer;
+    const blogPostContainer = document.querySelector("#all_blog_posts");
     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);
@@ -23,23 +20,63 @@ declare const Handlebars: any;
                     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),
-                            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 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} &bull; `;
+                    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 = " &bull; ";
+                        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 &hellip;";
+                        cardBody.appendChild(readMoreLink);
+                    }
 
                     blogPostContainer.appendChild(card);
                 }
@@ -52,7 +89,7 @@ declare const Handlebars: any;
             disqusCounter.src = "https://oliverbooth-dev.disqus.com/count.js";
             disqusCounter.async = true;
 
-            const spinner = document.querySelector("#blog-loading-spinner");
+            const spinner = document.querySelector("#blog_loading_spinner");
             if (spinner) {
                 spinner.classList.add("removed");
                 setTimeout(() => spinner.remove(), 1100);