Add Plausible event tracking and Last-Modified cache busting

Track feature clicks, subscriptions, micro-transactions, top-ups,
share receipt, and close app as Plausible custom events.

Cache-bust style.css and app.js using Last-Modified headers from
HEAD requests — no build step needed, caches break on file change.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-18 09:16:20 +01:00
commit 3a457b362b
2 changed files with 28 additions and 5 deletions

View file

@ -16,7 +16,7 @@
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Anybody:wght@400;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" id="app-css" href="style.css">
<!-- Privacy-friendly analytics by Plausible (proxied via /implausibly/) -->
<script async src="/implausibly/js/pa-PsYdseBlB0-XWi0fXEZ3j.js"></script>
<script>
@ -30,6 +30,24 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.9/babel.min.js"></script>
<script type="text/babel" src="app.js" data-type="module"></script>
<script>
// Cache-bust local assets using their Last-Modified header
(async () => {
const bust = async (url) => {
try {
const r = await fetch(url, { method: "HEAD" });
const lm = r.headers.get("Last-Modified");
return lm ? url + "?v=" + new Date(lm).getTime() : url;
} catch(e) { return url; }
};
document.getElementById("app-css").href = await bust("style.css");
const s = document.createElement("script");
s.type = "text/babel";
s.src = await bust("app.js");
s.setAttribute("data-type", "module");
document.body.appendChild(s);
Babel.transformScriptTags();
})();
</script>
</body>
</html>