Gulpfile.js

@@ -4,7 +4,6 @@ const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
 const ts = require('gulp-typescript');
 const terser = require('gulp-terser');
-const webpack = require('webpack-stream');
 
 const srcDir = 'src';
 const destDir = 'OliverBooth/wwwroot';
@@ -18,13 +17,10 @@ function compileSCSS() {
 }
 
 function compileTS() {
-    gulp.src(`${srcDir}/ts/**/*.ts`)
-        .pipe(ts("tsconfig.json"))
+    return gulp.src(`${srcDir}/ts/**/*.ts`)
+        .pipe(ts())
         .pipe(terser())
-        .pipe(gulp.dest(`tmp/js`));
-
-    return gulp.src('tmp/js/*.js')
-        .pipe(webpack({ mode: 'production', output: { filename: 'app.min.js' } }))
+        .pipe(rename({ suffix: '.min' }))
         .pipe(gulp.dest(`${destDir}/js`));
 }
 

OliverBooth.sln

@@ -22,10 +22,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ts", "ts", "{BB9F76AC-292A-
 	ProjectSection(SolutionItems) = preProject
 		src\ts\app.ts = src\ts\app.ts
 		src\ts\prism.js = src\ts\prism.js
-		src\ts\API.ts = src\ts\API.ts
-		src\ts\BlogPost.ts = src\ts\BlogPost.ts
-		src\ts\Author.ts = src\ts\Author.ts
-		src\ts\TimeUtility.ts = src\ts\TimeUtility.ts
 	EndProjectSection
 EndProject
 Global

OliverBooth/Controllers/BlogApiController.cs

@@ -1,70 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.Extensions.Primitives;
-using OliverBooth.Data.Blog;
-using OliverBooth.Services;
-
-namespace OliverBooth.Controllers;
-
-[Controller]
-[Route("/api/blog")]
-public sealed class BlogApiController : ControllerBase
-{
-    private readonly BlogService _blogService;
-
-    public BlogApiController(BlogService blogService)
-    {
-        _blogService = blogService;
-    }
-
-    [Route("count")]
-    public IActionResult Count()
-    {
-        return new JsonResult(new { count = _blogService.AllPosts.Count });
-    }
-
-    [Route("all/{skip:int?}/{take:int?}")]
-    public IActionResult GetAllBlogPosts(int skip = 0, int take = -1)
-    {
-        if (take == -1) take = _blogService.AllPosts.Count;
-
-        var referer = Request.Headers["Referer"].ToString();
-        Console.WriteLine($"Referer: {referer}");
-        if (!referer.StartsWith(Url.PageLink("/Blog/Index")!))
-        {
-            return NotFound();
-        }
-
-        return new JsonResult(_blogService.AllPosts.Skip(skip).Take(take).Select(post => new
-        {
-            id = post.Id,
-            commentsEnabled = post.EnableComments,
-            identifier = post.GetDisqusIdentifier(),
-            author = post.AuthorId,
-            title = post.Title,
-            published = post.Published.ToUnixTimeSeconds(),
-            updated = post.Updated?.ToUnixTimeSeconds(),
-            excerpt = _blogService.GetExcerpt(post, out bool trimmed),
-            trimmed,
-            url = Url.Page("/Blog/Article",
-                new
-                {
-                    year = post.Published.Year,
-                    month = post.Published.Month,
-                    day = post.Published.Day,
-                    slug = post.Slug
-                })
-        }));
-    }
-
-    [Route("author/{id:int}")]
-    public IActionResult GetAuthor(int id)
-    {
-        if (!_blogService.TryGetAuthor(id, out Author? author)) return NotFound();
-
-        return new JsonResult(new
-        {
-            name = author.Name,
-            avatarHash = author.AvatarHash,
-        });
-    }
-}

OliverBooth/Pages/Blog/Index.cshtml

@@ -5,15 +5,7 @@
 @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 class="spinner-border text-light" role="status">
-            <p class="text-center sr-only">Loading...</p>
-        </div>
-    </div>
-</div>
-
-@foreach (BlogPost post in ArraySegment<BlogPost>.Empty /*BlogService.AllPosts*/)
+@foreach (BlogPost post in BlogService.AllPosts)
 {
     BlogService.TryGetAuthor(post, out Author? author);
     DateTimeOffset published = post.Published;

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css" integrity="sha512-7nTa5CnxbzfQgjQrNmHXB7bxGTUVO/DcYX6rpgt06MkzM0rVXP3EYCv/Ojxg5H0dKbY7llbbYaqgfZjnGOAWGA==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <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=Roboto+Mono:wght@100;400;700&display=swap" rel="stylesheet">

OliverBooth/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "target": "es2020"
+  }
+}

package.json

@@ -26,7 +26,6 @@
     "gulp-terser": "^2.1.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "node-sass": "^9.0.0",
-    "terser": "^5.19.2",
-    "webpack-stream": "^7.0.0"
+    "terser": "^5.19.2"
   }
 }

src/scss/app.scss

@@ -161,12 +161,12 @@ article {
     font-size: 32px;
     margin: 50px 0;
   }
-
+  
   abbr {
     text-decoration: none;
     border-bottom: 1px dotted #ffffff;
   }
