@learnpack/learnpack 5.0.357 → 5.0.359

package/src/commands/serve.ts

@@ -55,9 +55,7 @@ import api, {
   RIGOBOT_HOST,
   RIGOBOT_REALTIME_HOST,
   listUserAcademies,
-  doesAssetExists,
   type AssetSyncError,
-  resolveLearnpackPackageId,
 } from "../utils/api"
 import {
   createUploadMiddleware,
@@ -66,7 +64,12 @@ import {
 import { buildConfig } from "../utils/configBuilder"
 import { checkReadability, slugify } from "../utils/creatorUtilities"
 import { checkAndFixSidebarPure } from "../utils/sidebarGenerator"
-import { handleAssetCreation } from "./publish"
+import {
+  determineAcademyMode,
+  hasPublishedAsset,
+  resolvePackageAssets,
+} from "../utils/assetResolver"
+import { syncPackageAssets } from "../utils/assetSync"
 import {
   FormState,
   Lesson,
@@ -81,7 +84,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,
@@ -529,36 +541,6 @@ const cleanFormStateForSyllabus = (formState: FormState) => {
   }
 }
 
-const getLocalizedValue = (
-  translations: Record<string, any> | undefined,
-  lang: string,
-  fallbackLangs: string[] = ["en", "us"]
-): string => {
-  if (!translations || typeof translations !== "object") return ""
-
-  const direct = translations[lang]
-  if (typeof direct === "string" && direct.trim().length > 0) return direct
-
-  for (const fb of fallbackLangs) {
-    const v = translations[fb]
-    if (typeof v === "string" && v.trim().length > 0) return v
-  }
-
-  const firstKey = Object.keys(translations)[0]
-  const first = firstKey ? translations[firstKey] : ""
-  return typeof first === "string" ? first : ""
-}
-
-function assetSyncErrorDetail(err: any): string {
-  if (typeof err?.detail === "string") return err.detail
-  if (typeof err?.message === "string") return err.message
-  try {
-    return JSON.stringify(err)
-  } catch {
-    return String(err)
-  }
-}
-
 const createMultiLangAsset = async (
   bucket: Bucket,
   rigoToken: string,
@@ -568,85 +550,38 @@ const createMultiLangAsset = async (
   deployUrl: string,
   academyId?: number
 ): Promise<{ errors: AssetSyncError[] }> => {
-  const learnpackId = await resolveLearnpackPackageId(rigoToken, courseSlug)
-  if (learnpackId === null) {
-    return {
-      errors: [
-        {
-          kind: "package_error",
-          error: {
-            detail:
-              "Could not resolve Learnpack package id; assets not synced to Breathecode.",
-          },
-        },
-      ],
-    }
-  }
-
-  const availableLangs = Object.keys(courseJson.title)
-  console.log("AVAILABLE LANGUAGES to upload asset", availableLangs)
-
-  const all_translations: string[] = []
-  const errors: AssetSyncError[] = []
-
-  for (const lang of availableLangs) {
-    // eslint-disable-next-line no-await-in-loop
-    const indexReadme = await bucket.file(
+  const readReadme = async (lang: string): Promise<string> => {
+    const indexReadme = bucket.file(
       `courses/${courseSlug}/README${getReadmeExtension(lang)}`
     )
-    let indexReadmeString = ""
     try {
-      // eslint-disable-next-line no-await-in-loop
-      const [indexReadmeContent] = await indexReadme.download()
-      indexReadmeString = indexReadmeContent.toString()
+      const [content] = await indexReadme.download()
+      return content.toString()
     } catch (error) {
       console.error("Error downloading index readme", error)
       // TODO: Trigger generation of the index readme
-      indexReadmeString = ""
+      return ""
     }
+  }
 
-    const b64IndexReadme = Buffer.from(indexReadmeString).toString("base64")
-
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      const asset = await handleAssetCreation(
-        { token: bcToken, rigobotToken: rigoToken.trim() },
-        courseJson,
-        lang,
-        deployUrl,
-        b64IndexReadme,
-        academyId,
-        learnpackId,
-        undefined,
-        all_translations
-      )
-
-      if (!asset) {
-        errors.push({
-          kind: "lang_error",
-          lang,
-          error: { detail: "Failed to create asset" },
-        })
-        console.log("No se pudo crear el asset, saltando idioma", lang)
-        continue
-      }
+  const result = await syncPackageAssets({
+    bcToken,
+    rigoToken,
+    packageSlug: courseSlug,
+    learnJson: courseJson,
+    deployUrl,
+    academyId,
+    readReadme,
+  })
 
-      all_translations.push(asset.slug)
-    } catch (error) {
-      const errorData =
-        error && typeof error === "object" && "response" in error ?
-          (error as any).response?.data || error :
-          error
-      errors.push({
-        kind: "lang_error",
-        lang,
-        error: { detail: assetSyncErrorDetail(errorData) },
-      })
-      console.error(`Error creating asset for language ${lang}:`, error)
-    }
+  for (const warning of result.warnings) console.warn("[assets]", warning)
+  for (const synced of result.synced) {
+    console.log(
+      `[assets] ${synced.action} "${synced.lang}": #${synced.asset.id} ${synced.asset.slug}`
+    )
   }
 
-  return { errors }
+  return { errors: result.errors }
 }
 
 const lessonCleaner = (lesson: Lesson) => {
@@ -1181,17 +1116,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 +1161,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 +1673,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 +3163,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 +3172,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) => {
@@ -5281,6 +5318,10 @@ class ServeCommand extends SessionCommand {
           })
         }
 
+        // Older IDEs only send the Breathecode token; without the Rigobot
+        // token the lookup falls back to the title-derived slugs.
+        const rigoToken = req.header("x-rigo-token")
+
         const configFile = await bucket.file(
           `courses/${slug}/.learn/config.json`
         )
@@ -5288,56 +5329,51 @@ class ServeCommand extends SessionCommand {
         const configJson = JSON.parse(configContent.toString())
         const { config } = configJson
 
-        const availableLangs = Object.keys(config.title || {})
-        let isPublished = false
-
-        // Collect academy ids from all existing assets
-        const foundAcademyIds: number[] = []
-
-        const slugsToCheck = availableLangs
-          .map(lang => {
-            const assetTitle = getLocalizedValue(config.title, lang)
-            if (!assetTitle) return null
-            const assetSlug = slugify(assetTitle).slice(0, 47)
-            return `${assetSlug}-${lang}`
-          })
-          .filter((slug): slug is string => slug !== null)
+        const resolution = await resolvePackageAssets({
+          bcToken,
+          rigoToken,
+          packageSlug: slug,
+          learnJson: config,
+        })
+        for (const warning of resolution.warnings) {
+          console.warn("[package-academy]", warning)
+        }
 
-        const assetChecks = await Promise.all(
-          slugsToCheck.map(slug => doesAssetExists(bcToken, slug))
-        )
+        const isPublished = hasPublishedAsset(resolution)
+        const academyMode = determineAcademyMode(resolution)
+        const warnings = [...resolution.warnings]
+        if (resolution.packageState === "unknown") {
+          warnings.push(
+            `${resolution.packageError}; existing assets could not be checked.`
+          )
+        }
 
-        for (const { exists, academyId: existingAcademyId } of assetChecks) {
-          if (exists) {
-            isPublished = true
-            if (existingAcademyId !== undefined) {
-              foundAcademyIds.push(existingAcademyId)
-            }
+        for (const [lang, entry] of resolution.byLang) {
+          if (entry.status === "unknown") {
+            warnings.push(`"${lang}": ${entry.error}`)
+          } else if (entry.status === "ambiguous") {
+            warnings.push(
+              `"${lang}": ${
+                entry.candidates.length
+              } assets found (${entry.candidates
+                .map(c => `#${c.id} ${c.slug}`)
+                .join(", ")})`
+            )
           }
         }
 
-        const uniqueAcademies = [...new Set(foundAcademyIds)]
-
-        type AcademyMode = "select" | "locked" | "conflict";
-        let mode: AcademyMode
-        let lockedAcademyId: number | undefined
-        let conflictAcademies: number[] | undefined
-
-        if (uniqueAcademies.length === 0) {
-          mode = "select"
-        } else if (uniqueAcademies.length === 1) {
-          mode = "locked"
-          lockedAcademyId = uniqueAcademies[0]
-        } else {
-          mode = "conflict"
-          conflictAcademies = uniqueAcademies
-        }
+        const mode = academyMode.type
+        const lockedAcademyId =
+          academyMode.type === "locked" ? academyMode.academyId : undefined
+        const conflictAcademies =
+          academyMode.type === "conflict" ? academyMode.academies : undefined
 
         return res.json({
           isPublished,
           mode,
           lockedAcademyId,
           conflictAcademies,
+          warnings,
         })
       } catch (error) {
         console.error("Error fetching package academy:", error)
@@ -5406,16 +5442,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 +5501,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"),