@learnpack/learnpack 5.0.240 → 5.0.246

package/src/commands/serve.ts

@@ -1,6 +1,5 @@
 import { flags } from "@oclif/command"
 
-// import { readDocument } from "../utils/readDocuments"
 import { YoutubeTranscript } from "youtube-transcript"
 import * as express from "express"
 import * as cors from "cors"
@@ -31,6 +30,7 @@ import {
   generateImage,
   isPackageAuthor,
   createStructuredPreviewReadme,
+  translateCourseMetadata,
 } from "../utils/rigoActions"
 import * as dotenv from "dotenv"
 import {
@@ -65,15 +65,13 @@ function findLast<T>(
 export const createLearnJson = (courseInfo: FormState) => {
   // console.log("courseInfo to create learn json", courseInfo)
 
-  const expectedPreviewUrl = `https://${slugify(
-    courseInfo.title as string
-  )}.learn-pack.com/preview.png`
+  const expectedPreviewUrl = `https://${courseInfo.slug}.learn-pack.com/preview.png`
   console.log("Preview url in generated learn.json", expectedPreviewUrl)
 
   const language = courseInfo.language || "en"
 
   const learnJson = {
-    slug: slugify(courseInfo.title as string),
+    slug: courseInfo.slug,
     title:
       language === "en" || language === "us" ?
         {
@@ -106,27 +104,6 @@ const uploadFileToBucket = async (
   await fileRef.save(Buffer.from(file, "utf8"))
 }
 
-const uploadImageToBucket = async (
-  bucket: Bucket,
-  url: string,
-  path: string
-) => {
-  const response = await fetch(url)
-  if (!response.ok) {
-    throw new Error(`Failed to download image: ${response.statusText}`)
-  }
-
-  const contentType =
-    response.headers.get("content-type") || "application/octet-stream"
-  const buffer = await response.arrayBuffer()
-
-  const fileRef = bucket.file(path)
-  await fileRef.save(Buffer.from(buffer), {
-    resumable: false,
-    contentType,
-  })
-}
-
 const PARAMS = {
   expected_grade_level: "8",
   max_fkgl: 10,
@@ -135,41 +112,6 @@ const PARAMS = {
   max_title_length: 50,
 }
 
-// app.post("/webhooks/:courseSlug/images/:imageId", async (req, res) => {
-//   const { courseSlug, imageId } = req.params
-//   const body = req.body
-//   console.log("RECEIVING IMAGE WEBHOOK", body)
-
-//   const imageUrl = body.image_url
-//   const imagePath = `courses/${courseSlug}/.learn/assets/${imageId}`
-
-//   const imageFile = bucket.file(imagePath)
-//   const [exists] = await imageFile.exists()
-//   if (!exists) {
-//     // Descargar la imagen
-//     const response = await fetch(imageUrl)
-//     if (!response.ok) {
-//       return res.status(400).json({
-//         status: "ERROR",
-//         message: "No se pudo descargar la imagen",
-//       })
-//     }
-
-//     const buffer = await response.arrayBuffer()
-
-//     // Guardar la imagen en el bucket
-//     await imageFile.save(new Uint8Array(buffer), {
-//       contentType: "image/png",
-//     })
-//   }
-
-//   emitToNotification(imageId, {
-//     status: "SUCCESS",
-//     message: "Image generated successfully",
-//   })
-//   res.json({ status: "SUCCESS" })
-// })
-
 export const processImage = async (
   url: string,
   description: string,
@@ -186,7 +128,6 @@ export const processImage = async (
       prompt: description,
       callbackUrl: webhookUrl,
     })
-    // await uploadImageToBucket(bucket, res.image_url, imagePath)
 
     // console.log("✅ Image", imagePath, "generated successfully!")
     return true
@@ -236,7 +177,6 @@ const uploadInitialReadme = async (
 }
 
 const cleanFormState = (formState: FormState) => {
-  // keysToDelete: description, technologies, purpose
   const {
     description,
     technologies,
@@ -252,6 +192,45 @@ const cleanFormState = (formState: FormState) => {
   return rest
 }
 
+const createMultiLangAsset = async (
+  bucket: Bucket,
+  rigoToken: string,
+  bcToken: string,
+  courseSlug: string,
+  courseJson: any,
+  deployUrl: string
+) => {
+  const availableLangs = Object.keys(courseJson.title)
+  console.log("AVAILABLE LANGUAGES to upload asset", availableLangs)
+
+  const all_translations: string[] = []
+
+  for (const lang of availableLangs) {
+    // eslint-disable-next-line no-await-in-loop
+    const indexReadme = await bucket.file(
+      `courses/${courseSlug}/README.${
+        lang === "us" || lang === "en" ? "md" : `${lang}.md`
+      }`
+    )
+    // eslint-disable-next-line no-await-in-loop
+    const [indexReadmeContent] = await indexReadme.download()
+    const indexReadmeString = indexReadmeContent.toString()
+    const b64IndexReadme = Buffer.from(indexReadmeString).toString("base64")
+
+    // eslint-disable-next-line no-await-in-loop
+    const asset = await handleAssetCreation(
+      { token: bcToken, rigobotToken: rigoToken.trim() },
+      courseJson,
+      lang,
+      deployUrl,
+      b64IndexReadme,
+      all_translations
+    )
+
+    all_translations.push(asset.slug)
+  }
+}
+
 async function startExerciseGeneration(
   bucket: Bucket,
   rigoToken: string,
@@ -544,7 +523,6 @@ export default class ServeCommand extends SessionCommand {
         const { courseSlug } = req.params
         const body = req.body
 
-        console.log("RECEIVING INITIAL README WEBHOOK", body)
         // Save the file as courses/courseSlug/README.md
         const filePath = `courses/${courseSlug}/README.${
           body.parsed.language_code === "us" ||
@@ -935,25 +913,34 @@ export default class ServeCommand extends SessionCommand {
 
     app.post("/actions/translate", express.json(), async (req, res) => {
       console.log("POST /actions/translate")
-      const { exerciseSlugs, languages, rigoToken } = req.body
+      const { exerciseSlugs, languages, rigoToken, currentLanguage } = req.body
       const query = req.query
       const courseSlug = query.slug
 
-      console.log("EXERCISE SLUGS", exerciseSlugs)
-      console.log("LANGUAGES", languages)
-      console.log("RIGO TOKEN", rigoToken)
-
       if (!rigoToken) {
         return res.status(400).json({ error: "RigoToken not found" })
       }
 
       const languagesToTranslate: string[] = languages.split(",")
 
+      const course = await bucket
+        .file(`courses/${courseSlug}/learn.json`)
+        .download()
+
+      const courseJson = JSON.parse(course.toString())
+      const languageCodes = new Set()
+
       try {
         await Promise.all(
           exerciseSlugs.map(async (slug: string) => {
-            const readmePath = `courses/${courseSlug}/exercises/${slug}/README.md`
+            const readmePath = `courses/${courseSlug}/exercises/${slug}/README${
+              currentLanguage === "us" || currentLanguage === "en" ?
+                "" :
+                `.${currentLanguage}`
+            }.md`
+
             const readme = await bucket.file(readmePath).download()
+
             await Promise.all(
               languagesToTranslate.map(async (language: string) => {
                 const response = await translateExercise(rigoToken, {
@@ -963,14 +950,98 @@ export default class ServeCommand extends SessionCommand {
                 })
 
                 const translatedReadme = await bucket.file(
-                  `courses/${courseSlug}/exercises/${slug}/README.${response.parsed.output_language_code}.md`
+                  `courses/${courseSlug}/exercises/${slug}/README${
+                    response.parsed.output_language_code === "us" ||
+                    response.parsed.output_language_code === "en" ?
+                      "" :
+                      `.${response.parsed.output_language_code}`
+                  }.md`
                 )
                 await translatedReadme.save(response.parsed.translation)
+
+                languageCodes.add(response.parsed.output_language_code)
               })
             )
           })
         )
 
+        if (languageCodes.has("en")) {
+          languageCodes.delete("en")
+          languageCodes.add("us")
+        }
+
+        const currentLanguages = Object.keys(courseJson.title)
+        for (const languageCode of currentLanguages) {
+          if (languageCodes.has(languageCode)) {
+            languageCodes.delete(languageCode)
+          }
+        }
+
+        if ([...languageCodes].length > 0) {
+          console.log("TRANSLATING COURSE METADATA", languageCodes)
+
+          const translatedCourseMetadata = await Promise.all(
+            [...languageCodes].map(async languageCode => {
+              const result = await translateCourseMetadata(rigoToken, {
+                title: courseJson.title[currentLanguage],
+                description: courseJson.description[currentLanguage],
+                destination_lang_code: languageCode as string,
+              })
+
+              return {
+                languageCode,
+                title: result.parsed.title,
+                description: result.parsed.description,
+              }
+            })
+          )
+
+          for (const metadata of translatedCourseMetadata) {
+            courseJson.title[metadata.languageCode as string] = metadata.title
+            courseJson.description[metadata.languageCode as string] =
+              metadata.description
+          }
+
+          await uploadFileToBucket(
+            bucket,
+            JSON.stringify(courseJson),
+            `courses/${courseSlug}/learn.json`
+          )
+
+          const previewReadme = await bucket.file(
+            `courses/${courseSlug}/README${
+              currentLanguage === "us" || currentLanguage === "en" ?
+                "" :
+                `.${currentLanguage}`
+            }.md`
+          )
+          const [previewReadmeContent] = await previewReadme.download()
+          const previewReadmeContentString = previewReadmeContent.toString()
+
+          await Promise.all(
+            [...languageCodes].map(async languageCode => {
+              const translatedPreviewReadme = await translateExercise(
+                rigoToken,
+                {
+                  text_to_translate: previewReadmeContentString,
+                  output_language: languageCode as string,
+                  exercise_slug: "preview-readme",
+                }
+              )
+
+              await bucket
+                .file(
+                  `courses/${courseSlug}/README${
+                    languageCode === "us" || languageCode === "en" ?
+                      "" :
+                      `.${languageCode}`
+                  }.md`
+                )
+                .save(translatedPreviewReadme.parsed.translation)
+            })
+          )
+        }
+
         return res.status(200).json({ message: "Translated exercises" })
       } catch (error) {
         console.log(error, "ERROR")
@@ -979,6 +1050,8 @@ export default class ServeCommand extends SessionCommand {
     })
 
     app.delete("/exercise/:slug/delete", async (req, res) => {
+      console.log("DELETE /exercise/:slug/delete")
+
       const { slug } = req.params
       const query = req.query
       const courseSlug = query.slug
@@ -1032,13 +1105,17 @@ export default class ServeCommand extends SessionCommand {
         res.json(sidebar)
       } catch (error: any) {
         if (error.code === 404) {
-          console.log("SIDEBAR FILE NOT FOUND", courseSlug)
-
           const { exercises } = await buildConfig(bucket, courseSlug)
 
           const exerciseSlugsArray = exercises.map(exercise => exercise.slug)
           const sidebar = await createInitialSidebar(exerciseSlugsArray)
 
+          await uploadFileToBucket(
+            bucket,
+            JSON.stringify(sidebar),
+            `courses/${courseSlug}/.learn/sidebar.json`
+          )
+
           if (rigoToken) {
             const { fixedSidebar } = await checkAndFixSidebarPure(
               sidebar,
@@ -1053,20 +1130,9 @@ export default class ServeCommand extends SessionCommand {
               )
             }
 
-            await uploadFileToBucket(
-              bucket,
-              JSON.stringify(sidebar),
-              `courses/${courseSlug}/.learn/sidebar.json`
-            )
             return res.status(200).json(fixedSidebar)
           }
 
-          await uploadFileToBucket(
-            bucket,
-            JSON.stringify(sidebar),
-            `courses/${courseSlug}/.learn/sidebar.json`
-          )
-
           return res.status(200).json(sidebar)
         }
 
@@ -1075,35 +1141,6 @@ export default class ServeCommand extends SessionCommand {
       }
     })
 
-    // app.get("/test/:slug", (req, res) => {
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello broder",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "done",
-    //     log: "Hello broder",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "other",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   res.send({ message: "Course creation started" })
-    // })
-
     app.get("/technologies", async (req, res) => {
       console.log("GET /technologies")
 
@@ -1143,7 +1180,7 @@ export default class ServeCommand extends SessionCommand {
         return res.status(400).json({ error: "Missing tokens" })
       }
 
-      const courseSlug = slugify(syllabus.courseInfo.title)
+      const courseSlug = syllabus.courseInfo.slug
 
       const tutorialDir = `courses/${courseSlug}`
       const learnJson = createLearnJson(syllabus.courseInfo)
@@ -1241,7 +1278,7 @@ export default class ServeCommand extends SessionCommand {
 
       return res.json({
         message: "Course created",
-        slug: slugify(syllabus.courseInfo.title),
+        slug: syllabus.courseInfo.slug,
       })
     })
 
@@ -1356,6 +1393,7 @@ export default class ServeCommand extends SessionCommand {
     app.post("/actions/publish/:slug", async (req, res) => {
       try {
         const { slug } = req.params
+        const { currentLanguage } = req.body
         const rigoToken = req.header("x-rigo-token")
         const bcToken = req.header("x-breathecode-token")
         // const { academyId, categoryId } = req.body
@@ -1371,8 +1409,6 @@ export default class ServeCommand extends SessionCommand {
           slug
         )
 
-        // const fixedSlug = fixSlugLength(slug)
-
         const prefix = `courses/${slug}/`
         const tmpRoot = path.join(os.tmpdir(), `learnpack-${slug}`)
         const buildRoot = path.join(tmpRoot, "build")
@@ -1409,11 +1445,6 @@ export default class ServeCommand extends SessionCommand {
           selectedLang = availableLangs[0]
         }
 
-        // console.log(availableLangs, "AVAILABLE LANGs")
-        // console.log(selectedLang, "SELECTED LANG")
-        // console.log(title, "TITLE")
-
-        // 5) Inyectar placeholders en index.html
         const idxTpl = fs.readFileSync(path.join(uiSrc, "index.html"), "utf-8")
         const idxHtml = idxTpl
           .replace(/{{title}}/g, title)
@@ -1480,29 +1511,18 @@ export default class ServeCommand extends SessionCommand {
             {
               headers: {
                 ...form.getHeaders(),
-                Authorization: `Token ${rigoToken.trim()}`,
+                Authorization: "Token " + rigoToken.trim(),
               },
             }
           )
 
-          const indexReadme = await bucket.file(
-            `courses/${slug}/README.${
-              selectedLang === "us" || selectedLang === "en" ?
-                "md" :
-                `${selectedLang}.md`
-            }`
-          )
-          const [indexReadmeContent] = await indexReadme.download()
-          const indexReadmeString = indexReadmeContent.toString()
-          const b64IndexReadme =
-            Buffer.from(indexReadmeString).toString("base64")
-
-          await handleAssetCreation(
-            { token: bcToken, rigobotToken: rigoToken },
+          await createMultiLangAsset(
+            bucket,
+            rigoToken,
+            bcToken,
+            slug,
             fullConfig.config,
-            selectedLang,
-            rigoRes.data.url,
-            b64IndexReadme
+            rigoRes.data.url
           )
 
           rimraf.sync(tmpRoot)

package/src/creator/src/App.tsx

@@ -26,6 +26,7 @@ import ResumeCourseModal from "./components/ResumeCourseModal"
 import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 import { useTranslation } from "react-i18next"
 import NotificationListener from "./components/NotificationListener"
+import { slugify } from "./utils/creatorUtils"
 
 function App() {
   const navigate = useNavigate()
@@ -410,7 +411,8 @@ function App() {
                   lessons,
                   courseInfo: {
                     ...formState,
-                    title: fixTitleLength(res.parsed.title),
+                    title: res.parsed.title,
+                    slug: slugify(fixTitleLength(res.parsed.title)),
                     description: res.parsed.description,
                     language:
                       res.parsed.languageCode || formState.language || "en",

package/src/creator/src/components/NotificationListener.tsx

@@ -13,7 +13,7 @@ const NotificationListener: React.FC<NotificationListenerProps> = ({
   onNotification,
 }) => {
   useEffect(() => {
-    console.log("NOTIFICATION ID listening", notificationId)
+
     if (!notificationId) return
 
     socketClient.connect()

package/src/creator/src/components/syllabus/SyllabusEditor.tsx

@@ -13,7 +13,6 @@ import {
   // reWriteTitle,
   useConsumableCall,
   isValidRigoToken,
-  fixTitleLength,
 } from "../../utils/lib"
 
 import Loader from "../Loader"
@@ -96,25 +95,23 @@ const SyllabusEditor: React.FC = () => {
       return
     }
 
-    let slug = slugify(syllabus.courseInfo.title)
-    let newTitle = syllabus.courseInfo.title
-    let isAvailable = await isSlugAvailable(slug)
+    let newSlug = syllabus.courseInfo.slug
+    let isAvailable = await isSlugAvailable(syllabus.courseInfo.slug)
 
     while (!isAvailable) {
-      if (newTitle.length > 50) {
-        newTitle = newTitle.slice(0, 44)
+      if (newSlug.length > 50) {
+        newSlug = newSlug.slice(0, 44)
       }
-      newTitle = newTitle + "-" + randomUUID()
-      newTitle = newTitle.slice(0, 50)
-      slug = slugify(newTitle)
-      isAvailable = await isSlugAvailable(slug)
+      newSlug = newSlug + "-" + randomUUID()
+      newSlug = newSlug.slice(0, 50)
+      isAvailable = await isSlugAvailable(newSlug)
     }
 
     push({
       ...syllabus,
       courseInfo: {
         ...syllabus.courseInfo,
-        title: newTitle,
+        slug: newSlug,
       },
     })
   }
@@ -215,9 +212,7 @@ const SyllabusEditor: React.FC = () => {
 
     const timeout = setTimeout(() => {
       cleanAll()
-      window.location.href = `/preview/${slugify(
-        syllabus.courseInfo.title || ""
-      )}?token=${auth.bcToken}&language=${syllabus.courseInfo.language}`
+      window.location.href = `/preview/${syllabus.courseInfo.slug}?token=${auth.bcToken}&language=${syllabus.courseInfo.language}`
     }, 8000)
     try {
       await createCourse(syllabus, tokenToUse, auth.bcToken)
@@ -230,6 +225,8 @@ const SyllabusEditor: React.FC = () => {
 
   if (!syllabus) return null
 
+  console.log(syllabus.courseInfo)
+
   return isGenerating ? (
     <>
       <Loader
@@ -253,8 +250,7 @@ It may take a moment..."
             lessons: lessons,
             courseInfo: {
               ...syllabus.courseInfo,
-              title:
-                fixTitleLength(res.parsed.title) || syllabus.courseInfo.title,
+              title: res.parsed.title || syllabus.courseInfo.title,
               description:
                 res.parsed.description || syllabus.courseInfo.description,
               language:

package/src/creator/src/utils/rigo.ts

@@ -19,8 +19,9 @@ export const publicInteractiveCreation = async (
     const webhookUrl = `${
       DEV_MODE
         ? "https://9cw5zmww-3000.use2.devtunnels.ms"
-        : window.location.origin
-      // "https://9cw5zmww-3000.use2.devtunnels.ms"
+        : // TODO: remove this
+          // : window.location.origin
+          "https://9cw5zmww-3000.use2.devtunnels.ms"
     }/notifications/${randomUID}`
 
     const response = await axios.post(

package/src/creator/src/utils/store.ts

@@ -11,6 +11,7 @@ export type FormState = {
   hasContentIndex: boolean
   contentIndex: string
   purpose: string
+  slug: string
   language?: string
   isCompleted: boolean
   variables: string[]
@@ -85,6 +86,7 @@ const useStore = create<Store>()(
       formState: {
         description: "",
         duration: 0,
+        slug: "",
         hasContentIndex: false,
         contentIndex: "",
         purpose: "",
@@ -119,6 +121,7 @@ const useStore = create<Store>()(
       resetFormState: () =>
         set({
           formState: {
+            slug: "",
             currentStep: "description",
             description: "",
             duration: 0,
@@ -169,7 +172,7 @@ const useStore = create<Store>()(
           formState: {
             description: "",
             duration: 0,
-
+            slug: "",
             language: "en",
             technologies: [],
             hasContentIndex: false,