@learnpack/learnpack 5.0.357 → 5.0.358

package/lib/commands/publish.js

@@ -19,6 +19,7 @@ const prompts = require("prompts");
 const rigoActions_1 = require("../utils/rigoActions");
 const misc_1 = require("../utils/misc");
 const creatorUtilities_1 = require("../utils/creatorUtilities");
+const branding_1 = require("../utils/branding");
 const uploadZipEndpont = api_1.RIGOBOT_HOST + "/v1/learnpack/upload";
 const getAvailableLangs = (learnJson) => {
     const langs = Object.keys((learnJson === null || learnJson === void 0 ? void 0 : learnJson.title) || {});
@@ -383,8 +384,7 @@ class BuildCommand extends SessionCommand_1.default {
                 "LearnPack is awesome!";
             const title = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang) ||
                 "LearnPack: Interactive Learning as a Service";
-            const previewUrl = learnJson.preview ||
-                "https://raw.githubusercontent.com/learnpack/ide/refs/heads/master/public/learnpack.svg";
+            const previewUrl = learnJson.preview || (0, branding_1.getFallbackPreviewUrl)();
             // Replace placeholders and the <title>Old title </title> tag for a new tag with the title
             indexHtmlContent = indexHtmlContent
                 .replace(/{{description}}/g, description)

package/lib/commands/serve.js

@@ -38,6 +38,7 @@ const bucketIo_1 = require("../utils/coursePackage/bucketIo");
 const learnJson_1 = require("../utils/coursePackage/learnJson");
 const sidebar_1 = require("../utils/coursePackage/sidebar");
 const packageManifest_1 = require("../utils/packageManifest");
+const branding_1 = require("../utils/branding");
 const gcsBucketName_1 = require("../utils/gcsBucketName");
 const syllabusSync_1 = require("../utils/syllabusSync");
 const publishJournal_1 = require("../utils/publishJournal");
@@ -733,21 +734,88 @@ async function continueWithNextLesson(courseSlug, currentExerciseIndex, rigoToke
         }) });
     await saveSyllabus(courseSlug, newSyllabus, bucket);
 }
