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, '-');
 }