From 79f5eaf40b93d64be74d8b4f1ef80d19fadbfbe1 Mon Sep 17 00:00:00 2001
From: Paweł Bernaciak <pawelbernaciak@zohomail.eu>
Date: Fri, 29 Dec 2023 09:41:56 +0100
Subject: Cywilizowany tailwind

---
 CoreWiki/Pages/All.cshtml              | 36 +++++---------
 CoreWiki/Pages/All.cshtml.cs           |  2 +-
 CoreWiki/Pages/Create.cshtml           | 48 +++++++------------
 CoreWiki/Pages/Delete.cshtml           | 41 ++++++----------
 CoreWiki/Pages/Details.cshtml          | 28 ++++++++---
 CoreWiki/Pages/Details.cshtml.cs       | 86 ++++++++++++++++++++++++++++++++--
 CoreWiki/Pages/Edit.cshtml             | 19 ++++----
 CoreWiki/Pages/LatestChanges.cshtml    | 18 ++-----
 CoreWiki/Pages/LatestChanges.cshtml.cs |  7 +--
 CoreWiki/Pages/Shared/_Layout.cshtml   | 78 ++++++++++++++++--------------
 CoreWiki/Pages/_ViewImports.cshtml     |  3 +-
 CoreWiki/Pages/_articleList.cshtml     | 20 ++++++++
 CoreWiki/Pages/_comments.cshtml        | 35 ++++++++++++++
 CoreWiki/Pages/_commentsForm.cshtml    | 32 +++++++++++++
 CoreWiki/Pages/_commentsList.cshtml    | 25 ++++++++++
 15 files changed, 318 insertions(+), 160 deletions(-)
 create mode 100644 CoreWiki/Pages/_articleList.cshtml
 create mode 100644 CoreWiki/Pages/_comments.cshtml
 create mode 100644 CoreWiki/Pages/_commentsForm.cshtml
 create mode 100644 CoreWiki/Pages/_commentsList.cshtml

(limited to 'CoreWiki/Pages')

diff --git a/CoreWiki/Pages/All.cshtml b/CoreWiki/Pages/All.cshtml
index ca06cb5..6e3430e 100644
--- a/CoreWiki/Pages/All.cshtml
+++ b/CoreWiki/Pages/All.cshtml
@@ -5,40 +5,28 @@
     ViewData["Title"] = "All articles";
 }
 
-<h2>All articles</h2>
+<h1>All articles</h1>
 
-@foreach (var item in Model.Articles)
-{
-    <div class="card border-primary my-2 mx-1">
-        <div class="card-body">
-            <h3 class="card-title">
-                <a href="~/@item.Slug">@item.Topic</a>
-            </h3>
-            <h6 class="card-subtitle mb-2 text-muted">
-                <span data-value="@item.Published" class="timeStampValue">@item.Published</span>
-            </h6>
+<partial name="_articleList" model="Model.Articles"/>
 
-            <a class="card-link" asp-page="./Edit" asp-route-slug="@item.Slug">Edit</a>
-            <a class="card-link" asp-page="./Delete" asp-route-slug="@item.Slug">Delete</a>
-        </div>
-    </div>
-}
-
-<div class="col-md-12 d-flex">
-    <nav class="flex-grow-1">
-        <ul class="pagination">
+<div class="col-md-12 flex">
+    <nav class="flex-1">
+        <ul class="flex -space-x-px">
             @for (var i = 1; i <= Model.TotalPages; i++)
             {
                 var i1 = i;
-                <li class="page-item @(i1 == Model.PageNumber ? "active" : "")">
-                    <a class="page-link" asp-page="All" asp-route-PageNumber="@i1" asp-route-PageSize="@Model.PageSize">@i1</a>
+                <li>
+                    <a class="block p-3 text-sm leading-tight border border-gray-300 bg-white @(i1 == Model.PageNumber ? "bg-blue-100 text-blue-700" : "hover:bg-gray-50")"
+                       asp-page="All"
+                       asp-route-PageNumber="@i1"
+                       asp-route-PageSize="@Model.PageSize">@i1</a>
                 </li>
             }
         </ul>
     </nav>
-    <form class="ms-auto" method="get" asp-page="All">
+    <form class="ml-auto" method="get" asp-page="All">
             <input hidden name="@nameof(Model.PageNumber)" value="@Model.PageNumber"/>
