cache-bust static CSS with ?v={git_hash} on every deploy

Browsers were caching /static/css/common.css indefinitely (the <link>
had no version param), so CSS fixes didn't show up until a hard
refresh. Fox kept seeing the old squished-button CSS after deploys.

- New request property request.git_hash (reified) returns the short
  git hash baked in at deploy time (views.version.GIT_HASH)
- base.j2 tokens.css and common.css links now carry ?v={{ request.git_hash }}

Each deploy bumps GIT_HASH, so the CSS URL changes, so browsers fetch
the fresh file. No more stale-CSS confusion.
This commit is contained in:
russell@unturf.com 2026-05-11 09:45:17 -04:00
parent 40d25edb6d
commit 37e314d534
No known key found for this signature in database
2 changed files with 11 additions and 3 deletions

View file

@ -469,6 +469,14 @@ def includeme(config):
add_torrent_enabled_global, "torrent_enabled", reify=True
)
def add_git_hash(request):
"""Short git hash baked in at deploy time — used to cache-bust
static assets (CSS/JS) so a deploy invalidates browser caches."""
from .views.version import GIT_HASH
return GIT_HASH
config.add_request_method(add_git_hash, "git_hash", reify=True)
def add_has_xmr_refund_address(request):
"""Check if the current user has an XMR refund address configured."""
if not request.user or not request.shop:

View file

@ -17,9 +17,9 @@
<html lang="en" data-theme="{{ theme_preference }}" data-user-theme="{{ user_theme_id or 'null' }}" data-shop-default="{{ shop_default_theme }}"{% if request.shop and request.shop.color_filter %} data-color-filter="{{ request.shop.color_filter }}"{% endif %}>
<head>
<!-- design tokens first, then app styles -->
<link rel="stylesheet" href="/static/css/tokens.css">
<link rel="stylesheet" href="/static/css/common.css">
<!-- design tokens first, then app styles. ?v= cache-busts on each deploy. -->
<link rel="stylesheet" href="/static/css/tokens.css?v={{ request.git_hash }}">
<link rel="stylesheet" href="/static/css/common.css?v={{ request.git_hash }}">
<!-- Dark mode theme switching -->
<script>