@codename/deck 0.0.0-stage → 0.1.1

package/src/standalone.js

@@ -0,0 +1,89 @@
+// A .deck.html opened on its own, in any browser: the Markdown its page holds read and drawn as
+// slides; saved back as the same kind of file, the renderer as it came (linked or held whole);
+// saved as PowerPoint with PptxGenJS loaded only then. Libraries come from `data-base` on the
+// renderer's script, else jsDelivr's npm mirror.
+import { createDeck } from './deck.js'
+import { defaultBlocks, libraryAt } from './blocks.js'
+import { readDeckFile, writeDeckFile, unescape } from './file.js'
+import { toPptx } from './pptx.js'
+import css from './deck.css'
+
+const me = /** @type {HTMLScriptElement | null} */ (document.currentScript)
+const base = me?.dataset.base ?? 'https://cdn.jsdelivr.net/npm/'
+
+const PAGE = `html, body { margin: 0; } body { min-block-size: 100vh; }
+body > .deck { min-block-size: 100vh; padding: clamp(0.5rem, 3vw, 2rem); align-content: center; justify-items: center; background: color-mix(in srgb, var(--deck-ink) 7%, var(--deck-paper)); }
+body > .deck > .deck-stage, body > .deck > .deck-bar { inline-size: min(100%, (100vh - 7rem) * 16 / 9); }
+body > .deck.is-editing { justify-items: stretch; align-content: start; }
+body > .deck.is-editing > .deck-stage, body > .deck.is-editing > .deck-bar, body > .deck.is-presenting > .deck-stage, body > .deck.is-presenting > .deck-bar, body > .deck.is-overview > .deck-stage { inline-size: auto; }
+body > .deck:is(.is-presenting, .is-overview) { justify-items: stretch; align-content: start; }`
+
+function boot() {
+  const holder = document.getElementById('deck')
+  if (!holder) return
+  const source = unescape(holder.textContent ?? '').replace(/^\n/, '').replace(/\n$/, '')
+  const sheet = new CSSStyleSheet()
+  sheet.replaceSync(`${css}\n${PAGE}`)
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+  holder.style.display = 'none'
+  const root = document.createElement('main')
+  document.body.append(root)
+  const blocks = defaultBlocks({ base, root })
+  /** @type {any} */
+  let handle = null
+  const view = createDeck(root, {
+    source, blocks, lang: document.documentElement.lang || undefined,
+    async onSave(text) {
+      const settings = view.deck.settings
+      const file = writeDeckFile(text, {
+        title: String(settings.title ?? view.deck.slides[0]?.title ?? document.title), lang: view.lang, dir: view.dir,
+        renderer: me?.src ? { src: me.src } : { code: me?.textContent ?? '' }, generator: document.querySelector('meta[name=generator]')?.getAttribute('content') ?? 'deck',
+      })
+      const name = decodeURIComponent(location.pathname.split('/').pop() || 'slides.deck.html')
+      const picker = /** @type {any} */ (window).showSaveFilePicker
+      if (picker) {
+        try {
+          handle ??= await picker({ suggestedName: name, types: [{ description: 'Deck', accept: { 'text/html': ['.deck.html', '.html'] } }] })
+          const writable = await handle.createWritable()
+          await writable.write(file)
+          await writable.close()
+          return
+        } catch (error) { if (/** @type {Error} */ (error).name === 'AbortError') return }
+      }
+      download(new Blob([file], { type: 'text/html' }), name)
+    },
+    async onExport(deck) {
+      const { PptxGenJS, JSZip } = await libraries()
+      const { blob } = await toPptx(deck, { PptxGenJS, JSZip })
+      download(blob, `${String(deck.deck.settings.title ?? deck.deck.slides[0]?.title ?? 'slides').replace(/[\\/:*?"<>|]+/g, ' ').trim() || 'slides'}.pptx`)
+    },
+  })
+  const title = view.deck.settings.title ?? view.deck.slides[0]?.title
+  if (title) document.title = String(title)
+  const stage = /** @type {HTMLElement | null} */ (root.querySelector('.deck-stage'))
+  stage?.focus({ preventScroll: true })
+  Object.assign(window, { deckView: view, deckTools: { toPptx, libraries, readDeckFile, writeDeckFile } })
+}
+
+async function libraries() {
+  if (!(/** @type {any} */ (window).PptxGenJS)) await new Promise((resolve, reject) => {
+    const tag = document.createElement('script')
+    tag.src = libraryAt(base, 'pptxgenjs', '4.0.1', 'dist/pptxgen.bundle.js')
+    tag.onload = resolve
+    tag.onerror = reject
+    document.head.append(tag)
+  })
+  return { PptxGenJS: /** @type {any} */ (window).PptxGenJS, JSZip: /** @type {any} */ (window).JSZip }
+}
+
+/** @param {Blob} blob @param {string} name */
+function download(blob, name) {
+  const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: name })
+  document.body.append(a)
+  a.click()
+  a.remove()
+  setTimeout(() => URL.revokeObjectURL(a.href), 10_000)
+}
+
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot)
+else boot()

