feat: add open graph information to pages

src/Blog/Components/Pages/Error.razor

@@ -1,7 +1,12 @@
 @page "/Error"
 @using System.Diagnostics
 
-<PageTitle>Error</PageTitle>
+<PageTitle>@PageTitle</PageTitle>
+<HeadContent>
+  <meta name="description" content="@Description" />
+  <OpenGraph PageTitle="@PageTitle" Description="@Description" />
+</HeadContent>
+
 
 <div class="container">
   <h2>Error</h2>
@@ -19,9 +24,10 @@
 {
   [CascadingParameter]
   private HttpContext? HttpContext { get; set; }
-
   private string? RequestId { get; set; }
   private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+  private const string PageTitle = "Error - journal";
+  private const string Description = "An unhandled error occurred while processing your request.";
 
   protected override void OnInitialized() =>
     RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;

src/Blog/Components/Pages/Home.razor

@@ -1,10 +1,17 @@
 @page "/"
 
-<PageTitle>journal - A blog by Stevan Freeborn</PageTitle>
+<PageTitle>@PageTitle</PageTitle>
 
 <HeadContent>
-  <meta name="description" content="A blog by Stevan Freeborn" />
+  <meta name="description" content="@Description" />
+  <OpenGraph PageTitle="@PageTitle" Description="@Description" />
 </HeadContent>
 
 <h2 class="sr-only">Posts</h2>
-<Feed />
+<Feed />
+
+@code
+{
+  private const string PageTitle = "journal - A blog by Stevan Freeborn";
+  private const string Description = "A blog by Stevan Freeborn";
+}

src/Blog/Components/Pages/Post.razor

@@ -10,12 +10,19 @@
 }
 else
 {
-  <PageTitle>@BlogPost.Title - journal</PageTitle>
+  var title = $"{BlogPost.Title} - journal";
+  var description = BlogPost.Lead;
 
-  <PageScript Src="./Components/Pages/Post.razor.js" />
+  <PageTitle>@title</PageTitle>
 
   <HeadContent>
-    <meta name="description" content="@BlogPost.Lead">
+    <meta name="description" content="@description">
+    <OpenGraph 
+      PageTitle="@title" 
+      Description="@description" 
+      Type="article"
+      Image="@BlogPost.OpenGraphImage"
+    />
     <link rel="stylesheet" href="markdown.css">
     <link rel="stylesheet" href="prism.css">
   </HeadContent>
@@ -29,6 +36,8 @@ else
       @((MarkupString)BlogPost.Content)
     </div>
   </article>
+
+  <PageScript Src="./Components/Pages/Post.razor.js" />
 }
 
 @code 

src/Blog/Components/Pages/Privacy.razor

@@ -1,5 +1,12 @@
 @page "/privacy"
 
+<PageTitle>@PageTitle</PageTitle>
+
+<HeadContent>
+  <meta name="description" content="@Description" />
+  <OpenGraph PageTitle="@PageTitle" Description="@Description" />
+</HeadContent>
+
 <div class="container">
   <h2>Privacy Policy for journal</h2>
 
@@ -112,4 +119,10 @@
 
     <p>By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions.</p>
   </section>
-</div>
+</div>
+
+@code
+{
+  private const string PageTitle = "Privacy Policy - journal";
+  private const string Description = "Privacy Policy for journal";
+}

src/Blog/Components/Pages/Terms.razor

@@ -1,5 +1,12 @@
 @page "/terms"
 
+<PageTitle>@PageTitle</PageTitle>
+
+<HeadContent>
+  <meta name="description" content="@Description" />
+  <OpenGraph PageTitle="@PageTitle" Description="@Description" />
+</HeadContent>
+
 <div class="container">
   <h2><strong>Terms and Conditions</strong></h2>
 
@@ -266,4 +273,10 @@
       liable for any loss or damage of any nature.
     </p>
   </section>
-</div>
+</div>
+
+@code
+{
+  private const string PageTitle = "Terms and Conditions - journal";
+  private const string Description = "Terms and Conditions for journal";
+}