-            <select class="form-select" asp-for="@Model.PageSize" onchange="this.form.submit()">
+            <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-3" asp-for="@Model.PageSize" onchange="this.form.submit()">
                 <option value="2">2</option>
                 <option value="10">10</option>
                 <option value="25">25</option>
diff --git a/CoreWiki/Pages/All.cshtml.cs b/CoreWiki/Pages/All.cshtml.cs
index c41e216..d54e75b 100644
--- a/CoreWiki/Pages/All.cshtml.cs
+++ b/CoreWiki/Pages/All.cshtml.cs
@@ -14,7 +14,7 @@ public class All : PageModel
     public int PageNumber { get; set; } = 1;
     [BindProperty(SupportsGet = true)]
     public int PageSize { get; set; } = 25;
-    public IEnumerable<Article>? Articles { get; set; }
+    public IEnumerable<Article> Articles { get; set; }
     public int TotalPages { get; set; }
 
     public All(ApplicationDbContext context)
diff --git a/CoreWiki/Pages/Create.cshtml b/CoreWiki/Pages/Create.cshtml
index 4abbf11..153035a 100644
--- a/CoreWiki/Pages/Create.cshtml
+++ b/CoreWiki/Pages/Create.cshtml
@@ -5,45 +5,33 @@
     ViewData["Title"] = "Create";
 }
 
-<h1>Create</h1>
-
-<h4>Article</h4>
-<hr />
-<div class="row d-flex justify-content-center">
-    <div class="col-md-8">
-        <form method="post">
-            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-            <div class="form-group">
-                <label asp-for="Article.Topic" class="control-label"></label>
-                <input asp-for="Article.Topic" class="form-control" />
-                <span asp-validation-for="Article.Topic" class="text-danger"></span>
-            </div>
-            <div class="form-group">
-                <label asp-for="Article.Content" class="control-label"></label>
-                <textarea asp-for="Article.Content" class="form-control"></textarea>
-                <span asp-validation-for="Article.Content" class="text-danger"></span>
-            </div>
-            <div class="form-group">
-                <input type="submit" value="Create" class="btn btn-primary" />
-            </div>
-        </form>
+<h1>Create Article</h1>
+<form class="space-y-3" method="post">
+    <div asp-validation-summary="ModelOnly" class="text-red-600"></div>
+    <div>
+        <label asp-for="Article.Topic" class="block mb-2 text-sm font-medium text-gray-900"></label>
+        <input asp-for="Article.Topic" class="block bg-gray-50 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 text-sm p-2 w-full"/>
+        <span asp-validation-for="Article.Topic" class="text-red-600"></span>
     </div>
-</div>
-
-<div>
-    <a asp-page="Index">Back to List</a>
-</div>
+    <div>
+        <label asp-for="Article.Content" class="block mb-2 text-sm font-medium text-gray-900"></label>
+        <textarea asp-for="Article.Content"></textarea>
+        <span asp-validation-for="Article.Content" class="text-red-600"></span>
+    </div>
+    <div class="flex space-x-2">
+        <input type="submit" value="Create" class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-1.5 focus:outline-none"/>
+        <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" asp-page="Details">Back to List</a>
+    </div>
+</form>
 
 @section Scripts {
     <script src="~/lib/simplemde/simplemde.min.js"></script>
     <script>
         var simplemde = new SimpleMDE();
     </script>
-    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
-    
 }
 
 @section Styles
 {
     <link href="~/lib/simplemde/simplemde.min.css" rel="stylesheet"/>
-}
+}
\ No newline at end of file
diff --git a/CoreWiki/Pages/Delete.cshtml b/CoreWiki/Pages/Delete.cshtml
index 0b680b8..0c721bd 100644
--- a/CoreWiki/Pages/Delete.cshtml
+++ b/CoreWiki/Pages/Delete.cshtml
@@ -5,30 +5,19 @@
     ViewData["Title"] = "Delete";
 }
 
