add an about page

this is a simple static text page showing current version from the npm package and git commit hash at which the app was built. it's served at /about.html but i didn't link it from the root. not sure where the best place is.
2 years ago · 6d6a3be8a8
parent a7a2acfc0c
commit 6d6a3be8a8
4 changed files with 75 additions and 1 deletions
--- a/esbuildconf.js
+++ b/esbuildconf.js
@ -3,12 +3,15 @@ import { createRequire } from 'module';
 import alias from 'esbuild-plugin-alias';
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

+import { replaceOnCopyPlugin } from './tools/esbuild-helper.js'
+
 // see docs at https://esbuild.github.io/api/
 export const options = {
  entryPoints: [
    'src/main.js',
    'src/main.css',
    'src/index.html',
+    'src/about.html',
    'src/assets/bubble.svg',
    'src/assets/comment.svg',
    'src/assets/heart-fill.svg',
@ -32,7 +35,8 @@ export const options = {
      // cipher-base require's "stream"
      stream: createRequire(import.meta.url).resolve('readable-stream')
    }),
-    NodeGlobalsPolyfillPlugin({buffer: true})
+    NodeGlobalsPolyfillPlugin({buffer: true}),
+    replaceOnCopyPlugin(/about\.html$/),
  ]
 };

--- a/src/about.html
+++ b/src/about.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>about / nostr</title>
+    <link rel="stylesheet" href="main.css" type="text/css">
+  </head>
+  <body>
+    <main class="text">
+      this is a nostr web client.<br>
+      source code is at <a href="https://git.qcode.ch/nostr/nostrweb">git.qcode.ch/nostr/nostrweb</a>.
+      <p>
+        you are looking at version #[PKG_VERSION]#, built at git commit
+        <a href="https://git.qcode.ch/nostr/nostrweb/commit/#[GIT_COMMIT]#">#[GIT_COMMIT]#</a>.
+      </p>
+    </main>
+  </body>
+</html>
--- a/src/main.css
+++ b/src/main.css
@ -83,6 +83,10 @@ time {
  font-size: var(--font-small);
 }

+main.text {
+  margin: 2rem;
+}
+
 .danger {
  background-color: var(--bgcolor-danger);
 }
--- a/tools/esbuild-helper.js
+++ b/tools/esbuild-helper.js
@ -0,0 +1,47 @@
+import { readFile } from 'node:fs/promises';
+import { spawn } from 'node:child_process';
+
+/**
+ * gitRevParse spawns a git rev-parse command and reports its stdout
+ * in a resolved promise or a rejected error on completion,
+ * depending on the exit code.
+ */
+const gitRevParse = (rev) => new Promise((resolve, reject) => {
+  let commit = '', err = '';
+  const proc = spawn('git', ['rev-parse', '--short', rev]);
+  proc.stdout.on('data', (data) => commit += data.toString().trim());
+  proc.stderr.on('data', (data) => err += err.toString());
+  proc.on('close', (code) => code === 0 ? resolve(commit) : reject(err));
+});
+
+/**
+ * replaceOnCopyPlugin is an esbuild plugin. it loads files as utf-8 text
+ * and replaces certain placeholders with their values computed on plugin setup.
+ * the fileFilter is a regexp matching names or extensions of the files to process,
+ * passed to esbuild's onLoad as is.
+ *
+ * the following placeholders are replaced:
+ *
+ * #[PKG_VERSION]# -> npm package version
+ * #[GIT_COMMIT]#  -> short git commit at current HEAD
+ */
+export const replaceOnCopyPlugin = (fileFilter) => {
+  return {
+    name: 'replace-on-copy',
+    setup(build) {
+      const appVersion = process.env.npm_package_version;
+      const gitHeadCommit = gitRevParse('HEAD');
+
+      build.onLoad({filter: fileFilter}, async (args) => {
+        const gitCommitHash = await gitHeadCommit;
+        let text = await readFile(args.path, 'utf8');
+        text = text.replaceAll('#[PKG_VERSION]#', appVersion);
+        text = text.replaceAll('#[GIT_COMMIT]#', gitCommitHash);
+        return {
+          contents: text,
+          loader: 'copy',
+        }
+      });
+    }
+  }
+}