npm - @liascript/exporter - Versions diffs - 2.4.4--0.10.22 → 2.5.0--0.10.22 - Mend

@liascript/exporter 2.4.4--0.10.22 → 2.5.0--0.10.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@liascript/exporter",
-  "version": "2.4.4--0.10.22",
+  "version": "2.5.0--0.10.22",
   "description": "A generic exporter for LiaScript",
   "main": "dist/index.js",
   "repository": {
@@ -28,7 +28,7 @@
     "asset:scorm2004": "cd LiaScript && npm i && npm run build:scorm2004 && cp -r dist ../dist/assets/scorm2004",
     "asset:indexeddb": "cd LiaScript && npm i && npm run build:indexeddb && cp -r dist ../dist/assets/indexeddb",
     "asset:capacitor": "cd LiaScript && git checkout feat/capacitor && npm i && npm run build:android && cp -r dist ../dist/assets/capacitor && git checkout development",
-    "build": "npx parcel build --no-cache --no-source-maps --no-scope-hoist src/index.ts && npm run shebang",
+    "build": "npx parcel build --no-cache --no-source-maps src/index.ts && npm run shebang",
     "build:debug": "npx parcel build --target node --no-minify --log-level 5 src/index.ts",
     "run:moodle": "cd docker/moodle && docker-compose up",
     "run:ilias": "cd docker/ilias && docker-compose up",
@@ -49,9 +49,10 @@
     "fs-extra": "^9.1.0",
     "minimist": "^1.2.5",
     "path": "^0.12.7",
-    "puppeteer": "^13.3.1",
+    "puppeteer": "^19.2.2",
     "temp": "^0.9.4",
-    "xhr2": "^0.2.1"
+    "xhr2": "^0.2.1",
+    "yaml": "^2.1.3"
   },
   "devDependencies": {
     "@parcel/transformer-elm": "^2.3.1",
@@ -63,5 +64,10 @@
   },
   "engines": {
     "node": ">= 12"
+  },
+  "targets": {
+    "main": {
+      "optimize": true
+    }
   }
 }

package/src/export/helper.ts CHANGED Viewed

