Merge branch 'main' into feature/tutorials

OliverBooth/Controllers/FormattedBlacklist.cs

@@ -1,5 +1,4 @@
 using System.Text;
-using System.Text.Json;
 using Microsoft.AspNetCore.Mvc;
 using OliverBooth.Data.Web;
 using OliverBooth.Services;

OliverBooth/Data/Mastodon/AttachmentType.cs

@@ -0,0 +1,10 @@
+namespace OliverBooth.Data.Mastodon;
+
+public enum AttachmentType
+{
+    Unknown,
+    Image,
+    GifV,
+    Video,
+    Audio
+}

OliverBooth/Data/Mastodon/MastodonStatus.cs

@@ -0,0 +1,34 @@
+using System.Text.Json.Serialization;
+
+namespace OliverBooth.Data.Mastodon;
+
+public sealed class MastodonStatus
+{
+    /// <summary>
+    ///     Gets the content of the status.
+    /// </summary>
+    /// <value>The content.</value>
+    [JsonPropertyName("content")]
+    public string Content { get; set; } = string.Empty;
+
+    /// <summary>
+    ///     Gets the date and time at which this status was posted.
+    /// </summary>
+    /// <value>The post timestamp.</value>
+    [JsonPropertyName("created_at")]
+    public DateTimeOffset CreatedAt { get; set; }
+
+    /// <summary>
+    ///     Gets the media attachments for this status.
+    /// </summary>
+    /// <value>The media attachments.</value>
+    [JsonPropertyName("media_attachments")]
+    public IReadOnlyList<MediaAttachment> MediaAttachments { get; set; } = ArraySegment<MediaAttachment>.Empty; 
+
+    /// <summary>
+    ///     Gets the original URI of the status.
+    /// </summary>
+    /// <value>The original URI.</value>
+    [JsonPropertyName("url")]
+    public Uri OriginalUri { get; set; } = null!;
+}

OliverBooth/Data/Mastodon/MediaAttachment.cs

@@ -0,0 +1,22 @@
+namespace OliverBooth.Data.Mastodon;
+
+public sealed class MediaAttachment
+{
+    /// <summary>
+    ///     Gets the preview URL of the attachment.
+    /// </summary>
+    /// <value>The preview URL.</value>
+    public Uri PreviewUrl { get; set; } = null!;
+
+    /// <summary>
+    ///     Gets the type of this attachment.
+    /// </summary>
+    /// <value>The attachment type.</value>
+    public AttachmentType Type { get; set; } = AttachmentType.Unknown;
+
+    /// <summary>
+    ///     Gets the URL of the attachment.
+    /// </summary>
+    /// <value>The URL.</value>
+    public Uri Url { get; set; } = null!;
+}

OliverBooth/Data/Web/Book.cs

@@ -2,7 +2,6 @@ using NetBarcode;
 using SixLabors.ImageSharp;
 using SixLabors.ImageSharp.Formats.Png;
 using SixLabors.ImageSharp.Processing;
-using Type = System.Type;
 
 namespace OliverBooth.Data.Web;
 

OliverBooth/Data/Web/IBook.cs

@@ -1,5 +1,3 @@
-using SixLabors.ImageSharp;
-
 namespace OliverBooth.Data.Web;
 
 /// <summary>

OliverBooth/Pages/Blog/Index.cshtml

@@ -1,10 +1,44 @@
 @page
+@using Humanizer
+@using OliverBooth.Data.Mastodon
+@using OliverBooth.Services
 @model Index
+@inject IMastodonService MastodonService
 
 @{
     ViewData["Title"] = "Blog";
+    MastodonStatus latestStatus = MastodonService.GetLatestStatus();
 }
 