-
+  
   span.timestamp {
     background: lighten(#333333, 12.5%);
     border-radius: 2px;
@@ -210,29 +210,4 @@ code[class*="language-"] {
 
 div.alert *:last-child {
   margin-bottom: 0 !important;
-}
-
-#blog_loading_spinner {
-  margin: 20px;
-
-  &.removed {
-    animation: spinner-removed 2s ease-in-out;
-  }
-}
-
-@keyframes spinner-removed {
-  0% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scaleY(1);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleY(0);
-    opacity: 0;
-  }
 }

src/ts/API.ts

@@ -1,27 +0,0 @@
-import BlogPost from "./BlogPost";
-import Author from "./Author";
-
-class API {
-    private static readonly BASE_URL: string = "/api";
-    private static readonly BLOG_URL: string = "/blog";
-
-    static async getBlogPostCount(): Promise<number> {
-        const response = await fetch(`${API.BASE_URL + API.BLOG_URL}/count`);
-        const text = await response.text();
-        return JSON.parse(text).count;
-    }
-    
-    static async getBlogPosts(skip: number, take: number): Promise<BlogPost[]> {
-        const response = await fetch(`${API.BASE_URL + API.BLOG_URL}/all/${skip}/${take}`);
-        const text = await response.text();
-        return JSON.parse(text).map(obj => new BlogPost(obj));
-    }
-    
-    static async getAuthor(id: number): Promise<Author> {
-        const response = await fetch(`${API.BASE_URL + API.BLOG_URL}/author/${id}`);
-        const text = await response.text();
-        return new Author(JSON.parse(text));
-    }
-}
-
-export default API;

src/ts/Author.ts

@@ -1,18 +0,0 @@
-class Author {
-    private _name: string;
-    private _avatarHash: string;
-
-    constructor(json: any) {
-        this._name = json.name;
-        this._avatarHash = json.avatarHash;
-    }
-
-    get name(): string {
-        return this._name;
-    }
-
-    get avatarHash(): string {
-        return this._avatarHash;
-    }
-}
-export default Author;

src/ts/BlogPost.ts

@@ -1,67 +0,0 @@
-class BlogPost {
-    private readonly _id: number;
-    private readonly _commentsEnabled: boolean;
-    private readonly _title: string;
-    private readonly _excerpt: string;
-    private readonly _authorId: number;
-    private readonly _published: Date;
-    private readonly _updated?: Date;
-    private readonly _url: string;
-    private readonly _trimmed: boolean;
-    private readonly _identifier: string;
-
-    constructor(json: any) {
-        this._id = json.id;
-        this._commentsEnabled = json.commentsEnabled;
-        this._title = json.title;
-        this._excerpt = json.excerpt;
-        this._authorId = parseInt(json.author);
-        this._published = new Date(json.published * 1000);
-        this._updated = (json.updated && new Date(json.updated * 1000)) || null;
-        this._url = json.url;
-        this._trimmed = json.trimmed;
-        this._identifier = json.identifier;
-    }
-
-    get id(): number {
-        return this._id;
-    }
-
-    get commentsEnabled(): boolean {
-        return this._commentsEnabled;
-    }
-
-    get title(): string {
-        return this._title;
-    }
-
-    get excerpt(): string {
-        return this._excerpt;
-    }
-
-    get authorId(): number {
-        return this._authorId;
-    }
-
-    get published(): Date {
-        return this._published;
-    }
-
-    get updated(): Date {
-        return this._updated;
-    }
-
-    get url(): string {
-        return this._url;
-    }
-
-    get trimmed(): boolean {
-        return this._trimmed;
-    }
-
-    get identifier(): string {
-        return this._identifier;
-    }
-}
-
-export default BlogPost;

src/ts/TimeUtility.ts

@@ -1,38 +0,0 @@
-class TimeUtility {
-    public static formatRelativeTimestamp(timestamp: Date) {
-        const now = new Date();
-        // @ts-ignore
-        const diff = now - timestamp;
-        const suffix = diff < 0 ? 'from now' : 'ago';
-
-        const seconds = Math.floor(diff / 1000);
-        if (seconds < 60) {
-            return `${seconds} second${seconds !== 1 ? 's' : ''} ${suffix}`;
-        }
-
-        const minutes = Math.floor(diff / 60000);
-        if (minutes < 60) {
-            return `${minutes} minute${minutes !== 1 ? 's' : ''} ${suffix}`;
-        }
-
-        const hours = Math.floor(diff / 3600000);
-        if (hours < 24) {
-            return `${hours} hour${hours !== 1 ? 's' : ''} ${suffix}`;
-        }
-
-        const days = Math.floor(diff / 86400000);
-        if (days < 30) {
-            return `${days} day${days !== 1 ? 's' : ''} ${suffix}`;
-        }
-
-        const months = Math.floor(diff / 2592000000);
-        if (months < 12) {
-            return `${months} month${months !== 1 ? 's' : ''} ${suffix}`;
-        }
-
-        const years = Math.floor(diff / 31536000000);
-        return `${years} year${years !== 1 ? 's' : ''} ${suffix}`;
-    };
-}
-
-export default TimeUtility;

src/ts/app.ts

@@ -1,102 +1,7 @@
-import API from "./API";
-import TimeUtility from "./TimeUtility";
-
 declare const bootstrap: any;
 declare const katex: any;
 
 (() => {
-    const blogPostContainer = document.querySelector("#all_blog_posts");
-    if (blogPostContainer) {
-        API.getBlogPostCount().then(async (count) => {
-            for (let i = 0; i < count; i++) {
-                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 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);
-                }
-
-                i += 4;
-            }
-            
-            const disqusCounter = document.createElement("script");
-            disqusCounter.id = "dsq-count-scr";
-            disqusCounter.src = "https://oliverbooth-dev.disqus.com/count.js";
-            disqusCounter.async = true;
-
-            const spinner = document.querySelector("#blog_loading_spinner");
-            if (spinner) {
-                spinner.classList.add("removed");
-                setTimeout(() => spinner.remove(), 1100);
-            }
-        });
-    }
-
     const formatRelativeTime = function (timestamp) {
         const now = new Date();
         // @ts-ignore

tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["ES2020", "DOM"],
-    "target": "ES2020"
-  }
-}