Setup OpenGraph
This commit is contained in:
parent
05d1dcda4d
commit
daf13e5180
4 changed files with 50 additions and 5 deletions
|
@ -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"]">
|
||||
|
|
|
@ -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"/>
|
||||
•
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
|
32
PancakesWeb/Components/UI/OpenGraph.razor
Normal file
32
PancakesWeb/Components/UI/OpenGraph.razor
Normal 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; }
|
||||
}
|
Loading…
Add table
Reference in a new issue