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

Improve opengraph meta data

This commit is contained in:
DrMint 2024-03-09 23:47:12 +01:00
parent a847b73363
commit bb47b237c8
10 changed files with 110 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/default_og.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

7
src/components/AppLayout/AppEmptyLayout.astro
View File

@ -4,20 +4,21 @@ import Topbar from "./components/Topbar/Topbar.astro";
import Footer from "./components/Footer.astro"; import Footer from "./components/Footer.astro";
import type { ParentPage } from "src/shared/payload/payload-sdk"; import type { ParentPage } from "src/shared/payload/payload-sdk";
import AppLayoutBackgroundImg from "./components/AppLayoutBackgroundImg.astro"; import AppLayoutBackgroundImg from "./components/AppLayoutBackgroundImg.astro";
import type { ComponentProps } from "astro/types";
interface Props { interface Props {
openGraph?: ComponentProps<typeof Html>["openGraph"];
parentPages?: ParentPage[]; parentPages?: ParentPage[];
metaTitle?: string;
hideFooterLinks?: boolean; hideFooterLinks?: boolean;
backgroundIllustration?: string | undefined; backgroundIllustration?: string | undefined;
} }
const { metaTitle, hideFooterLinks = false, parentPages, backgroundIllustration } = Astro.props; const { openGraph, hideFooterLinks = false, parentPages, backgroundIllustration } = Astro.props;
--- ---
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<Html title={metaTitle}> <Html openGraph={openGraph}>
<header> <header>
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />} {backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
<Topbar parentPages={parentPages} /> <Topbar parentPages={parentPages} />

8
src/components/AppLayout/AppLayout.astro
View File

@ -7,9 +7,10 @@ import AppLayoutTitle from "./components/AppLayoutTitle.astro";
import type { ComponentProps } from "astro/types"; import type { ComponentProps } from "astro/types";
interface Props { interface Props {
openGraph?: ComponentProps<typeof Html>["openGraph"];
parentPages?: ComponentProps<typeof Topbar>["parentPages"]; parentPages?: ComponentProps<typeof Topbar>["parentPages"];
pretitle?: string | undefined; pretitle?: string | undefined;
title: string; title?: string;
subtitle?: string | undefined; subtitle?: string | undefined;
description?: string | undefined; description?: string | undefined;
illustration?: string; illustration?: string;
@ -21,6 +22,7 @@ interface Props {
} }
const { const {
openGraph,
title, title,
subtitle, subtitle,
pretitle, pretitle,
@ -37,7 +39,7 @@ const {
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<Html title={title}> <Html openGraph={openGraph}>
<header> <header>
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />} {backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
@ -47,7 +49,7 @@ const {
<div id="header-content"> <div id="header-content">
<div id="header-left"> <div id="header-left">
<slot name="header-title"> <slot name="header-title">
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} /> {title && <AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />}
</slot> </slot>
<div class="prose"> <div class="prose">

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

@ -3,12 +3,34 @@ import UAParser from "ua-parser-js";
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
import "@fontsource-variable/vollkorn"; import "@fontsource-variable/vollkorn";
import "@fontsource-variable/murecho"; import "@fontsource-variable/murecho";
import { getI18n } from "src/i18n/i18n";
interface Props { interface Props {
title?: string | undefined; openGraph?:
| {
title?: string | undefined;
description?: string | undefined;
thumbnail?: string | undefined;
audio?: string | undefined;
video?: string | undefined;
}
| undefined;
} }
const { title = "Accord’s Library" } = Astro.props; const { currentLocale } = Astro.locals;
const { t } = await getI18n(currentLocale);
const { openGraph = {} } = Astro.props;
const {
description = t("global.meta.description"),
thumbnail = "/img/default_og.jpg",
audio,
video,
} = openGraph;
const title = openGraph.title
? `${t("global.siteName")} – ${openGraph.title}`
: t("global.siteName");
const userAgent = Astro.request.headers.get("user-agent") ?? ""; const userAgent = Astro.request.headers.get("user-agent") ?? "";
const parser = new UAParser(userAgent); const parser = new UAParser(userAgent);
@ -21,7 +43,7 @@ const { currentTheme } = Astro.locals;
--- ---
<html <html
lang="en" lang={currentLocale}
class:list={{ class:list={{
"manual-theme": currentTheme !== "auto", "manual-theme": currentTheme !== "auto",
"light-theme": currentTheme === "light", "light-theme": currentTheme === "light",
@ -29,15 +51,56 @@ const { currentTheme } = Astro.locals;
"texture-dots": !isIOS, "texture-dots": !isIOS,
}}> }}>
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>{title}</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<link rel="stylesheet" href="/css/tippy.css" /> <link rel="stylesheet" href="/css/tippy.css" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" /> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
{/* Meta & OpenGraph */}
<title>{title}</title>
<meta name="description" content={description} />
<meta name="twitter:site" content="@AccordsLibrary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={thumbnail} />
<meta property="og:type" content={video ? "video.movie" : audio ? "music.song" : "website"} />
<meta property="og:locale" content={currentLocale} />
<meta property="og:site_name" content={t("global.siteName")} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={thumbnail} />
<meta property="og:image:secure_url" content={thumbnail} />
<!-- <meta property="og:image:width" content={thumbnail.width.toString()} />
<meta property="og:image:height" content={thumbnail.height.toString()} />
<meta property="og:image:alt" content={thumbnail.alt} /> -->
<meta property="og:image:type" content="image/jpeg" />
{
audio && (
<>
<meta property="og:audio" content={audio} />
<meta property="og:audio:type" content="audio/mpeg" />
</>
)
}
{
video && (
<>
<meta property="og:video" content={video} />
<meta property="og:video:type" content="video/mp4" />
</>
)
}
<noscript> <noscript>
<style is:global> <style is:global>
.when-js { .when-js {
@ -82,7 +145,7 @@ const { currentTheme } = Astro.locals;
--color-base-950: #2f2419; --color-base-950: #2f2419;
--color-base-1000: #1f1a13; --color-base-1000: #1f1a13;
--color-elevation-2: var(--color-base-100); --color-elevation-2: var(--color-base-50);
--color-elevation-1: var(--color-base-125); --color-elevation-1: var(--color-base-125);
--color-elevation-0: var(--color-base-150); --color-elevation-0: var(--color-base-150);
@ -181,6 +244,7 @@ const { currentTheme } = Astro.locals;
--color-base-50: #11110d; --color-base-50: #11110d;
--color-base-0: #000000; --color-base-0: #000000;
--color-elevation-3: var(--color-base-150);
--color-elevation-2: var(--color-base-200); --color-elevation-2: var(--color-base-200);
--color-elevation-1: var(--color-base-175); --color-elevation-1: var(--color-base-175);
--color-elevation-0: var(--color-base-150); --color-elevation-0: var(--color-base-150);
@ -374,13 +438,12 @@ const { currentTheme } = Astro.locals;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition-duration: 250ms; transition-duration: 250ms;
transition-property: padding-top, box-shadow, background-color, color, border-color, translate; transition-property: padding-top, box-shadow, background-color, color, border-color;
&:hover { &:hover {
--foreground-color: var(--color-base-1000); --foreground-color: var(--color-base-1000);
box-shadow: 0 2px 2px var(--color-shadow-2); box-shadow: 0 2px 2px var(--color-shadow-2);
background-color: var(--color-elevation-1); background-color: var(--color-elevation-1);
translate: 0 -2px;
} }
&:active { &:active {
@ -388,7 +451,6 @@ const { currentTheme } = Astro.locals;
--foreground-color: var(--color-base-1000); --foreground-color: var(--color-base-1000);
background-color: var(--color-elevation-2); background-color: var(--color-elevation-2);
box-shadow: 0 6px 12px 2px var(--color-shadow-2); box-shadow: 0 6px 12px 2px var(--color-shadow-2);
translate: unset;
} }
} }

3
src/i18n/wordings-keys.ts
View File

@ -82,4 +82,5 @@ export type WordingKey =
| "pages.tableOfContent" | "pages.tableOfContent"
| "header.nav.parentPages.collections.folder" | "header.nav.parentPages.collections.folder"
| "header.nav.parentPages.collections.collectible" | "header.nav.parentPages.collections.collectible"
| "header.nav.parentPages.tooltip"; | "header.nav.parentPages.tooltip"
| "global.meta.description";

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

@ -15,6 +15,7 @@ import AvailabilityInfo from "./_components/AvailabilityInfo.astro";
import WeightInfo from "./_components/WeightInfo.astro"; import WeightInfo from "./_components/WeightInfo.astro";
import SubitemSection from "./_components/SubitemSection.astro"; import SubitemSection from "./_components/SubitemSection.astro";
import ContentsSection from "./_components/ContentsSection/ContentsSection.astro"; import ContentsSection from "./_components/ContentsSection/ContentsSection.astro";
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
const { slug } = Astro.params; const { slug } = Astro.params;
const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale); const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale);
@ -51,6 +52,10 @@ const scansFirstImage = scans[0];
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<AppEmptyLayout <AppEmptyLayout
openGraph={{
title: formatInlineTitle(translation),
description: translation.description && formatRichTextToString(translation.description),
}}
parentPages={parentPages} parentPages={parentPages}
backgroundIllustration={backgroundImage?.url ?? thumbnail?.url}> backgroundIllustration={backgroundImage?.url ?? thumbnail?.url}>
<div id="layout"> <div id="layout">

12
src/pages/[locale]/folders/[slug].astro
View File

@ -8,14 +8,16 @@ import ErrorMessage from "components/ErrorMessage.astro";
import { getI18n } from "src/i18n/i18n"; import { getI18n } from "src/i18n/i18n";
import CollectiblePreview from "components/Previews/CollectiblePreview.astro"; import CollectiblePreview from "components/Previews/CollectiblePreview.astro";
import PagePreview from "components/Previews/PagePreview.astro"; import PagePreview from "components/Previews/PagePreview.astro";
import { formatRichTextToString } from "src/utils/format";
const { slug } = Astro.params; const { slug } = Astro.params;
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const folder = await fetchOr404(() => payload.getFolder(slug!)); const folder = await fetchOr404(() => payload.getFolder(slug!));
if (folder instanceof Response) { if (folder instanceof Response) {
return folder; return folder;
} }
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const meta = getLocalizedMatch(folder.translations); const meta = getLocalizedMatch(folder.translations);
// TODO: handle light and dark illustration for applayout // TODO: handle light and dark illustration for applayout
@ -23,7 +25,13 @@ const meta = getLocalizedMatch(folder.translations);
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<AppLayout title={meta.name}> <AppLayout
title={meta.name}
openGraph={{
title: meta.name,
description: meta.description && formatRichTextToString(meta.description),
thumbnail: folder.lightThumbnail?.url ?? folder.darkThumbnail?.url,
}}>
{ {
meta.description && ( meta.description && (
<div slot="header-description"> <div slot="header-description">

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

@ -13,7 +13,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<AppLayout <AppLayout
title="Accord’s Library" openGraph={{ title: t("home.title") }}
backgroundIllustration="/img/background-image.webp" backgroundIllustration="/img/background-image.webp"
hideFooterLinks hideFooterLinks
hideHomeButton> hideHomeButton>

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

@ -1,7 +1,9 @@
--- ---
import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro"; import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
import { getI18n } from "src/i18n/i18n";
import Page from "src/pages/[locale]/api/pages/partial.astro"; import Page from "src/pages/[locale]/api/pages/partial.astro";
import { payload } from "src/shared/payload/payload-sdk"; import { payload } from "src/shared/payload/payload-sdk";
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
import { fetchOr404 } from "src/utils/responses"; import { fetchOr404 } from "src/utils/responses";
const { slug } = Astro.params; const { slug } = Astro.params;
@ -10,11 +12,19 @@ const page = await fetchOr404(() => payload.getPage(slug!));
if (page instanceof Response) { if (page instanceof Response) {
return page; return page;
} }
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const meta = getLocalizedMatch(page.translations);
--- ---
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<AppEmptyLayout <AppEmptyLayout
openGraph={{
title: formatInlineTitle(meta),
description: meta.summary && formatRichTextToString(meta.summary),
thumbnail: page.thumbnail?.url,
}}
parentPages={page.parentPages} parentPages={page.parentPages}
backgroundIllustration={page.backgroundImage?.url ?? page.thumbnail?.url}> backgroundIllustration={page.backgroundImage?.url ?? page.thumbnail?.url}>
<Page slug={page.slug} lang={Astro.locals.currentLocale} page={page} /> <Page slug={page.slug} lang={Astro.locals.currentLocale} page={page} />

2
src/pages/[locale]/settings/index.astro
View File

@ -11,7 +11,7 @@ const { t } = await getI18n(currentLocale);
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<AppLayout title={t("settings.title")}> <AppLayout openGraph={{ title: t("settings.title") }} title={t("settings.title")}>
<div id="main"> <div id="main">
<div class="section"> <div class="section">
<h2>{t("settings.language.title")}</h2> <h2>{t("settings.language.title")}</h2>