Setup OpenGraph

PancakesWeb/Components/App.razor

@@ -5,6 +5,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <base href="/"/>
+    <meta name="theme-color" content="#b462cbff">
 
     @* Icons *@
     <link rel="icon" type="image/webp" href="@Assets["icon.webp"]">

PancakesWeb/Components/Pages/BlogPost.razor

@@ -3,11 +3,15 @@
 
 @if (Post != null)
 {
+    <OpenGraph UrlPath="@Post.Slug" Title="@Post.Title" Description="@Post.Description"
+               ImagePath="@($"post-assets/{Post.Slug}/{Post.HeaderFilename}")" ImageAlt="@Post.HeaderAlt" LargeImage="true"/>
+
     <SectionContent SectionName="Header">
         @if (Post.HeaderFilename != null)
         {
             <figure class="header">
-                <img src="@Assets[$"post-assets/{Post.Slug}/{Post.HeaderFilename}"]" alt="@Post.HeaderAlt" class="header-img">
+                <img src="@Assets[$"post-assets/{Post.Slug}/{Post.HeaderFilename}"]" alt="@Post.HeaderAlt"
+                     class="header-img">
                 @if (Post.HeaderCaption != null)
                 {
                     <figcaption>@Post.HeaderCaption</figcaption>
@@ -21,14 +25,18 @@
             {
                 var edited = Post.Edited ?? DateTime.Now; // this null check should never happen
                 <small>
-                    Posted: <RenderDateOnly Dateonly="Post.Published"/>
+                    Posted:
+                    <RenderDateOnly Dateonly="Post.Published"/>
                     &bull;
-                    Latest edit: <RenderDateTime Datetime="@(edited)"/>
+                    Latest edit:
+                    <RenderDateTime Datetime="@(edited)"/>
                 </small>
             }
             else
             {
-                <small>Posted: <RenderDateOnly Dateonly="Post.Published"/></small>
+                <small>Posted:
+                    <RenderDateOnly Dateonly="Post.Published"/>
+                </small>
             }
             <hr>
         </div>
@@ -36,6 +44,8 @@
 }
 else
 {
+    <PageTitle>Not found</PageTitle>
+
     <main id="main-content" class="container">
         <h1>Not found</h1>
         <p>Page not found</p>
@@ -86,4 +96,5 @@ else
 
         Post = BlogPosts.Posts.FirstOrDefault(p => p.Slug == Slug);
     }
+
 }

PancakesWeb/Components/Pages/Home.razor

@@ -4,7 +4,8 @@
 @using PancakesWeb.Data
 @using PancakesWeb.Schema
 
-<PageTitle>Home</PageTitle>
+<OpenGraph UrlPath="" Title="Home"
+           Description="I'm a cat enby (they/it) from Australia that likes cats, Linux, and programming"/>
 
 <main id="main-content" class="container">
     <h1 id="pancakes">pancakes</h1>

PancakesWeb/Components/UI/OpenGraph.razor

@@ -0,0 +1,32 @@
+<PageTitle>@Title - pancakes</PageTitle>
+<HeadContent>
+    <meta name="description" content="@Description"/>
+    <meta property="og:url" content="https://pancakes.gay/@UrlPath">
+    <meta property="og:site_name" content="pancakes">
+    <meta property="og:title" content="@Title">
+    <meta property="og:description" content="@Description">
+    <meta property="og:image" content="@(Assets[ImagePath ?? "icon.webp"])">
+    @if (ImageAlt != null)
+    {
+        <meta property="og:image:alt" content="@ImageAlt">
+    }
+    @if (LargeImage)
+    {
+        <meta property="og:type" content="article">
+        <meta property="twitter:card" content="summary_large_image">
+    }
+    else
+    {
+        <meta property="og:type" content="website">
+    }
+    <meta name="fediverse:creator" content="@@pancakes@meow.company">
+</HeadContent>
+
+@code {
+    [Parameter, EditorRequired] public required string UrlPath { get; set; }
+    [Parameter, EditorRequired] public required string Title { get; set; }
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public string? ImagePath { get; set; }
+    [Parameter] public string? ImageAlt { get; set; }
+    [Parameter] public bool LargeImage { get; set; }
+}