+<div class="card text-center mastodon-update-card">
+    <div class="card-body">
+        @Html.Raw(latestStatus.Content)
+        @foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
+        {
+            switch (attachment.Type)
+            {
+                case AttachmentType.Audio:
+                    <p><audio controls="controls" src="@attachment.Url"></audio></p>
+                    break;
+
+                case AttachmentType.Video:
+                    <p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
+                    break;
+
+                case AttachmentType.Image:
+                case AttachmentType.GifV:
+                    <p><img class="figure-img img-fluid" src="@attachment.Url"></p>
+                    break;
+            }
+        }
+    </div>
+    <div class="card-footer text-muted">
+        <abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
+        &bull;
+        <a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
+    </div>
+</div>
+
 <div id="all-blog-posts">
     @await Html.PartialAsync("_LoadingSpinner")
 </div>

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -94,9 +94,17 @@
 
 <div style="margin:50px 0;"></div>
 
+@if (DateTimeOffset.UtcNow < new DateTime(2024, 03, 08))
+{
     <div id="usa-countdown" class="container">
-    <p>00 : 00 : 00 : 00</p>
+        <div class="row">
+            <div class="col-3 usa-countdown-element" id="usa-countdown-days">00</div>
+            <div class="col-3 usa-countdown-element" id="usa-countdown-hours">00</div>
+            <div class="col-3 usa-countdown-element" id="usa-countdown-minutes">00</div>
+            <div class="col-3 usa-countdown-element" id="usa-countdown-seconds">00</div>
         </div>
+    </div>
+}
 
 <div style="margin:50px 0;"></div>
 

OliverBooth/Program.cs

