feat(workshop): add social previews

apps/workshop/pb_hooks/workshop-utils.js

@@ -10,6 +10,37 @@ const escapeHtml = (value) =>
     .replaceAll('"', """)
     .replaceAll("'", "'");
 
+const renderWorkshopSocialHtml = (html, metadata) => {
+  const title = escapeHtml(metadata.title);
+  const description = escapeHtml(metadata.description);
+  const url = escapeHtml(metadata.url);
+  const image = escapeHtml(metadata.image);
+  const imageAlt = escapeHtml(`${metadata.submissionTitle} preview`);
+  const section = escapeHtml(metadata.section);
+  const tags = [
+    `<title>${title}</title>`,
+    `<meta name="description" content="${description}">`,
+    `<link rel="canonical" href="${url}">`,
+    `<meta property="og:type" content="article">`,
+    `<meta property="og:site_name" content="Homarr Workshop">`,
+    `<meta property="og:title" content="${title}">`,
+    `<meta property="og:description" content="${description}">`,
+    `<meta property="og:url" content="${url}">`,
+    `<meta property="article:section" content="${section}">`,
+    `<meta name="twitter:card" content="summary_large_image">`,
+    `<meta name="twitter:title" content="${title}">`,
+    `<meta name="twitter:description" content="${description}">`,
+    `<meta property="og:image" content="${image}">`,
+    `<meta property="og:image:alt" content="${imageAlt}">`,
+    `<meta name="twitter:image" content="${image}">`,
+    `<meta name="twitter:image:alt" content="${imageAlt}">`,
+  ].join("\n");
+  const replaceableTags =
+    /<title\b[^>]*>[\s\S]*?<\/title>|<meta\b[^>]*(?:name|property)=["'](?:description|og:(?:title|description|url|image|image:alt|type|site_name)|twitter:(?:card|title|description|image|image:alt)|article:section)["'][^>]*>|<link\b[^>]*rel=["']canonical["'][^>]*>/gi;
+
+  return html.replace(replaceableTags, "").replace("<head>", `<head>\n${tags}`);
+};
+
 const emailTemplate = (filename) => {
   const hooksPath = $os.getenv("WORKSHOP_PB_HOOKS_DIR") || __hooks;
   return $os.readFile($filepath.join(hooksPath, filename));
@@ -32,5 +63,6 @@ module.exports = {
   emailTemplate,
   escapeHtml,
   rejectRequest,
+  renderWorkshopSocialHtml,
   sendEmail,
 };

apps/workshop/pb_hooks/workshop.pb.js

@@ -17,6 +17,46 @@ onBootstrap((event) => {
   console.log(JSON.stringify({ event: "workshop_oauth_synchronized", enabled: configured }));
 });
 
+const workshopDetailPage = (event) => {
+  const id = event.request.pathValue("id");
+  if (id === "admin") return event.fileFS($os.dirFS("/pb_public"), "workshop/admin/index.html");
+
+  const indexHtml = toString($os.readFile("/pb_public/index.html"));
+  try {
+    const { renderWorkshopSocialHtml } = require(`${__hooks}/workshop-utils.js`);
+    const submission = event.app.findRecordById("submissions", id);
+    const type = submission.getString("type");
+    const section = type === "customCss" ? "Custom CSS" : "Custom widget";
+    const submissionTitle = submission.getString("title");
+    const title = `${submissionTitle} · Homarr Workshop`;
+    const description = `${section} for Homarr. ${submission.getString("description")}`.trim();
+    const workshopUrl = $os.getenv("WORKSHOP_WEB_URL").replace(/\/$/, "");
+    const apiUrl = $os.getenv("WORKSHOP_API_URL").replace(/\/$/, "");
+    const websiteUrl = $os.getenv("HOMARR_WEBSITE_URL").replace(/\/$/, "");
+    const screenshot = submission.getStringSlice("screenshots")[0];
+    const image = screenshot
+      ? `${apiUrl}/api/files/submissions/${submission.id}/${encodeURIComponent(screenshot)}`
+      : `${websiteUrl}/img/logo.png`;
+
+    return event.html(
+      200,
+      renderWorkshopSocialHtml(indexHtml, {
+        title,
+        description,
+        url: `${workshopUrl}/${submission.id}`,
+        image,
+        section,
+        submissionTitle,
+      }),
+    );
+  } catch {
+    return event.html(200, indexHtml);
+  }
+};
+
+routerAdd("GET", "/workshop/{id}", workshopDetailPage);
+routerAdd("GET", "/workshop/{id}/{$}", workshopDetailPage);
+
 onRecordCreateRequest((event) => {
   event.record.set("revision", 1);
   event.record.set("expectedRevision", 0);

apps/workshop/test-image.sh

@@ -38,6 +38,13 @@ WORKSHOP_TEST_URL="http://127.0.0.1:$WORKSHOP_IMAGE_TEST_PORT" \
   EXPECTED_WORKSHOP_WEB_URL="$PREVIEW_ORIGIN/workshop" \
   node apps/workshop/tests/runtime-config.integration.mjs
 
+docker exec "$WORKSHOP_IMAGE_TEST_NAME" pocketbase superuser create \
+  workshop-image@example.invalid 'WorkshopImageTest123!' --dir=/pb_data
+WORKSHOP_TEST_URL="http://127.0.0.1:$WORKSHOP_IMAGE_TEST_PORT" \
+  EXPECTED_WORKSHOP_API_URL="$PREVIEW_ORIGIN" \
+  EXPECTED_WORKSHOP_WEB_URL="$PREVIEW_ORIGIN/workshop" \
+  node apps/workshop/tests/workshop-social-metadata.integration.mjs
+
 curl --fail --location --silent "http://127.0.0.1:$WORKSHOP_IMAGE_TEST_PORT/workshop" >/dev/null
 curl --fail --silent \
   "http://127.0.0.1:$WORKSHOP_IMAGE_TEST_PORT/api/collections/workshop_listings/records?perPage=1" >/dev/null

apps/workshop/tests/workshop-contracts.mjs

@@ -1,5 +1,6 @@
 import { access, readFile } from "node:fs/promises";
 import { resolve } from "node:path";
+import vm from "node:vm";
 
 const read = (path) => readFile(resolve(path), "utf8");
 
@@ -39,6 +40,34 @@ for (const artifact of [
 if (hook.includes('findAllRecords("users")') || !hook.includes('findRecordsByFilter("users"')) {
   throw new Error("Workshop report notifications must use a filtered, bounded administrator query");
 }
+if (!hook.includes('routerAdd("GET", "/workshop/{id}"') || !hook.includes('getStringSlice("screenshots")')) {
+  throw new Error("Workshop detail routes must render server-side social metadata with submission screenshots");
+}
+
+const hookUtilsModule = { exports: {} };
+vm.runInNewContext(await read("apps/workshop/pb_hooks/workshop-utils.js"), { module: hookUtilsModule });
+const socialHtml = hookUtilsModule.exports.renderWorkshopSocialHtml(
+  '<html><head><title data-rh="true">Homarr documentation</title><meta data-rh="true" property="og:title" content="Homarr documentation"><meta data-rh="true" name="description" content="Generic"><link data-rh="true" rel="canonical" href="https://homarr.dev/"></head></html>',
+  {
+    title: "Ocean <Glow> · Homarr Workshop",
+    description: "Custom CSS for Homarr. Calm & readable.",
+    url: "https://preview.example/workshop/abc",
+    image: "https://preview.example/api/files/submissions/abc/preview.png",
+    section: "Custom CSS",
+    submissionTitle: "Ocean <Glow>",
+  },
+);
+for (const expected of [
+  "<title>Ocean &lt;Glow&gt; · Homarr Workshop</title>",
+  'property="og:description" content="Custom CSS for Homarr. Calm &amp; readable."',
+  'rel="canonical" href="https://preview.example/workshop/abc"',
+  'property="og:image" content="https://preview.example/api/files/submissions/abc/preview.png"',
+  'name="twitter:card" content="summary_large_image"',
+  'property="article:section" content="Custom CSS"',
+]) {
+  if (!socialHtml.includes(expected)) throw new Error(`Workshop social metadata is missing: ${expected}`);
+}
+if (socialHtml.includes("Homarr documentation")) throw new Error("Workshop social metadata must replace generic tags");
 
 const migration = await read("apps/workshop/pb_migrations/1784240000_workshop_widgets.js");
 for (const removedField of ["displayName", "avatarUrl", "githubProfileUrl", "githubUsername"]) {

apps/workshop/tests/workshop-social-metadata.integration.mjs

@@ -0,0 +1,55 @@
+const baseUrl = process.env.WORKSHOP_TEST_URL ?? "http://127.0.0.1:18091";
+const publicWorkshopUrl = process.env.EXPECTED_WORKSHOP_WEB_URL ?? "https://v2.preview.homarr.dev/workshop";
+const publicApiUrl = process.env.EXPECTED_WORKSHOP_API_URL ?? "https://v2.preview.homarr.dev";
+
+const request = async (path, init = {}) => {
+  const response = await fetch(`${baseUrl}${path}`, init);
+  const body = await response.json().catch(() => null);
+  if (!response.ok) throw new Error(`${response.status} ${path}: ${JSON.stringify(body)}`);
+  return body;
+};
+
+const root = await request("/api/collections/_superusers/auth-with-password", {
+  method: "POST",
+  headers: { "content-type": "application/json" },
+  body: JSON.stringify({ identity: "workshop-image@example.invalid", password: "WorkshopImageTest123!" }),
+});
+const headers = { authorization: `Bearer ${root.token}` };
+const author = await request("/api/collections/users/records", {
+  method: "POST",
+  headers: { ...headers, "content-type": "application/json" },
+  body: JSON.stringify({
+    email: "social-author@example.invalid",
+    password: "WorkshopSocialTest123!",
+    passwordConfirm: "WorkshopSocialTest123!",
+    name: "social-author",
+  }),
+});
+const png = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+  "base64",
+);
+const data = new FormData();
+data.set("type", "customCss");
+data.set("title", "Ocean <Glow>");
+data.set("description", "Calm & readable.");
+data.set("widgetSchema", "homarr-custom-css-v1");
+data.set("content", "body { color: white; }");
+data.set("author", author.id);
+data.set("screenshots", new File([png], "preview.png", { type: "image/png" }));
+const submission = await request("/api/collections/submissions/records", { method: "POST", headers, body: data });
+const screenshot = encodeURIComponent(submission.screenshots[0]);
+const html = await fetch(`${baseUrl}/workshop/${submission.id}`).then((response) => response.text());
+
+for (const expected of [
+  "<title>Ocean &lt;Glow&gt; · Homarr Workshop</title>",
+  'property="og:description" content="Custom CSS for Homarr. Calm &amp; readable."',
+  `rel="canonical" href="${publicWorkshopUrl}/${submission.id}"`,
+  `property="og:image" content="${publicApiUrl}/api/files/submissions/${submission.id}/${screenshot}"`,
+  'name="twitter:card" content="summary_large_image"',
+  'property="article:section" content="Custom CSS"',
+]) {
+  if (!html.includes(expected)) throw new Error(`Rendered Workshop page is missing social metadata: ${expected}`);
+}
+
+console.log("Workshop social metadata integration passed");