diff --git a/src/config.ts b/src/config.ts index 9c0d68b..a0f4b13 100644 --- a/src/config.ts +++ b/src/config.ts @@ -143,7 +143,13 @@ export const config: Config = { author: "Atridad Lahiji", }, openGraph: { - image: "/logo.png", + image: { + url: "/logo.webp", + width: 1024, + height: 1024, + type: "image/webp", + alt: "Atridad Lahiji", + }, type: "website", locale: "en_US", siteName: "Atridad Lahiji", diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 53582bd..6fc5060 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -3,13 +3,14 @@ import { ClientRouter } from "astro:transitions"; import NavigationBar from "../components/NavigationBar.vue"; import ScrollUpButton from "../components/ScrollUpButton.vue"; import { config } from "../config"; +import type { OpenGraphImage } from "../types"; const currentPath = Astro.url.pathname; import "../styles/global.css"; export interface Props { title?: string; description?: string; - ogImage?: string; + ogImage?: OpenGraphImage; ogType?: "website" | "article"; } @@ -24,9 +25,7 @@ const og = config.siteConfig.openGraph; const canonicalUrl = new URL(Astro.url.pathname, config.siteConfig.meta.url) .href; const resolvedOgImage = ogImage || og.image; -const resolvedOgImageUrl = resolvedOgImage - ? new URL(resolvedOgImage, config.siteConfig.meta.url).href - : undefined; +const resolvedOgImageUrl = new URL(resolvedOgImage.url, config.siteConfig.meta.url).href; const resolvedOgType = ogType || og.type || "website"; --- @@ -48,11 +47,11 @@ const resolvedOgType = ogType || og.type || "website"; {og.siteName && } {og.locale && } - { - resolvedOgImageUrl && ( - - ) - } + + + + + diff --git a/src/types.ts b/src/types.ts index 3ef3cc3..c078130 100644 --- a/src/types.ts +++ b/src/types.ts @@ -169,8 +169,16 @@ export interface HomepageSections { }; } +export interface OpenGraphImage { + url: string; + width: number; + height: number; + type: string; + alt: string; +} + export interface OpenGraphConfig { - image?: string; + image: OpenGraphImage; type?: "website" | "article"; locale?: string; siteName?: string; @@ -179,7 +187,7 @@ export interface OpenGraphConfig { export interface PageOpenGraph { title?: string; description?: string; - image?: string; + image?: OpenGraphImage; type?: "website" | "article"; }