-<h1>Delete</h1>
-
-<h3>Are you sure you want to delete this?</h3>
-<div>
-    <h4>Article</h4>
-    <hr />
-    <dl class="row">
-        <dt class="col-sm-2">
-            @Html.DisplayNameFor(model => model.Article.Published)
-        </dt>
-        <dd class="col-sm-10">
-            @Html.DisplayFor(model => model.Article.Published)
-        </dd>
-        <dt class="col-sm-2">
-            @Html.DisplayNameFor(model => model.Article.Content)
-        </dt>
-        <dd class="col-sm-10">
-            @Html.DisplayFor(model => model.Article.Content)
-        </dd>
-    </dl>
-    
-    <form method="post">
-        <input type="hidden" asp-for="Article.Slug" />
-        <input type="submit" value="Delete" class="btn btn-danger" /> |
-        <a href="/">Back to Home Page</a>
-    </form>
+<h2 class="mb-3">Are you sure you want to delete this article?</h2>
+<div class="mb-3">
+    <div class="flex flex-col">
+        <span>@Html.DisplayNameFor(model => model.Article.Published)</span>
+        <span>@Html.DisplayFor(model => model.Article.Published)</span>
+    </div>
+    <div class="flex flex-col">
+        <span>@Html.DisplayNameFor(model => model.Article.Content)</span>
+        <span>@Html.DisplayFor(model => model.Article.Content)</span>
+    </div>
 </div>
+<form method="post">
+    <input type="hidden" asp-for="Article.Id"/>
+    <input type="submit" value="Delete" class="text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-1.5 focus:outline-none"/>
+    <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" href="/">Back to Home Page</a>
+</form>
\ No newline at end of file
diff --git a/CoreWiki/Pages/Details.cshtml b/CoreWiki/Pages/Details.cshtml
index 9f48f9f..3b7dff1 100644
--- a/CoreWiki/Pages/Details.cshtml
+++ b/CoreWiki/Pages/Details.cshtml
@@ -5,16 +5,32 @@
     ViewData["Title"] = Model.Article.Topic;
 }
 
-<h1>@Model.Article.Topic</h1>
-<h5>Last Published: <span data-value="@Model.Article.Published" class="timeStampValue">@Model.Article.Published</span></h5>
+<div class="h-full">
+    <h2>@Model.Article.Topic</h2>
+    <p class="text-sm text-gray-500">Last Published: <span data-value="@Model.Article.Published" class="timeStampValue">@Model.Article.Published</span></p>
+    <p class="text-sm text-gray-500">Reading time: @Model.Article.EstimatedReadingTime minutes</p>
+    <p class="text-sm text-gray-500">Views: @Model.Article.ViewCount</p>
 
-<markdown markdown="Article.Content"/>
+    <markdown markdown="Article.Content"/>
+</div>
 
-<div>
-    <a asp-page="./Edit" asp-route-slug="@Model.Article.Slug">Edit</a>
+<div class="mt-4">
+    <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none"
+       asp-page="./Edit"
+       asp-route-slug="@Model.Article.Slug">Edit</a>
     @if (Model.Article.Slug != "home-page")
     {
-        <text>| </text> <a href="~/">Back to Home</a>
+        <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none"
+           href="~/">Back to Home</a>
     }
 </div>
 
+<br/>
+<div class="mt-auto cursor-pointer" x-data="{ formOpen: false, commentsOpen: false }" id="comments">
+    <partial name="_comments" model="@Model"/>
+</div>
+
+@section Styles
+{
+    <link href="~/lib/simplemde/simplemde.min.css" rel="stylesheet"/>
+}
\ No newline at end of file
diff --git a/CoreWiki/Pages/Details.cshtml.cs b/CoreWiki/Pages/Details.cshtml.cs
index e4100ac..bdd576f 100644
--- a/CoreWiki/Pages/Details.cshtml.cs
+++ b/CoreWiki/Pages/Details.cshtml.cs
@@ -6,32 +6,108 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.EntityFrameworkCore;
 using CoreWiki.Models;
