@learnpack/learnpack 5.0.54 → 5.0.58

package/src/commands/serve.ts

@@ -0,0 +1,371 @@
+import { flags } from "@oclif/command"
+import * as express from "express"
+import * as cors from "cors"
+import * as path from "path"
+import SessionCommand from "../utils/SessionCommand"
+import { Storage } from "@google-cloud/storage"
+import { downloadEditor, decompress } from "../managers/file"
+import * as fs from "fs"
+import { translateExercise } from "../utils/rigoActions"
+import * as dotenv from "dotenv"
+dotenv.config()
+
+const frontMatter = require("front-matter")
+
+type ExerciseMap = {
+  [slug: string]: {
+    title: string
+    slug: string
+    graded: boolean
+    files: string[]
+    translations: Record<string, string>
+  }
+}
+
+const crendsEnv = process.env.GCP_CREDENTIALS_JSON
+if (!crendsEnv) {
+  console.log("GCP_CREDENTIALS_JSON is not set")
+  process.exit(1)
+}
+
+const credentials = JSON.parse(crendsEnv)
+
+const bucketStorage = new Storage({
+  credentials,
+})
+
+const bucket = bucketStorage.bucket("learnpack")
+
+async function listFilesWithPrefix(prefix: string) {
+  const [files] = await bucket.getFiles({ prefix })
+  return files
+}
+
+export default class ServeCommand extends SessionCommand {
+  static description = "Runs a small server to build tutorials"
+
+  static flags = {
+    ...SessionCommand.flags,
+    port: flags.string({ char: "p", description: "server port" }),
+    host: flags.string({ char: "h", description: "server host" }),
+    debug: flags.boolean({
+      char: "d",
+      description: "debugger mode for more verbage",
+      default: false,
+    }),
+  }
+
+  async init() {
+    const { flags } = this.parse(ServeCommand)
+    console.log("Initializing serve command")
+  }
+
+  async run() {
+    const app = express()
+    const PORT = 3000
+
+    const distPath = path.resolve(__dirname, "../creatorDist")
+
+    // Servir archivos estáticos
+    // app.use(express.static(distPath))
+    app.use(express.json())
+    app.use(cors())
+
+    const appPath = path.resolve(__dirname, "../ui/_app")
+    const tarPath = path.resolve(__dirname, "../ui/app.tar.gz")
+    if (fs.existsSync(appPath)) {
+      fs.rmSync(appPath, { recursive: true })
+    }
+
+    if (fs.existsSync(tarPath)) {
+      fs.rmSync(tarPath)
+    }
+
+    await downloadEditor("5.0.0", `${__dirname}/../ui/app.tar.gz`)
+
+    await decompress(
+      `${__dirname}/../ui/app.tar.gz`,
+      `${__dirname}/../ui/_app/`
+    )
+
+    const localAppPath = path.resolve(__dirname, "../ui/_app")
+    // app.use(express.static(localAppPath))
+
+    app.post("/upload", async (req, res) => {
+      const { content, destination } = req.body
+      //   console.log("UPLOAD", content, destination)
+
+      if (!content || !destination) {
+        return res.status(400).send("Missing content or destination")
+      }
+
+      if (!bucket) {
+        return res.status(500).send("Upload failed")
+      }
+
+      const buffer = Buffer.from(content, "utf-8")
+      const file = bucket.file(destination)
+
+      const stream = file.createWriteStream({
+        resumable: false,
+        contentType: "text/plain",
+      })
+
+      stream.on("error", err => {
+        console.error("❌ Error uploading:", err)
+        res.status(500).send("Upload failed")
+      })
+
+      stream.on("finish", () => {
+        console.log(`✅ Uploaded to: ${file.name}`)
+        res.send("File uploaded successfully")
+      })
+
+      stream.end(buffer)
+    })
+
+    app.get("/", async (req, res) => {
+      // The the ui/_app/index.html
+      console.log("GET /")
+
+      const file = path.resolve(__dirname, "../ui/_app/index.html")
+      res.sendFile(file)
+    })
+
+    app.get("/config", async (req, res) => {
+      const courseSlug = req.query.slug
+      const files = await listFilesWithPrefix(`courses/${courseSlug}`)
+
+      const learnJson = files.find(file => file.name.endsWith("learn.json"))
+      const learnJsonContent = await learnJson?.download()
+      const learnJsonParsed = JSON.parse(learnJsonContent?.toString() || "{}")
+
+      const exerciseMap: ExerciseMap = {}
+
+      // Agrupar archivos por ejercicio
+      for (const file of files) {
+        const pathParts = file.name.split("/")
+        const isExercise = pathParts.includes("exercises")
+        if (!isExercise) 
+continue
+
+        const slug = pathParts[pathParts.indexOf("exercises") + 1]
+        if (!exerciseMap[slug]) {
+          exerciseMap[slug] = {
+            title: slug,
+            slug: slug,
+            graded: false,
+            files: [],
+            translations: {},
+          }
+        }
+
+        const fileName = pathParts.at(-1)
+
+        // Traducciones
+        const readmeMatch = fileName?.match(/^readme(?:\.([a-z]{2}))?\.md$/i)
+        if (readmeMatch) {
+          const lang = readmeMatch[1] || "us"
+          exerciseMap[slug].translations[lang] = fileName || ""
+        } else {
+          exerciseMap[slug].files.push(fileName || "")
+        }
+      }
+
+      const exercises = Object.values(exerciseMap).map((ex, index) => ({
+        ...ex,
+        position: index,
+      }))
+
+      res.set("X-Creator-Web", "true")
+      res.set("Access-Control-Expose-Headers", "X-Creator-Web")
+
+      res.send({
+        config: { ...learnJsonParsed, title: { us: courseSlug } },
+        exercises,
+      })
+    })
+
+    app.get("/exercise/:slug/readme", async (req, res) => {
+      console.log("GET /exercise/:slug/readme")
+
+      const { slug } = req.params
+      const courseSlug = req.query.slug
+      const lang = req.query.lang || "us"
+
+      const basePath = `courses/${courseSlug}/exercises/${slug}/`
+      const filename = lang === "us" ? "README.md" : `README.${lang}.md`
+
+      const file = bucket.file(basePath + filename)
+
+      let contentBuffer
+
+      try {
+        contentBuffer = await file.download()
+      } catch {
+        if (lang !== "us") {
+          console.warn(`No README for lang '${lang}', falling back to 'us'`)
+          const fallbackFile = bucket.file(basePath + "README.md")
+          contentBuffer = await fallbackFile.download()
+        } else {
+          return res.status(404).json({ error: "README not found" })
+        }
+      }
+
+      const { attributes, body } = frontMatter(contentBuffer[0].toString())
+
+      res.send({ attributes, body })
+    })
+
+    app.put(
+      "/exercise/:slug/file/:fileName",
+      express.text(),
+      async (req, res) => {
+        const { slug, fileName } = req.params
+        const query = req.query
+        console.log(`PUT /exercise/${slug}/file/${fileName}`)
+
+        const courseSlug = query.slug
+        console.log("COURSE SLUG", courseSlug)
+
+        // Update the file in the bucket
+        const file = await bucket.file(
+          "courses/" + courseSlug + "/exercises/" + slug + "/" + fileName
+        )
+        await file.save(req.body)
+        const created = await file.exists()
+        console.log("File updated", created)
+        res.send({
+          message: "File updated",
+          created,
+        })
+      }
+    )
+    app.post("/exercise/:slug/create", async (req, res) => {
+      console.log("POST /exercise/:slug/create")
+      const query = req.query
+      const { title, readme, language } = req.body
+
+      if (!title || !readme) {
+        return res
+          .status(400)
+          .json({ error: "Missing title or readme content" })
+      }
+
+      const courseSlug = query.slug
+
+      const fileName = `courses/${courseSlug}/exercises/${title}/README${
+        language === "us" || language === "en" ? "" : `.${language}`
+      }.md`
+      const file = bucket.file(fileName)
+      await file.save(readme)
+      const created = await file.exists()
+      res.send({
+        message: "File updated",
+        created,
+      })
+    })
+
+    app.put("/actions/rename", async (req, res) => {
+      console.log("PUT /actions/rename")
+      const { slug, newSlug } = req.body
+      const query = req.query
+      const courseSlug = query.slug
+      const filePrefix = `courses/${courseSlug}/exercises/${slug}/`
+      const [files] = await bucket.getFiles({ prefix: filePrefix })
+      for (const file of files) {
+        const newFileName = file.name.replace(slug, newSlug)
+        // eslint-disable-next-line no-await-in-loop
+        await file.rename(newFileName)
+      }
+
+      res.send({ message: "Files renamed" })
+    })
+
+    app.post("/actions/translate", express.json(), async (req, res) => {
+      console.log("POST /actions/translate")
+      const { exerciseSlugs, languages, rigoToken } = 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(",")
+
+      try {
+        await Promise.all(
+          exerciseSlugs.map(async (slug: string) => {
+            const readmePath = `courses/${courseSlug}/exercises/${slug}/README.md`
+            const readme = await bucket.file(readmePath).download()
+            await Promise.all(
+              languagesToTranslate.map(async (language: string) => {
+                const response = await translateExercise(rigoToken, {
+                  text_to_translate: readme.toString(),
+                  output_language: language,
+                  exercise_slug: slug,
+                })
+
+                const translatedReadme = await bucket.file(
+                  `courses/${courseSlug}/exercises/${slug}/README.${response.parsed.output_language_code}.md`
+                )
+                await translatedReadme.save(response.parsed.translation)
+              })
+            )
+          })
+        )
+
+        return res.status(200).json({ message: "Translated exercises" })
+      } catch (error) {
+        console.log(error, "ERROR")
+        return res.status(400).json({ error: (error as Error).message })
+      }
+    })
+
+    app.delete("/exercise/:slug/delete", async (req, res) => {
+      const { slug } = req.params
+      const query = req.query
+      const courseSlug = query.slug
+      const filePrefix = `courses/${courseSlug}/exercises/${slug}/`
+      const [files] = await bucket.getFiles({ prefix: filePrefix })
+      for (const file of files) {
+        // eslint-disable-next-line no-await-in-loop
+        await file.delete()
+      }
+
+      res.send({ message: "Files deleted" })
+    })
+
+    app.get("/assets/:file", (req, res) => {
+      const file = path.join(localAppPath, req.params.file)
+      res.sendFile(file)
+    })
+    // Enviar index.html para todas las rutas
+    app.get("/creator", (req, res) => {
+      res.sendFile(path.join(distPath, "index.html"))
+    })
+    app.get("/creator/syllabus", (req, res) => {
+      res.sendFile(path.join(distPath, "index.html"))
+    })
+
+    app.get("/creator/:file", (req, res) => {
+      console.log("GET /creator/:file", req.params.file)
+      const file = path.join(distPath, req.params.file)
+      res.sendFile(file)
+    })
+
+    app.get("/creator/assets/:file", (req, res) => {
+      const file = path.join(distPath, "assets", req.params.file)
+      res.sendFile(file)
+    })
+
+    app.listen(PORT, () => {
+      console.log(`🚀 Creator UI server running at http://localhost:${PORT}`)
+    })
+  }
+}

package/src/creator/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from "eslint-plugin-react-x"
+import reactDom from "eslint-plugin-react-dom"
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    "react-x": reactX,
+    "react-dom": reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs["recommended-typescript"].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

package/src/creator/eslint.config.js

@@ -0,0 +1,28 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  }
+)

package/src/creator/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>