feat: gallery key controls, og:type and og:image

src/components/Gallery.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { GiPlainSquare, GiSquare } from "react-icons/gi";
 import { ImCross } from "react-icons/im";
 import { formatDate } from "../lib/format";
@@ -35,6 +35,27 @@ export default function Gallery({ images, currentPage, lastPage, total, perPage
     else window.location.href = `${pageUrl(currentPage - 1)}?index=${perPage - 1}`;
   };
 
+  // Re-bound every render so the handlers always see the current image.
+  // Lightbox open: step through images. Overview: step through gallery pages (wrapping).
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const forward = e.key === "ArrowRight" || e.key === "l";
+      const back = e.key === "ArrowLeft" || e.key === "h";
+      if (active !== null) {
+        if (forward) next();
+        else if (back) prev();
+        else if (e.key === "Escape") show(null);
+      } else if (forward) {
+        window.location.href = pageUrl(currentPage === lastPage ? 1 : currentPage + 1);
+      } else if (back) {
+        window.location.href = pageUrl(currentPage === 1 ? lastPage : currentPage - 1);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+
   const current = active === null ? null : images[active];
 
   return (

src/layouts/Layout.astro

@@ -11,12 +11,16 @@ interface Props {
   /** Document title prefix; "<title> | Terasology". Omit for the plain site title. */
   title?: string;
   description?: string;
+  /** Social preview image, as a site path or absolute URL; defaults to the logo. */
+  image?: string;
+  /** Open Graph type; "article" for blog posts. */
+  type?: "website" | "article";
 }
 
-const { heading, title, description = site.description } = Astro.props;
+const { heading, title, description = site.description, type = "website" } = Astro.props;
 const fullTitle = title ? `${title} | ${site.title}` : site.title;
 const url = new URL(Astro.url.pathname, site.url).href;
-const image = new URL(site.logo, site.url).href;
+const image = new URL(Astro.props.image ?? site.logo, site.url).href;
 ---
 
 <!doctype html>
@@ -35,9 +39,11 @@ const image = new URL(site.logo, site.url).href;
     />
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
+    <meta property="og:type" content={type} />
     <meta property="og:url" content={url} />
     <meta property="og:title" content={fullTitle} />
     <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:creator" content={site.twitterUsername} />
     <meta name="twitter:title" content={fullTitle} />

src/pages/blog/[slug].astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import { getImage, Image } from "astro:assets";
 import { render } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import SocialLinks from "../../components/SocialLinks.astro";
@@ -14,9 +14,17 @@ export async function getStaticPaths() {
 const { post } = Astro.props as { post: Post };
 const { Content } = await render(post);
 const { title, author, date, cover, description } = post.data;
+// jpg rather than webp: social crawlers handle it more reliably
+const preview = await getImage({ src: cover, width: 1200, format: "jpg" });
 ---
 
-<Layout heading={title} title={title} description={description}>
+<Layout
+  heading={title}
+  title={title}
+  description={description}
+  image={preview.src}
+  type="article"
+>
   <div class="title">
     <h6>Posted by {author} on <span>{formatDate(date)}</span></h6>
   </div>