OliverBooth/Markdown/Timestamp/TimestampExtension.cs

@@ -1,25 +0,0 @@
-using Markdig;
-using Markdig.Renderers;
-
-namespace OliverBooth.Markdown.Timestamp;
-
-/// <summary>
-///     Represents a Markdig extension that supports Discord-style timestamps.
-/// </summary>
-public class TimestampExtension : IMarkdownExtension
-{
-    /// <inheritdoc />
-    public void Setup(MarkdownPipelineBuilder pipeline)
-    {
-        pipeline.InlineParsers.AddIfNotAlready<TimestampInlineParser>();
-    }
-
-    /// <inheritdoc />
-    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
-    {
-        if (renderer is HtmlRenderer htmlRenderer)
-        {
-            htmlRenderer.ObjectRenderers.AddIfNotAlready<TimestampRenderer>();
-        }
-    }
-}

OliverBooth/Markdown/Timestamp/TimestampFormat.cs

@@ -1,42 +0,0 @@
-namespace OliverBooth.Markdown.Timestamp;
-
-/// <summary>
-///     An enumeration of timestamp formats.
-/// </summary>
-public enum TimestampFormat
-{
-    /// <summary>
-    ///     Short time format. Example: 12:00
-    /// </summary>
-    ShortTime = 't',
-
-    /// <summary>
-    ///     Long time format. Example: 12:00:00
-    /// </summary>
-    LongTime = 'T',
-
-    /// <summary>
-    ///     Short date format. Example: 1/1/2000
-    /// </summary>
-    ShortDate = 'd',
-
-    /// <summary>
-    ///     Long date format. Example: 1 January 2000
-    /// </summary>
-    LongDate = 'D',
-
-    /// <summary>
-    ///     Short date/time format. Example: 1 January 2000 at 12:00
-    /// </summary>
-    LongDateShortTime = 'f',
-
-    /// <summary>
-    ///     Long date/time format. Example: Saturday, 1 January 2000 at 12:00
-    /// </summary>
-    LongDateTime = 'F',
-
-    /// <summary>
-    ///     Relative date/time format. Example: 1 second ago
-    /// </summary>
-    Relative = 'R',
-}

OliverBooth/Markdown/Timestamp/TimestampInline.cs

@@ -1,21 +0,0 @@
-using Markdig.Syntax.Inlines;
-
-namespace OliverBooth.Markdown.Timestamp;
-
-/// <summary>
-///     Represents a Markdown inline element that contains a timestamp.
-/// </summary>
-public sealed class TimestampInline : Inline
-{
-    /// <summary>
-    ///     Gets or sets the format.
-    /// </summary>
-    /// <value>The format.</value>
-    public TimestampFormat Format { get; set; }
-
-    /// <summary>
-    ///     Gets or sets the timestamp.
-    /// </summary>
-    /// <value>The timestamp.</value>
-    public DateTimeOffset Timestamp { get; set; }
-}

OliverBooth/Markdown/Timestamp/TimestampInlineParser.cs

