Show app version and auto-bump it on each commit

- Sidebar footer (and the mobile More menu) shows the version from
  client/package.json; client and server start at 1.0.0
- .githooks/pre-commit bumps the patch version on every commit that
  touches mykindlebox/, keeps hand-made minor/major bumps, and syncs the
  server package; enable with `git config core.hooksPath .githooks`

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
fireshaper 2026-10-31 23:14:42 -04:00
parent 3542739786
commit 710ad5d3e2
6 changed files with 69 additions and 3 deletions

View File

@ -0,0 +1,54 @@
// Pre-commit version bump. The app version lives in mykindlebox/client/
// package.json (shown in the sidebar footer); the server package is kept on
// the same number. Every commit that touches the app bumps the patch number
// (1.4.2 → 1.4.3) and stages the change, so each commit is a distinct version.
//
// A hand-made minor/major bump (`npm version minor --no-git-tag-version` in
// client/) is kept as-is instead of being bumped again, and copied to the
// server package.
//
// Skipped entirely when nothing under mykindlebox/ is staged (docs-only
// commits) or SKIP_VERSION_BUMP=1 is set.
import { execFileSync } from 'node:child_process'
import { readFileSync, writeFileSync } from 'node:fs'
const PACKAGES = ['mykindlebox/client', 'mykindlebox/server']
function git(...args) {
return execFileSync('git', args, { encoding: 'utf8' })
}
function versionAt(ref) {
try {
return JSON.parse(git('show', `${ref}:mykindlebox/client/package.json`)).version
} catch {
return null // no HEAD yet, or the file didn't exist
}
}
if (process.env.SKIP_VERSION_BUMP === '1') process.exit(0)
const staged = git('diff', '--cached', '--name-only').split('\n').filter(Boolean)
if (!staged.some((file) => file.startsWith('mykindlebox/'))) process.exit(0)
const headVersion = versionAt('HEAD')
const stagedVersion = versionAt('') // `git show :path` reads the index
const manualBump = Boolean(headVersion && stagedVersion && headVersion !== stagedVersion)
const [major, minor, patch] = (stagedVersion ?? '0.0.0').split('.').map(Number)
const next = manualBump ? stagedVersion : `${major}.${minor}.${patch + 1}`
// Also brings the server (and lockfiles) along after a client-only manual bump.
for (const dir of PACKAGES) {
for (const name of ['package.json', 'package-lock.json']) {
const path = `${dir}/${name}`
const json = JSON.parse(readFileSync(path, 'utf8'))
if (json.version === next && (!json.packages?.[''] || json.packages[''].version === next)) continue
json.version = next
if (json.packages?.['']) json.packages[''].version = next
writeFileSync(path, `${JSON.stringify(json, null, 2)}\n`)
git('add', path)
}
}
console.log(`MyKindlebox version ${manualBump ? 'set' : 'bumped'} to ${next}`)

4
.githooks/pre-commit Normal file
View File

@ -0,0 +1,4 @@
#!/bin/sh
# Bumps the app's patch version on every commit that touches mykindlebox/.
# Enabled per clone with: git config core.hooksPath .githooks
exec node "$(git rev-parse --show-toplevel)/.githooks/bump-version.mjs"

View File

@ -35,6 +35,7 @@ Deployment: `docker compose up --build` from `mykindlebox/` serves the app on po
### Conventions ### Conventions
- The REST API speaks **snake_case** at the boundary; Drizzle columns are camelCase. `server/utils/case.ts` converts both directions — don't hand-write conversions. - The REST API speaks **snake_case** at the boundary; Drizzle columns are camelCase. `server/utils/case.ts` converts both directions — don't hand-write conversions.
- **Versioning**: the app version is `mykindlebox/client/package.json`'s `version` (server package kept in sync), shown at the bottom of the sidebar and the mobile More menu. The checked-in pre-commit hook `.githooks/bump-version.mjs` bumps the patch number on every commit that touches `mykindlebox/` — don't bump patch versions by hand. For a minor/major release, run `npm version minor --no-git-tag-version` (or `major`) in `client/` before committing; the hook keeps it and syncs the server. Each clone must enable the hook once with `git config core.hooksPath .githooks`.
- The client talks to the API over **relative URLs** (`/api`, `/uploads`). Never reintroduce a hardcoded `http://localhost:3001`; it breaks LAN/PWA access from other devices. - The client talks to the API over **relative URLs** (`/api`, `/uploads`). Never reintroduce a hardcoded `http://localhost:3001`; it breaks LAN/PWA access from other devices.
## What MyKindlebox is ## What MyKindlebox is

View File

@ -1,12 +1,12 @@
{ {
"name": "client", "name": "client",
"version": "0.0.0", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "client", "name": "client",
"version": "0.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@tanstack/react-query": "^5.101.0", "@tanstack/react-query": "^5.101.0",
"react": "^19.2.6", "react": "^19.2.6",

View File

@ -1,7 +1,7 @@
{ {
"name": "client", "name": "client",
"private": true, "private": true,
"version": "0.0.0", "version": "1.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

View File

@ -1,6 +1,9 @@
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom' import { NavLink, Outlet, useLocation } from 'react-router-dom'
import QuickSearch from './QuickSearch' import QuickSearch from './QuickSearch'
// Vite inlines just this field; it's bumped by the pre-commit hook
// (.githooks/bump-version.mjs) on every commit that touches the app.
import { version as APP_VERSION } from '../../package.json'
// Stroke icons shared by the sidebar and the mobile bottom nav. Kept inline // Stroke icons shared by the sidebar and the mobile bottom nav. Kept inline
// (no icon library) to match the other hand-rolled SVGs in the app. // (no icon library) to match the other hand-rolled SVGs in the app.
@ -173,6 +176,9 @@ function MoreMenu() {
{item.label} {item.label}
</NavLink> </NavLink>
))} ))}
<p className="border-t border-border px-3 pb-1 pt-2 font-body text-xs text-text-secondary">
MyKindlebox v{APP_VERSION}
</p>
</div> </div>
)} )}
</div> </div>
@ -207,6 +213,7 @@ function Layout() {
</NavLink> </NavLink>
))} ))}
</nav> </nav>
<p className="mt-auto px-3 font-body text-xs text-text-secondary">v{APP_VERSION}</p>
</aside> </aside>
{/* min-w-0 lets wide children (tables, the pedigree tree) scroll inside {/* min-w-0 lets wide children (tables, the pedigree tree) scroll inside