@learnpack/learnpack 5.0.98 → 5.0.106

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @learnpack/learnpack
 $ learnpack COMMAND
 running command...
 $ learnpack (-v|--version|version)
-@learnpack/learnpack/5.0.98 win32-x64 node-v22.15.0
+@learnpack/learnpack/5.0.106 win32-x64 node-v22.15.0
 $ learnpack --help [COMMAND]
 USAGE
   $ learnpack COMMAND
@@ -80,7 +80,7 @@ DESCRIPTION
        12. If there is a file within the exercises folder but not inside of any particular exercise's folder. (Warning)
 ```
 
-_See code: [src\commands\audit.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\audit.ts)_
+_See code: [src\commands\audit.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\audit.ts)_
 
 ## `learnpack breakToken`
 
@@ -95,7 +95,7 @@ OPTIONS
   -y, --yes      Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\breakToken.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\breakToken.ts)_
+_See code: [src\commands\breakToken.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\breakToken.ts)_
 
 ## `learnpack clean`
 
@@ -110,7 +110,7 @@ DESCRIPTION
      Extra documentation goes here
 ```
 
-_See code: [src\commands\clean.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\clean.ts)_
+_See code: [src\commands\clean.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\clean.ts)_
 
 ## `learnpack download [PACKAGE]`
 
@@ -128,7 +128,7 @@ DESCRIPTION
   Extra documentation goes here
 ```
 
-_See code: [src\commands\download.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\download.ts)_
+_See code: [src\commands\download.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\download.ts)_
 
 ## `learnpack help [COMMAND]`
 
@@ -160,7 +160,7 @@ OPTIONS
   -y, --yes      Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\init.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\init.ts)_
+_See code: [src\commands\init.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\init.ts)_
 
 ## `learnpack login [PACKAGE]`
 
@@ -178,7 +178,7 @@ DESCRIPTION
      Extra documentation goes here
 ```
 
-_See code: [src\commands\login.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\login.ts)_
+_See code: [src\commands\login.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\login.ts)_
 
 ## `learnpack logout [PACKAGE]`
 
@@ -196,7 +196,7 @@ DESCRIPTION
      Extra documentation goes here
 ```
 
-_See code: [src\commands\logout.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\logout.ts)_
+_See code: [src\commands\logout.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\logout.ts)_
 
 ## `learnpack plugins`
 
@@ -328,7 +328,7 @@ OPTIONS
   -s, --strict  strict mode
 ```
 
-_See code: [src\commands\publish.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\publish.ts)_
+_See code: [src\commands\publish.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\publish.ts)_
 
 ## `learnpack serve`
 
@@ -345,7 +345,7 @@ OPTIONS
   -y, --yes        Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\serve.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\serve.ts)_
+_See code: [src\commands\serve.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\serve.ts)_
 
 ## `learnpack start`
 
@@ -367,7 +367,7 @@ OPTIONS
   -y, --yes                           Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\start.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\start.ts)_
+_See code: [src\commands\start.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\start.ts)_
 
 ## `learnpack test [EXERCISESLUG]`
 
@@ -384,7 +384,7 @@ OPTIONS
   -y, --yes  Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\test.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\test.ts)_
+_See code: [src\commands\test.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\test.ts)_
 
 ## `learnpack translate`
 
@@ -398,7 +398,7 @@ OPTIONS
   -y, --yes  Skip all prompts and initialize an empty project
 ```
 
-_See code: [src\commands\translate.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.98/src\commands\translate.ts)_
+_See code: [src\commands\translate.ts](https://github.com/learnpack/learnpack-cli/blob/v5.0.106/src\commands\translate.ts)_
 <!-- commandsstop -->
 
 > > > > > > > 0cb3e56d84c197f9d008836bb573eade212b7e57

package/lib/commands/serve.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const command_1 = require("@oclif/command");
+// import * as ytdl from "ytdl-core"
+const youtube_transcript_1 = require("youtube-transcript");
 const express = require("express");
 const cors = require("cors");
 const path = require("path");
 const os = require("os");
 const archiver = require("archiver");
 const mkdirp = require("mkdirp");
+const html_to_text_1 = require("html-to-text");
 const rimraf = require("rimraf");
 const SessionCommand_1 = require("../utils/SessionCommand");
 const storage_1 = require("@google-cloud/storage");
@@ -22,6 +25,22 @@ const misc_1 = require("../utils/misc");
 const configBuilder_1 = require("../utils/configBuilder");
 dotenv.config();
 const frontMatter = require("front-matter");
+const fixPreviewUrl = (slug, previewUrl) => {
+    if (!previewUrl) {
+        return null;
+    }
+    if (previewUrl.startsWith("http")) {
+        return previewUrl;
+    }
+    const expectedUrl = `https://${slug}.learn-pack.com/preview.png`;
+    console.log("EXPECTED URL", expectedUrl);
+    return expectedUrl;
+};
+const getTitleFromHTML = (html) => {
+    const titleRegex = /<title>(.*?)<\/title>/;
+    const titleMatch = html.match(titleRegex);
+    return titleMatch ? titleMatch[1] : null;
+};
 class ServeCommand extends SessionCommand_1.default {
     async init() {
         const { flags } = this.parse(ServeCommand);
@@ -86,7 +105,7 @@ class ServeCommand extends SessionCommand_1.default {
             });
             stream.end(buffer);
         });
