Skip to content

feat: version static assets with deployed git SHA #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mroderick wants to merge 2 commits into
base: main
Choose a base branch
from
+99 −75
Open

feat: version static assets with deployed git SHA #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ab2cc2
feat: version static assets with deployed git SHA
mroderick Jul 17, 2026
5f9307e
style: fix pre-existing prettier formatting violations
mroderick Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 56 additions & 50 deletions src/app/components/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,55 +5,61 @@ import { formatISO } from "date-fns";
export const UsersList = ({ users, total }) => html`
<div class="form-section">
<h3>Users (${total} total)</h3>
${users && users.length > 0
? html`
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Verified</th>
<th>Role</th>
<th>Created</th>
</tr>
</thead>
<tbody>
${users.map(
(user) => html`
<tr>
<td>${user.name}</td>
<td>${user.email}</td>
<td>${user.emailVerified ? "✅" : "❌"}</td>
<td>
<form method="post" action="/admin/user/role">
<input type="hidden" name="userId" value="${user.id}" />
<select name="role" onchange="this.form.submit()">
<option
value="user"
${user.role === "user" ? "selected" : ""}
>
User
</option>
<option
value="admin"
${user.role === "admin" ? "selected" : ""}
>
Admin
</option>
</select>
</form>
</td>
<td>
${formatISO(new Date(user.createdAt), {
representation: "date",
})}
</td>
</tr>
`,
)}
</tbody>
</table>
`
: html` <p>No users found.</p> `}
${
users && users.length > 0
? html`
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Verified</th>
<th>Role</th>
<th>Created</th>
</tr>
</thead>
<tbody>
${users.map(
(user) => html`
<tr>
<td>${user.name}</td>
<td>${user.email}</td>
<td>${user.emailVerified ? "✅" : "❌"}</td>
<td>
<form method="post" action="/admin/user/role">
<input
type="hidden"
name="userId"
value="${user.id}"
/>
<select name="role" onchange="this.form.submit()">
<option
value="user"
${user.role === "user" ? "selected" : ""}
>
User
</option>
<option
value="admin"
${user.role === "admin" ? "selected" : ""}
>
Admin
</option>
</select>
</form>
</td>
<td>
${formatISO(new Date(user.createdAt), {
representation: "date",
})}
</td>
</tr>
`,
)}
</tbody>
</table>
`
: html` <p>No users found.</p> `
}
</div>
`;
24 changes: 14 additions & 10 deletions src/app/components/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,18 @@ export const FormSection = ({ children }) => html` <div>${children}</div> `;

// Message display component
export const Message = ({ error, success }) => html`
${error
? html`<div class="pico-background-red-50">
${decodeURIComponent(error)}
</div>`
: ""}
${success
? html`<div class="pico-background-green-50">
${decodeURIComponent(success)}
</div>`
: ""}
${
error
? html`<div class="pico-background-red-50">
${decodeURIComponent(error)}
</div>`
: ""
}
${
success
? html`<div class="pico-background-green-50">
${decodeURIComponent(success)}
</div>`
: ""
}
`;
30 changes: 16 additions & 14 deletions src/app/components/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,20 @@ import { html } from "hono/html";

// Login status display
export const LoginStatus = ({ user }) => html`
${user
? html`
<div class="pico-background-green-50">
✅ Logged in as: <strong>${user.name}</strong> (${user.email})
</div>
<a href="/profile">View Profile</a> |
<form method="post" action="/logout">
<button type="submit">Logout</button>
</form>
`
: html`
<div class="pico-background-red-50">❌ Not logged in</div>
<a href="/login">Sign In</a>
`}
${
user
? html`
<div class="pico-background-green-50">
✅ Logged in as: <strong>${user.name}</strong> (${user.email})
</div>
<a href="/profile">View Profile</a> |
<form method="post" action="/logout">
<button type="submit">Logout</button>
</form>
`
: html`
<div class="pico-background-red-50">❌ Not logged in</div>
<a href="/login">Sign In</a>
`
}
`;
14 changes: 13 additions & 1 deletion src/app/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
import { html } from "hono/html";

// Derive a version stamp for cache-busting static assets.
// HEROKU_SLUG_COMMIT is the deployed git SHA, set automatically by Heroku.
// Falls back to SOURCE_VERSION (build-time env), then 'dev' for local.
const STATIC_VERSION =
(process.env.HEROKU_SLUG_COMMIT || process.env.SOURCE_VERSION || "").slice(
0,
7,
) || "dev";

// Base layout component
export const Layout = ({ title, children }) => html`
<!DOCTYPE html>
Expand All @@ -21,7 +30,10 @@ export const Layout = ({ title, children }) => html`
<header></header>
<main class="container">${children}</main>
<footer></footer>
<script type="module" src="/static/auth-client.js?v=2"></script>
<script
type="module"
src="/static/auth-client.js?v=${STATIC_VERSION}"
></script>
</body>
</html>
`;
Expand Down