This just cleans up the code between the themes and the integration for satori.

This commit is contained in:
Adam Matthiesen 2024-01-31 00:16:42 -08:00
parent 712bdb5b38
commit 5aaaef0c57
2 changed files with 16 additions and 14 deletions

View File

@ -3,6 +3,7 @@ import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
import { AstroFont } from "astro-font";
import MainLayout from "../components/MainLayout.astro";
import { ViewTransitions } from "astro:transitions";
import { getOgImagePath } from "@matthiesenxyz/astro-ghostcms/satoriOG";
export type Props = {
content?: {
@ -15,18 +16,9 @@ export type Props = {
permalink?: string;
};
export const getOgImagePath = (filename: string = "index") => {
if (filename.startsWith("/")) filename = filename.substring(1);
if (filename.endsWith("/"))
filename = filename.substring(0, filename.length - 1);
if (filename === "") filename = "index";
return `./open-graph/${filename}.png`;
};
const ogI = new URL(getOgImagePath(Astro.url.pathname), Astro.url.origin).href;
const ogImage = new URL(getOgImagePath(Astro.url.pathname), Astro.url.origin)
.href;
const { content, permalink, image, settings, bodyClass = "" } = Astro.props as Props;
const { content, permalink, settings, bodyClass = "" } = Astro.props as Props;
const ghostAccentColor = settings.accent_color;
---
@ -69,14 +61,14 @@ const ghostAccentColor = settings.accent_color;
<meta property="og:title" content={content?.title} />
{permalink && <meta property="og:url" content={permalink} />}
{content?.description && <meta property="og:description" content={content.description} />}
<meta property="og:image" content={ogImage} />
<meta property="og:image" content={ogI} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content={content?.title} />
{permalink && <meta property="twitter:url" content={permalink} />}
{content?.description && <meta property="twitter:description" content={content.description} />}
<meta property="twitter:image" content={ogImage} />
<meta property="twitter:image" content={ogI} />
<!-- Link to the global style, or the file that imports constructs -->
<link

View File

@ -33,4 +33,14 @@ const satoriOG = ({ width, height, template }: SatoriAstroOGOptions) => {
};
};
export default satoriOG;
export default satoriOG;
export function getOgImagePath(filename = "index"):string {
if (filename.startsWith("/"))
filename = filename.substring(1);
if (filename.endsWith("/"))
filename = filename.substring(0, filename.length - 1);
if (filename === "") filename = "index";
return `./open-graph/${filename}.png`;
};