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 · e238bd9018
parent 11fbc7aa7d
commit e238bd9018
5 changed files with 82 additions and 2 deletions
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -1,7 +1,8 @@
 pipeline:
  build:
-    image: node:18-slim
+    image: node:18-alpine
    commands:
+      - apk add --no-cache git
      - npm ci
      - npm run build
  prepare_release:
--- 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/comment.svg',
    'src/assets/heart-fill.svg',
    'src/assets/star.svg',
@ -31,7 +34,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,24 @@
+<!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">
+      <h1>nostr: notes and other stuff transmitted by relays</h1>
+      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>
+      <p>
+        for more information about nostr protocol, check out
+        <a href="https://nostr.info/" target="_blank" rel="noopener noreferrer">nostr.info</a>.
+      </p>
+    </main>
+  </body>
+</html>
--- a/src/main.css
+++ b/src/main.css
@ -88,6 +88,10 @@ img {
  max-width: 100%;
 }

+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 { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+const execFileAsync = promisify(execFile);
+
+/**
+ * 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 function replaceOnCopyPlugin(fileFilter) {
+  return {
+    name: 'replace-on-copy',
+    setup(build) {
+      const appVersion = sanitizedStr(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',
+        }
+      });
+    }
+  }
+}
+
+async function gitRevParse(rev) {
+  rev = sanitizedStr(rev);
+  const { stdout } = await execFileAsync('git', ['rev-parse', '--short', rev]);
+  return sanitizedStr(stdout.trim());
+}
+
+function sanitizedStr(s) {
+  const notOk = /[^0-9a-z \.@-]/ig;
+  return s.replaceAll(notOk, '-');
+}