Merge pull request #19 from NielsPilgaard/seo

Search Engine Optimizations

src/Pilgaard.Blog/Models/BlogPost.cs → src/Pilgaard.Blog/Features/BlogPost/BlogPost.cs

@@ -1,4 +1,4 @@
-namespace Pilgaard.Blog.Models;
+namespace Pilgaard.Blog.Features.BlogPost;
 
 public class BlogPost
 {

src/Pilgaard.Blog/Features/BlogPost/BlogPostCard.razor

@@ -0,0 +1,23 @@
+<MudCard Style="width: 350px; height: 250px" Elevation="5">
+    <MudNavLink Style="height: 100%" Href="@BlogPostSeries.GetRelativePath(BlogPost)">
+        <MudCardHeader>
+            <CardHeaderContent>
+                <MudText Typo="Typo.subtitle1" Color="Color.Primary">Part @BlogPost.NumberInSeries</MudText>
+                <MudText Typo="Typo.h5" Color="Color.Tertiary">@BlogPost.Title</MudText>
+            </CardHeaderContent>
+        </MudCardHeader>
+        <MudCardContent Class="pt-0">
+            <MudText Typo="Typo.body1" Color="Color.Default">@BlogPost.Description</MudText>
+            <MudText Typo="Typo.caption" Color="Color.Primary">@string.Join(" ", BlogPost.Tags.Union(BlogPostSeries.Tags).Select(tag => $"#{tag}"))</MudText>
+        </MudCardContent>
+    </MudNavLink>
+</MudCard>
+
+@code {
+    [Parameter]
+    public BlogPost BlogPost { get; set; } = null!;
+
+    [Parameter]
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+
+}

src/Pilgaard.Blog/Features/BlogPost/BlogPostComponent.razor

@@ -0,0 +1,61 @@
+@page "/posts/{blogPostSeriesPathName}/{blogPostPathName}"
+<article class="blog-post">
+    @if (BlogPostSeries is not null)
+    {
+        <h3>@BlogPostSeries.Title - Part @BlogPost.NumberInSeries</h3>
+        <h1>@BlogPost.Title</h1>
+        <hr />
+        <br />
+    }
+    @BlogPostText
+</article>
+<MetadataComponent 
+    Title="@Title" 
+    Description="@BlogPost.Description" 
+    Tags="@Tags" />
+<PrismCodeBlockRenderer/>
+<GiscusComponent/>
+@code {
+    [Parameter]
+    public string? BlogPostSeriesPathName { get; set; }
+
+    [Parameter]
+    public string BlogPostPathName { get; set; } = null!;
+
+    public BlogPost BlogPost { get; set; } = null!;
+    public BlogPostSeries? BlogPostSeries { get; set; }
+
+    private string Title => BlogPostSeries?.Title is null ?
+        $"{DefaultMetadata.Title} | {BlogPost.Title}" :
+        $"{DefaultMetadata.Title} | {BlogPost.Title} | {BlogPostSeries.Title} - Part {BlogPost.NumberInSeries}";
+
+    private string Tags => string.Join(", ", BlogPost.Tags, BlogPostSeries?.Tags);
+
+    private MarkupString BlogPostText { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var path = GetPagePath();
+        var text = await File.ReadAllTextAsync(path);
+        BlogPostText = text.ToHtml();
+
+        await base.OnInitializedAsync();
+    }
+
+    private string GetPagePath()
+    {
+        BlogPostSeriesPathName ??= "general";
+
+        BlogPostSeries = BlogPostData.AllBlogPostSeries.FirstOrDefault(series => series.PathName == BlogPostSeriesPathName);
+
+        BlogPost = BlogPostSeries?.BlogPosts.FirstOrDefault(blogPost => blogPost.PathName == BlogPostPathName)!;
+
+        var pathPrefix = Path.Join(AppDomain.CurrentDomain.BaseDirectory, "Pages", "posts");
+
+        var path = BlogPostSeriesPathName is null
+            ? Path.Join(pathPrefix, BlogPostPathName + ".md")
+            : Path.Join(pathPrefix, BlogPostSeriesPathName, BlogPostPathName + ".md");
+        return path;
+
+    }
+}

src/Pilgaard.Blog/Data/BlogPosts.cs → src/Pilgaard.Blog/Features/BlogPost/BlogPostData.cs

@@ -1,8 +1,6 @@
-using Pilgaard.Blog.Models;
+namespace Pilgaard.Blog.Features.BlogPost;
 
-namespace Pilgaard.Blog.Data;
-
-public static class BlogPosts
+public static class BlogPostData
 {
     public static readonly BlogPostSeries MakingABlog = new(
         title: "Making a Blog with C#",
@@ -47,14 +45,14 @@ public static class BlogPosts
                 numberInSeries: 5,
                 "giscus",
                 "github"),
-            //new(title: "SEO",
-            //    description: "In this post, we add Search Engine Optimizations to make the blog easier to find.",
-            //    pathName: "6-seo",
-            //    publishDate: new DateOnly(year: 2022,
-            //        month: 10,
-            //        day: 22),
-            //    numberInSeries: 6,
-            //    "seo"),
+            new(title: "SEO",
+                description: "In this post, we add Search Engine Optimizations to make the blog easier to find.",
+                pathName: "6-seo",
+                publishDate: new DateOnly(year: 2022,
+                    month: 10,
+                    day: 22),
+                numberInSeries: 6,
+                "seo"),
             //new (title: "",
             //    description: "",
             //    pathName: "",

src/Pilgaard.Blog/Features/BlogPost/BlogPostExtensions.cs

@@ -0,0 +1,9 @@
+namespace Pilgaard.Blog.Features.BlogPost;
+
+public static class BlogPostExtensions
+{
+    public static string GetRelativePath(this BlogPostSeries blogPostSeries, BlogPost blogPost)
+    {
+        return "posts/" + blogPostSeries.PathName + "/" + blogPost.PathName;
+    }
+}

src/Pilgaard.Blog/Models/BlogPostSeries.cs → src/Pilgaard.Blog/Features/BlogPost/BlogPostSeries.cs

@@ -1,4 +1,4 @@
-namespace Pilgaard.Blog.Models;
+namespace Pilgaard.Blog.Features.BlogPost;
 
 public class BlogPostSeries
 {

src/Pilgaard.Blog/Features/BlogPost/BlogPostSeriesComponent.razor

@@ -0,0 +1,16 @@
+<div style="text-align: center">
+    <MudText Class="mt-8" Color="Color.Secondary" Typo="Typo.h3">@BlogPostSeries.Title</MudText>
+    <MudDivider Class="mb-6" DividerType="DividerType.FullWidth"></MudDivider>
+    <MudText Class="mb-6" Typo="Typo.h6">@BlogPostSeries.Description.ToHtml()</MudText>
+
+</div>
+<div class="d-flex flex-wrap gap-2 justify-center">
+    @foreach (var blogPost in BlogPostSeries.BlogPosts)
+    {
+        <BlogPostCard BlogPost="@blogPost" BlogPostSeries="@BlogPostSeries"></BlogPostCard>
+    }
+</div>
+@code {
+    [Parameter]
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+}

src/Pilgaard.Blog/Extensions/StringExtensions.cs → src/Pilgaard.Blog/Features/BlogPost/StringExtensions.cs

@@ -1,8 +1,7 @@
 using Markdig;
 using Microsoft.AspNetCore.Components;
-using Pilgaard.Blog.Models;
 
-namespace Pilgaard.Blog.Extensions;
+namespace Pilgaard.Blog.Features.BlogPost;
 
 public static class StringExtensions
 {
@@ -17,12 +16,4 @@ public static MarkupString ToHtml(this string text)
         var htmlText = Markdown.ToHtml(text, MarkdownPipeline);
         return new MarkupString(htmlText);
     }
-}
-
-public static class BlogPostExtensions
-{
-    public static string GetRelativePath(this BlogPostSeries blogPostSeries, BlogPost blogPost)
-    {
-        return "posts/" + blogPostSeries.PathName + "/" + blogPost.PathName;
-    }
-}
+}

src/Pilgaard.Blog/Features/SEO/DefaultMetadata.cs

@@ -0,0 +1,8 @@
+namespace Pilgaard.Blog.Features.SEO;
+
+public static class DefaultMetadata
+{
+    public const string Title = "Pilgaard | dotnet blog";
+    public const string Description = "Hi! I write about code - Particularly C#, but also PowerShell and the occasional JavaScript.";
+    public const string Tags = "blazor, dotnet, csharp, blog, programming";
+}

src/Pilgaard.Blog/Features/SEO/MetadataComponent.razor

@@ -0,0 +1,22 @@
+<PageTitle>@Title</PageTitle>
+<HeadContent>
+    <meta name="description" content="@Description" />
+    <meta name="og:title" content="@Title" />
+    <meta name="og:description" content="@Description" />
+
+    @if (Tags is not null)
+    {
+        <meta name="tags" content="@Tags" />
+    }
+</HeadContent>
+
+@code {
+    [Parameter]
+    public string Title { get; set; } = null!;
+
+    [Parameter]
+    public string Description { get; set; } = null!;
+
+    [Parameter]
+    public string? Tags { get; set; } // Comma separated list
+}

src/Pilgaard.Blog/Pages/Index.razor

@@ -1,9 +1,12 @@
 @page "/"
 
-<MudText Typo="Typo.h4">Welcome to my work-in-progress blog!</MudText>
-<MudText Typo="Typo.h6" Class="mt-4 mb-16">I'll be writing posts about making the Blog as I progress.</MudText>
+<header style="text-align: center">
+    <MetadataComponent Title="@DefaultMetadata.Title" Description="@DefaultMetadata.Description" Tags="@DefaultMetadata.Tags" />
+    <MudText Typo="Typo.h4">Welcome to my work-in-progress blog!</MudText>
+    <MudText Typo="Typo.h6" Class="mt-4 mb-16">I'll be writing posts about making it along the way.</MudText>
+</header>
 
-@foreach (var blogPostSeries in BlogPosts.AllBlogPostSeries)
+@foreach (var blogPostSeries in BlogPostData.AllBlogPostSeries)
 {
     <BlogPostSeriesComponent BlogPostSeries="@blogPostSeries"></BlogPostSeriesComponent>
 }

src/Pilgaard.Blog/Pages/_Layout.cshtml

@@ -1,5 +1,5 @@
 @using Microsoft.AspNetCore.Components.Web
-@namespace Pilgaard.Blog.Pages ;
+@namespace Pilgaard.Blog.Pages 
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 
 <!DOCTYPE html>
@@ -10,14 +10,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
-    <meta name="description"
-          content="Hi! I write about code - Particularly C#, but also PowerShell and the occasional JavaScript." />
     <meta property="og:url" content="https://pilgaard-blog.azurewebsites.net/" />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="Pilgaard | dotnet blog" />
-    <meta property="og:description" content="Hi! I write about code - Particularly C#, but also PowerShell and the occasional JavaScript." />
     <meta property="og:image" content="https://pilgaard-blog.azurewebsites.net/favicon.ico" />
-
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="Pilgaard.Blog.styles.css" rel="stylesheet" />
@@ -28,20 +23,20 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/giscus/+esm"></script>
 </head>
 <body>
-    @RenderBody()
+@RenderBody()
 
-    <div id="blazor-error-ui">
-        <environment include="Staging,Production">
-            An error has occurred. This application may no longer respond until reloaded.
-        </environment>
-        <environment include="Development">
-            An unhandled exception has occurred. See browser dev tools for details.
-        </environment>
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
-    <script src="_framework/blazor.server.js"></script>
-    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
-    <script defer src="scripts/prism.js"></script>
+<div id="blazor-error-ui">
+    <environment include="Staging,Production">
+        An error has occurred. This application may no longer respond until reloaded.
+    </environment>
+    <environment include="Development">
+        An unhandled exception has occurred. See browser dev tools for details.
+    </environment>
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
+<script src="_framework/blazor.server.js"></script>
+<script src="_content/MudBlazor/MudBlazor.min.js"></script>
+<script defer src="scripts/prism.js"></script>
 </body>
 </html>