+using Htmx;
+using Microsoft.AspNetCore.Http.HttpResults;
+using NodaTime;
 
 namespace CoreWiki.Pages
 {
     public class DetailsModel : PageModel
     {
+        private readonly IClock _clock;
         private readonly ApplicationDbContext _context;
 
-        public DetailsModel(ApplicationDbContext context)
+        public DetailsModel(ApplicationDbContext context, IClock clock)
         {
+            _clock = clock;
             _context = context;
         }
 
-        public Article Article { get; set; } = default!; 
+        private const int CommentsPerPage = 10;
 
-        public async Task<IActionResult> OnGetAsync(string? slug)
+        public Article Article { get; set; } = default!;
+        [BindProperty] public Comment Comment { get; set; }
+
+        public async Task<IActionResult> OnGetAsync(string? slug, [FromQuery] int? pageNumber)
         {
             slug ??= "home-page";
+            var pagesToSkip = CommentsPerPage * ((pageNumber ?? 1) - 1);
 
-            var article = await _context.Articles.FirstOrDefaultAsync(a => a.Slug == slug);
+            var article = await _context.Articles
+                .Include(a => a.Comments
+                    .OrderByDescending(c => c.SubmittedDateTime)
+                    .Skip(pagesToSkip)
+                    .Take(CommentsPerPage))
+                .FirstOrDefaultAsync(a => a.Slug == slug);
             if (article == null)
             {
                 return NotFound();
             }
 
             Article = article;
+            if (Request.Cookies[Article.Slug] == null)
+            {
+                Article.ViewCount++;
+                Response.Cookies.Append(Article.Slug, "viewed", new CookieOptions()
+                {
+                    Expires = DateTime.UtcNow.AddMinutes(5)
+                });
+
+                await _context.SaveChangesAsync();
+            }
+
+            if (Request.IsHtmx() && !Request.IsHtmxBoosted())
+            {
+                return Partial("_commentsList", new ArticleCommentListViewModel
+                {
+                    Comments = Article.Comments,
+                    Slug = slug,
+                    PageNumber = pageNumber ?? 1
+                });
+            }
+
             return Page();
         }
+
+        public async Task<IActionResult> OnPostAsync(string? slug)
+        {
+            slug ??= "home-page";
+            var article = await _context.Articles.FirstOrDefaultAsync(a => a.Slug == slug);
+            if (article == null)
+            {
+                return NotFound();
+            }
+
+            Article = article;
+
+            ModelState.Remove("Comment.Article");
+            if (!ModelState.IsValid)
+            {
+                if (Request.IsHtmx() && !Request.IsHtmxBoosted())
+                {
+                    return Partial("_commentsForm", this);
+                }
+
+                return Page();
+            }
+
+            Comment.Submitted = _clock.GetCurrentInstant();
+            article.Comments.Add(Comment);
+            await _context.SaveChangesAsync();
+
+            if (Request.IsHtmx() && !Request.IsHtmxBoosted())
+            {
+                Response.Htmx(h => { h.WithTrigger("commentsChanged"); });
+
+                Comment.DisplayName = String.Empty;
+                Comment.EMail = String.Empty;
+                Comment.Content = String.Empty;
+                ModelState.Clear();
+
+                return Partial("_commentsForm", this);
+            }
+
+            return RedirectToPage("Details", new { slug = slug == "home-page" ? "" : slug });
+        }
     }
-}
+}
\ No newline at end of file
diff --git a/CoreWiki/Pages/Edit.cshtml b/CoreWiki/Pages/Edit.cshtml
index 8793034..38c4891 100644
--- a/CoreWiki/Pages/Edit.cshtml
+++ b/CoreWiki/Pages/Edit.cshtml
@@ -8,24 +8,22 @@
 
 <h1>Edit</h1>
 
-<br />
 <div class="row">
     <div class="col-md-12">
         <form method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-            <input type="hidden" asp-for="Article.Slug" />
-            <input type="hidden" asp-for="Article.Topic" />
+            <input type="hidden" asp-for="Article.Id"/>
+            <input type="hidden" asp-for="Article.Slug"/>
+            <input type="hidden" asp-for="Article.Topic"/>
+            <input type="hidden" asp-for="Article.ViewCount"/>
+            <h3 class="mb-2">@Model.Article.Topic</h3>
             <div class="form-group">
-                <h3>@Model.Article.Topic</h3>
-            </div>
-            <div class="form-group">
-                <label asp-for="Article.Content" class="control-label"></label>
                 <textarea asp-for="Article.Content" class="form-control"></textarea>
                 <span asp-validation-for="Article.Content" class="text-danger"></span>
             </div>
             <div class="form-group">
-                <input type="submit" value="Save" class="btn btn-primary" />
-                <a class="btn btn-outline-secondary" href="~/">Back to Home</a>
+                <input type="submit" value="Save" class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-1.5 focus:outline-none"/>
+                <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" href="~/">Back to Home</a>
             </div>
         </form>
     </div>
@@ -36,10 +34,9 @@
     <script>
         var simplemde = new SimpleMDE();
     </script>