src/Blog/Components/Pages/_Error404.razor

@@ -1,8 +1,22 @@
 
 @page "/Error/404"
 
+<PageTitle>@PageTitle</PageTitle>
+
+<HeadContent>
+    <meta name="description" content="@Description" />
+    <OpenGraph PageTitle="@PageTitle" Description="@Description" Image="@Image" />
+</HeadContent>
+
 <div class="container">
     <h2>Not Found</h2>
     <p>Hmm...it doesn't look like the page you were looking for exists, but we did find this adorable corgi.</p>
-    <img src="not-found-corgi.jpg" alt="A cute corgi" />
+    <img src="@Image" alt="A cute corgi" />
-</div>
+</div>
+
+@code
+{
+  private const string PageTitle = "Not Found - journal";
+  private const string Description = "We couldn't find the page you were looking for. Here's a cute corgi instead.";
+  private const string Image = "not-found-corgi.jpg";
+}

src/Blog/Components/Utils/OpenGraph.razor

@@ -0,0 +1,40 @@
+@namespace Blog.Components.Utils
+@inject IHttpContextAccessor HttpContextAccessor
+
+<meta property="og:title" content="@PageTitle" />
+<meta property="og:description" content="@Description" />
+<meta property="og:type" content="@Type" />
+<meta property="og:url" content="@OpenGraphUrl" />
+<meta property="og:image" content="@OpenGraphImage" />
+
+@code
+{
+  [Parameter] 
+  public string PageTitle { get; set; } = "journal - A blog by Stevan Freeborn";
+  
+  [Parameter] 
+  public string Description { get; set; } = "A blog by Stevan Freeborn";
+  
+  [Parameter] 
+  public string Type { get; set; } = "website";
+
+  [Parameter] 
+  public string Image { get; set; } = string.Empty;
+
+  private string BaseUrl { get; set; } = string.Empty;
+  private string OpenGraphUrl { get; set; } = string.Empty;
+  private string OpenGraphImage => string.IsNullOrWhiteSpace(Image) 
+    ? $"{BaseUrl}/site-og.png"
+    : $"{BaseUrl}/{Image}";
+
+  protected override void OnInitialized()
+  {
+    if (HttpContextAccessor.HttpContext is null) {
+      Console.WriteLine("HttpContext is null");
+      return;
+    }
+
+    BaseUrl = $"{HttpContextAccessor.HttpContext.Request.Scheme}://{HttpContextAccessor.HttpContext.Request.Host}";
+    OpenGraphUrl = $"{BaseUrl}{HttpContextAccessor.HttpContext.Request.Path}";
+  }
+}

src/Blog/Posts/Post.cs

@@ -7,6 +7,7 @@ record Post
   public bool IsPublished { get; init; } = false;
   public DateTime PublishedAt { get; init; }
   public string Slug { get; init; } = string.Empty;
+  public string OpenGraphImage { get; init; } = string.Empty;
 }
 
 record PostWithContent : Post

src/Blog/Program.cs

@@ -4,6 +4,7 @@ builder.Services.ConfigureOptions<FilePostServiceOptionsSetup>();
 builder.Services.AddSingleton<IFileSystem, FileSystem>();
 builder.Services.AddScoped<IPostService, FilePostService>();
 
+builder.Services.AddHttpContextAccessor();
 builder.Services.AddRazorComponents();
 
 var app = builder.Build();

src/Blog/wwwroot/posts/test-blog/index.md

@@ -3,7 +3,8 @@
   "title": "Test Blog",
   "lead": "This is a test blog post.",
   "isPublished": true,
-  "publishedAt": "2024-04-10"
+  "publishedAt": "2024-04-10",
+  "openGraphImage": "posts/test-blog/og-image.png",
 }
 ```
 
@@ -46,6 +47,8 @@ Here are some examples of text formatting:
 
 ![Cute Dog](https://placedog.net/672?random)
 
+![The Office Gif](posts/test-blog/the-office.gif)
+
 ## Blockquotes
 
 > Markdown is a lightweight markup language with plain-text formatting syntax.