package/src/strings.js

@@ -0,0 +1,10 @@
+// The deck's own words, for a deck opened on its own; a host gives its own instead (options.strings).
+const STRINGS = /** @type {Record<string, Record<string, string>>} */ ({
+  en: { deck: 'Slides', slide: 'slide', carousel: 'carousel', previous: 'Previous', next: 'Next', present: 'Present full screen', presenter: 'Presenter view', overview: 'All slides', edit: 'Change', scheme: 'Light or dark', export: 'Save as PowerPoint', source: 'The deck as text', notes: 'Notes', noNotes: 'No notes for this slide.', upNext: 'Next', last: 'Last slide', where: 'Slide {n} of {count}', saved: 'Saved' },
+  fr: { deck: 'Diapositives', slide: 'diapositive', carousel: 'carrousel', previous: 'Précédente', next: 'Suivante', present: 'Présenter en plein écran', presenter: 'Vue présentateur', overview: 'Toutes les diapositives', edit: 'Modifier', scheme: 'Clair ou sombre', export: 'Enregistrer en PowerPoint', source: 'La présentation en texte', notes: 'Notes', noNotes: 'Pas de notes pour cette diapositive.', upNext: 'Ensuite', last: 'Dernière diapositive', where: 'Diapositive {n} sur {count}', saved: 'Enregistré' },
+  ar: { deck: 'الشرائح', slide: 'شريحة', carousel: 'عرض شرائح', previous: 'السابقة', next: 'التالية', present: 'العرض بملء الشاشة', presenter: 'عرض المقدّم', overview: 'كل الشرائح', edit: 'تعديل', scheme: 'فاتح أو داكن', export: 'الحفظ بصيغة PowerPoint', source: 'العرض كنص', notes: 'الملاحظات', noNotes: 'لا ملاحظات لهذه الشريحة.', upNext: 'التالية', last: 'الشريحة الأخيرة', where: 'الشريحة {n} من {count}', saved: 'تم الحفظ' },
+  ja: { deck: 'スライド', slide: 'スライド', carousel: 'カルーセル', previous: '前へ', next: '次へ', present: '全画面で発表', presenter: '発表者ビュー', overview: 'すべてのスライド', edit: '編集', scheme: 'ライトまたはダーク', export: 'PowerPoint で保存', source: 'テキストとしてのスライド', notes: 'メモ', noNotes: 'このスライドにメモはありません。', upNext: '次', last: '最後のスライド', where: 'スライド {n} / {count}', saved: '保存しました' },
+})
+
+/** @param {string} lang */
+export const stringsFor = (lang) => STRINGS[lang.split('-')[0].toLowerCase()] ?? STRINGS.en

package/src/version.js

@@ -0,0 +1,2 @@
+// deck's version, which a linked file names in its renderer's address. Kept equal to package.json's by a test.
+export const VERSION = '0.1.1'

package/src/yaml.js

