From bd13125d29deec51f2fb68b7d5319aba97d312f1 Mon Sep 17 00:00:00 2001
From: Michael Tanczos <mike@logic-gate.com>
Date: Wed, 25 Sep 2024 14:41:54 -0400
Subject: [PATCH] feat: Add blog feature to RizzyDemo

Added a new Blog feature to the RizzyDemo application. This includes:
- Removal of unused scripts from AppLayout
- Addition of a new navigation item for the Blog in NavMenu
- Creation of a new CSS class for the Blog icon in NavMenu
- Addition of new methods in HomeController for rendering the Blog and its banner
- Creation of a new Article model under Home models
- Creation of a new razor view for displaying blog articles with sample content about penguins
---
 .../Components/Layout/AppLayout.razor         |  3 -
 src/RizzyDemo/Components/Layout/NavMenu.razor |  6 ++
 .../Components/Layout/NavMenu.razor.css       |  4 +
 .../Controllers/Home/HomeController.cs        |  8 ++
 .../Controllers/Home/Models/Article.cs        |  4 +
 .../Controllers/Home/Views/BlogArticle.razor  | 88 +++++++++++++++++++
 6 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/RizzyDemo/Controllers/Home/Models/Article.cs
 create mode 100644 src/RizzyDemo/Controllers/Home/Views/BlogArticle.razor
diff --git a/src/RizzyDemo/Components/Layout/AppLayout.razor b/src/RizzyDemo/Components/Layout/AppLayout.razor
index e65763d..fbe9d8c 100644
--- a/src/RizzyDemo/Components/Layout/AppLayout.razor
+++ b/src/RizzyDemo/Components/Layout/AppLayout.razor
@@ -16,9 +16,6 @@
     <RzHeadOutlet/>
     
     <script defer src="https://unpkg.com/htmx.org@2.0.2/dist/htmx.min.js"></script>
-    <!--<script src="https://unpkg.com/htmx.org@2.0.0-alpha1/dist/htmx.min.js"></script>-->
-
-    <script defer src="https://unpkg.com/idiomorph@0.3.0"></script>
     <script defer src="_content/Rizzy/js/blazor-streaming.js"></script>
 </head>
 <body>
diff --git a/src/RizzyDemo/Components/Layout/NavMenu.razor b/src/RizzyDemo/Components/Layout/NavMenu.razor
index e60af1d..7b0f2fe 100644
--- a/src/RizzyDemo/Components/Layout/NavMenu.razor
+++ b/src/RizzyDemo/Components/Layout/NavMenu.razor
@@ -25,5 +25,11 @@
                 <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
+        
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/home/blog">
+                <span class="bi bi-backpack" aria-hidden="true"></span> Blog Article
+            </NavLink>
+        </div>
     </nav>
 </div>
\ No newline at end of file
diff --git a/src/RizzyDemo/Components/Layout/NavMenu.razor.css b/src/RizzyDemo/Components/Layout/NavMenu.razor.css
index 4e15395..51cc357 100644
--- a/src/RizzyDemo/Components/Layout/NavMenu.razor.css
+++ b/src/RizzyDemo/Components/Layout/NavMenu.razor.css
@@ -34,6 +34,10 @@
     background-size: cover;
 }
 
+.bi-backpack {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-backpack' viewBox='0 0 16 16'> <path d='M4.04 7.43a4 4 0 0 1 7.92 0 .5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14M4 9.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm1 .5v3h6v-3h-1v.5a.5.5 0 0 1-1 0V10z'/> <path d='M6 2.341V2a2 2 0 1 1 4 0v.341c2.33.824 4 3.047 4 5.659v5.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5V8a6 6 0 0 1 4-5.659M7 2v.083a6 6 0 0 1 2 0V2a1 1 0 0 0-2 0m1 1a5 5 0 0 0-5 5v5.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V8a5 5 0 0 0-5-5'/%3E%3C/svg%3E")
+}
+
 .bi-house-door-fill-nav-menu {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
 }
diff --git a/src/RizzyDemo/Controllers/Home/HomeController.cs b/src/RizzyDemo/Controllers/Home/HomeController.cs
index 25fbe6f..aee5d89 100644
--- a/src/RizzyDemo/Controllers/Home/HomeController.cs
+++ b/src/RizzyDemo/Controllers/Home/HomeController.cs
@@ -111,6 +111,14 @@ public IResult Time()
         return PartialView(HomeFragments.RenderServerTime(DateTime.Now));
     }
 