-    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 }
 
 @section Styles
 {
     <link href="~/lib/simplemde/simplemde.min.css" rel="stylesheet"/>
-}
+}
\ No newline at end of file
diff --git a/CoreWiki/Pages/LatestChanges.cshtml b/CoreWiki/Pages/LatestChanges.cshtml
index 677887b..8657edb 100644
--- a/CoreWiki/Pages/LatestChanges.cshtml
+++ b/CoreWiki/Pages/LatestChanges.cshtml
@@ -7,19 +7,7 @@
 
 <h1>Latest Changes</h1>
 
-<p>
-    <a asp-page="Create">Create New</a>
-</p>
+<a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none my-3 w-fit" 
+   asp-page="Create">Create New</a>
 
-@foreach (var item in Model.Article)
-{
-    <div class="card border-primary m-1">
-        <div class="card-body">
-            <h3 class="card-title"><a href="~/@item.Slug">@item.Topic</a></h3>
-                <h6 class="card-subtitle mb-2 text-muted"><span data-value="@item.Published" class="timeStampValue">@item.Published</span></h6>
-
-            <a class="card-link" asp-page="./Edit" asp-route-slug="@item.Slug">Edit</a>
-            <a class="card-link" asp-page="./Delete" asp-route-slug="@item.Slug">Delete</a>
-        </div>
-    </div>
-}
\ No newline at end of file
+<partial name="_articleList" model="Model.Article"/>
\ No newline at end of file
diff --git a/CoreWiki/Pages/LatestChanges.cshtml.cs b/CoreWiki/Pages/LatestChanges.cshtml.cs
index 83a70ab..21dde4c 100644
--- a/CoreWiki/Pages/LatestChanges.cshtml.cs
+++ b/CoreWiki/Pages/LatestChanges.cshtml.cs
@@ -18,14 +18,11 @@ namespace CoreWiki.Pages
             _context = context;
         }
 
-        public IList<Article> Article { get;set; } = default!;
+        public IList<Article> Article { get; set; } = default!;
 
         public async Task OnGetAsync()
         {
-            if (_context.Articles != null)
-            {
-                Article = await _context.Articles.OrderByDescending(a => a.PublishedDateTime).Take(10).ToListAsync();
-            }
+            Article = await _context.Articles.OrderByDescending(a => a.PublishedDateTime).Take(10).ToListAsync();
         }
     }
 }
diff --git a/CoreWiki/Pages/Shared/_Layout.cshtml b/CoreWiki/Pages/Shared/_Layout.cshtml
index ac74eba..03d8607 100644
--- a/CoreWiki/Pages/Shared/_Layout.cshtml
+++ b/CoreWiki/Pages/Shared/_Layout.cshtml
@@ -1,59 +1,65 @@
-<!DOCTYPE html>
+@using Htmx.TagHelpers
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="htmx-config" includeAspNetAntiforgeryToken="true"/>
     <title>@ViewData["Title"] - CoreWiki</title>
-    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
-    <link rel="stylesheet" href="~/CoreWiki.styles.css" asp-append-version="true"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="~/css/output.css"/>
     @await RenderSectionAsync("Styles", required: false)
 </head>
 <body>
-<header>
-    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-light border-bottom box-shadow mb-3">
-        <div class="container">
-            <a class="navbar-brand" asp-page="Details">CoreWiki</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
-                <ul class="navbar-nav flex-grow-1">
-                    <li class="nav-item">
-                        <a class="nav-link" asp-page="Details">Home</a>
+<script src="https://unpkg.com/htmx.org@1.9.10"></script>
+<script src="//unpkg.com/alpinejs" defer></script>
+<div class="flex flex-col min-h-screen">
+    <header x-data="{ open: false }">
+        <nav class="flex flex-col md:flex-row w-full px-4 py-3 bg-gray-50 border-bottom shadow">
+            <div class="flex w-full md:w-fit">
+                <a class="text-lg mr-1" asp-page="Details">CoreWiki</a>
+                <button @@click="open = !open" class="inline md:hidden ml-auto">
+                    <span class="ml-auto">Toggle</span>
+                </button>
+            </div>
+            <div :class="open || 'hidden'" class="w-full mt-4 md:block md:mt-0 md:w-fit md:ml-auto">
+                <ul class="flex flex-col space-y-3 md:flex-row md:space-x-4 md:space-y-0">
+                    <li>
+                        <a asp-page="Details">Home</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" asp-area="" asp-page="Create">Create</a>
+                    <li>
+                        <a asp-area="" asp-page="Create">Create</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" asp-page="All">All Articles</a>
+                    <li>
+                        <a hx-boost="true" asp-page="All">All Articles</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" asp-page="LatestChanges">Latest Changes</a>
+                    <li>
+                        <a hx-boost="true" asp-page="LatestChanges">Latest Changes</a>
                     </li>
                 </ul>
             </div>
