Merge pull request #25 from keepass-web/issue-1-add-release-version-footer

Show build version on distributables

Author: bishopb

.github/workflows/ci.yml

@@ -103,14 +103,24 @@ jobs:
       - name: Test
         run: npm test
 
-      # Step 6 — Build distributables
+      # Step 6 — Version footer inputs
+      # Every distributable's footer shows what it was built from. GITHUB_REF_TYPE,
+      # GITHUB_REF_NAME, and GITHUB_SHA are already set by Actions on every job;
+      # the commit date isn't, so it's computed here once and persisted via
+      # $GITHUB_ENV so the later "Record checksums" step (a separate step, hence
+      # a separate process) sees the same value the build itself used — see
+      # tools/build/inliner/src/version-label.ts and docs/REPRODUCING.md.
+      - name: Resolve commit date for the version footer
+        run: echo "KEEPASS_WEB_COMMIT_DATE=$(git show -s --format=%cI HEAD)" >> "$GITHUB_ENV"
+
+      # Step 7 — Build distributables
       # The root build script builds argon2 and chacha20, then kdbx, then pages,
       # in that dependency order — pages' bundler reads their compiled build/
       # output, so they must exist first.
       - name: Build distributables
         run: npm run build
 
-      # Step 7 — Checksums
+      # Step 8 — Checksums
       # Surfaces each distributable's checksum in the workflow summary. For
       # tagged releases, these values are attached to the GitHub release as the
       # published checksums that third parties verify against.

.github/workflows/release.yml

@@ -81,17 +81,23 @@ jobs:
 
       # The root build script builds argon2 and chacha20, then kdbx, then
       # pages, in that dependency order, writing all intermediate output to
-      # build/ and the final distributables to dist/ — see ci.yml Step 6.
+      # build/ and the final distributables to dist/ — see ci.yml Step 7.
       # Neither directory is committed, so this rebuild from source is the
       # only place dist/*.html come from; there's nothing to reuse from CI.
       # The inliner prints "sha256:<hex>  <output path>" to stdout for each
       # built file; the loop below re-runs it and keeps only the first
       # whitespace-separated field (the checksum) for the summary. CNAME is
       # copied verbatim; its checksum is computed separately since it isn't
       # inlined.
+      #
+      # KEEPASS_WEB_COMMIT_DATE feeds every distributable's version footer
+      # (GITHUB_REF_TYPE/GITHUB_REF_NAME/GITHUB_SHA are already set by
+      # Actions) — see tools/build/inliner/src/version-label.ts and
+      # docs/REPRODUCING.md for reproducing this outside CI.
       - name: Build distributables
         if: steps.existing-release.outputs.exists != 'true'
         run: |
+          export KEEPASS_WEB_COMMIT_DATE="$(git show -s --format=%cI HEAD)"
           npm run build
           cp pages/CNAME dist/CNAME
 

docs/PIPELINE.md

@@ -84,7 +84,8 @@ flowchart TD
     DEP -->|pass| LINT
     LINT --> TC["tsc --noEmit type check, every workspace"]
     TC --> TEST["node:test suite, every workspace"]
-    TEST --> BUILD["npm run build\nargon2 + chacha20 -> kdbx -> pages\nbundle + inline x 4 pages"]
+    TEST --> DATE["Resolve KEEPASS_WEB_COMMIT_DATE\ngit show -s --format=%cI HEAD"]
+    DATE --> BUILD["npm run build\nargon2 + chacha20 -> kdbx -> pages\nbundle + inline x 4 pages\n(version footer: GITHUB_REF_TYPE/NAME/SHA + commit date)"]
     BUILD --> SUM["Publish checksums\nto step summary"]
 ```
 
@@ -98,7 +99,7 @@ flowchart TD
     TAG --> AREL["release.yml"]
     AREL --> CI3["Lint · type check · test"]
     CI3 --> VER2["Verify tag = package.json version"]
-    VER2 --> BUILD["Full build from source: compile\npackages and pages, bundle, inline;\ncopy CNAME\nOutputs: 0x67.html · router.html\nindex.html · cloud-google-drive.html\nCNAME"]
+    VER2 --> BUILD["Full build from source: compile\npackages and pages, bundle, inline;\ncopy CNAME\nOutputs: 0x67.html · router.html\nindex.html · cloud-google-drive.html\nCNAME\n(version footer: tag + commit date)"]
     BUILD --> ATTEST["Attest all five files\nactions/attest-build-provenance\nSigns to Sigstore transparency log"]
     ATTEST --> GHREL["Create GitHub release\nUpload all five files\nPublish checksums in release notes"]
     GHREL --> TOKEN["Generate short-lived App token\nscoped to the deploy repo"]

docs/RELEASES.md

@@ -12,6 +12,8 @@
 
 Every file served from [keepass-web.app][app] is a verbatim copy of a file published in a GitHub release — nothing is created, modified, or synthesized during deployment. A copy downloaded from Releases and a copy served from the hosted site are the same bytes; see [Reproducing a build][reproducing] to verify that yourself.
 
+Each of the four HTML pages shows its own build's version in the footer — the tag it was released as, linked to that exact tree in this repo, and the date it was committed (shown in whatever locale format the visitor's own browser uses). A non-release build (a plain local `npm run build`, or CI on a branch) shows a linked short commit sha instead of a tag, or "development build" with no link if no commit metadata was supplied at all — see [Reproducing a build][reproducing].
+
 ## Overview
 
 ```