@@ -0,0 +1,137 @@
+// Front matter as brains and Slidev write it: the YAML a deck needs, maps by their indent, lists
+// in blocks and in brackets, quoted and plain scalars, block scalars (| and >) and comments. What
+// it can't read stays a string, so a deck never fails to open over its settings. Pure.
+
+/** @param {string} text @returns {Record<string, any>} */
+export function parseYaml(text) {
+  const lines = text.replace(/\r\n?/g, '\n').split('\n').map((raw) => ({ indent: raw.length - raw.trimStart().length, text: uncomment(raw).trimEnd(), raw }))
+  const at = { i: 0 }
+  const value = block(lines, at, 0)
+  return value && typeof value === 'object' && !Array.isArray(value) ? value : {}
+}
+
+/** A line without its comment: a # at its start or after a space, outside quotes. @param {string} line */
+function uncomment(line) {
+  let quote = ''
+  for (let i = 0; i < line.length; i++) {
+    const c = line[i]
+    if (quote) { if (c === quote) quote = '' }
+    else if (c === '"' || c === "'") quote = c
+    else if (c === '#' && (i === 0 || /\s/.test(line[i - 1]))) return line.slice(0, i)
+  }
+  return line
+}
+
+/** @param {{ indent: number, text: string, raw: string }[]} lines @param {{ i: number }} at @param {number} min @returns {any} */
+function block(lines, at, min) {
+  while (at.i < lines.length && !lines[at.i].text.trim()) at.i++
+  if (at.i >= lines.length || lines[at.i].indent < min) return null
+  const indent = lines[at.i].indent
+  if (/^-(\s|$)/.test(lines[at.i].text.trim())) {
+    const list = []
+    while (at.i < lines.length) {
+      const line = lines[at.i]
+      if (!line.text.trim()) { at.i++; continue }
+      if (line.indent !== indent || !/^-(\s|$)/.test(line.text.trim())) break
+      const rest = line.text.trim().slice(1).trim()
+      at.i++
+      if (!rest) list.push(block(lines, at, indent + 1))
+      else if (/^[^'"[{][^:]*:(\s|$)/.test(rest)) {
+        // A map that starts on the dash's line: its first key there, the rest below it.
+        const width = line.raw.indexOf(rest)
+        lines.splice(at.i, 0, { indent: width, text: ' '.repeat(width) + rest, raw: ' '.repeat(width) + rest })
+        list.push(block(lines, at, width))
+      } else list.push(scalar(rest))
+    }
+    return list
+  }
+  /** @type {Record<string, any>} */
+  const map = {}
+  while (at.i < lines.length) {
+    const line = lines[at.i]
+    if (!line.text.trim()) { at.i++; continue }
+    if (line.indent !== indent) break
+    const entry = /^("(?:[^"\\]|\\.)*"|'(?:[^']|'')*'|[^:]+?)\s*:(?:\s+(.*))?$/.exec(line.text.trim())
+    at.i++
+    if (!entry) continue
+    const key = String(scalar(entry[1]))
+    const rest = (entry[2] ?? '').trim()
+    if (rest === '|' || rest === '>' || /^[|>][+-]$/.test(rest)) map[key] = blockScalar(lines, at, indent, rest[0] === '>')
+    else if (rest) map[key] = scalar(rest)
+    else map[key] = block(lines, at, indent + 1)
+  }
+  return map
+}
+
+/** @param {{ indent: number, text: string, raw: string }[]} lines @param {{ i: number }} at @param {number} indent @param {boolean} folded */
+function blockScalar(lines, at, indent, folded) {
+  const taken = []
+  while (at.i < lines.length && (!lines[at.i].raw.trim() || lines[at.i].indent > indent)) taken.push(lines[at.i++].raw)
+  while (taken.length && !taken.at(-1)?.trim()) taken.pop()
+  const width = Math.min(...taken.filter((line) => line.trim()).map((line) => line.length - line.trimStart().length))
+  const text = taken.map((line) => line.slice(width)).join('\n')
+  return folded ? text.replace(/([^\n])\n(?=[^\n])/g, '$1 ') : text
+}
+
+/** A scalar, or a list or map in brackets. @param {string} text @returns {any} */
+function scalar(text) {
+  const t = text.trim()
+  if (t.startsWith('[') || t.startsWith('{')) {
+    const read = flow(t, { i: 0 })
+    if (read !== undefined) return read
+  }
+  if (/^"(?:[^"\\]|\\.)*"$/.test(t)) {
+    try { return JSON.parse(t) } catch { return t.slice(1, -1) }
+  }
+  if (/^'(?:[^']|'')*'$/.test(t)) return t.slice(1, -1).replace(/''/g, "'")
+  if (/^(true|yes|on)$/i.test(t)) return true
+  if (/^(false|no|off)$/i.test(t)) return false
+  if (/^(null|~)$/i.test(t) || t === '') return null
+  if (/^[-+]?(\d+\.?\d*|\.\d+)(e[-+]?\d+)?$/i.test(t)) return Number(t)
+  return t
+}
+
+/** A list or map in brackets, or undefined when it isn't one. @param {string} text @param {{ i: number }} at @returns {any} */
+function flow(text, at) {
+  const space = () => { while (/\s/.test(text[at.i] ?? '')) at.i++ }
+  const item = () => {
+    space()
+    if (text[at.i] === '[' || text[at.i] === '{') return flow(text, at)
+    const start = at.i
+    if (text[at.i] === '"' || text[at.i] === "'") {
+      const q = text[at.i++]
+      while (at.i < text.length && !(text[at.i] === q && text[at.i - 1] !== '\\')) at.i++
+      at.i++
+    } else while (at.i < text.length && !/[,\]}]/.test(text[at.i]) && !(text[at.i] === ':' && /^[\s,\]}]?$/.test(text[at.i + 1] ?? ''))) at.i++
+    return scalar(text.slice(start, at.i))
+  }
+  const open = text[at.i++]
+  space()
+  if (open === '[') {
+    const list = []
+    while (at.i < text.length && text[at.i] !== ']') {
+      list.push(item())
+      space()
+      if (text[at.i] === ',') at.i++
+      else if (text[at.i] !== ']') return undefined
+      space()
+    }
+    at.i++
+    return list
+  }
+  /** @type {Record<string, any>} */
+  const map = {}
+  while (at.i < text.length && text[at.i] !== '}') {
+    const key = item()
+    space()
+    if (text[at.i] !== ':') return undefined
+    at.i++
+    map[String(key)] = item()
+    space()
+    if (text[at.i] === ',') at.i++
+    else if (text[at.i] !== '}') return undefined
+    space()
+  }
+  at.i++
+  return map
+}