-        </div>
-    </nav>
-</header>
-<div class="container">
-    <main role="main" class="pb-3">
+        </nav>
+    </header>
+    <main role="main" class="flex-1 flex flex-col px-8 md:px-48 py-8">
         @RenderBody()
     </main>
+    <footer class="flex justify-center text-gray-500 shadow border-t py-4 px-2">
+        <span>&copy; 2023 - CoreWiki - <a asp-area="" asp-page="/Privacy">Privacy</a></span>
+    </footer>
 </div>
 
-<footer class="border-top footer text-muted">
-    <div class="container">
-        &copy; 2023 - CoreWiki - <a asp-area="" asp-page="/Privacy">Privacy</a>
-    </div>
-</footer>
-
-<script src="~/lib/jquery/dist/jquery.min.js"></script>
-<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+@Html.HtmxAntiforgeryScript()
 <script src="~/lib/momentjs/moment.min.js"></script>
 <script src="~/js/site.js" asp-append-version="true"></script>
+<script>
+    document.addEventListener("htmx:afterRequest", function (e) {
+        const timeStamps = document.querySelectorAll(".timeStampValue");
+            for (const ts of timeStamps) {
+               const thisTimeStamp = ts.getAttribute("data-value");
+               const date = new Date(thisTimeStamp);
+               ts.textContent = moment(date).format('LLL');
+           }
+    });
+</script>
 
 @await RenderSectionAsync("Scripts", required: false)
 </body>
diff --git a/CoreWiki/Pages/_ViewImports.cshtml b/CoreWiki/Pages/_ViewImports.cshtml
index 802f152..86f4a07 100644
--- a/CoreWiki/Pages/_ViewImports.cshtml
+++ b/CoreWiki/Pages/_ViewImports.cshtml
@@ -1,4 +1,5 @@
 @using CoreWiki
 @namespace CoreWiki.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-@addTagHelper *, Westwind.AspNetCore.Markdown