@@ -58,6 +58,7 @@ export async function iframe(
   tmpPath,
   filename: string,
   readme: string,
+  style?: string,
   index?: string
 ) {
   await writeFile(
@@ -69,7 +70,9 @@ export async function iframe(
     </head>
     <body style="height:100%">
-    <iframe id="lia-container" src="" style="border: 0px; width: 100%; height: 100%"></iframe>
+    <iframe id="lia-container" src="" style="${
+      style || 'border: 0px; width: 100%; height: 100%'
+    }"></iframe>
     <script>
       let path = window.location.pathname.replace("start.html", "")

package/src/export/ims.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export async function exporter(
     format: string
     path: string
     key?: string
+    style?: string
     // special cases for IMS
     'ims-indexeddb'?: boolean
@@ -64,7 +65,7 @@ export async function exporter(
     await fs.move(old_, new_)
   }
-  await helper.iframe(tmpPath, 'start.html', argument.readme)
+  await helper.iframe(tmpPath, 'start.html', argument.readme, argument.style)
   helper.zip(tmpPath, argument.output)
 }

package/src/export/pdf.ts CHANGED Viewed

@@ -73,7 +73,9 @@ export async function exporter(
       // remove timeout
       timeout: 0,
     })
-  } catch (e) {}
+  } catch (e) {
+    console.warn('pdf generation failed:', e)
+  }
   if (argument['pdf-stylesheet']) {
     const href = path.resolve(__dirname + '/../', argument['pdf-stylesheet'])
@@ -127,29 +129,42 @@ export async function exporter(
   console.warn(argument)
   */
-  if (!argument['pdf-preview'])
-    setTimeout(async function () {
-      await page.emulateMediaType('screen')
-      await page.pdf({
-        path: argument.output + '.pdf',
-        format: argument['pdf-format'] || 'a4',
-        printBackground: argument['pdf-printBackground'] || true,
-        displayHeaderFooter: argument['pdf-displayHeaderFooter'] || false,
-        margin: {
-          top: argument['pdf-margin-top'] || 80,
-          bottom: argument['pdf-margin-bottom'] || 80,
-          left: argument['pdf-margin-left'] || 30,
-          right: argument['pdf-margin-right'] || 30,
-        },
-        scale: argument['pdf-scale'] || 1,
-        headerTemplate: argument['pdf-headerTemplate'],
-        footerTemplate: argument['pdf-footerTemplate'] || '',
-        landscape: argument['pdf-landscape'] || false,
-        width: argument['pdf-width'] || '',
-        height: argument['pdf-height'] || '',
-        //preferCSSPageSize: argument['pdf-preferCSSPageSize'] || '',
-        omitBackground: argument['pdf-omitBackground'] || false,
-      })
-      await browser.close()
-    }, argument['pdf-timeout'] || 30000)
+  if (!argument['pdf-preview']) {
+    await sleep(argument['pdf-timeout'] || 30000)
+    await toPDF(argument, browser, page)
+  }
+}
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+async function toPDF(argument: any, browser: any, page: any) {
+  try {
+    await page.emulateMediaType('screen')
+    await page.pdf({
+      path: argument.output + '.pdf',
+      format: argument['pdf-format'] || 'a4',
+      printBackground: argument['pdf-printBackground'] || true,
+      displayHeaderFooter: argument['pdf-displayHeaderFooter'] || false,
+      margin: {
+        top: argument['pdf-margin-top'] || 80,
+        bottom: argument['pdf-margin-bottom'] || 80,
+        left: argument['pdf-margin-left'] || 30,
+        right: argument['pdf-margin-right'] || 30,
+      },
+      scale: argument['pdf-scale'] || 1,
+      headerTemplate: argument['pdf-headerTemplate'],
+      footerTemplate: argument['pdf-footerTemplate'] || '',
+      landscape: argument['pdf-landscape'] || false,
+      width: argument['pdf-width'] || '',
+      height: argument['pdf-height'] || '',
+      //preferCSSPageSize: argument['pdf-preferCSSPageSize'] || '',
+      omitBackground: argument['pdf-omitBackground'] || false,
+    })
+  } catch (e) {
+    console.warn('failed to print to pdf', e)
+  }
+  await browser.close()
 }

package/src/export/project.ts ADDED Viewed

@@ -0,0 +1,474 @@
+import * as helper from './helper'
+import * as PDF from './pdf'
+const fs = require('fs-extra')
+const path = require('path')
+var Categories: Set<string> = new Set([])
+export function getNext(collection: any): string | null {
+  if (collection['collection']) {
+    collection = collection['collection']
+  }
+  if (collection['url'] && collection['data'] === undefined) {
+    return collection['url']
+  } else {
+    for (let i = 0; i < collection.length; i++) {
+      let course = collection[i]
+      if (course.collection) {
+        let url = getNext(course)
+        if (url) {
+          return url
+        }
+      } else if (course.url && course.data === undefined) {
+        return course.url
+      }
+    }
+  }
+  return null
+}
+export function storeNext(collection: any, data: any) {
+  if (collection['collection']) {
+    collection = collection['collection']
+  }
+  for (let i = 0; i < collection.length; i++) {
+    if (collection[i].collection) {
+      for (let j = 0; j < collection[i].collection.length; j++) {
+        if (
+          collection[i].collection[j].url &&
+          collection[i].collection[j].data === undefined
+        ) {
+          collection[i].collection[j].data = data
+          return
+        }
+      }
+    } else if (collection[i].url && collection[i].data === undefined) {
+      collection[i].data = data
+      return
+    }
+  }
+  return
+}
+export async function exporter(
+  argument: {
+    input: string
+    readme: string
+    output: string
+    format: string
+    path: string
+    key?: string
+    style?: string
+    // special project settings
+    'project-no-meta'?: boolean
+    'project-no-categories'?: boolean
+    'project-category-blur'?: boolean
+    'project-generate-pdf'?: boolean
+    // allow to pass pdf settings
+    'pdf-scale'?: number
+    'pdf-displayHeaderFooter'?: string
+    'pdf-headerTemplate'?: string
+    'pdf-footerTemplate'?: string
+    'pdf-printBackground'?: boolean
+    'pdf-landscape'?: boolean
+    'pdf-format'?: string
+    'pdf-width'?: string | number
+    'pdf-height'?: string | number
+    'pdf-margin-top'?: string | number
+    'pdf-margin-bottom'?: string | number
+    'pdf-margin-right'?: string | number
+    'pdf-margin-left'?: string | number
+    'pdf-preferCSSPageSize'?: boolean
+    'pdf-omitBackground'?: boolean
+    'pdf-timeout'?: number
+    'pdf-stylesheet'?: string
+    'pdf-theme'?: string
+  },
+  json
+) {
+  // make temp folder
+  let cards = ''
+  const output = argument.output
+  for (let i = 0; i < json.collection.length; i++) {
+    let course = json.collection[i]
+    if (course.collection) {
+      let subCards = ''
+      for (let j = 0; j < course.collection.length; j++) {
+        subCards += `<div class='col-sm-6 col-md-4 col-lg-3 ${
+          course.grid ? 'mb-3' : ''
+        }'>
+          ${await toCard(argument, course.collection[j], true)}
+          </div>`
+      }
+      cards += `
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    ${course.title}
+                </div>
+                <div class="card-body">
+                    <p class="card-text">${course.comment}</p>
+                    <div ${
+                      course.grid
+                        ? 'class="row"'
+                        : 'style="display: flex; scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px"'
+                    }>
+                        ${subCards}
+                    </div>
+                </div>
+            </div>
+        </div>`
+    } else if (course.html) {
+      cards += "<div class='col-12'>" + course.html + '</div>'
+    } else {
+      cards += "<div class='col'>" + (await toCard(argument, course)) + '</div>'
+    }
+  }
+  const background = json.logo
+    ? `style="background-size: cover; background-image: url('${json.logo}'); background-position: center center; background-repeat: no-repeat;"`
+    : ''
+  let options = ''
+  if (Categories.size > 0 && !argument['project-no-categories']) {
+    const opt = [...Categories].sort()
+    for (let i = 0; i < opt.length; i++) {
+      options += `<option value="${opt[i]}">${opt[i]}</option>`
+    }
+    options =
+      `<select class="form-select" aria-label="Default select example" onchange="window.blur(this.value)">
+          <option value="" selected>All categories</option>` +
+      options +
+      '</select>'
+  }
+  let title = json.title || 'LiaScript Course Index'
+  if (json.title) {
+    title = title.replace(/<[^>]+>/g, '')
+  }
+  const html = `<!DOCTYPE html>
+<html>
+<head>
+    <title>${title}</title>
+    ${
+      json.icon
+        ? '<link rel="icon" type="image/x-icon" href="' + json.icon + '">'
+        : ''
+    }
+    ${argument['project-no-meta'] ? '' : meta(json)}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <script>
+        window.blur = function(category) {
+            const cards = document.querySelectorAll('div[data-category]')
+            for (card of cards) {
+                if(card.dataset.category.includes(category)) {
+                    ${
+                      argument['project-category-blur']
+                        ? 'card.style.filter = ""'
+                        : 'card.parentNode.style.display = "block"'
+                    }
+                } else {
+                  ${
+                    argument['project-category-blur']
+                      ? 'card.style.filter = "blur(1px) opacity(35%)"'
+                      : 'card.parentNode.style.display = "none"'
+                  }
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <main>
+        <div class="container-fluid" ${background} >
+            <section class="py-5 text-center container">
+                <div class="row py-lg-5">
+                    <div class="col-lg-6 col-md-8 mx-auto">
+                        <h1 class="fw-light">${
+                          json.title || 'LiaScript Course Index'
+                        }</h1>
+                        <p class="lead text-muted">${json.comment || ''}</p>
+                        ${options}
+                    </div>
+                </div>
+            </section>
+        </div>
+        <div class="album py-5 bg-light">
+            <div class="container">
+                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-xl-3 g-3">
+                    ${cards}
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="text-muted py-3">
+        <div class="container">
+            <p class="float-end">
+                <a href="#">Back to top</a>
+            </p>
+            <p>${
+              json.footer ||
+              '<a href="https://liascript.github.io" target="_blank">LiaScript</a> is a Markdown dialect made for education. For more information checkout out <a href="https://www.youtube.com/channel/UCyiTe2GkW_u05HSdvUblGYg" target="_blank">YouTube-Channel</a> or follow us on <a href="https://twitter.com/LiaScript" target="_blank">Twitter</a>.'
+            }</p>
+        </div>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+</body>
+</html>
+`
+  await helper.writeFile(output + '.html', html)
+}
+async function moveFile(oldPath, newPath) {
+  // 1. Create the destination directory if it does not exist
+  // Set the `recursive` option to `true` to create all the subdirectories
+  await fs.mkdir(path.dirname(newPath), { recursive: true })
+  // 2. Rename the file (move it to the new directory)
+  // Return the promise
+  return fs.rename(oldPath, newPath)
+}
+function cleanHTML(html: string) {
+  return html.replace(/<[^>]+>/g, '')
+}
+function meta(json: any) {
+  const title =
+    json.meta.title || cleanHTML(json.title) || 'LiaScript Course Index'
+  const description = json.meta.description || cleanHTML(json.comment)
+  const image = json.meta.image || json.logo
+  return `<meta property="og:type" content="website">
+  <meta property="og:title" content="${title}">
+  <meta property="og:description" content="${description}">
+  <meta property="og:image" content="${image}">
+  <meta name="twitter:title" content="${title}">
+  <meta name="twitter:description" content="${description}">
+  <meta name="twitter:image" content="${image}">
+  `
+}
+function overwrite(check, defaultsTo) {
+  return check === null ? null : check || defaultsTo
+}
+function hash(url: string) {
+  const value = url
+    .split('')
+    .map((v) => v.charCodeAt(0))
+    .reduce((a, v) => (a + ((a << 7) + (a << 3))) ^ v)
+    .toString(16)
+  return value.startsWith('-') ? '0' + value.slice(1) : value
+}
+async function toCard(argument: any, course: any, small: boolean = false) {
+  let tags
+  try {
+    tags = course.data.definition.macro.tags
+      .split(',')
+      .map((e: string) => e.trim())
+  } catch (e) {
+    tags = []
+  }
+  const tagList = course.tags || tags
+  for (let i = 0; i < tagList.length; i++) {
+    Categories.add(tagList[i].toLowerCase())
+  }
+  let downloads = {}
+  if (argument['project-generate-pdf']) {
+    argument.input = course.data.readme
+    argument.output = hash(course.data.readme)
+    const file = argument.output + '.pdf'
+    console.log('generate pdf of', argument.input, ' -> ', file)
+    await PDF.exporter(argument, {})
+    if (fs.existsSync(file)) {
+      moveFile(file, 'assets/pdf/' + file)
+      downloads['pdf'] = 'assets/pdf/' + file
+    }
+  }
+  return card(
+    small,
+    course.data.readme,
+    overwrite(course.title, course.data.str_title),
+    overwrite(course.comment, course.data.comment),
+    tagList,
+    downloads,
+    overwrite(course.logo, course.data.definition.logo)
+  )
+}
+function card(
+  small: boolean,
+  url: string,
+  title: string,
+  comment: string,
+  tags: string[],
+  download: {
+    pdf?: string
+    scorm12?: string
+    scorm2004?: string
+    ims?: string
+    apk?: string
+  },
+  img_url?: string
+) {
+  let image = ''
+  if (img_url) {
+    if (!(img_url.startsWith('http:') || img_url.startsWith('https:'))) {
+      const fullImageUrl = new URL(img_url, url)
+      img_url = fullImageUrl.toString()
+    }
+    image =
+      //`<img src="${img_url}" class="card-img-top" alt="">`
+      `<div class="card-img-top" style="background-size: cover; height: 175px; background-image: url('${img_url}'); background-position: center center; background-repeat: no-repeat;"></div>`
+  }
+  /*
+  else {
+    image = `<svg class="bd-placeholder-img card-img-top" width="100%" height="175" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="${stringToColor(
+      title
+    )}"></rect></svg>`
+  }
+  */
+  let tag_list = ''
+  if (tags.length > 0) {
+    for (let i = 0; i < tags.length; i++) {
+      tag_list += `<span class="badge rounded-pill bg-light text-dark">${tags[i]}</span>`
+    }
+    tag_list = `<div class="d-flex align-items-center">${tag_list}</div>`
+  }
+  if (small && comment) {
+    comment = '<small>' + comment + '</small>'
+  }
+  let footer = ''
+  if (Object.keys(download).length > 0) {
+    footer = `<div class="card-footer">
+  <div class="dropdown">
+    <a class="btn btn-secondary btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+      Download as ...
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
+      ${
+        download.pdf
+          ? '<li><a class="dropdown-item btn-sm" target="_blank" href="' +
+            download.pdf +
+            '">PDF</a></li>'
+          : ''
+      }
+      ${
+        download.scorm12
+          ? '<li><a class="dropdown-item btn-sm" href="' +
+            download.scorm12 +
+            '">SCORM 1.2</a></li>'
+          : ''
+      }
+      ${
+        download.scorm2004
+          ? '<li><a class="dropdown-item btn-sm" href="' +
+            download.scorm2004 +
+            '">SCORM 2004</a></li>'
+          : ''
+      }
+      ${
+        download.ims
+          ? '<li><a class="dropdown-item btn-sm" href="' +
+            download.ims +
+            '">IMS</a></li>'
+          : ''
+      }
+      ${
+        download.apk
+          ? '<li><a class="dropdown-item btn-sm" href="' +
+            download.apk +
+            '">Android APK</a></li>'
+          : ''
+      }
+    </ul>
+  </div>
+  </div>
+  `
+  }
+  return `<div class="card shadow-sm m-1" style="height: 100%" data-category="${tags
+    .map((e) => e.toLowerCase())
+    .join('|')}">
+    ${image}
+    <div class="card-body" style="transform: rotate(0);">
+        <a href="https://liascript.github.io/course/?${url}" target="_blank" class="link-dark stretched-link">
+            <h${small ? 6 : 5} class="card-title">${title}</h${small ? 6 : 5}>
+        </a>
+        <p class="card-text">${comment}</p>
+        ${tag_list}
+    </div>
+    ${footer}
+</div>
+`
+}
+function stringToColor(str: string) {
+  var hash = 0
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  var color = '#'
+  for (var i = 0; i < 3; i++) {
+    var value = (hash >> (i * 8)) & 0xff
+    color += ('00' + value.toString(16)).substr(-2)
+  }
+  return color
+}

package/src/export/scorm12.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export async function exporter(
     format: string
     path: string
     key?: string
+    style?: string
     // special cases for SCORM
     'scorm-organization'?: string
@@ -49,7 +50,7 @@ export async function exporter(
   )
   if (argument['scorm-iframe']) {
-    await helper.iframe(tmpPath, 'start.html', argument.readme)
+    await helper.iframe(tmpPath, 'start.html', argument.readme, argument.style)
   }
   try {

package/src/export/scorm2004.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export async function exporter(
     format: string
     path: string
     key?: string
+    style?: string
     // special cases for SCORM
     'scorm-organization'?: string
@@ -49,7 +50,7 @@ export async function exporter(
   )
   if (argument['scorm-iframe']) {
-    await helper.iframe(tmpPath, 'start.html', argument.readme)
+    await helper.iframe(tmpPath, 'start.html', argument.readme, argument.style)
   }
   try {

package/src/export/web.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export async function exporter(
     format: string
     path: string
     key?: string
+    style?: string
     'web-iframe'?: boolean
     'web-indexeddb'?: boolean
@@ -110,7 +111,13 @@ export async function exporter(
   try {
     if (argument['web-iframe']) {
       await helper.writeFile(path.join(tmpPath, 'start.html'), index)
-      await helper.iframe(tmpPath, 'index.html', argument.readme, 'start.html')
+      await helper.iframe(
+        tmpPath,
+        'index.html',
+        argument.readme,
+        argument.style,
+        'start.html'
+      )
     } else {
       await helper.writeFile(path.join(tmpPath, 'index.html'), index)
     }