-        app.post("/upload-image", express.json(), async (req, res) => {
+        app.post("/upload-image", express.json({ limit: "20mb" }), async (req, res) => {
             const { image_url, destination } = req.body;
             if (!image_url || !destination) {
                 return res
@@ -96,9 +115,9 @@ class ServeCommand extends SessionCommand_1.default {
             try {
                 const response = await fetch(image_url);
                 if (!response.ok) {
-                    return res
-                        .status(400)
-                        .json({ error: `Failed to download image: ${response.statusText}` });
+                    return res.status(400).json({
+                        error: `Failed to download image: ${response.statusText}`,
+                    });
                 }
                 const contentType = response.headers.get("content-type") || "application/octet-stream";
                 const buffer = await response.arrayBuffer();
@@ -309,7 +328,6 @@ class ServeCommand extends SessionCommand_1.default {
         });
         app.post("/actions/publish/:slug", async (req, res) => {
             try {
-                // 1) Extraer token y body
                 const { slug } = req.params;
                 const rigoToken = req.header("x-rigo-token");
                 const bcToken = req.header("x-breathecode-token");
@@ -349,12 +367,11 @@ class ServeCommand extends SessionCommand_1.default {
                     .replace(/{{title}}/g, config.title.us)
                     .replace(/<title>.*<\/title>/, `<title>${config.title.us}</title>`)
                     .replace(/{{description}}/g, config.description.us)
-                    .replace(/{{preview}}/g, config.preview ||
+                    .replace(/{{preview}}/g, fixPreviewUrl(slug, config.preview) ||
                     "https://raw.githubusercontent.com/learnpack/ide/master/public/learnpack.svg")
                     .replace(/{{slug}}/g, slug)
                     .replace(/{{duration}}/g, (0, misc_1.minutesToISO8601Duration)(config.duration));
                 fs.writeFileSync(path.join(buildRoot, "index.html"), idxHtml);
-                // 6) Inyectar placeholders en manifest.webmanifest
                 const mfTpl = fs.readFileSync(path.join(uiSrc, "manifest.webmanifest"), "utf-8");
                 const mf = mfTpl
                     .replace(/{{course_title}}/g, config.title.us)
@@ -410,6 +427,45 @@ class ServeCommand extends SessionCommand_1.default {
                 return res.status(500).json({ error: error.message });
             }
         });
+        const YT_REGEX = /(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]{11})/;
+        app.get("/actions/fetch/:link", async (req, res) => {
+            const { link } = req.params;
+            try {
+                // 1) Decode the URL
+                const decoded = Buffer.from(link, "base64url").toString("utf-8");
+                const ytMatch = decoded.match(YT_REGEX);
+                if (ytMatch) {
+                    const videoId = ytMatch[1];
+                    // fetch metadata
+                    const items = await youtube_transcript_1.YoutubeTranscript.fetchTranscript(videoId);
+                    const transcript = items.map(i => i.text).join(" ");
+                    const { data: meta } = await axios_1.default.get("https://www.youtube.com/oembed", {
+                        params: { url: decoded, format: "json" },
+                    });
+                    return res.json({
+                        url: decoded,
+                        title: meta.title,
+                        author: meta.author_name,
+                        thumbnail: meta.thumbnail_url,
+                        transcript,
+                    });
+                }
+                const response = await axios_1.default.get(decoded, { responseType: "text" });
+                const html = response.data;
+                const title = getTitleFromHTML(html);
+                console.log("TITLE", title);
+                const text = (0, html_to_text_1.convert)(html);
+                return res.json({
+                    url: decoded,
+                    text,
+                    title,
+                });
+            }
+            catch (error) {
+                console.error("❌ /actions/fetch error:", error.message || error);
+                res.status(500).json({ error: error.message || "Failed to fetch link" });
+            }
+        });
         app.delete("/packages/:slug", async (req, res) => {
             console.log("DELETE /packages/:slug");
             const { slug } = req.params;
@@ -438,6 +494,24 @@ class ServeCommand extends SessionCommand_1.default {
                 return res.status(500).json({ error: "Failed to delete the package" });
             }
         });
+        app.get("/proxy", async (req, res) => {
+            const { url } = req.query;
+            if (!url) {
+                return res.status(400).json({ error: "URL is required" });
+            }
+            try {
+                const decodedUrl = Buffer.from(url, "base64url").toString("utf-8");
+                const response = await axios_1.default.get(decodedUrl, {
+                    responseType: "arraybuffer",
+                });
+                res.set(response.headers);
+                res.status(response.status).send(response.data);
+            }
+            catch (error) {
+                console.error("Error in /proxy:", error);
+                res.status(500).json({ error: "Failed to fetch the resource" });
+            }
+        });
         app.listen(PORT, () => {
             console.log(`🚀 Creator UI server running at http://localhost:${PORT}/creator`);
         });

package/lib/creatorDist/assets/{index-ldEC0yWM.css → index-Cvdi97GX.css}

@@ -26,6 +26,7 @@
       --tw-gradient-from-position: 0%;
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
@@ -53,7 +54,9 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-600: oklch(58.8% 0.158 241.966);
@@ -67,6 +70,7 @@
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -78,7 +82,9 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -88,6 +94,8 @@
     --text-base--line-height: 1.5;
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
@@ -97,6 +105,7 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 0.15s;
@@ -460,15 +469,27 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .-mt-5 {
+    margin-top: calc(var(--spacing) * -5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -487,6 +508,9 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -505,9 +529,18 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
   .h-15 {
     height: calc(var(--spacing) * 15);
   }
@@ -550,9 +583,18 @@
   .w-4\/5 {
     width: 80%;
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
@@ -568,12 +610,18 @@
   .max-w-\[700px\] {
     max-width: 700px;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -602,6 +650,12 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -611,9 +665,6 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-row {
-    flex-direction: row;
-  }
   .items-center {
     align-items: center;
   }
@@ -629,6 +680,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -769,6 +823,12 @@
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
   .bg-sky-500 {
     background-color: var(--color-sky-500);
   }
@@ -797,6 +857,9 @@
       var(--tw-gradient-to) var(--tw-gradient-to-position)
     );
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -806,6 +869,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -848,6 +914,10 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -864,6 +934,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -912,6 +986,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-sky-600 {
     color: var(--color-sky-600);
   }
@@ -921,9 +998,21 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .opacity-25 {
+    opacity: 0.25;
+  }
   .opacity-30 {
     opacity: 0.3;
   }
+  .opacity-75 {
+    opacity: 0.75;
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
+      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
       0 2px 4px -2px var(--tw-shadow-color, #0000001a);
@@ -965,6 +1054,14 @@
     );
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(
@@ -1013,6 +1110,18 @@
         var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring-blue-200:focus {
+    --tw-ring-color: var(--color-blue-200);
+  }
+  .disabled\:bg-gray-100:disabled {
+    background-color: var(--color-gray-100);
+  }
   .disabled\:opacity-40:disabled {
     opacity: 0.4;
   }
@@ -1124,6 +1233,9 @@ h1 {
 .bg-learnpack-blue {
   background-color: var(--soft-blue);
 }
+.bg-learnpack {
+  background-color: var(--learnpack-blue);
+}
 .bg-gray-blue {
   background-color: #e7f1ff;
 }
@@ -1153,9 +1265,6 @@ h1 {
   display: flex;
 }
 @keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
   to {
     transform: rotate(360deg);
   }
@@ -1326,6 +1435,10 @@ h1 {
   inherits: false;
   initial-value: 100%;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;