+    public IResult Blog() => View<BlogArticle>();
+
+    [Microsoft.AspNetCore.Mvc.Route("/home/blog/banner")]
+    public IResult BlogBanner()
+    {
+        return PartialView(BlogArticle.RenderBanner($"This banner was changed on the server - {Guid.NewGuid().ToString()}"));
+    }
+
     public async Task<string> News()
     {
         IServiceProvider serviceProvider = HttpContext.RequestServices;
diff --git a/src/RizzyDemo/Controllers/Home/Models/Article.cs b/src/RizzyDemo/Controllers/Home/Models/Article.cs
new file mode 100644
index 0000000..dbc6f49
--- /dev/null
+++ b/src/RizzyDemo/Controllers/Home/Models/Article.cs
@@ -0,0 +1,4 @@
+﻿namespace RizzyDemo.Controllers.Home.Models;
+
+public record Author(string Username, string Image);
+public record Article(string Title, string Body, string Description, DateTime UpdatedAt, Author Author);
diff --git a/src/RizzyDemo/Controllers/Home/Views/BlogArticle.razor b/src/RizzyDemo/Controllers/Home/Views/BlogArticle.razor
new file mode 100644
index 0000000..24ec4b1
--- /dev/null
+++ b/src/RizzyDemo/Controllers/Home/Views/BlogArticle.razor
@@ -0,0 +1,88 @@
+﻿@using Author = RizzyDemo.Controllers.Home.Models.Author
+@using Rizzy
+@* Render the article page using the reusable RenderFragment *@
+
+<div class="py-4 container">
+    @(RenderArticle((IsAuthenticated: true, PenguinArticle, null)))
+</div>
+
+@code {
+    // Define a sample article about penguins
+    public static readonly Models.Article PenguinArticle = new(
+        Title: "The Fascinating World of Penguins",
+        Body: @"
+            Penguins are a unique family of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galápagos penguin, found north of the equator.
+
+            Penguins are known for their distinctive black and white plumage, which helps them camouflage while swimming. Their diet primarily consists of fish, squid, and other sea life caught while swimming underwater. Penguins can drink seawater because their supraorbital gland filters excess salt from the bloodstream.
+
+            The social behavior of penguins is also fascinating. Many species form large colonies during the breeding season, which can range from hundreds to millions of individuals. Their dedication to family life is admirable; most penguin species share the responsibility of incubating eggs and feeding chicks.
+
+            Penguins are also known for their impressive speed underwater. They use their wings as flippers to propel themselves through the water at speeds of up to 15 miles per hour. On land, however, they waddle awkwardly or slide on their bellies.
+
+            Despite being highly adapted to life in the water, penguins are very vulnerable to changes in their environment. Climate change and human activities pose significant threats to their habitat and food sources.
+            ",
+        Description: "A brief overview of penguins, including their habitat, diet, social behavior, and unique adaptations.",
+        UpdatedAt: DateTime.Now.AddHours(-2),
+    Author: new Author("Jane Doe", "/images/profile/profile1.jpg")
+    );
+
+    public static readonly RenderFragment<string> RenderBanner = message =>
+        @<div id="banner" class="alert alert-info my-3" hx-get="/home/blog/banner" hx-trigger=@Trigger.OnEvent("click") hx-target="#banner" hx-swap=@SwapStyle.outerHTML role="alert">
+            @message
+        </div>;
+
+    // Render fragment for displaying the article
+    public static readonly RenderFragment<(bool IsAuthenticated, Models.Article Article, Author? User)> RenderArticle = context =>
+    @<div class="article-page" id="articlepage">
+        <div class="banner" style="background-image: url('/images/penguin.jpg'); background-size: cover; background-position: center;">
+            <div class="py-5 text-white container">
+                <h1 class="display-4">@context.Article.Title</h1>
+                <div class="article-meta d-flex align-items-center">
+                    <a href="/profile/?author=@context.Article.Author.Username">
+                        <img src="@context.Article.Author.Image" class="rounded-circle me-2" style="width: 40px; height: 40px;"/>
+                    </a>
+                    <div class="info">
+                        <a href="/profile/?author=@context.Article.Author.Username"
+                           class="author text-white text-decoration-none">
+                            @context.Article.Author.Username
+                        </a>
+                        <span class="date text-white">@context.Article.UpdatedAt.ToString("MMMM d, yyyy h:mm tt")</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        @RenderBanner("I'm rendered as a simple RenderFragment but I can also be directly routed through the HomeController - Click me")
+
+        <div class="page mt-4 container">
+            <div class="row article-content">
+                <div class="col-md-12">
+                    <p>@context.Article.Description</p>
+                    <hr/>
+                    <div class="article-body">
+                        @((MarkupString) GetHtml(context.Article.Body))
+                    </div>
+                </div>
+            </div>
+
+            <hr/>
+            @if (context.IsAuthenticated)
+            {
+                <div class="col-xs-12 col-md-8 offset-md-2">
+                    <div class="card comment-form my-4">
+                        <div class="card-block p-3">
+                            <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
+                        </div>
+                        <div class="card-footer d-flex align-items-center">
+                            <img src="@context.User?.Image" class="comment-author-img rounded-circle me-2" style="width: 40px; height: 40px;"/>
+                            <button class="btn btn-sm btn-primary">Post Comment</button>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>;
+
+    // Helper function to format article body
+    private static string GetHtml(string body) => body.Replace("\n", "<br/>");
+}
