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

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,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>
 
@@ -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" />
-</div>
+    <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";
+}