Merge pull request #106 from codemonkey85/dev

Dev

Author: codemonkey85

AboutMe/Wasm/GlobalUsings.cs

@@ -3,6 +3,7 @@
 global using Humanizer;
 global using Microsoft.AspNetCore.Components.Web;
 global using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+global using Microsoft.JSInterop;
 global using MudBlazor;
 global using MudBlazor.Services;
 global using System.Diagnostics.CodeAnalysis;

AboutMe/Wasm/Pages/Blog.razor

@@ -40,25 +40,29 @@ else
         @foreach (var post in Posts)
         {
             <MudCard>
-                <MudCardHeader>
-                    <MudText Typo="Typo.h6">
-                        <a href="@post.Url"
-                           target="_blank">
-                            @post.Title
-                        </a>
-                    </MudText>
-                </MudCardHeader>
+                @if (!string.IsNullOrEmpty(post.Title))
+                {
+                    <MudCardHeader>
+                        <MudText Typo="Typo.h6">
+                            <MudLink Href="@post.Url"
+                                     Class="bold-text"
+                                     Target="_blank">
+                                @post.Title
+                            </MudLink>
+                        </MudText>
+                    </MudCardHeader>
+                }
                 <MudCardContent>
                     <div class="content-wrapper">
                         @(new MarkupString(post.ContentHtml))
                     </div>
                 </MudCardContent>
                 <MudCardActions>
                     <MudText Typo="Typo.subtitle2">
-                        <a href="@post.Url"
-                           target="_blank">
+                        <MudLink Href="@post.Url"
+                                 Target="_blank">
                             @post.DatePublished.ToLocalTime().ToString(DateFormat)
-                        </a>
+                        </MudLink>
                     </MudText>
                 </MudCardActions>
             </MudCard>
@@ -68,8 +72,54 @@ else
 
 <style>
     .content-wrapper img {
-        max-width: 100%;
+        max-width: 400px;
+        width: 100%;
         height: auto;
         display: block;
     }
+
+    .content-wrapper p {
+        margin-bottom: 1rem;
+    }
+
+    .content-wrapper a {
+        color: var(--mud-palette-primary);
+        text-decoration: underline;
+    }
+
+    .content-wrapper h1, .content-wrapper h2, .content-wrapper h3 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .content-wrapper ul, .content-wrapper ol {
+        margin-bottom: 1rem;
+        padding-left: 2rem;
+    }
+
+    .content-wrapper code {
+        background-color: var(--mud-palette-background-grey);
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+
+    .content-wrapper pre {
+        background-color: var(--mud-palette-background-grey);
+        padding: 1rem;
+        border-radius: 4px;
+        overflow-x: auto;
+        margin-bottom: 1rem;
+    }
+
+    .content-wrapper blockquote {
+        border-left: 4px solid var(--mud-palette-primary);
+        padding-left: 1rem;
+        margin: 1rem 0;
+        font-style: italic;
+    }
+
+    .bold-text {
+        font-weight: bold;
+    }
 </style>

AboutMe/Wasm/Pages/Blog.razor.cs

@@ -2,10 +2,10 @@
 
 // ReSharper disable once UnusedType.Global
 // ReSharper disable once ClassNeverInstantiated.Global
-public partial class Blog(HttpClient httpClient)
+public partial class Blog(HttpClient httpClient, IJSRuntime jsRuntime)
 {
     [StringSyntax(StringSyntaxAttribute.DateTimeFormat)]
-    private const string DateFormat = "ddd MMM dd yyyy hh:mm tt";
+    private const string DateFormat = "dddd, MMMM dd, yyyy 'at' hh:mm tt";
 
     private static readonly JsonSerializerOptions JsonSerializerOptions =
         new()
@@ -41,6 +41,18 @@ protected override async Task OnInitializedAsync()
         }
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        
+        if (!IsLoading && Posts.Count > 0)
+        {
+            await jsRuntime.InvokeVoidAsync("eval", "Array.from(document.querySelectorAll('a')).forEach(a => a.setAttribute('target', '_blank'))");
+            await jsRuntime.InvokeVoidAsync("eval", 
+                "document.querySelectorAll('.content-wrapper a').forEach(a => { a.target = '_blank'; a.rel = 'noopener noreferrer'; });");
+        }
+    }
+
     [JsonSerializable(typeof(Feed[]))]
     // ReSharper disable once ClassNeverInstantiated.Global
     private partial class FeedJsonContext : JsonSerializerContext;

AboutMe/Wasm/wwwroot/index.html

@@ -25,8 +25,6 @@
     <link id="webassembly"
           rel="preload"/>
     <script type="importmap"></script>
-    <!-- If you add any scoped CSS files, uncomment the following to load them
-    <link href="AboutMe.Wasm.styles.css" rel="stylesheet"/> -->
 </head>
 
 <body>