mirror of
https://github.com/Xevion/undefined.behavio.rs.git
synced 2025-12-05 23:16:45 -06:00
Add OGP metadata for posts
This commit is contained in:
BIN
public/img/bt-console-ogp.png
Normal file
BIN
public/img/bt-console-ogp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
public/img/default.png
Normal file
BIN
public/img/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@@ -3,6 +3,7 @@ title: "Bluetooth Pairing While Dual Booting"
|
|||||||
pubDate: 2024-01-31 19:43:59 -0600
|
pubDate: 2024-01-31 19:43:59 -0600
|
||||||
tags: ["dual boot", "bluetooth", "registry", "windows", "linux"]
|
tags: ["dual boot", "bluetooth", "registry", "windows", "linux"]
|
||||||
description: "When both your Windows and Linux machine use the same MAC address, it requires a special trick to maintain pairing on both installations"
|
description: "When both your Windows and Linux machine use the same MAC address, it requires a special trick to maintain pairing on both installations"
|
||||||
|
preview_image: "/img/bt-console-ogp.png"
|
||||||
---
|
---
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
|
|||||||
@@ -2,10 +2,13 @@
|
|||||||
import "@styles/global.scss";
|
import "@styles/global.scss";
|
||||||
import "@styles/fonts.scss";
|
import "@styles/fonts.scss";
|
||||||
import { ViewTransitions } from "astro:transitions";
|
import { ViewTransitions } from "astro:transitions";
|
||||||
|
import { SEO, type Props as SEOProps } from "astro-seo";
|
||||||
|
import OpenGraphArticleTags from "node_modules/astro-seo/src/components/OpenGraphArticleTags.astro";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title?: string;
|
title?: string;
|
||||||
build_revision?: string;
|
build_revision?: string;
|
||||||
|
ogp?: SEOProps;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title: titleProp, build_revision } = Astro.props;
|
const { title: titleProp, build_revision } = Astro.props;
|
||||||
@@ -13,6 +16,77 @@ const title =
|
|||||||
titleProp != undefined
|
titleProp != undefined
|
||||||
? `${titleProp} | undefined.behavio.rs`
|
? `${titleProp} | undefined.behavio.rs`
|
||||||
: "undefined.behavio.rs";
|
: "undefined.behavio.rs";
|
||||||
|
const linkedData = {
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"@id": "https://undefined.behavio.rs/#website",
|
||||||
|
url: "https://undefined.behavio.rs",
|
||||||
|
name: "undefined behaviors",
|
||||||
|
publisher: { "@id": "https://undefined.behavio.rs/#organization" },
|
||||||
|
inLanguage: "en-US"
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// "@type": "ImageObject",
|
||||||
|
// "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png",
|
||||||
|
// url: "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png",
|
||||||
|
// width: "200",
|
||||||
|
// height: "200",
|
||||||
|
// inLanguage: "en-US"
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
"@type": "WebPage",
|
||||||
|
"@id": Astro.props.ogp?.canonical,
|
||||||
|
url: Astro.props.ogp?.canonical,
|
||||||
|
name: {title},
|
||||||
|
// datePublished: "2020-07-21T07:47:00-07:00",
|
||||||
|
// dateModified: "2020-09-07T10:59:21-07:00",
|
||||||
|
isPartOf: { "@id": "https://undefined.behavio.rs/#website" },
|
||||||
|
// primaryImageOfPage: {
|
||||||
|
// "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png"
|
||||||
|
// },
|
||||||
|
inLanguage: "en-US"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Person",
|
||||||
|
"@id": "https://xevion.dev",
|
||||||
|
name: "Ryan Walters",
|
||||||
|
url: "https://xevion.dev",
|
||||||
|
image: {
|
||||||
|
"@type": "ImageObject",
|
||||||
|
// "@id": "https://secure.gravatar.com/avatar/13d11a314fe4096840a13b4ae4eb1796?s=96&d=retro&r=pg",
|
||||||
|
// url: "https://secure.gravatar.com/avatar/13d11a314fe4096840a13b4ae4eb1796?s=96&d=retro&r=pg",
|
||||||
|
caption: "Ryan Walters",
|
||||||
|
inLanguage: "en-US"
|
||||||
|
},
|
||||||
|
worksFor: { "@id": "https://undefined.behavio.rs/#organization" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "BlogPosting",
|
||||||
|
headline: title,
|
||||||
|
datePublished: "2020-07-21T07:47:00-07:00",
|
||||||
|
dateModified: "2020-09-07T10:59:21-07:00",
|
||||||
|
author: { "@id": "https://xevion.dev" },
|
||||||
|
// publisher: { "@id": "https://undefined.behavio.rs/#organization" },
|
||||||
|
description: Astro.props.ogp?.description,
|
||||||
|
name: title,
|
||||||
|
// "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#richSnippet",
|
||||||
|
isPartOf: {
|
||||||
|
// "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#webpage"
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
// "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png"
|
||||||
|
},
|
||||||
|
inLanguage: "en-US",
|
||||||
|
mainEntityOfPage: {
|
||||||
|
// "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#webpage"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const linkedDataTag = "<script type='application/ld+json'>" + JSON.stringify(linkedData) + "</script>"
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@@ -22,6 +96,8 @@ const title =
|
|||||||
<meta content="width=device-width" name="viewport" />
|
<meta content="width=device-width" name="viewport" />
|
||||||
<meta name="build-commit-id" content={build_revision} />
|
<meta name="build-commit-id" content={build_revision} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
<SEO {...Astro.props.ogp} />
|
||||||
|
<Fragment set:html={linkedDataTag} />
|
||||||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
|
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
|
||||||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
|
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
|
||||||
<link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />
|
<link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
import Base from "@layouts/Base.astro";
|
import Base from "@layouts/Base.astro";
|
||||||
import Header from "@components/Header.astro";
|
import Header from "@components/Header.astro";
|
||||||
|
import type { Props as SEOProps } from "astro-seo";
|
||||||
|
|
||||||
const repository_url = `https://github.com/${
|
const repository_url = `https://github.com/${
|
||||||
import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER
|
import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER
|
||||||
@@ -9,12 +10,13 @@ const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title?: string;
|
title?: string;
|
||||||
|
ogp?: SEOProps
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title, ogp } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base title={title}>
|
<Base title={title} ogp={ogp}>
|
||||||
<Header className="mt-5 mb-3" />
|
<Header className="mt-5 mb-3" />
|
||||||
<nav
|
<nav
|
||||||
class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none"
|
class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none"
|
||||||
|
|||||||
@@ -2,15 +2,83 @@
|
|||||||
import General from "@layouts/General.astro";
|
import General from "@layouts/General.astro";
|
||||||
import Time from "@components/Time.tsx";
|
import Time from "@components/Time.tsx";
|
||||||
import { type CollectionEntry } from "astro:content";
|
import { type CollectionEntry } from "astro:content";
|
||||||
|
import type { Props as SEOProps } from "astro-seo";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: CollectionEntry<"blog">;
|
post: CollectionEntry<"blog">;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = Astro.props;
|
const { post } = Astro.props;
|
||||||
const { title, pubDate, tags } = post.data;
|
const { title, pubDate, tags } = post.data;
|
||||||
const tagCount = tags.length;
|
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}>
|
<General title={title} ogp={ogp}>
|
||||||
<div class="max-w-3xl mx-4">
|
<div class="max-w-3xl mx-4">
|
||||||
<h1>
|
<h1>
|
||||||
<a href={post.slug}>
|
<a href={post.slug}>
|
||||||
|
|||||||
Reference in New Issue
Block a user