@@ -32,11 +32,13 @@ builder.Services.AddSingleton(provider => new MarkdownPipelineBuilder()
 
 builder.Services.AddDbContextFactory<BlogContext>();
 builder.Services.AddDbContextFactory<WebContext>();
+builder.Services.AddHttpClient();
 builder.Services.AddSingleton<IContactService, ContactService>();
 builder.Services.AddSingleton<ITemplateService, TemplateService>();
 builder.Services.AddSingleton<IBlogPostService, BlogPostService>();
 builder.Services.AddSingleton<IBlogUserService, BlogUserService>();
 builder.Services.AddSingleton<IProjectService, ProjectService>();
+builder.Services.AddSingleton<IMastodonService, MastodonService>();
 builder.Services.AddSingleton<ITutorialService, TutorialService>();
 builder.Services.AddSingleton<IReadingListService, ReadingListService>();
 builder.Services.AddRazorPages().AddRazorRuntimeCompilation();

OliverBooth/Services/IMastodonService.cs

@@ -0,0 +1,12 @@
+using OliverBooth.Data.Mastodon;
+
+namespace OliverBooth.Services;
+
+public interface IMastodonService
+{
+    /// <summary>
+    ///     Gets the latest status posted to Mastodon.
+    /// </summary>
+    /// <returns>The latest status.</returns>
+    MastodonStatus GetLatestStatus();
+}

OliverBooth/Services/MastodonService.cs

@@ -0,0 +1,35 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+using OliverBooth.Data.Mastodon;
+
+namespace OliverBooth.Services;
+
+internal sealed class MastodonService : IMastodonService
+{
+    private static readonly JsonSerializerOptions JsonSerializerOptions = new()
+    {
+        Converters = { new JsonStringEnumConverter() },
+        PropertyNamingPolicy = JsonNamingPolicy.SnakeCaseLower
+    };
+    private readonly HttpClient _httpClient;
+
+    public MastodonService(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    /// <inheritdoc />
+    public MastodonStatus GetLatestStatus()
+    {
+        string token = Environment.GetEnvironmentVariable("MASTODON_TOKEN") ?? string.Empty;
+        string account = Environment.GetEnvironmentVariable("MASTODON_ACCOUNT") ?? string.Empty;
+        using var request = new HttpRequestMessage();
+        request.Headers.Add("Authorization", $"Bearer {token}");
+        request.RequestUri = new Uri($"https://mastodon.olivr.me/api/v1/accounts/{account}/statuses");
+
+        using HttpResponseMessage response = _httpClient.Send(request);
+        using var stream = response.Content.ReadAsStream();
+        var statuses = JsonSerializer.Deserialize<MastodonStatus[]>(stream, JsonSerializerOptions);
+        return statuses?[0]!;
+    }
+}

docker-compose.yml

@@ -19,3 +19,5 @@ services:
     environment:
       - SSL_CERT_PATH=${SSL_CERT_PATH}
       - SSL_KEY_PATH=${SSL_KEY_PATH}
+      - MASTODON_TOKEN=${MASTODON_TOKEN}
+      - MASTODON_ACCOUNT=${MASTODON_ACCOUNT}

src/scss/app.scss

@@ -365,25 +365,27 @@ td.trim-p p:last-child {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  border-radius: 10px;
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
 
-  p {
+  .usa-countdown-element {
+    margin: 10px 0;
+    padding: 5px;
     font-family: "Gabarito", sans-serif;
     font-weight: 500;
     text-align: center;
     font-size: 3em;
-    margin: 0;
-    padding: 0;
+    border-right: 2px solid #fff;
+    border-left: 2px solid #fff;
 
-    a {
-      transition: color 250ms;
+    &:first-child {
+      border-left: none;
     }
-
-    a:link, a:visited, a:active {
-      color: #fff;
-    }
-
-    a:hover {
-      color: #03A9F4;
+    &:last-child {
+      border-right: none;
     }
   }
 }
@@ -401,3 +403,16 @@ td.trim-p p:last-child {
     background-color: #1E1E1E !important;
   }
 }
+
+.mastodon-update-card.card {
+  background-color: desaturate(darken(#6364FF, 50%), 50%);
+  margin-bottom: 50px;
+  
+  p:last-child {
+    margin-bottom: 0;
+  }
+  
+  button.btn.btn-mastodon {
+    background-color: #6364FF;
+  }
+}

src/ts/UI.ts

@@ -82,6 +82,33 @@ class UI {
         UI.updateProjectCards(element);
     }
 
+    public static updateUsaCountdown(element?: Element){
+        element = element || document.getElementById("usa-countdown");
+        
+        const daysElement = element.querySelector("#usa-countdown-days");
+        const hoursElement = element.querySelector("#usa-countdown-hours");
+        const minutesElement = element.querySelector("#usa-countdown-minutes");
+        const secondsElement = element.querySelector("#usa-countdown-seconds");
+
+        const start = new Date().getTime();
+        const end = Date.UTC(2024, 2, 7, 13, 20);
+        const diff = end - start;
+        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+        if (days < 0) days = 0
+        if (hours < 0) hours = 0;
+        if (minutes < 0) minutes = 0;
+        if (seconds < 0) seconds = 0;
+
+        daysElement.innerHTML = days.toString().padStart(2, '0');
+        hoursElement.innerHTML = hours.toString().padStart(2, '0');
+        minutesElement.innerHTML = minutes.toString().padStart(2, '0');
+        secondsElement.innerHTML = seconds.toString().padStart(2, '0');
+    }
+
     /**
      * Adds Bootstrap tooltips to all elements with a title attribute.
      * @param element The element to search for elements with a title attribute in.

src/ts/app.ts

@@ -98,26 +98,10 @@ declare const Prism: any;
 
     UI.updateUI();
 
-    setInterval(() => {
-        const countdown = document.querySelector("#usa-countdown p");
-        const start = new Date().getTime();
-        const end = Date.UTC(2024, 2, 7, 13, 20);
-        const diff = end - start;
-        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
-        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-        if (days < 0) days = 0
-        if (hours < 0) hours = 0;
-        if (minutes < 0) minutes = 0;
-        if (seconds < 0) seconds = 0;
-        
-        const blogUrl = '/blog/2024/02/19/the-american';
-        const dayStr = days.toString().padStart(2, '0');
-        const hourStr = hours.toString().padStart(2, '0');
-        const minuteStr = minutes.toString().padStart(2, '0');
-        const secondStr = seconds.toString().padStart(2, '0');
-        countdown.innerHTML = `<a href="${blogUrl}">${dayStr} : ${hourStr} : ${minuteStr} : ${secondStr}</a>`;
-    }, 1000);
+    const usaCountdown = document.getElementById("usa-countdown");
+    if (usaCountdown) {
+        usaCountdown.addEventListener("click", () => window.location.href = "/blog/2024/02/19/the-american");
+        UI.updateUsaCountdown(usaCountdown);
+        setInterval(() => UI.updateUsaCountdown(usaCountdown), 1000);
+    }
 })();