add an about page
ci/woodpecker/pr/woodpecker Pipeline was successful Details
ci/woodpecker/push/woodpecker Pipeline was successful Details

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.
pull/20/head
alex 2 years ago
parent 11fbc7aa7d
commit e238bd9018
Signed by: x1ddos
GPG Key ID: FDEFB4A63CBD8460

@ -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:

@ -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$/),
]
};

@ -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>

@ -88,6 +88,10 @@ img {
max-width: 100%;
}
main.text {
margin: 2rem;
}
.danger {
background-color: var(--bgcolor-danger);
}

@ -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, '-');
}
Loading…
Cancel
Save