Merge pull request #8 from StevanFreeborn/stevanfreeborn/feat/add-open-graph-information

feat: add open graph information to pages

scripts/deploy.ps1

@@ -1,6 +1,7 @@
 $NGINX_CONFIG_PATH = "/etc/nginx/sites-available/blog.stevanfreeborn.com"
 
-function StartContainer {
+function StartContainer 
+{
   param (
     [string]$containerColor,
     [string]$dockerTag
@@ -56,7 +57,8 @@ function StartContainer {
   return $containerHostPort
 }
 
-function UpdateNginxConfig {
+function UpdateNginxConfig 
+{
   param (
     [string]$filePath,
     [string]$portNumber

src/Blog/Components/App.razor

@@ -16,7 +16,6 @@
   <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
   <script src="https://www.googletagmanager.com/gtag/js?id=G-5JM0TZTRHF"></script>
-  <script src="prism.js"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}

src/Blog/Components/Layout/MainLayout.razor

@@ -13,10 +13,3 @@
   <a href="" class="reload">Reload</a>
   <a class="dismiss">🗙</a>
 </div>
-
-<div id="components-reconnect-modal">
-  <div>
-    <h3>Connection lost</h3>
-    <p>Attempting to reconnect...</p>
-  </div>
-</div>

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 />
+
+@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,14 +10,22 @@
 }
 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">
+    <script src="prism.js"></script>
   </HeadContent>
 
   <article>
@@ -29,6 +37,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>
 
@@ -113,3 +120,9 @@
     <p>By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions.</p>
   </section>
 </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>
 
@@ -267,3 +274,9 @@
     </p>
   </section>
 </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>
+
+@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/appsettings.example.json

@@ -10,6 +10,5 @@
   "FilePostServiceOptions": {
     "PostsDirectory": "wwwroot/posts"
   },
-  "DetailedErrors": "true",
-  "GoogleAnalyticsTag": ""
+  "DetailedErrors": "true"
 }

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.