-const fixPreviewUrl = (slug, previewUrl) => {
-    if (!previewUrl) {
-        return null;
+/**
+ * The `og:image` of a published course.
+ *
+ * A published package is served from `{slug}.learn-pack.com`, so the course's
+ * own `preview.png` is the right card whenever it exists. This used to go
+ * through a helper that returned null for an empty preview, and both call sites
+ * passed an empty string — so every published course, preview or not, fell back
+ * to a shared SVG that no unfurl crawler can render.
+ */
+const resolveCoursePreviewUrl = async (bucket, slug, configuredPreview) => {
+    // `config` is parsed from a config.json in the bucket, so its declared types
+    // are an assertion rather than a guarantee: an old or hand-edited course can
+    // carry anything here, and a throw would fail the whole publication.
+    if (typeof configuredPreview === "string" &&
+        configuredPreview.startsWith("http")) {
+        return configuredPreview;
     }
-    if (previewUrl.startsWith("http")) {
-        return previewUrl;
+    try {
+        const [exists] = await bucket.file(`courses/${slug}/preview.png`).exists();
+        if (exists) {
+            return (0, packageManifest_1.resolvePreviewUrl)(slug);
+        }
     }
-    const expectedUrl = `https://${slug}.learn-pack.com/preview.png`;
-    return expectedUrl;
+    catch (error) {
+        console.error(`WARNING: could not check preview.png for ${slug}, using the brand card`, error);
+    }
+    return (0, branding_1.getFallbackPreviewUrl)();
 };
 const getTitleFromHTML = (html) => {
     const titleRegex = /<title>(.*?)<\/title>/;
     const titleMatch = html.match(titleRegex);
     return titleMatch ? titleMatch[1] : null;
 };
+const escapeHtmlAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+/**
+ * The IDE shell served to draft courses, with its meta tags filled in.
+ *
+ * The shell ships with `{{title}}`, `{{description}}` and `{{preview}}`
+ * placeholders that only get substituted when a course is published. Drafts were
+ * served the raw template, so a link shared in Slack or WhatsApp unfurled to a
+ * literal `{{title}}` / `{{description}}`.
+ */
+let draftShellTemplate = null;
+const loadDraftShellTemplate = () => {
+    const file = path.resolve(__dirname, "../ui/_app/index.html");
+    draftShellTemplate = fs
+        .readFileSync(file, "utf-8")
+        // A draft is not a real Course, so it must not emit Course structured data.
+        // The match is anchored to the typed opening tag and non-greedy on purpose:
+        // the shell also carries an inline <script> that loads the app bundle from
+        // CloudFront, and a looser pattern would swallow it and blank the page.
+        .replace(/[^\S\n]*<script type="application\/ld\+json">[\S\s]*?<\/script>\n?/, "");
+    return draftShellTemplate;
+};
+const renderDraftShell = (req) => {
+    const template = draftShellTemplate || loadDraftShellTemplate();
+    // Only the path: a preview URL can carry tokens in its query string, and
+    // og:url ends up in whatever crawler cache unfurls the link.
+    const canonicalUrl = escapeHtmlAttribute(`${(0, branding_1.getPublicHost)()}${req.path}`);
+    return (template
+        .replace(/<title>.*<\/title>/, `<title>${branding_1.DRAFT_PREVIEW_TITLE}</title>`)
+        .replace(/{{title}}/g, branding_1.DRAFT_PREVIEW_TITLE)
+        .replace(/{{description}}/g, branding_1.DRAFT_PREVIEW_DESCRIPTION)
+        .replace(/{{preview}}/g, (0, branding_1.getFallbackPreviewUrl)())
+        .replace("</head>", `  <meta property="og:url" content="${canonicalUrl}" />\n` +
+        `    <meta name="robots" content="noindex, nofollow, noarchive" />\n  </head>`)
+        // Safety net for placeholders a future shell may add: shipping an empty
+        // value to a crawler beats shipping "{{whatever}}".
+        .replace(/{{\w+}}/g, ""));
+};
+/**
+ * Drafts are unlisted work in progress. `noindex` goes out as both a meta tag
+ * and a header so it reaches crawlers that skip the markup; a `robots.txt`
+ * `Disallow` would be the wrong tool, since it blocks the fetch itself and
+ * would stop Slack and X from unfurling the link at all.
+ */
+const sendDraftShell = (req, res) => {
+    res
+        .type("html")
+        .set("X-Robots-Tag", "noindex, nofollow")
+        .send(renderDraftShell(req));
+};
 /** How often the notification is touched while a translation is running. */
 const SYNC_HEARTBEAT_INTERVAL_MS = 60 * 1000;
 /**
@@ -1045,6 +1113,10 @@ class ServeCommand extends SessionCommand_1.default {
         await (0, file_1.decompress)(`${__dirname}/../ui/app.tar.gz`, `${__dirname}/../ui/_app/`);
         const localAppPath = path.resolve(__dirname, "../ui/_app");
         // app.use(express.static(localAppPath))
+        // Warm the draft shell now that _app is on disk. Doing it here rather than
+        // on first request means a corrupt tarball fails at boot, with a stack
+        // trace, instead of on some user's preview link.
+        loadDraftShellTemplate();
         app.post("/upload", async (req, res) => {
             const { content, destination } = req.body;
             //   console.log("UPLOAD", content, destination)
@@ -2160,8 +2232,7 @@ class ServeCommand extends SessionCommand_1.default {
             console.log("GET /");
             const slug = req.query.slug;
             if (slug) {
-                const file = path.resolve(__dirname, "../ui/_app/index.html");
-                res.sendFile(file);
+                sendDraftShell(req, res);
             }
             else {
                 res.redirect("https://learnpack.co");
@@ -2169,12 +2240,16 @@ class ServeCommand extends SessionCommand_1.default {
         });
         app.get("/preview/:slug", async (req, res) => {
             console.log("GET COURSE PREVIEW /");
-            const file = path.resolve(__dirname, "../ui/_app/index.html");
-            res.sendFile(file);
+            sendDraftShell(req, res);
         });
         app.get("/preview/:slug/webview", async (req, res) => {
-            const file = path.resolve(__dirname, "../ui/_app/index.html");
-            res.sendFile(file);
+            sendDraftShell(req, res);
+        });
+        // The brand card used as og:image by drafts, and as the last-resort
+        // fallback by published courses without a preview of their own.
+        app.get("/og-image.png", (req, res) => {
+            res.set("Cache-Control", "public, max-age=86400");
+            res.sendFile(path.resolve(__dirname, "../ui/static/og-image.png"));
         });
         app.get("/config", async (req, res) => {
             const courseSlug = req.query.slug;
@@ -3742,13 +3817,13 @@ class ServeCommand extends SessionCommand_1.default {
                     title = config.title[availableLangs[0]];
                     selectedLang = availableLangs[0];
                 }
+                const previewUrl = await resolveCoursePreviewUrl(bucket, slug, config.preview);
                 const idxTpl = fs.readFileSync(path.join(uiSrc, "index.html"), "utf-8");
                 const idxHtml = idxTpl
                     .replace(/{{title}}/g, title)
                     .replace(/<title>.*<\/title>/, `<title>${title}</title>`)
                     .replace(/{{description}}/g, config.description[selectedLang])
-                    .replace(/{{preview}}/g, fixPreviewUrl(slug, "") ||
-                    "https://raw.githubusercontent.com/learnpack/ide/master/public/learnpack.svg")
+                    .replace(/{{preview}}/g, previewUrl)
                     .replace(/{{slug}}/g, slug)
                     .replace(/{{duration}}/g, (0, misc_1.minutesToISO8601Duration)(config.duration));
                 fs.writeFileSync(path.join(buildRoot, "index.html"), idxHtml);
@@ -3778,9 +3853,9 @@ class ServeCommand extends SessionCommand_1.default {
                 // 8) Crear el config.json en buildRoot con lo que retorna buildConfig
                 const fullConfig = { config, exercises };
                 fullConfig.config.slug = slug;
-                fullConfig.config.preview =
-                    fixPreviewUrl(slug, "") ||
-                        "https://raw.githubusercontent.com/learnpack/ide/master/public/learnpack.svg";
+                // Same URL the meta tags got: this used to overwrite the real preview
+                // of every published package with the unusable SVG fallback.
+                fullConfig.config.preview = previewUrl;
                 fs.writeFileSync(path.join(buildRoot, "config.json"), JSON.stringify(fullConfig, null, 2), "utf-8");
                 // 9) Empaquetar en ZIP (solo contenido de buildRoot)
                 const zipName = `${slug}.zip`;

package/lib/utils/branding.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Branding used by link previews (Open Graph / Twitter cards).
+ *
+ * Both the draft server and the publish pipeline need an absolute image URL for
+ * `og:image`, and drafts additionally need copy that says nothing about the
+ * course they belong to.
+ */
+/**
+ * Where `learnpack serve` runs in production. It is only a fallback: the server
+ * itself already has the real origin in `process.env.HOST` (it uses it to build
+ * webhook URLs). The `publish` command, however, runs on the author's machine
+ * with no such variable, and still has to write an absolute `og:image` into the
+ * package it uploads.
+ */
+export declare const PRODUCTION_PUBLIC_HOST = "https://app.learnpack.co";
+/**
+ * Public origin of the app server, without a trailing slash.
+ *
+ * Only an absolute http(s) origin is accepted. `HOST` is also the conventional
+ * name for a bind address, so a deployment that sets it to `0.0.0.0` would
+ * otherwise yield a relative `og:image` — which no crawler can resolve, and
+ * which would be baked into every package published from that machine.
+ * @returns The origin to build absolute preview URLs from.
+ */
+export declare function getPublicHost(): string;
+/**
+ * Neutral brand card, used as `og:image` when a course has no preview of its own.
+ *
+ * It has to be a raster image: no unfurl crawler renders SVG. The previous
+ * fallback pointed at `learnpack.svg` on raw.githubusercontent.com, which fails
+ * twice over — SVG is unsupported, and that host serves it as `text/plain` with
+ * `X-Content-Type-Options: nosniff`.
+ */
+export declare function getFallbackPreviewUrl(): string;
+/**
+ * Copy for the link preview of a draft course.
+ *
+ * A draft is unlisted work in progress, so the card carries branding only: it
+ * must not disclose the title, the description or anything else about the
+ * course, and the pages that use it are served `noindex`.
+ */
+export declare const DRAFT_PREVIEW_TITLE = "LearnPack \u2014 Draft course";
+export declare const DRAFT_PREVIEW_DESCRIPTION = "This course is still a draft and is not published yet.";

package/lib/utils/branding.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * Branding used by link previews (Open Graph / Twitter cards).
+ *
+ * Both the draft server and the publish pipeline need an absolute image URL for
+ * `og:image`, and drafts additionally need copy that says nothing about the
+ * course they belong to.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAFT_PREVIEW_DESCRIPTION = exports.DRAFT_PREVIEW_TITLE = exports.PRODUCTION_PUBLIC_HOST = void 0;
+exports.getPublicHost = getPublicHost;
+exports.getFallbackPreviewUrl = getFallbackPreviewUrl;
+/**
+ * Where `learnpack serve` runs in production. It is only a fallback: the server
+ * itself already has the real origin in `process.env.HOST` (it uses it to build
+ * webhook URLs). The `publish` command, however, runs on the author's machine
+ * with no such variable, and still has to write an absolute `og:image` into the
+ * package it uploads.
+ */
+exports.PRODUCTION_PUBLIC_HOST = "https://app.learnpack.co";
+/**
+ * Strips what `.env` files routinely smuggle in — a trailing comment, quotes,
+ * stray whitespace, a trailing slash — the same way `serve` sanitises `HOST`.
+ * @param raw - The raw environment value, if set.
+ * @returns The cleaned value, or an empty string.
+ */
+function normalizeOrigin(raw) {
+    if (!raw) {
+        return "";
+    }
+    return raw
+        .trim()
+        .split(/\s+#/)[0]
+        .trim()
+        .replace(/["']/g, "")
+        .replace(/\/+$/, "");
+}
+/**
+ * Public origin of the app server, without a trailing slash.
+ *
+ * Only an absolute http(s) origin is accepted. `HOST` is also the conventional
+ * name for a bind address, so a deployment that sets it to `0.0.0.0` would
+ * otherwise yield a relative `og:image` — which no crawler can resolve, and
+ * which would be baked into every package published from that machine.
+ * @returns The origin to build absolute preview URLs from.
+ */
+function getPublicHost() {
+    for (const raw of [process.env.PUBLIC_HOST, process.env.HOST]) {
+        const cleaned = normalizeOrigin(raw);
+        if (/^https?:\/\/\S+$/.test(cleaned)) {
+            return cleaned;
+        }
+    }
+    return exports.PRODUCTION_PUBLIC_HOST;
+}
+/**
+ * Neutral brand card, used as `og:image` when a course has no preview of its own.
+ *
+ * It has to be a raster image: no unfurl crawler renders SVG. The previous
+ * fallback pointed at `learnpack.svg` on raw.githubusercontent.com, which fails
+ * twice over — SVG is unsupported, and that host serves it as `text/plain` with
+ * `X-Content-Type-Options: nosniff`.
+ */
+function getFallbackPreviewUrl() {
+    return `${getPublicHost()}/og-image.png`;
+}
+/**
+ * Copy for the link preview of a draft course.
+ *
+ * A draft is unlisted work in progress, so the card carries branding only: it
+ * must not disclose the title, the description or anything else about the
+ * course, and the pages that use it are served `noindex`.
+ */
+exports.DRAFT_PREVIEW_TITLE = "LearnPack — Draft course";
+exports.DRAFT_PREVIEW_DESCRIPTION = "This course is still a draft and is not published yet.";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@learnpack/learnpack",
   "description": "Seamlessly build, sell and/or take interactive & auto-graded tutorials, start learning now or build a new tutorial to your audience.",
-  "version": "5.0.357",
+  "version": "5.0.358",
   "author": "Alejandro Sanchez @alesanchezr",
   "contributors": [
     {
@@ -166,7 +166,7 @@
     "audit:package-sources": "ts-node --project ./tsconfig.json ./scripts/audit-package-sources.ts",
     "backfill:package-manifest": "ts-node --project ./tsconfig.json ./scripts/backfill-package-manifest-s3.ts",
     "repair:legacy-packages": "ts-node --project ./tsconfig.json ./scripts/repair-legacy-packages.ts",
-    "copy-assets": "npx cpy src/creatorDist/**/* lib/creatorDist --parents --verbose && npx cpy src/utils/templates/**/* lib/utils/templates --parents --verbose && npx cpy src/lua/**/* lib/lua --parents --verbose",
+    "copy-assets": "npx cpy src/creatorDist/**/* lib/creatorDist --parents --verbose && npx cpy src/utils/templates/**/* lib/utils/templates --parents --verbose && npx cpy src/lua/**/* lib/lua --parents --verbose && npx cpy src/ui/static/**/* lib/ui/static --parents --verbose",
     "tsc": "tsc -b",
     "postpack": "rm -f oclif.manifest.json && eslint . --ext .ts --config .eslintrc",
     "prepack": "rm -rf lib && tsc -b && npm run copy-assets",

package/src/commands/publish.ts

@@ -20,6 +20,7 @@ import * as prompts from "prompts"
 import { isValidRigoToken } from "../utils/rigoActions"
 import { minutesToISO8601Duration } from "../utils/misc"
 import { getReadmeExtension, slugify } from "../utils/creatorUtilities"
+import { getFallbackPreviewUrl } from "../utils/branding"
 
 const uploadZipEndpont = RIGOBOT_HOST + "/v1/learnpack/upload"
 
@@ -588,9 +589,7 @@ class BuildCommand extends SessionCommand {
         getLocalizedValue(learnJson?.title, selectedLang) ||
         "LearnPack: Interactive Learning as a Service"
 
-      const previewUrl =
-        learnJson.preview ||
-        "https://raw.githubusercontent.com/learnpack/ide/refs/heads/master/public/learnpack.svg"
+      const previewUrl = learnJson.preview || getFallbackPreviewUrl()
       // Replace placeholders and the <title>Old title </title> tag for a new tag with the title
       indexHtmlContent = indexHtmlContent
         .replace(/{{description}}/g, description)

package/src/commands/serve.ts

@@ -81,7 +81,16 @@ import {
 } from "../utils/coursePackage/bucketIo"
 import { createLearnJson } from "../utils/coursePackage/learnJson"
 import { createInitialSidebar } from "../utils/coursePackage/sidebar"
-import { generateAndPersistPackageManifest } from "../utils/packageManifest"
+import {
+  generateAndPersistPackageManifest,
+  resolvePreviewUrl,
+} from "../utils/packageManifest"
+import {
+  DRAFT_PREVIEW_DESCRIPTION,
+  DRAFT_PREVIEW_TITLE,
+  getFallbackPreviewUrl,
+  getPublicHost,
+} from "../utils/branding"
 import { requireGcsBucketName } from "../utils/gcsBucketName"
 import {
   createGcsSyllabusSyncStorage,
@@ -1181,17 +1190,43 @@ async function continueWithNextLesson(
   await saveSyllabus(courseSlug, newSyllabus, bucket)
 }
 
-const fixPreviewUrl = (slug: string, previewUrl: string) => {
-  if (!previewUrl) {
-    return null
+/**
+ * The `og:image` of a published course.
+ *
+ * A published package is served from `{slug}.learn-pack.com`, so the course's
+ * own `preview.png` is the right card whenever it exists. This used to go
+ * through a helper that returned null for an empty preview, and both call sites
+ * passed an empty string — so every published course, preview or not, fell back
+ * to a shared SVG that no unfurl crawler can render.
+ */
+const resolveCoursePreviewUrl = async (
+  bucket: Bucket,
+  slug: string,
+  configuredPreview?: string
+): Promise<string> => {
+  // `config` is parsed from a config.json in the bucket, so its declared types
+  // are an assertion rather than a guarantee: an old or hand-edited course can
+  // carry anything here, and a throw would fail the whole publication.
+  if (
+    typeof configuredPreview === "string" &&
+    configuredPreview.startsWith("http")
+  ) {
+    return configuredPreview
   }
 
-  if (previewUrl.startsWith("http")) {
-    return previewUrl
+  try {
+    const [exists] = await bucket.file(`courses/${slug}/preview.png`).exists()
+    if (exists) {
+      return resolvePreviewUrl(slug)
+    }
+  } catch (error) {
+    console.error(
+      `WARNING: could not check preview.png for ${slug}, using the brand card`,
+      error
+    )
   }
 
-  const expectedUrl = `https://${slug}.learn-pack.com/preview.png`
-  return expectedUrl
+  return getFallbackPreviewUrl()
 }
 
 const getTitleFromHTML = (html: string) => {
@@ -1200,6 +1235,73 @@ const getTitleFromHTML = (html: string) => {
   return titleMatch ? titleMatch[1] : null
 }
 
+const escapeHtmlAttribute = (value: string) =>
+  value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;")
+
+/**
+ * The IDE shell served to draft courses, with its meta tags filled in.
+ *
+ * The shell ships with `{{title}}`, `{{description}}` and `{{preview}}`
+ * placeholders that only get substituted when a course is published. Drafts were
+ * served the raw template, so a link shared in Slack or WhatsApp unfurled to a
+ * literal `{{title}}` / `{{description}}`.
+ */
+let draftShellTemplate: string | null = null
+
+const loadDraftShellTemplate = (): string => {
+  const file = path.resolve(__dirname, "../ui/_app/index.html")
+
+  draftShellTemplate = fs
+    .readFileSync(file, "utf-8")
+    // A draft is not a real Course, so it must not emit Course structured data.
+    // The match is anchored to the typed opening tag and non-greedy on purpose:
+    // the shell also carries an inline <script> that loads the app bundle from
+    // CloudFront, and a looser pattern would swallow it and blank the page.
+    .replace(
+      /[^\S\n]*<script type="application\/ld\+json">[\S\s]*?<\/script>\n?/,
+      ""
+    )
+
+  return draftShellTemplate
+}
+
+const renderDraftShell = (req: express.Request): string => {
+  const template = draftShellTemplate || loadDraftShellTemplate()
+
+  // Only the path: a preview URL can carry tokens in its query string, and
+  // og:url ends up in whatever crawler cache unfurls the link.
+  const canonicalUrl = escapeHtmlAttribute(`${getPublicHost()}${req.path}`)
+
+  return (
+    template
+      .replace(/<title>.*<\/title>/, `<title>${DRAFT_PREVIEW_TITLE}</title>`)
+      .replace(/{{title}}/g, DRAFT_PREVIEW_TITLE)
+      .replace(/{{description}}/g, DRAFT_PREVIEW_DESCRIPTION)
+      .replace(/{{preview}}/g, getFallbackPreviewUrl())
+      .replace(
+        "</head>",
+        `  <meta property="og:url" content="${canonicalUrl}" />\n` +
+          `    <meta name="robots" content="noindex, nofollow, noarchive" />\n  </head>`
+      )
+      // Safety net for placeholders a future shell may add: shipping an empty
+      // value to a crawler beats shipping "{{whatever}}".
+      .replace(/{{\w+}}/g, "")
+  )
+}
+
+/**
+ * Drafts are unlisted work in progress. `noindex` goes out as both a meta tag
+ * and a header so it reaches crawlers that skip the markup; a `robots.txt`
+ * `Disallow` would be the wrong tool, since it blocks the fetch itself and
+ * would stop Slack and X from unfurling the link at all.
+ */
+const sendDraftShell = (req: express.Request, res: express.Response) => {
+  res
+    .type("html")
+    .set("X-Robots-Tag", "noindex, nofollow")
+    .send(renderDraftShell(req))
+}
+
 /** How often the notification is touched while a translation is running. */
 const SYNC_HEARTBEAT_INTERVAL_MS = 60 * 1000
 
@@ -1645,6 +1747,11 @@ class ServeCommand extends SessionCommand {
     const localAppPath = path.resolve(__dirname, "../ui/_app")
     // app.use(express.static(localAppPath))
 
+    // Warm the draft shell now that _app is on disk. Doing it here rather than
+    // on first request means a corrupt tarball fails at boot, with a stack
+    // trace, instead of on some user's preview link.
+    loadDraftShellTemplate()
+
     app.post("/upload", async (req, res) => {
       const { content, destination } = req.body
       //   console.log("UPLOAD", content, destination)
@@ -3130,8 +3237,7 @@ class ServeCommand extends SessionCommand {
       const slug = req.query.slug
 
       if (slug) {
-        const file = path.resolve(__dirname, "../ui/_app/index.html")
-        res.sendFile(file)
+        sendDraftShell(req, res)
       } else {
         res.redirect("https://learnpack.co")
       }
@@ -3140,13 +3246,18 @@ class ServeCommand extends SessionCommand {
     app.get("/preview/:slug", async (req, res) => {
       console.log("GET COURSE PREVIEW /")
 
-      const file = path.resolve(__dirname, "../ui/_app/index.html")
-      res.sendFile(file)
+      sendDraftShell(req, res)
     })
 
     app.get("/preview/:slug/webview", async (req, res) => {
-      const file = path.resolve(__dirname, "../ui/_app/index.html")
-      res.sendFile(file)
+      sendDraftShell(req, res)
+    })
+
+    // The brand card used as og:image by drafts, and as the last-resort
+    // fallback by published courses without a preview of their own.
+    app.get("/og-image.png", (req, res) => {
+      res.set("Cache-Control", "public, max-age=86400")
+      res.sendFile(path.resolve(__dirname, "../ui/static/og-image.png"))
     })
 
     app.get("/config", async (req, res) => {
@@ -5406,16 +5517,18 @@ class ServeCommand extends SessionCommand {
           selectedLang = availableLangs[0]
         }
 
+        const previewUrl = await resolveCoursePreviewUrl(
+          bucket,
+          slug,
+          config.preview
+        )
+
         const idxTpl = fs.readFileSync(path.join(uiSrc, "index.html"), "utf-8")
         const idxHtml = idxTpl
           .replace(/{{title}}/g, title)
           .replace(/<title>.*<\/title>/, `<title>${title}</title>`)
           .replace(/{{description}}/g, config.description[selectedLang])
-          .replace(
-            /{{preview}}/g,
-            fixPreviewUrl(slug, "") ||
-              "https://raw.githubusercontent.com/learnpack/ide/master/public/learnpack.svg"
-          )
+          .replace(/{{preview}}/g, previewUrl)
           .replace(/{{slug}}/g, slug)
           .replace(/{{duration}}/g, minutesToISO8601Duration(config.duration))
         fs.writeFileSync(path.join(buildRoot, "index.html"), idxHtml)
@@ -5463,9 +5576,9 @@ class ServeCommand extends SessionCommand {
         // 8) Crear el config.json en buildRoot con lo que retorna buildConfig
         const fullConfig = { config, exercises }
         fullConfig.config.slug = slug
-        fullConfig.config.preview =
-          fixPreviewUrl(slug, "") ||
-          "https://raw.githubusercontent.com/learnpack/ide/master/public/learnpack.svg"
+        // Same URL the meta tags got: this used to overwrite the real preview
+        // of every published package with the unusable SVG fallback.
+        fullConfig.config.preview = previewUrl
 
         fs.writeFileSync(
           path.join(buildRoot, "config.json"),