feat: add support for Discord-style timestamps

OliverBooth/Markdown/Timestamp/TimestampExtension.cs

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,55 @@
+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,7 +16,6 @@
     <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,6 +2,7 @@ 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;
@@ -16,6 +17,7 @@ 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": "es6"
+    "target": "es2020"
   }
 }

src/scss/app.scss

@@ -166,6 +166,12 @@ 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,10 +1,45 @@
-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.split("\n").length > 1) {
+        if (content.trim().split("\n").length > 1) {
             block.parentElement.classList.add("line-numbers");
         }
 
@@ -16,16 +51,6 @@ 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();
@@ -34,4 +59,60 @@ 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));
 })();