docs/REPRODUCING.md

@@ -16,16 +16,29 @@ Any party can reproduce a versioned distributable and verify it against the publ
    docker build -t keepass-web-build -f tools/build/Dockerfile .
    ```
 
-3. Run the build inside the container:
+3. Every distributable's footer shows what it was built from — the tag (or commit) and the date it was committed, sourced from four env vars rather than the container's clock, so the same commit always produces the same bytes no matter when it's rebuilt (see "two independent builds" below). `GITHUB_REF_TYPE`, `GITHUB_REF_NAME`, and `GITHUB_SHA` mirror the env vars GitHub Actions already sets on every job; outside Actions, derive them from the tag checked out in step 1:
 
    ```sh
-   docker run --rm -v "$PWD":/workspace keepass-web-build \
+   ref_name=v<version>
+   sha=$(git rev-parse HEAD)
+   commit_date=$(git show -s --format=%cI HEAD)
+   ```
+
+4. Run the build inside the container:
+
+   ```sh
+   docker run --rm -v "$PWD":/workspace \
+     -e GITHUB_REF_TYPE=tag \
+     -e GITHUB_REF_NAME="$ref_name" \
+     -e GITHUB_SHA="$sha" \
+     -e KEEPASS_WEB_COMMIT_DATE="$commit_date" \
+     keepass-web-build \
      sh -c "npm ci && npm run build"
    ```
 
    `npm run build` builds `argon2`, `chacha20`, and `kdbx`, then bundles and inlines each page. The inliner prints `sha256:<hex>  <output path>` to stdout once per distributable (`index.html`, `router.html`, `0x67.html`, `cloud-google-drive.html`), so each checksum is unambiguously tied to the file it belongs to.
 
-4. Compare each printed checksum against the corresponding value published with the release.
+5. Compare each printed checksum against the corresponding value published with the release.
 
 Two independent builds of the same source commit must produce an identical checksum. A mismatch means the build is not reproducible and should be treated as suspect.
 

pages/0x67/page.css

@@ -1070,6 +1070,32 @@ input.attachment-name:focus {
   opacity: 0.5;
 }
 
+/* ============================================================
+   Footer
+   (a flex-shrink:0 sibling of #root in both body layouts above, so it
+   claims its own space instead of being clipped by app-mode's
+   height:100vh/overflow:hidden or centered away by the upload/unlock
+   layout's justify-content:center)
+   ============================================================ */
+
+footer {
+  flex-shrink: 0;
+  padding: 0.4rem 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
 /* ============================================================
    Printing (entry detail only — see data-action="print")
    ============================================================ */

pages/0x67/page.html

@@ -392,6 +392,8 @@ <h2>Choose an icon</h2>
     </div>
   </dialog>
 
+  <footer>MIT licensed &middot; <a href="https://github.com/keepass-web">github.com/keepass-web</a> &middot; <!--VERSION--></footer>
+
   <!--SCRIPTS-->
 </body>
 </html>

pages/cloud-google-drive/page.css

@@ -30,6 +30,8 @@ body {
   font-size: 15px;
   line-height: 1.5;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .wordmark {
@@ -38,6 +40,27 @@ body {
   color: var(--accent);
 }
 
+/* #root is a flex-shrink:0 sibling away from footer below, so it grows to
+   fill whatever space footer doesn't need — see .screen-host, which used to
+   claim a flat 100vh of its own and is now sized off this instead. */
+#root {
+  flex: 1;
+  min-height: 0;
+}
+
+footer {
+  flex-shrink: 0;
+  padding: 0.4rem 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+footer a {
+  color: var(--accent);
+}
+
 /* ============================================================
    Buttons and shared bits
    ============================================================ */
@@ -149,7 +172,7 @@ body {
 .screen-host {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
 }
 
 .host-header {

pages/cloud-google-drive/page.html

@@ -58,6 +58,8 @@ <h1>Open from Google Drive</h1>
     </div>
   </template>
 
+  <footer>MIT licensed &middot; <a href="https://github.com/keepass-web">github.com/keepass-web</a> &middot; <!--VERSION--></footer>
+
   <!--SCRIPTS-->
 </body>
 </html>

pages/index/page.html

@@ -33,7 +33,7 @@ <h1>Your passwords.<br>Your storage.<br>Your browser.</h1>
       <a href="https://github.com/sponsors/keepass-web">Sponsor</a>
     </div>
   </main>
-  <footer>MIT licensed &middot; <a href="https://github.com/keepass-web">github.com/keepass-web</a></footer>
+  <footer>MIT licensed &middot; <a href="https://github.com/keepass-web">github.com/keepass-web</a> &middot; <!--VERSION--></footer>
   <!--SCRIPTS-->
 </body>
 </html>