\ No newline at end of file
+@addTagHelper *, Westwind.AspNetCore.Markdown
+@addTagHelper *, Htmx.TagHelpers
\ No newline at end of file
diff --git a/CoreWiki/Pages/_articleList.cshtml b/CoreWiki/Pages/_articleList.cshtml
new file mode 100644
index 0000000..7b8b038
--- /dev/null
+++ b/CoreWiki/Pages/_articleList.cshtml
@@ -0,0 +1,20 @@
+@model IEnumerable<CoreWiki.Models.Article>
+
+@foreach (var item in Model)
+{
+    <div class="flex flex-col border rounded mb-3">
+        <h3 class="bg-gray-50 p-2 border-b">
+            <a href="~/@item.Slug">@item.Topic</a>
+        </h3>
+        <div class="flex flex-col p-2">
+            <h6 class="font-normal card-subtitle mb-2 text-gray-500">
+                <span data-value="@item.Published" class="timeStampValue">@item.Published</span>
+            </h6>
+
+            <div class="flex space-x-2">
+                <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" asp-page="./Edit" asp-route-slug="@item.Slug">Edit</a>
+                <a class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" asp-page="./Delete" asp-route-slug="@item.Slug">Delete</a>
+            </div>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/CoreWiki/Pages/_comments.cshtml b/CoreWiki/Pages/_comments.cshtml
new file mode 100644
index 0000000..3abc114
--- /dev/null
+++ b/CoreWiki/Pages/_comments.cshtml
@@ -0,0 +1,35 @@
+@using CoreWiki.Models
+@model DetailsModel
+
+<div role="button" @@click="formOpen = !formOpen" class="flex items-center mb-2">
+    <span class="text-2xl">Add comment</span>
+    <svg x-show="!formOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ms-auto">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
+    </svg>
+    <svg x-show="formOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ms-auto">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
+    </svg>
+</div>
+<hr class="mb-2"/>
+<div x-cloak x-show="formOpen">
+    <script src="~/lib/simplemde/simplemde.min.js"></script>
+    <script>
+        let simplemde;
+    </script>
+    <partial name="_commentsForm" model="Model"/>
+</div>
+<div role="button" @@click="commentsOpen = !commentsOpen" class="flex items-center mb-2">
+    <span class="text-2xl">Comments</span>
+    <svg x-show="!commentsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ml-auto">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
+    </svg>
+    <svg x-show="commentsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ml-auto">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
+    </svg>
+</div>
+<hr/>
+<div x-cloak x-show="commentsOpen">
+    <div hx-get hx-trigger="commentsChanged from:body" hx-page="Details" hx-route-slug="@Model.Article.Slug" class="d-flex flex-column gap-3 mt-2">
+        <partial name="_commentsList" model="@(new ArticleCommentListViewModel {Comments = Model.Article.Comments, Slug = Model.Article.Slug, PageNumber = 1})"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/CoreWiki/Pages/_commentsForm.cshtml b/CoreWiki/Pages/_commentsForm.cshtml
new file mode 100644
index 0000000..f87da25
--- /dev/null
+++ b/CoreWiki/Pages/_commentsForm.cshtml
@@ -0,0 +1,32 @@
+@using Htmx.TagHelpers
+@using Microsoft.AspNetCore.Mvc.TagHelpers
+@model DetailsModel
+<form
+    hx-post
+    hx-page="Details"
+    hx-route-slug="@Model.Article.Slug"
+    hx-swap="outerHTML"
+    class="col-12 mb-3"
+    method="post">
+    <div class="mb-2 flex w-full gap-3">
+        <div class="flex-1 min-w-0">
+            <label class="block mb-2 text-sm font-medium text-gray-900" asp-for="Comment.DisplayName"></label>
+            <input class="block bg-gray-50 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 text-sm p-2 w-full" asp-for="Comment.DisplayName"/>
+            <span asp-validation-for="Comment.DisplayName" class="text-danger"></span>
+        </div>
+        <div class="flex-1 min-w-0">
+            <label class="block mb-2 text-sm font-medium text-gray-900" asp-for="Comment.EMail"></label>
+            <input class="block bg-gray-50 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 text-sm p-2 w-full" asp-for="Comment.EMail"/>
+            <span asp-validation-for="Comment.EMail" class="text-danger"></span>
+        </div>
+    </div>
+    <div class="form-group">
+        <label asp-for="Comment.Content" class="block mb-2 text-sm font-medium text-gray-900"></label>
+        <textarea id="contentInput" asp-for="Comment.Content"></textarea>
+        <span asp-validation-for="Comment.Content" class="text-danger"></span>
+    </div>
+    <input type="submit" class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" value="Submit"/>
+</form>
+<script>
+    simplemde = new SimpleMDE({ element: document.getElementById("contentInput"), forceSync: true });
+</script>
\ No newline at end of file
diff --git a/CoreWiki/Pages/_commentsList.cshtml b/CoreWiki/Pages/_commentsList.cshtml
new file mode 100644
index 0000000..ba0eb85
--- /dev/null
+++ b/CoreWiki/Pages/_commentsList.cshtml
@@ -0,0 +1,25 @@
+@model CoreWiki.Models.ArticleCommentListViewModel
+
+@foreach (var item in Model.Comments)
+{
+    <div class="flex flex-col border rounded mb-3">
+        <div class="bg-gray-50 p-2 border-b flex items-center">
+            <img class="me-2" width="40" height="40" src="https://gravatar.com/avatar/@item.GravatarHash?d=identicon" alt="avatar"/>
+            <div class="d-flex flex-column">
+                <span class="text-blue-600">@item.DisplayName</span>
+                <div class="flex">
+                    <span class="text-sm text-gray-500">Commented on <span data-value="@item.Submitted" class="timeStampValue text-muted">@item.Submitted</span></span>
+                </div>
+            </div>
+        </div>
+        <div class="py-4 px-2">
+            <markdown>@item.Content</markdown>
+        </div>
+    </div>
+}
+@if (Model.Comments.Count() == 10)
+{
+    <div class="h-100 align-items-center d-flex" hx-get hx-page="Details" hx-route-slug="@Model.Slug" hx-route-pageNumber="@(Model.PageNumber + 1)" hx-swap="outerHTML" hx-trigger="intersect once">
+        <div id="spinner" class="htmx-indicator spinner-border"></div>
+    </div>
+}
\ No newline at end of file
-- 
cgit v1.2.3