Setup OpenGraph

This commit is contained in:
pancakes 2025-09-13 18:34:44 +10:00
parent 05d1dcda4d
commit daf13e5180
Signed by: pancakes
SSH key fingerprint: SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
4 changed files with 50 additions and 5 deletions

View file

@ -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"]">

View file

@ -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);
}
}

View file

@ -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>

View file

@ -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; }
}