@@ -1,91 +0,0 @@
-using Markdig.Helpers;
-using Markdig.Parsers;
-
-namespace OliverBooth.Markdown.Timestamp;
-
-/// <summary>
-///     Represents a Markdown inline parser that matches Discord-style timestamps.
-/// </summary>
-public sealed class TimestampInlineParser : InlineParser
-{
-    /// <summary>
-    ///     Initializes a new instance of the <see cref="TimestampInlineParser" /> class.
-    /// </summary>
-    public TimestampInlineParser()
-    {
-        OpeningCharacters = new[] { '<' };
-    }
-
-    /// <inheritdoc />
-    public override bool Match(InlineProcessor processor, ref StringSlice slice)
-    {
-        // Previous char must be a space
-        if (!slice.PeekCharExtra(-1).IsWhiteSpaceOrZero())
-        {
-            return false;
-        }
-
-        ReadOnlySpan<char> span = slice.Text.AsSpan(slice.Start, slice.Length);
-
-        if (!TryConsumeTimestamp(span, out ReadOnlySpan<char> rawTimestamp, out char format))
-        {
-            return false;
-        }
-
-        if (!long.TryParse(rawTimestamp, out long timestamp))
-        {
-            return false;
-        }
-
-        bool hasFormat = format != '\0';
-        processor.Inline = new TimestampInline
-        {
-            Format = (TimestampFormat)format,
-            Timestamp = DateTimeOffset.FromUnixTimeSeconds(timestamp)
-        };
-
-        int paddingCount = hasFormat ? 6 : 4; // <t:*> or optionally <t:*:*>
-        slice.Start += rawTimestamp.Length + paddingCount;
-        return true;
-    }
-
-    private bool TryConsumeTimestamp(ReadOnlySpan<char> source,
-        out ReadOnlySpan<char> timestamp,
-        out char format)
-    {
-        timestamp = default;
-        format = default;
-
-        if (!source.StartsWith("<t:")) return false;
-        timestamp = source[3..];
-
-        if (timestamp.IndexOf('>') == -1)
-        {
-            timestamp = default;
-            return false;
-        }
-
-        int delimiterIndex = timestamp.IndexOf(':');
-        if (delimiterIndex == 0)
-        {
-            // invalid format <t::*>
-            timestamp = default;
-            return false;
-        }
-
-        if (delimiterIndex == -1)
-        {
-            // no format, default to relative
-            format = 'R';
-            timestamp = timestamp[..^1]; // trim >
-        }
-        else
-        {
-            // use specified format
-            format = timestamp[^2];
-            timestamp = timestamp[..^3];
-        }
-
-        return true;
-    }
-}

OliverBooth/Markdown/Timestamp/TimestampRenderer.cs

@@ -1,55 +0,0 @@
-using System.ComponentModel;
-using Humanizer;
-using Markdig.Renderers;
-using Markdig.Renderers.Html;
-
-namespace OliverBooth.Markdown.Timestamp;
-
-/// <summary>
-///     Represents a Markdown object renderer that renders <see cref="TimestampInline" /> elements.
-/// </summary>
-public sealed class TimestampRenderer : HtmlObjectRenderer<TimestampInline>
-{
-    /// <inheritdoc />
-    protected override void Write(HtmlRenderer renderer, TimestampInline obj)
-    {
-        DateTimeOffset timestamp = obj.Timestamp;
-        TimestampFormat format = obj.Format;
-
-        renderer.Write("<span class=\"timestamp\" data-timestamp=\"");
-        renderer.Write(timestamp.ToUnixTimeSeconds().ToString());
-        renderer.Write("\" data-format=\"");
-        renderer.Write(((char)format).ToString());
-        renderer.Write("\" title=\"");
-        renderer.WriteEscape(timestamp.ToString("dddd, d MMMM yyyy HH:mm"));
-        renderer.Write("\">");
-
-        switch (format)
-        {
-            case TimestampFormat.LongDate:
-                renderer.Write(timestamp.ToString("d MMMM yyyy"));
-                break;
-
-            case TimestampFormat.LongDateShortTime:
-                renderer.Write(timestamp.ToString(@"d MMMM yyyy \a\t HH:mm"));
-                break;
-
-            case TimestampFormat.LongDateTime:
-                renderer.Write(timestamp.ToString(@"dddd, d MMMM yyyy \a\t HH:mm"));
-                break;
-
-            case TimestampFormat.Relative:
-                renderer.Write(timestamp.Humanize());
-                break;
-
-            case var _ when !Enum.IsDefined(format):
-                throw new InvalidEnumArgumentException(nameof(format), (int)format, typeof(TimestampFormat));
-
-            default:
-                renderer.Write(timestamp.ToString(((char)format).ToString()));
-                break;
-        }
-
-        renderer.Write("</span>");
-    }
-}

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="~/css/prism.min.css" asp-append-version="true"/>
     <link rel="stylesheet" href="~/css/prism.vs.min.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true"/>
+    <link rel="stylesheet" href="~/oliverbooth.dev.styles.css" asp-append-version="true"/>
 </head>
 <body>
 <header class="container" style="margin-top: 20px;">

OliverBooth/Program.cs

@@ -2,7 +2,6 @@ using Markdig;
 using NLog.Extensions.Logging;
 using OliverBooth.Data;
 using OliverBooth.Markdown;
