rshow 0.0.0-stage → 0.0.2

package/themes/default/terminal.js

@@ -0,0 +1,433 @@
+/*
+ * rshow theme "default": terminal viewer. Two pinned libraries, loaded from
+ * jsDelivr only when a figure needs one of them:
+ *
+ *   ansi mode   @xterm/xterm@6.0.0
+ *               @xterm/xterm@6.0.0/css/xterm.css
+ *               @xterm/addon-unicode11@0.9.0   (box drawing and wide glyphs)
+ *   cast mode   asciinema-player@3.17.0
+ *               asciinema-player@3.17.0 bundle css
+ *
+ * Markup:
+ *
+ *   <figure class="terminal" data-mode="ansi" data-src="capture.ans"
+ *           data-cols="100" data-rows="30" data-title="procview"
+ *           data-palette="default"></figure>
+ *   <figure class="terminal" data-mode="cast" data-src="demo.cast"
+ *           data-title="rshow publish ./deck"></figure>
+ *
+ *   data-mode     ansi (a capture of a screen) or cast (an asciicast recording)
+ *   data-src      the file, relative to the page
+ *   data-cols     the grid the capture was taken on, ansi only
+ *   data-rows     and its height
+ *   data-title    what goes in the title bar; the file name by default
+ *   data-palette  default, dark, light or high-contrast; terminal.css owns the
+ *                 sixteen colours and this file only reads them back
+ *
+ * The palette and the font are read from the theme's custom properties on the
+ * figure, so a capture changes colour with the page and nothing is duplicated
+ * here. xterm gets the values as a theme object; asciinema-player reads
+ * --term-color-* from its own element, which terminal.css points at the figure,
+ * and the player is rebuilt when the mode changes because it reads them once,
+ * on mount.
+ *
+ * The capture is a fixed grid and it is read only: no stdin, no blinking
+ * cursor, no scrollback. A terminal in a page is a picture of one, not a shell.
+ */
+(function () {
+  'use strict';
+
+  var LIB = {
+    xterm: 'https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/lib/xterm.js',
+    xtermCss: 'https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/css/xterm.css',
+    unicode11: 'https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0.9.0/lib/addon-unicode11.js',
+    player: 'https://cdn.jsdelivr.net/npm/asciinema-player@3.17.0/dist/bundle/asciinema-player.min.js',
+    playerCss: 'https://cdn.jsdelivr.net/npm/asciinema-player@3.17.0/dist/bundle/asciinema-player.css'
+  };
+
+  var ANCHORS = [
+    'black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
+    'brightBlack', 'brightRed', 'brightGreen', 'brightYellow',
+    'brightBlue', 'brightMagenta', 'brightCyan', 'brightWhite'
+  ];
+
+  var WORDS = {
+    noFile: 'The capture did not load.',
+    still: ' The file is still here: ',
+    noPlayer: 'The recording needs asciinema-player from the CDN and it did not arrive.'
+  };
+
+  // ------------------------------------------------------------- loading ---
+
+  var loaded = {};
+
+  function loadScript(src) {
+    if (loaded[src]) {
+      return loaded[src];
+    }
+    loaded[src] = new Promise(function (resolve, reject) {
+      var script = document.createElement('script');
+      script.src = src;
+      script.async = false;
+      script.onload = function () {
+        resolve();
+      };
+      script.onerror = function () {
+        reject(new Error(src));
+      };
+      (document.head || document.documentElement).appendChild(script);
+    });
+    return loaded[src];
+  }
+
+  function loadStyle(href) {
+    if (loaded[href]) {
+      return loaded[href];
+    }
+    loaded[href] = new Promise(function (resolve) {
+      var link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      // A missing stylesheet is not worth failing a capture over.
+      link.onload = function () {
+        resolve();
+      };
+      link.onerror = function () {
+        resolve();
+      };
+      (document.head || document.documentElement).appendChild(link);
+    });
+    return loaded[href];
+  }
+
+  function loadXterm() {
+    return loadStyle(LIB.xtermCss)
+      .then(function () {
+        return loadScript(LIB.xterm);
+      })
+      .then(function () {
+        if (typeof window.Terminal !== 'function') {
+          throw new Error(LIB.xterm);
+        }
+        // The addon is a nicety: a capture with box drawing reads without it.
+        return loadScript(LIB.unicode11).then(null, function () {
+          return null;
+        });
+      });
+  }
+
+  function loadPlayer() {
+    return loadStyle(LIB.playerCss)
+      .then(function () {
+        return loadScript(LIB.player);
+      })
+      .then(function () {
+        if (!window.AsciinemaPlayer) {
+          throw new Error(LIB.player);
+        }
+        return window.AsciinemaPlayer;
+      });
+  }
+
+  // --------------------------------------------------------------- words ---
+
+  function text(value) {
+    return (value || '').replace(/^\s+|\s+$/g, '');
+  }
+
+  function count(value, fallback) {
+    var number = parseInt(value, 10);
+    return isNaN(number) || number <= 0 ? fallback : number;
+  }
+
+  function property(host, name, fallback) {
+    var value = window.getComputedStyle(host).getPropertyValue(name);
+    value = (value || '').replace(/^\s+|\s+$/g, '');
+    return value === '' ? fallback : value;
+  }
+
+  function fontSize(host) {
+    return count(property(host, '--term-font-size', '13px'), 13);
+  }
+
+  function fileName(src) {
+    var name = src.split('/').pop();
+    return name === '' || name === undefined ? 'terminal' : name;
+  }
+
+  // The sixteen colours live in terminal.css. Both libraries are handed the
+  // same values, so a capture and a recording of the same program agree.
+  function colours(host) {
+    var palette = {
+      background: property(host, '--term-color-background', '#ffffff'),
+      foreground: property(host, '--term-color-foreground', '#161616'),
+      selection: property(host, '--term-color-selection', 'rgba(15, 98, 254, 0.18)'),
+      values: []
+    };
+    var i;
+    for (i = 0; i < ANCHORS.length; i += 1) {
+      palette.values.push(property(host, '--term-color-' + i, palette.foreground));
+    }
+    return palette;
+  }
+
+  function xtermTheme(palette) {
+    var theme = {
+      background: palette.background,
+      foreground: palette.foreground,
+      selectionBackground: palette.selection
+    };
+    var i;
+    for (i = 0; i < ANCHORS.length; i += 1) {
+      theme[ANCHORS[i]] = palette.values[i];
+    }
+    // Read only, so the cursor is painted in the ground colour and never seen.
+    theme.cursor = palette.background;
+    theme.cursorAccent = palette.background;
+    return theme;
+  }
+
+  function whenFonts(ready) {
+    var fonts = window.document.fonts;
+    if (fonts && fonts.ready && fonts.status !== 'loaded') {
+      fonts.ready.then(ready, ready);
+      return;
+    }
+    ready();
+  }
+
+  // ------------------------------------------------------------- escapes ---
+
+  // The fallback: the same screen, without colour. Cursor addressing becomes a
+  // line break, which is what makes the stripped capture read as a screen.
+  function strip(capture) {
+    return capture
+      .replace(/\u001b\]8;;[^\u0007\u001b]*(?:\u0007|\u001b\\)/g, '')
+      .replace(/\u001b\][^\u0007\u001b]*(?:\u0007|\u001b\\)/g, '')
+      .replace(/\u001b\[[0-9;]*H/g, '\n')
+      .replace(/\u001b\[[0-9;?]*[ -/]*[@-~]/g, '')
+      .replace(/\u001b[@-Z\\-_]/g, '')
+      .replace(/\r\n?/g, '\n')
+      .replace(/[ ]+$/gm, '')
+      .replace(/\n{3,}/g, '\n\n')
+      .replace(/^\n+|\n+$/g, '');
+  }
+
+  // ---------------------------------------------------------------- frame ---
+
+  function element(tag, className) {
+    var node = document.createElement(tag);
+    node.className = className;
+    return node;
+  }
+
+  function link(href) {
+    var anchor = document.createElement('a');
+    anchor.href = href;
+    anchor.textContent = href;
+    return anchor;
+  }
+
+  function build(host) {
+    var src = text(host.getAttribute('data-src'));
+    var title = text(host.getAttribute('data-title')) || (src === '' ? 'terminal' : fileName(src));
+
+    var shell = element('div', 'terminal-window');
+    var bar = element('div', 'terminal-bar');
+    var heading = element('p', 'terminal-title');
+    heading.textContent = title;
+    bar.appendChild(heading);
+
+    var body = element('div', 'terminal-body');
+    shell.appendChild(bar);
+    shell.appendChild(body);
+    host.appendChild(shell);
+    return { shell: shell, body: body };
+  }
+
+  function sorry(body, words, href) {
+    body.textContent = '';
+    var note = element('p', 'terminal-fallback');
+    note.appendChild(document.createTextNode(words + WORDS.still));
+    if (href !== '') {
+      note.appendChild(link(href));
+    }
+    body.appendChild(note);
+  }
+
+  function plain(body, capture) {
+    body.textContent = '';
+    var pre = element('pre', 'terminal-pre');
+    pre.textContent = strip(capture);
+    body.appendChild(pre);
+  }
+
+  // ----------------------------------------------------------------- ansi ---
+
+  // A terminal window is as wide as its grid: the capture was taken at cols by
+  // rows, so the frame is stretched to that width and no further.
+  function hug(shell, body, term) {
+    if (!term.element) {
+      return;
+    }
+    var width = term.element.getBoundingClientRect().width;
+    if (width <= 0) {
+      return;
+    }
+    var box = window.getComputedStyle(body);
+    var side = (parseFloat(box.paddingLeft) || 0) + (parseFloat(box.paddingRight) || 0);
+    shell.style.width = Math.ceil(width + side + 2) + 'px';
+  }
+
+  function ansi(host, body, shell, src) {
+    var cols = count(host.getAttribute('data-cols'), 80);
+    var rows = count(host.getAttribute('data-rows'), 24);
+
+    window.fetch(src, { credentials: 'same-origin' }).then(function (reply) {
+      if (!reply.ok) {
+        throw new Error(src + ' answered HTTP ' + reply.status);
+      }
+      return reply.text();
+    }).then(function (capture) {
+      return loadXterm().then(function () {
+        whenFonts(function () {
+          var term;
+          try {
+            term = new window.Terminal({
+              cols: cols,
+              rows: rows,
+              disableStdin: true,
+              cursorBlink: false,
+              cursorStyle: 'bar',
+              cursorInactiveStyle: 'none',
+              scrollback: 0,
+              convertEol: false,
+              fontFamily: property(host, '--font-mono', 'monospace'),
+              fontSize: fontSize(host),
+              lineHeight: 1.25,
+              letterSpacing: 0,
+              theme: xtermTheme(colours(host))
+            });
+            term.open(body);
+          } catch (err) {
+            plain(body, capture);
+            return;
+          }
+          if (window.Unicode11Addon) {
+            try {
+              term.loadAddon(new window.Unicode11Addon.Unicode11Addon());
+              term.unicode.activeVersion = '11';
+            } catch (err) {
+              // Widths fall back to the built in table; the capture still reads.
+            }
+          }
+          term.write(capture);
+          window.requestAnimationFrame(function () {
+            hug(shell, body, term);
+          });
+          document.addEventListener('rshowmodechange', function () {
+            term.options.theme = xtermTheme(colours(host));
+          });
+        });
+      }, function () {
+        plain(body, capture);
+      });
+    }, function () {
+      sorry(body, WORDS.noFile, src);
+    });
+  }
+
+  // ----------------------------------------------------------------- cast ---
+
+  function cast(host, body, src) {
+    var settings = {
+      fit: 'width',
+      controls: true,
+      autoPlay: false,
+      // At rest, the recording shows its opening frames rather than a black
+      // rectangle: the prompt and the command being typed.
+      poster: 'npt:0:02',
+      terminalFontFamily: property(host, '--font-mono', 'monospace'),
+      terminalFontSize: fontSize(host) + 'px',
+      terminalLineHeight: 1.4
+    };
+    var cols = count(host.getAttribute('data-cols'), 0);
+    var rows = count(host.getAttribute('data-rows'), 0);
+    if (cols > 0) {
+      settings.cols = cols;
+    }
+    if (rows > 0) {
+      settings.rows = rows;
+    }
+
+    var player = null;
+
+    function start(at) {
+      var options = {};
+      var key;
+      for (key in settings) {
+        if (Object.prototype.hasOwnProperty.call(settings, key)) {
+          options[key] = settings[key];
+        }
+      }
+      if (at > 0) {
+        options.startAt = at;
+      }
+      body.textContent = '';
+      player = window.AsciinemaPlayer.create(src, body, options);
+    }
+
+    loadPlayer().then(function () {
+      start(0);
+      // The player reads the palette once, when it mounts, so a mode change
+      // means a new player, put back where the old one was.
+      document.addEventListener('rshowmodechange', function () {
+        var at = 0;
+        try {
+          at = player && player.getCurrentTime ? player.getCurrentTime() : 0;
+        } catch (err) {
+          at = 0;
+        }
+        try {
+          if (player && player.dispose) {
+            player.dispose();
+          }
+        } catch (err) {
+          // Nothing to dispose of: the mount below replaces the body anyway.
+        }
+        start(at || 0);
+      });
+    }, function () {
+      sorry(body, WORDS.noPlayer, src);
+    });
+  }
+
+  // ---------------------------------------------------------------- mount ---
+
+  function mount(host) {
+    var src = text(host.getAttribute('data-src'));
+    if (src === '') {
+      return;
+    }
+    var frame = build(host);
+    if (host.getAttribute('data-mode') === 'cast') {
+      cast(host, frame.body, src);
+      return;
+    }
+    ansi(host, frame.body, frame.shell, src);
+  }
+
+  function start() {
+    var hosts = document.querySelectorAll('.terminal[data-src]');
+    var i;
+    for (i = 0; i < hosts.length; i += 1) {
+      mount(hosts[i]);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', start);
+  } else {
+    start();
+  }
+}());

package/themes/default/theme.json

@@ -0,0 +1,149 @@
+{
+  "name": "default",
+  "description": "IBM Carbon v11 theme in two modes: white (light) and g100 (dark), system by default with a reader override. Plex Sans for text, Plex Mono for code and data, square corners, one blue for interactive elements and Carbon's eight colour data palette. Layouts: a 1280x720 deck canvas with twelve layouts, a 72 character prose page, a report with contents and side notes, a project page, an A0 poster, a metrics dashboard, mockups with eight skins, an Excalidraw sketch viewer, a terminal capture viewer and a cell grid tui kit.",
+  "defaultMode": "system",
+  "modes": ["system", "light", "dark"],
+  "layouts": {
+    "deck": {
+      "css": ["fonts.css", "tokens.css", "deck.css"],
+      "js": ["deck.js"],
+      "example": "example/index.html"
+    },
+    "page": {
+      "css": ["fonts.css", "tokens.css", "page.css"],
+      "js": ["mode.js"],
+      "example": "example/page.html"
+    },
+    "report": {
+      "css": ["fonts.css", "tokens.css", "report.css"],
+      "js": ["mode.js", "report.js"],
+      "example": "example/report.html"
+    },
+    "project": {
+      "css": ["fonts.css", "tokens.css", "project.css"],
+      "js": ["mode.js", "project.js"],
+      "example": "example/project.html"
+    },
+    "poster": {
+      "css": ["fonts.css", "tokens.css", "poster.css"],
+      "js": ["mode.js", "poster.js"],
+      "example": "example/poster.html"
+    },
+    "dashboard": {
+      "css": ["fonts.css", "tokens.css", "dashboard.css"],
+      "js": ["mode.js", "dashboard.js"],
+      "example": "example/dashboard.html"
+    },
+    "mockup": {
+      "css": ["fonts.css", "tokens.css", "mockup.css", "skins/wire.css"],
+      "js": ["mode.js", "mockup.js", "skins/sketch.js", "skins/fluent.js"],
+      "example": "example/mockup.html"
+    },
+    "sketch": {
+      "css": ["fonts.css", "tokens.css", "sketch.css"],
+      "js": ["mode.js", "sketch.js"],
+      "example": "example/sketch.html"
+    },
+    "terminal": {
+      "css": ["fonts.css", "tokens.css", "terminal.css"],
+      "js": ["mode.js", "terminal.js"],
+      "example": "example/terminal.html"
+    },
+    "tui": {
+      "css": ["fonts.css", "tokens.css", "mockup.css", "skins/wire.css", "tui.css"],
+      "js": ["mode.js", "mockup.js", "tui.js"],
+      "example": "example/tui.html"
+    }
+  },
+  "tokens": {
+    "--font-sans": "\"IBM Plex Sans\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "--font-mono": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    "--text-2xs": "14px",
+    "--text-xs": "16px",
+    "--text-sm": "18px",
+    "--text-base": "20px",
+    "--text-md": "24px",
+    "--text-lg": "28px",
+    "--text-xl": "32px",
+    "--text-2xl": "42px",
+    "--text-3xl": "54px",
+    "--text-4xl": "60px",
+    "--text-5xl": "76px",
+    "--lh-flat": "1",
+    "--lh-heading": "1.25",
+    "--lh-list": "1.4",
+    "--lh-body": "1.45",
+    "--lh-read": "1.6",
+    "--lh-code": "1.6",
+    "--tracking-display": "-0.02em",
+    "--space-01": "2px",
+    "--space-02": "4px",
+    "--space-03": "8px",
+    "--space-04": "12px",
+    "--space-05": "16px",
+    "--space-06": "24px",
+    "--space-07": "32px",
+    "--space-08": "40px",
+    "--space-09": "48px",
+    "--space-10": "64px",
+    "--space-11": "80px",
+    "--space-12": "96px",
+    "--space-13": "160px",
+    "--radius": "0",
+    "--radius-sm": "0",
+    "--pad-x": "96px",
+    "--pad-y": "64px"
+  },
+  "modeTokens": {
+    "light": {
+      "--color-scheme": "light",
+      "--bg": "#ffffff",
+      "--bg-shell": "#f4f4f4",
+      "--layer-01": "#f4f4f4",
+      "--layer-02": "#ffffff",
+      "--border-subtle": "#e0e0e0",
+      "--border-strong": "#8d8d8d",
+      "--fg": "#161616",
+      "--muted": "#525252",
+      "--placeholder": "#a8a8a8",
+      "--accent": "#0f62fe",
+      "--focus": "#0f62fe",
+      "--support-error": "#da1e28",
+      "--support-success": "#24a148",
+      "--support-warning": "#f1c21b",
+      "--chart-1": "#6929c4",
+      "--chart-2": "#1192e8",
+      "--chart-3": "#005d5d",
+      "--chart-4": "#9f1853",
+      "--chart-5": "#fa4d56",
+      "--chart-6": "#570408",
+      "--chart-7": "#198038",
+      "--chart-8": "#002d9c"
+    },
+    "dark": {
+      "--color-scheme": "dark",
+      "--bg": "#161616",
+      "--bg-shell": "#262626",
+      "--layer-01": "#262626",
+      "--layer-02": "#393939",
+      "--border-subtle": "#393939",
+      "--border-strong": "#6f6f6f",
+      "--fg": "#f4f4f4",
+      "--muted": "#c6c6c6",
+      "--placeholder": "#6f6f6f",
+      "--accent": "#78a9ff",
+      "--focus": "#ffffff",
+      "--support-error": "#fa4d56",
+      "--support-success": "#42be65",
+      "--support-warning": "#f1c21b",
+      "--chart-1": "#8a3ffc",
+      "--chart-2": "#33b1ff",
+      "--chart-3": "#007d79",
+      "--chart-4": "#ff7eb6",
+      "--chart-5": "#fa4d56",
+      "--chart-6": "#fff1f1",
+      "--chart-7": "#6fdc8c",
+      "--chart-8": "#4589ff"
+    }
+  }
+}