Record build info for Wasm demo

mgeisler · May 6, 2021 · 5f7aa34 · 5f7aa34
1 parent d12fa83
commit 5f7aa34
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -140,6 +140,12 @@ jobs:
  with:
  name: textwrap-wasm-demo-app
 
+ - name: Record build info
+ run: |
+ cat > build-info.json <<EOM
+ {"date": "$(date --utc --iso-8601)", "commit": "$GITHUB_SHA"}
+ EOM
+
  - name: Add and remove changed files
  id: git-add
  run: |

diff --git a/examples/wasm/www/build-info.json b/examples/wasm/www/build-info.json
@@ -0,0 +1 @@
+{}
diff --git a/examples/wasm/www/index.html b/examples/wasm/www/index.html
@@ -4,7 +4,7 @@
  <meta charset="utf-8">
  <title>Textwrap WebAssembly demo</title>
  <style>
- body {
+ body, #footer {
  background: #f1f9f9
  }
 
@@ -22,6 +22,14 @@
  #canvas {
  display: block;
  }
+
+ #footer {
+ position: fixed;
+ left: 8px;
+ right: 8px;
+ bottom: 0;
+ border-top: thin solid grey;
+ }
  </style>
  </head>
  <body>
@@ -45,6 +53,11 @@ <h1>Textwrap WebAssembly Demo</h1>
  <canvas id="canvas"></canvas>
  </div>
 
+ <div id="footer">
+ <p>Built at <span id="build-date">unknown</span> using Textwrap
+ commit <span id="build-commit">unknown</span>.</p>
+ </div>
+
  <script src="bootstrap.js"></script>
  </body>
 </html>
diff --git a/examples/wasm/www/index.js b/examples/wasm/www/index.js
@@ -1,5 +1,16 @@
 import { draw_wrapped_text } from "textwrap-wasm-demo";
 
+fetch("build-info.json").then(response => response.json()).then(buildInfo => {
+ if (buildInfo.date && buildInfo.commit) {
+ document.getElementById("build-date").innerText = buildInfo.date;
+
+ let link = document.createElement("a");
+ link.href = `https://github.com/mgeisler/textwrap/commit/${buildInfo.commit}`;
+ link.innerText = buildInfo.commit.slice(0, 7);
+ document.getElementById("build-commit").replaceWith(link);
+ }
+})
+
 function redraw(event) {
  let fontFamily = document.getElementById("font-family").value;
  let canvas = document.getElementById("canvas");
@@ -30,13 +41,13 @@ document.getElementById("line-width-text").addEventListener("input", (event) =>
 
 window.addEventListener("resize", (event) => {
  const X_OFFSET = 8; // To accommodate the size of the slider knob.
- const BOTTOM_MARGIN = 16;
 
+ let footer = document.getElementById("footer");
  let canvas = document.getElementById("canvas");
  let width = canvas.parentNode.clientWidth;
 
  canvas.width = width;
- canvas.height = window.innerHeight - BOTTOM_MARGIN - canvas.offsetTop;
+ canvas.height = footer.offsetTop - canvas.offsetTop;
 
  let lineWidth = document.getElementById("line-width");
  let lineWidthText = document.getElementById("line-width-text");

diff --git a/examples/wasm/www/webpack.config.js b/examples/wasm/www/webpack.config.js
@@ -9,7 +9,7 @@ module.exports = {
  },
  mode: "development",
  plugins: [
- new CopyWebpackPlugin({patterns: ['index.html', '../README.md']})
+ new CopyWebpackPlugin({patterns: ['index.html', '../README.md', "build-info.json"]})
  ],
  experiments: {
  syncWebAssembly: true,