Improved ArticleView

Wave/Components/Pages/ArticleView.razor

@@ -1,22 +1,37 @@
 @page "/article/{id:guid}"
 @using Microsoft.EntityFrameworkCore
 @using Wave.Data
+@using Humanizer
+@using System.Globalization
 
 @inject IDbContextFactory<ApplicationDbContext> ContextFactory;
 
 <PageTitle>Wave - @Article.Title</PageTitle>
 
-<h1 class="text-3xl lg:text-5xl font-light mb-6">@Article.Title</h1>
+<h1 class="text-3xl lg:text-5xl font-light">@Article.Title</h1>
-<div class="flex gap-2 mb-6">
+<p class="mb-6">
+    <small class="text-sm text-neutral-content">
+        @Article.PublishDate.Humanize()
+        @if (Article.LastModified is not null) {
+            <text>&ensp;(Modified @Article.LastModified.Humanize())</text>
+        }
+    </small>
+</p>
+
+<hr class="my-3" />
+
+<div class="prose mb-6">
+    @Content
+</div>
+
+
+<div class="flex gap-2">
     <ProfilePill Profile="Article.Author" RoleTag="Author" />
     @if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
         <ProfilePill Profile="Article.Reviewer" RoleTag="Reviewer" />
     }
 </div>
 
-<div class="prose">
-    @Content
-</div>
 
 @code {
     [Parameter]

Wave/Wave.csproj

@@ -10,6 +10,9 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Humanizer.Core" Version="2.14.1" />
+    <PackageReference Include="Humanizer.Core.de" Version="2.14.1" />
+    <PackageReference Include="Humanizer.Core.uk" Version="2.14.1" />
     <PackageReference Include="Magick.NET-Q8-AnyCPU" Version="13.5.0" />
     <PackageReference Include="Markdig" Version="0.34.0" />
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />

Wave/package.json

@@ -7,6 +7,7 @@
     "author": "Mia Rose Winter",
     "license": "MIT",
     "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "autoprefixer": "^10.4.16",
         "cssnano": "^6.0.3",
         "daisyui": "^4.6.0",

Wave/tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
 
         }
     },
-    plugins: [require("daisyui")],
+    plugins: [require("daisyui"), require('@tailwindcss/typography')],
     daisyui: {
         logs: false,
         themes: [