@learnpack/learnpack 5.0.53 → 5.0.57

package/src/commands/publish.ts

@@ -26,13 +26,15 @@ const handleAssetCreation = async (
   sessionPayload: any,
   academy: TAcademy,
   learnJson: any,
-  learnpackDeployUrl: string
+  learnpackDeployUrl: string,
+  category: number
 ) => {
   try {
     const { exists, academyId } = await api.doesAssetExists(
       sessionPayload.token,
       learnJson.slug
     )
+
     if (!exists) {
       Console.info("Asset does not exist in this academy, creating it")
       const asset = await api.createAsset(sessionPayload.token, academy.id, {
@@ -43,6 +45,9 @@ const handleAssetCreation = async (
         learnpack_deploy_url: learnpackDeployUrl,
         technologies: ["node", "bash"],
         url: "https://4geeksacademy.com",
+        category: category,
+        owner: sessionPayload.id,
+        author: sessionPayload.id,
       })
       Console.info("Asset created with id", asset.id)
     } else {
@@ -90,13 +95,38 @@ const runAudit = (strict: boolean) => {
   )
 }
 
-const selectAcademy = async (academies: TAcademy[]) => {
+type Academy = {
+  id: number
+  name: string
+  slug?: string
+  timezone?: string
+}
+
+type Category = {
+  id: number
+  slug: string
+  title: string
+  lang: string
+  academy: Academy
+}
+
+function getCategoriesByAcademy(
+  categories: Category[],
+  academy: Academy
+): Category[] {
+  return categories.filter((cat) => cat.academy.id === academy.id)
+}
+
+const selectAcademy = async (
+  academies: TAcademy[],
+  bcToken: string
+): Promise<{ academy: TAcademy | null; category: number }> => {
   if (academies.length === 0) {
-    return null
+    return { academy: null, category: 0 }
   }
 
   if (academies.length === 1) {
-    return academies[0]
+    return { academy: academies[0], category: 0 }
   }
 
   // prompts the user to  select an academy to upload the assets
@@ -110,7 +140,27 @@ const selectAcademy = async (academies: TAcademy[]) => {
       value: academy,
     })),
   })
-  return response.academy
+
+  const categories: Category[] = await api.getCategories(bcToken)
+  const categoriesByAcademy = getCategoriesByAcademy(
+    categories,
+    response.academy
+  )
+
+  const categoriesPrompt = await prompts({
+    type: "select",
+    name: "category",
+    message: "Select a category",
+    choices: categoriesByAcademy.map((category) => ({
+      title: category.title,
+      value: category.id,
+    })),
+  })
+
+  return {
+    academy: response.academy,
+    category: categoriesPrompt.category,
+  }
 }
 
 class BuildCommand extends SessionCommand {
@@ -193,7 +243,10 @@ class BuildCommand extends SessionCommand {
 
     const academies = await api.listUserAcademies(sessionPayload.token)
     // // console.log(academies, "academies")
-    const academy = await selectAcademy(academies)
+    const { academy, category } = await selectAcademy(
+      academies,
+      sessionPayload.token
+    )
 
     // Read learn.json to get the slug
     const learnJsonPath = path.join(process.cwd(), "learn.json")
@@ -353,12 +406,15 @@ class BuildCommand extends SessionCommand {
         fs.unlinkSync(zipFilePath)
         this.removeDirectory(buildDir)
 
-        await handleAssetCreation(
-          sessionPayload,
-          academy,
-          learnJson,
-          res.data.url
-        )
+        if (academy) {
+          await handleAssetCreation(
+            sessionPayload,
+            academy,
+            learnJson,
+            res.data.url,
+            category
+          )
+        }
       } catch (error) {
         if (axios.isAxiosError(error)) {
           if (error.response && error.response.status === 403) {

package/src/commands/serve.ts

@@ -0,0 +1,192 @@
+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"
+const frontMatter = require("front-matter")
+
+function getSlugFromPath(path: string) {
+  const parts = path.split("/").filter(Boolean)
+  if (parts.length < 2) 
+return null
+  return parts[parts.length - 2]
+}
+
+const bucketStorage = new Storage({
+  keyFilename: path.resolve(__dirname, "../utils/creds.json"),
+})
+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) => {
+      console.log("GET /config")
+      console.log(req.query.slug, "QUERY")
+      const files = await listFilesWithPrefix("courses/" + req.query.slug)
+
+      const learnJson = files.find(file => file.name.endsWith("learn.json"))
+
+      const learnJsonContent = await learnJson?.download()
+      const learnJsonParsed = JSON.parse(learnJsonContent?.toString() || "{}")
+      const allExercises = files.filter(file =>
+        file.name.includes("exercises/")
+      )
+      const exercises = allExercises.map(exercise => {
+        const slug = getSlugFromPath(exercise.name)
+        return {
+          title: slug,
+          slug,
+          graded: false,
+        }
+      })
+      //   console.log(learnJsonParsed, "LEARN JSON PARSED")
+
+      res.send({
+        config: { ...learnJsonParsed },
+        exercises,
+      })
+    })
+
+    app.get("/exercise/:slug/readme", async (req, res) => {
+      console.log("GET /exercise/:slug/readme")
+      const { slug } = req.params
+      const query = req.query
+      console.log(query, "QUERY")
+      const courseSlug = query.slug
+
+      const file = await bucket.file(
+        "courses/" + courseSlug + "/exercises/" + slug + "/README.md"
+      )
+      const content = await file.download()
+      const { attributes, body } = frontMatter(content[0].toString())
+      res.send({
+        attributes,
+        body,
+      })
+    })
+
+    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>