Social Sharing: Improve image handling

osmberlin · Sep 12, 2024 · 5a12871 · 5a12871
1 parent 6729392
commit 5a12871
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,24 +3,25 @@ import TailwindResponsiveHelper from './TailwindResponsiveHelper.astro'
 import './base.css'
 import type { LayoutLanguage } from './languages'
 import { getProject } from './utils/getProject'
+import pngSocialSharingFallback from '../../public/social-sharing.png'
 
 type Props = {
   title: string
   noindex?: boolean | undefined
   canonicalUrl?: string
   language?: LayoutLanguage | undefined
   description?: string
-  imagePath?: string
+  image?: ImageMetadata | undefined
   imageAlt?: string
 }
 
 const project = await getProject(Astro.request.url)
 
-const defaults = {
+const projectFallback = {
   title: project.meta?.title,
   language: project.meta.language,
   description: project.meta.description,
-  imagePath: project.meta.image?.src,
+  image: project.meta.image || pngSocialSharingFallback,
   imageAlt: project.meta.imageAlt,
 }
 
@@ -30,14 +31,14 @@ const {
   canonicalUrl,
   language,
   description,
-  imagePath,
+  image,
   imageAlt,
 } = Astro.props
 const noindex = project.enabled === false || contentNoindex
 ---
 
 <!doctype html>
-<html lang={language || defaults.language} class="h-full scroll-smooth">
+<html lang={language || projectFallback.language} class="h-full scroll-smooth">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -49,17 +50,18 @@ const noindex = project.enabled === false || contentNoindex
     {noindex && <meta name="robots" content="noindex" />}
     {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
 
-    <meta property="og:locale" content={language || defaults.language} />
-    <meta property="og:title" content={title || defaults.title} />
-    <meta property="og:description" content={description || defaults.description} />
-    <meta property="og:image" content={imagePath || defaults.imagePath} />
+    <meta property="og:locale" content={language || projectFallback.language} />
+    <meta property="og:title" content={title || projectFallback.title} />
+    <meta property="og:description" content={description || projectFallback.description} />
+    <meta property="og:image" content={image?.src || projectFallback.image.src} />
     <!-- We let the Twitter (…) figure out the given URL, so we don't accidentally overwrite params and such  -->
     <!-- <meta property="og:url" content="…"> -->
-    <meta name="twitter:title" content={title || defaults.title} />
-    <meta name="twitter:description" content={description || defaults.description} />
+    <meta name="twitter:title" content={title || projectFallback.title} />
+    <meta name="twitter:description" content={description || projectFallback.description} />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content={imagePath || defaults.imagePath} />
-    <meta name="twitter:image:alt" content={imageAlt || defaults.imageAlt} />
+    <meta name="twitter:image" content={image?.src || projectFallback.image.src} />
+    <meta name="twitter:image:alt" content={imageAlt || projectFallback.imageAlt} />
+
     <meta name="twitter:site" content="@osmberlin" />
     <meta name="fediverse:creator" content="@[email protected]" />