refactor: render katex in delegate. window.onload is redundant

OliverBooth/Pages/Blog/RawArticle.cshtml

@@ -0,0 +1,2 @@
+@page "/blog/{year:int}/{month:int}/{day:int}/{slug}/raw"
+@model OliverBooth.Pages.Blog.RawArticle

OliverBooth/Pages/Blog/RawArticle.cshtml.cs

@@ -0,0 +1,52 @@
+using Cysharp.Text;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using OliverBooth.Data.Blog;
+using OliverBooth.Services;
+
+namespace OliverBooth.Pages.Blog;
+
+/// <summary>
+///     Represents the page model for the <c>RawArticle</c> page.
+/// </summary>
+public class RawArticle : PageModel
+{
+    private readonly BlogService _blogService;
+
+    /// <summary>
+    ///     Initializes a new instance of the <see cref="RawArticle" /> class.
+    /// </summary>
+    /// <param name="blogService">The <see cref="BlogService" />.</param>
+    public RawArticle(BlogService blogService)
+    {
+        _blogService = blogService;
+    }
+
+    /// <summary>
+    ///     Gets the requested blog post.
+    /// </summary>
+    /// <value>The requested blog post.</value>
+    public BlogPost Post { get; private set; } = null!;
+
+    public IActionResult OnGet(int year, int month, int day, string slug)
+    {
+        if (!_blogService.TryGetBlogPost(year, month, day, slug, out BlogPost? post))
+        {
+            Response.StatusCode = 404;
+            return NotFound();
+        }
+        
+        using Utf8ValueStringBuilder builder = ZString.CreateUtf8StringBuilder();
+        builder.AppendLine("# " + post.Title);
+        if (_blogService.TryGetAuthor(post, out Author? author))
+            builder.AppendLine($"Author: {author.Name}");
+        
+        builder.AppendLine($"Published: {post.Published:R}");
+        if (post.Updated.HasValue)
+            builder.AppendLine($"Updated: {post.Updated:R}");
+        
+        builder.AppendLine();
+        builder.AppendLine(post.Body);
+        return Content(builder.ToString(), "text/plain");
+    }
+}

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -59,7 +59,11 @@
 
 <footer class="footer text-muted">
     <div class="container text-center">
-        &copy; @DateTime.UtcNow.Year &bullet; <a asp-area="" asp-page="/privacy/index">Privacy</a>
+        &copy; @DateTime.UtcNow.Year
+        &bullet;
+        <a asp-area="" asp-page="/privacy/index">Privacy</a>
+        &bullet;
+        <a href="https://mastodon.olivr.me/@@oliver" rel="me">Mastodon</a>
     </div>
 </footer>
 

OliverBooth/Program.cs

@@ -16,19 +16,11 @@ builder.Services.AddSingleton<ConfigurationService>();
 builder.Services.AddSingleton<TemplateService>();
 
 builder.Services.AddSingleton(provider => new MarkdownPipelineBuilder()
-    .UseAbbreviations()
+    .Use(new TemplateExtension(provider.GetRequiredService<TemplateService>()))
     .UseAdvancedExtensions()
     .UseBootstrap()
-    .UseCitations()
-    .UseDiagrams()
-    .UseFigures()
-    .UseFooters()
-    .UseFootnotes()
-    .UseGlobalization()
-    .UseMathematics()
-    .UseAutoIdentifiers()
-    .UseAutoLinks()
-    .Use(new TemplateExtension(provider.GetRequiredService<TemplateService>()))
+    .UseEmojiAndSmiley()
+    .UseSmartyPants()
     .Build());
 
 builder.Services.AddDbContextFactory<BlogContext>();

src/scss/app.scss

@@ -136,6 +136,18 @@ nav {
 }
 
 article {
+  background: #333333;
+  padding: 20px;
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    border-left: 2px solid #f03;
+    padding-left: 10px;
+  }
+
   p > img.img-fluid {
     text-align: center;
   }
@@ -149,6 +161,11 @@ article {
     font-size: 32px;
     margin: 50px 0;
   }
+  
+  abbr {
+    text-decoration: none;
+    border-bottom: 1px dotted #ffffff;
+  }
 }
 
 .blog-card {
@@ -157,6 +174,11 @@ article {
   &:hover {
     transform: scale(1.05);
   }
+
+  article {
+    background: none;
+    padding: 0;
+  }
 }
 
 pre {
@@ -180,11 +202,6 @@ code[class*="language-"] {
   color-scheme: light;
 }
 
-article blockquote {
-  border-left: 2px solid #f03;
-  padding-left: 10px;
-}
-
 div.alert *:last-child {
   margin-bottom: 0 !important;
 }

src/ts/app.ts

@@ -26,14 +26,12 @@ declare const katex: any;
     const list = document.querySelectorAll('[data-bs-toggle="tooltip"]');
     list.forEach((el: Element) => new bootstrap.Tooltip(el));
 
-    window.onload = function () {
-        const tex = document.getElementsByClassName("math");
-        Array.prototype.forEach.call(tex, function (el) {
-            let content = el.textContent.trim();
-            if (content.startsWith("\\[")) content = content.slice(2);
-            if (content.endsWith("\\]")) content = content.slice(0, -2);
+    const tex = document.getElementsByClassName("math");
+    Array.prototype.forEach.call(tex, function (el) {
+        let content = el.textContent.trim();
+        if (content.startsWith("\\[")) content = content.slice(2);
+        if (content.endsWith("\\]")) content = content.slice(0, -2);
 
-            katex.render(content, el);
-        });
-    };
+        katex.render(content, el);
+    });
 })();