Files
undefined.behavio.rs/src/layouts/Post.astro
2024-02-01 02:33:59 -06:00

106 lines
2.5 KiB
Plaintext

---
import General from "@layouts/General.astro";
import Time from "@components/Time.tsx";
import { type CollectionEntry } from "astro:content";
import type { Props as SEOProps } from "astro-seo";
interface Props {
post: CollectionEntry<"blog">;
}
const { post } = Astro.props;
const { title, pubDate, tags } = post.data;
const tagCount = tags.length;
const ogp: SEOProps = {
title,
description: post.data.description,
canonical: `${Astro.site}posts/${post.slug}`,
openGraph: {
optional: {
siteName: "undefined behaviors",
locale: "en_US",
},
basic: {
title,
type: "article",
image: post.data.preview_image ?? "/img/default.png",
},
article: {
tags,
section: "Article",
},
},
twitter: {
site: "@xevioni",
creator: "@xevioni",
description: post.data.description,
card: "summary_large_image",
image: post.data.preview_image ?? "/img/default.png",
title: title,
},
extend: {
meta: [
{ content: "Written by", name: "twitter:label1" },
{ content: "Ryan Walters", name: "twitter:data1" },
],
},
};
/**
*
* title={title}
description="A heavily optimized description full of well-researched keywords."
openGraph={{
basic: {
title: "A Very Descriptive Title",
type: "A type.",
image: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
}
}}
twitter={{
creator: "@xevioni"
}}
extend={{
// extending the default link tags
link: [{ rel: "icon", href: "/favicon.ico" }],
// extending the default meta tags
meta: [
{
name: "twitter:image",
content: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
},
{ name: "twitter:title", content: "Tinker Tailor Soldier Spy" },
{ name: "twitter:description", content: "Agent" },
],
}}
*/
---
<General title={title} ogp={ogp}>
<div class="max-w-3xl mx-4">
<h1>
<a href={post.slug}>
{title}
</a>
</h1>
<p class="mt-0 text-sm ml-5">
<Time time={pubDate} client:load />
<span class="ml-1 space-x-2">
{
tags.map((tag, i) =>
// Ignore required due to whitespace sensitive content
// prettier-ignore
<><a href={`/tags/${tag}`}>{tag}</a>{i < tagCount - 1 ? "," : ""}</>,
)
}
</span>
<article>
<slot />
</article>
</p>
</div>
<hr />
</General>