Restore the demo

Restore the demo from gh-pages branch, update it to current API, and
automatically deploy it with the docs.

Author: khaledhosny

.github/workflows/docs.yml

@@ -1,20 +1,24 @@
 name: Docs
 
 on:
-  push:
+  workflow_run:
+    workflows: [ "Build" ]
     branches: [ "main" ]
+    types: [ completed ]
 
 permissions:
   contents: read
   pages: write
   id-token: write
+  actions: read
 
 concurrency:
   group: "pages"
   cancel-in-progress: true
 
 jobs:
-  docs:
+  deploy:
+    if: github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
     environment:
       name: github-pages
@@ -23,6 +27,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: wasm
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ github.token }}
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -31,6 +42,14 @@ jobs:
       - name: Generate docs
         run: make doc
 
+      - name: Build demo
+        run: |
+          npx tsdown
+          mkdir -p docs/demo
+          cp demo/index.html docs/demo/
+          cp dist/index.mjs dist/harfbuzz.js dist/harfbuzz.wasm docs/demo/
+          cp test/fonts/noto/NotoSans-Regular.ttf docs/demo/
+
       - name: Setup Pages
         uses: actions/configure-pages@v4
 

README.md

@@ -11,7 +11,7 @@
 Providing [HarfBuzz](https://github.com/harfbuzz/harfbuzz) shaping
 library for client/server side JavaScript projects.
 
-See the demo [here](https://harfbuzz.github.io/harfbuzzjs/).
+See the demo [here](https://harfbuzz.github.io/harfbuzzjs/demo/).
 
 ## Building
 1. Install emscripten

demo/index.html

@@ -0,0 +1,129 @@
+<meta charset="utf-8">
+<p><a href="https://github.com/harfbuzz/harfbuzzjs">harfbuzzjs</a> demo. Supports font drag and drop.</p>
+<p><input type="text" value="abc" id="text"></p>
+<p><a id="svgResult" href="#" title="Click to download"></a></p>
+<p>Result:<div id="shapeResult"></div></p>
+<script type="module">
+import harfbuzz from './index.mjs';
+const hb = await harfbuzz;
+
+var fontBlob;
+function updateResult() {
+  var blob = new hb.Blob(fontBlob);
+  var face = new hb.Face(blob, 0);
+  var font = new hb.Font(face);
+  font.setScale(1000, 1000); // Optional, if not given will be in font upem
+
+  var buffer = new hb.Buffer();
+  buffer.addText(text.value);
+  buffer.guessSegmentProperties();
+  // buffer.setDirection('ltr'); // optional as can be by guessSegmentProperties also
+  hb.shape(font, buffer);
+  var result = buffer.json();
+
+  // returns glyphs paths, totally optional
+  var glyphs = {};
+  result.forEach(function (x) {
+    if (glyphs[x.g]) return;
+    glyphs[x.g] = font.glyphToJson(x.g);
+  });
+
+  var xmin = 10000;
+  var xmax = -10000;
+  var ymin = 10000;
+  var ymax = -10000;
+  var ax = 0;
+  var ay = 0;
+  var path = pathToRelative(result.map(function (x) {
+    var result = glyphs[x.g].filter(function (command) {
+      return command.type !== 'Z';
+    }).map(function (command) {
+      var result = command.values.map(function (p, i) {
+        // apply ax/ay/dx/dy to coords
+        return i % 2 ? -(p + ay + x.dy) : p + ax + x.dx;
+      }).map(function (x, i) {
+        // bbox calc
+        if (i % 2) {
+          if (x < ymin) ymin = x;
+          if (x > ymax) ymax = x;
+        } else {
+          if (x < xmin) xmin = x;
+          if (x > xmax) xmax = x;
+        }
+        return x;
+      });
+      return [command.type].concat(result);
+    });
+    ax += x.ax; ay += x.ay;
+    return result;
+  }).reduce((acc, val) => acc.concat(val), [])).map(x => x[0] + x.slice(1).join(' ')).join('').replace(/ -/g, '-');
+  var width = xmax - xmin;
+  var height = ymax - ymin;
+  // pad it a bit
+  var pad = Math.round(Math.min(width / 10, height / 10));
+  xmin -= pad;
+  ymin -= pad;
+  width += pad * 2;
+  height += pad * 2;
+
+  var bbox = xmin + ' ' + ymin + ' ' + width + ' ' + height;
+
+  svgResult.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="128" viewBox="' + bbox + '">' +
+    '<path d="' + path + '" /></svg>';
+  svgResult.download = text.value + '.svg';
+  // revoke previous URL
+  if (svgResult.href) URL.revokeObjectURL(svgResult.href);
+  svgResult.href = URL.createObjectURL(new Blob([svgResult.innerHTML.replace(' height="128"', '')], { type: 'text/plain' }));
+
+  shapeResult.innerText = JSON.stringify(result);
+}
+
+fetch('NotoSans-Regular.ttf').then(function (res) {
+  return res.arrayBuffer();
+}).then(function (blob) {
+  fontBlob = new Uint8Array(blob);
+  updateResult();
+});
+
+document.getElementById('text').addEventListener('keyup', function(e) {
+  updateResult();
+});
+
+document.addEventListener('dragover', function (e) {
+  e.stopPropagation(); e.preventDefault();
+}, false);
+document.addEventListener('dragleave', function (e) {
+  e.stopPropagation(); e.preventDefault();
+}, false);
+document.addEventListener('drop', function (e) {
+  e.stopPropagation(); e.preventDefault();
+  handleFontUpdate(e.dataTransfer.files[0]);
+});
+
+function handleFontUpdate(file) {
+  if (!file) return;
+  var reader = new FileReader();
+  reader.addEventListener("load", function () {
+    fontBlob = new Uint8Array(reader.result);
+    updateResult();
+  });
+  reader.readAsArrayBuffer(file);
+}
+
+// Totally optional, https://github.com/adobe-webplatform/Snap.svg/blob/7abe4d1/src/path.js#L532
+function pathToRelative(pathArray) {
+  if (!pathArray.length) return [];
+  var x = pathArray[0][1], y = pathArray[0][2];
+  var prevCmd = '';
+  return [["M", x, y]].concat(pathArray.slice(1).map(function (pa) {
+    var r = [prevCmd === pa[0] ? ' ' : pa[0].toLowerCase()].concat(pa.slice(1).map(function (z, i) {
+      return z - ((i % 2) ? y : x);
+    }));
+    var lastPoint = r.slice(-2);
+    x += lastPoint[0];
+    y += lastPoint[1];
+    prevCmd = pa[0];
+    return r;
+  }));
+}
+</script>