-using OliverBooth.Markdown.Timestamp;
 using OliverBooth.Middleware;
 using OliverBooth.Services;
 using X10D.Hosting.DependencyInjection;
@@ -17,7 +16,6 @@ builder.Services.AddSingleton<ConfigurationService>();
 builder.Services.AddSingleton<TemplateService>();
 
 builder.Services.AddSingleton(provider => new MarkdownPipelineBuilder()
-    .Use<TimestampExtension>()
     .Use(new TemplateExtension(provider.GetRequiredService<TemplateService>()))
     .UseAdvancedExtensions()
     .UseBootstrap()

OliverBooth/tsconfig.json

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

src/scss/app.scss

@@ -166,12 +166,6 @@ article {
     text-decoration: none;
     border-bottom: 1px dotted #ffffff;
   }
-  
-  span.timestamp {
-    background: lighten(#333333, 12.5%);
-    border-radius: 2px;
-    padding: 2px;
-  }
 }
 
 .blog-card {

src/ts/app.ts

@@ -1,45 +1,10 @@
-declare const bootstrap: any;
+declare const bootstrap: any;
 declare const katex: any;
 
 (() => {
-    const formatRelativeTime = function (timestamp) {
-        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}`;
-    };
-
     document.querySelectorAll("pre code").forEach((block) => {
         let content = block.textContent;
-        if (content.trim().split("\n").length > 1) {
+        if (content.split("\n").length > 1) {
             block.parentElement.classList.add("line-numbers");
         }
 
@@ -51,6 +16,16 @@ declare const katex: any;
         block.innerHTML = content;
     });
 
+    document.querySelectorAll("[title]").forEach((img) => {
+        img.setAttribute("data-bs-toggle", "tooltip");
+        img.setAttribute("data-bs-placement", "bottom");
+        img.setAttribute("data-bs-html", "true");
+        img.setAttribute("data-bs-title", img.getAttribute("title"));
+    });
+
+    const list = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    list.forEach((el: Element) => new bootstrap.Tooltip(el));
+
     const tex = document.getElementsByClassName("math");
     Array.prototype.forEach.call(tex, function (el) {
         let content = el.textContent.trim();
@@ -59,60 +34,4 @@ declare const katex: any;
 
         katex.render(content, el);
     });
-
-    const timestamps = document.querySelectorAll("span[data-timestamp][data-format]");
-    timestamps.forEach((timestamp) => {
-        const seconds = parseInt(timestamp.getAttribute("data-timestamp"));
-        const format = timestamp.getAttribute("data-format");
-        const date = new Date(seconds * 1000);
-
-        const shortTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
-        const shortDateString = date.toLocaleDateString([], {day: "2-digit", month: "2-digit", year: "numeric"});
-        const longTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", second: "2-digit"});
-        const longDateString = date.toLocaleDateString([], {day: "numeric", month: "long", year: "numeric"});
-        const weekday = date.toLocaleString([], {weekday: "long"});
-        timestamp.setAttribute("title", `${weekday}, ${longDateString} ${shortTimeString}`);
-
-        switch (format) {
-            case "t":
-                timestamp.textContent = shortTimeString;
-                break;
-
-            case "T":
-                timestamp.textContent = longTimeString;
-                break;
-
-            case "d":
-                timestamp.textContent = shortDateString;
-                break;
-
-            case "D":
-                timestamp.textContent = longDateString;
-                break;
-
-            case "f":
-                timestamp.textContent = `${longDateString} at ${shortTimeString}`
-                break;
-
-            case "F":
-                timestamp.textContent = `${weekday}, ${longDateString} at ${shortTimeString}`
-                break;
-
-            case "R":
-                setInterval(() => {
-                    timestamp.textContent = formatRelativeTime(date);
-                }, 1000);
-                break;
-        }
-    });
-
-    document.querySelectorAll("[title]").forEach((el) => {
-        el.setAttribute("data-bs-toggle", "tooltip");
-        el.setAttribute("data-bs-placement", "bottom");
-        el.setAttribute("data-bs-html", "true");
-        el.setAttribute("data-bs-title", el.getAttribute("title"));
-    });
-
-    const list = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    list.forEach((el: Element) => new bootstrap.Tooltip(el));
 })();