Fine-pixel decorations and share images

site/app/builder/page.tsx

@@ -3,6 +3,7 @@ import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import ProfileBuilder from "@/components/builder/ProfileBuilder";
 import { m, rich } from "@/i18n";
+import { ogImages } from "@/components/data";
 
 export const metadata: Metadata = {
   title: m.meta.builder.title,
@@ -12,6 +13,7 @@ export const metadata: Metadata = {
     url: "/builder",
     title: m.meta.builder.ogTitle,
     description: m.meta.builder.ogDescription,
+    images: ogImages("builder", m.meta.builder.ogImageAlt),
   },
 };
 

site/app/cards/page.tsx

@@ -3,12 +3,18 @@ import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import AllCards from "@/components/AllCards";
 import { m } from "@/i18n";
+import { ogImages } from "@/components/data";
 
 export const metadata: Metadata = {
   title: m.meta.cards.title,
   description: m.meta.cards.description,
   alternates: { canonical: "/cards" },
-  openGraph: { url: "/cards", title: m.meta.cards.ogTitle, description: m.meta.cards.ogDescription },
+  openGraph: {
+    url: "/cards",
+    title: m.meta.cards.ogTitle,
+    description: m.meta.cards.ogDescription,
+    images: ogImages("cards", m.meta.cards.ogImageAlt),
+  },
 };
 
 export default function CardsPage() {

site/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { HOST } from "@/components/data";
+import { HOST, ogImages } from "@/components/data";
 import { lang, m } from "@/i18n";
 
 const outfit = localFont({ src: "./fonts/Outfit-Variable.ttf", weight: "100 900", variable: "--font-outfit", display: "swap" });
@@ -20,7 +20,7 @@ export const metadata: Metadata = {
     siteName: meta.siteName,
     title: meta.ogTitle,
     description: meta.ogDescription,
-    images: [{ url: "/demo/stats?scene=castle-sky", width: 1600, height: 640, alt: meta.ogImageAlt }],
+    images: ogImages("home", meta.ogImageAlt),
   },
   title: meta.title,
   description: meta.description,

site/app/status/page.tsx

@@ -3,12 +3,18 @@ import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import Health from "@/components/Health";
 import { m, rich } from "@/i18n";
+import { ogImages } from "@/components/data";
 
 export const metadata: Metadata = {
   title: m.meta.status.title,
   description: m.meta.status.description,
   alternates: { canonical: "/status" },
-  openGraph: { url: "/status", title: m.meta.status.ogTitle, description: m.meta.status.ogDescription },
+  openGraph: {
+    url: "/status",
+    title: m.meta.status.ogTitle,
+    description: m.meta.status.ogDescription,
+    images: ogImages("status", m.meta.status.ogImageAlt),
+  },
 };
 
 export default function StatusPage() {

site/app/wiki/page.tsx

@@ -4,15 +4,20 @@ import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import Rune from "@/components/Rune";
 import { PreviewHint, PreviewLinks } from "@/components/Preview";
-import { RUNES, THEMES, REPO, HOST, card, cardName, DECORATIONS, sceneName, snap, type Widget } from "@/components/data";
+import { RUNES, THEMES, REPO, HOST, ogImages, card, cardName, DECORATIONS, sceneName, snap, type Widget } from "@/components/data";
 import { m, rich, type Tags } from "@/i18n";
 import w from "./wiki.module.css";
 
 export const metadata: Metadata = {
   title: m.wiki.meta.title,
   description: m.wiki.meta.description,
   alternates: { canonical: "/wiki" },
-  openGraph: { url: "/wiki", title: m.wiki.meta.ogTitle, description: m.wiki.meta.ogDescription },
+  openGraph: {
+    url: "/wiki",
+    title: m.wiki.meta.ogTitle,
+    description: m.wiki.meta.ogDescription,
+    images: ogImages("wiki", m.wiki.meta.ogImageAlt),
+  },
 };
 
 const TOC = [

site/components/data.ts

@@ -6,6 +6,9 @@ export const DEMO_USER = "BaranDev";
 /** The primary host; questlog.cevdetbaran.com still answers too. */
 export const HOST = "https://questlog.cc";
 
+/** The picture a page shows when its link is shared: its scene, the brand, the motto and a button. */
+export const ogImages = (page: string, alt: string) => [{ url: `/static/og/${page}.png`, width: 1200, height: 630, alt }];
+
 export type Widget = "stats" | "languages" | "streak";
 
 export const THEMES = [

site/components/snapped.json

@@ -1 +1 @@
-{"version": "14e0bebe5f"}
+{"version": "8b7274c022"}

site/i18n/en/site.ts

@@ -38,28 +38,31 @@ export const meta = {
     siteName: "questlog",
     ogTitle: "questlog: pixel art GitHub profile cards",
     ogDescription: "Pixel art cards for your GitHub profile README: stats, languages and streak in 16 painted scenes.",
-    ogImageAlt: "A questlog Character Sheet",
+    ogImageAlt: "questlog: pixel art cards for your GitHub profile, on a castle in the sky",
   },
   builder: {
     title: "questlog profile builder: your GitHub README with pixel art cards",
     description:
       "Write your GitHub profile README, add pixel art cards for your stats, languages and streak, and see it the way GitHub will show it, in light and dark.",
     ogTitle: "questlog profile builder",
     ogDescription: "Your GitHub profile README with pixel art cards, in four steps.",
+    ogImageAlt: "questlog profile builder, in a guild hall",
   },
   cards: {
     title: "All questlog cards: every scene, time and pixel style",
     description:
       "Every questlog card in one place: pick a scene and see all of its cards by day and by night, in fine and chunky pixels, with every fire and board.",
     ogTitle: "All questlog cards",
     ogDescription: "Every card in every scene, time and pixel style.",
+    ogImageAlt: "All questlog cards, in the cloud kingdom",
   },
   status: {
     title: "questlog health: is the service up, and how busy is it",
     description:
       "Live health of questlog: whether cards are served, whether stats arrive from GitHub, and whether new users get in right now.",
     ogTitle: "questlog health",
     ogDescription: "Live health of the questlog card service.",
+    ogImageAlt: "questlog health, in a war room",
   },
   adminStatus: { title: "questlog health, every number" },
 };

site/i18n/en/wiki.ts

@@ -4,6 +4,7 @@ export const wiki = {
     description: "How questlog works: the snippet, what every number means, fire tiers, runes, all sixteen scenes, every option and the messages.",
     ogTitle: "questlog wiki",
     ogDescription: "Every card, option and scene of questlog.",
+    ogImageAlt: "questlog wiki, in a royal library",
   },
   toc: {
     gettingStarted: "Getting started",