Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve opengraph

This commit is contained in:
DrMint 2024-05-11 01:02:55 +02:00
parent f75144540a
commit 7700146cf5
3 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/AppLayout/components/Html.astro
View File

@ -5,15 +5,16 @@ import "@fontsource-variable/vollkorn";
import "@fontsource-variable/murecho"; import "@fontsource-variable/murecho";
import { getI18n } from "src/i18n/i18n"; import { getI18n } from "src/i18n/i18n";
import AppLayoutSpinner from "./AppLayoutSpinner.astro"; import AppLayoutSpinner from "./AppLayoutSpinner.astro";
import type { EndpointAudio, EndpointVideo, PayloadImage } from "src/shared/payload/payload-sdk";
interface Props { interface Props {
openGraph?: openGraph?:
| { | {
title?: string | undefined; title?: string | undefined;
description?: string | undefined; description?: string | undefined;
thumbnail?: string | undefined; thumbnail?: PayloadImage | undefined;
audio?: string | undefined; audio?: EndpointAudio | undefined;
video?: string | undefined; video?: EndpointVideo | undefined;
} }
| undefined; | undefined;
} }
@ -24,13 +25,20 @@ const { t } = await getI18n(currentLocale);
const { openGraph = {} } = Astro.props; const { openGraph = {} } = Astro.props;
const { const {
description = t("global.meta.description"), description = t("global.meta.description"),
thumbnail = "/img/default_og.jpg", thumbnail = {
filename: "default_og.jpg",
filesize: 0,
height: 630,
width: 1200,
mimeType: "image/jpeg",
url: "/img/default_og.jpg",
},
audio, audio,
video, video,
} = openGraph; } = openGraph;
const title = openGraph.title const title = openGraph.title
? `${t("global.siteName")} – ${openGraph.title}` ? `${openGraph.title} – ${t("global.siteName")}`
: t("global.siteName"); : t("global.siteName");
const userAgent = Astro.request.headers.get("user-agent") ?? ""; const userAgent = Astro.request.headers.get("user-agent") ?? "";
@ -69,7 +77,7 @@ const { currentTheme } = Astro.locals;
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={thumbnail} /> <meta name="twitter:image" content={thumbnail.url} />
<meta property="og:type" content={video ? "video.movie" : audio ? "music.song" : "website"} /> <meta property="og:type" content={video ? "video.movie" : audio ? "music.song" : "website"} />
<meta property="og:locale" content={currentLocale} /> <meta property="og:locale" content={currentLocale} />
@ -78,26 +86,27 @@ const { currentTheme } = Astro.locals;
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={thumbnail} /> <meta property="og:image" content={thumbnail.url} />
<meta property="og:image:secure_url" content={thumbnail} /> <meta property="og:image:secure_url" content={thumbnail.url} />
<!-- <meta property="og:image:width" content={thumbnail.width.toString()} /> <meta property="og:image:width" content={thumbnail.width.toString()} />
<meta property="og:image:height" content={thumbnail.height.toString()} /> <meta property="og:image:height" content={thumbnail.height.toString()} />
<meta property="og:image:alt" content={thumbnail.alt} /> --> <meta property="og:image:type" content={thumbnail.mimeType} />
<meta property="og:image:type" content="image/jpeg" />
{ {
audio && ( audio && (
<> <>
<meta property="og:audio" content={audio} /> <meta property="og:audio" content={audio.url} />
<meta property="og:audio:type" content="audio/mpeg" /> <meta property="og:audio:secure_url" content={audio.url} />
<meta property="og:audio:type" content={audio.mimeType} />
</> </>
) )
} }
{ {
video && ( video && (
<> <>
<meta property="og:video" content={video} /> <meta property="og:video" content={video.url} />
<meta property="og:video:type" content="video/mp4" /> <meta property="og:video:secure_url" content={video.url} />
<meta property="og:video:type" content={video.mimeType} />
</> </>
) )
} }

1
src/pages/[locale]/collectibles/[slug]/index.astro
View File

@ -52,6 +52,7 @@ const translation = getLocalizedMatch(translations);
openGraph={{ openGraph={{
title: formatInlineTitle(translation), title: formatInlineTitle(translation),
description: translation.description && formatRichTextToString(translation.description), description: translation.description && formatRichTextToString(translation.description),
thumbnail,
}} }}
parentPages={parentPages} parentPages={parentPages}
backgroundImage={backgroundImage ?? thumbnail}> backgroundImage={backgroundImage ?? thumbnail}>

2
src/pages/[locale]/pages/[slug].astro
View File

@ -23,7 +23,7 @@ const meta = getLocalizedMatch(page.translations);
openGraph={{ openGraph={{
title: formatInlineTitle(meta), title: formatInlineTitle(meta),
description: meta.summary && formatRichTextToString(meta.summary), description: meta.summary && formatRichTextToString(meta.summary),
thumbnail: page.thumbnail?.url, thumbnail: page.thumbnail,
}} }}
parentPages={page.parentPages} parentPages={page.parentPages}
backgroundImage={page.backgroundImage ?? page.thumbnail}> backgroundImage={page.backgroundImage ?? page.thumbnail}>