Merge pull request 'fix(asset): bust cached public assets' (#9) from finn-staging into main

Reviewed-on: #9

src/assets.ts

@@ -0,0 +1,5 @@
+const assetVersion = '20260518-1'
+
+export function assetPath(path: string) {
+  return `${path}?v=${assetVersion}`
+}

src/components/AppPreview.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,10 +8,12 @@ export interface Props {
 
 const { t } = Astro.props
 const slides = [
-  "/assets/preview-phone.png",
-  "/assets/preview-phone.png",
-  "/assets/preview-phone.png",
+  assetPath("/assets/preview-phone.png"),
+  assetPath("/assets/preview-phone.png"),
+  assetPath("/assets/preview-phone.png"),
 ]
+const arrowLeft = assetPath("/assets/preview-arrow-left.svg")
+const arrowRight = assetPath("/assets/preview-arrow-right.svg")
 ---
 
 <section class="app-preview">
@@ -31,7 +34,7 @@ const slides = [
     <div class="app-preview__control-wrap">
       <div class="app-preview__control-inner">
         <button id="btn-prev" class="app-preview__button">
-          <img alt={t.previous} class="app-preview__button-icon" src="/assets/preview-arrow-left.svg" />
+          <img alt={t.previous} class="app-preview__button-icon" src={arrowLeft} />
         </button>
       </div>
     </div>
@@ -43,7 +46,7 @@ const slides = [
     <div class="app-preview__control-wrap">
       <div class="app-preview__control-inner">
         <button id="btn-next" class="app-preview__button">
-          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src="/assets/preview-arrow-right.svg" />
+          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src={arrowRight} />
         </button>
       </div>
     </div>

src/components/CoreSystem.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,14 +7,14 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const halftone = "/assets/core-halftone-bg.png";
+const halftone = assetPath("/assets/core-halftone-bg.png");
 const icons = [
-  "/assets/core-icon-private.png",
-  "/assets/core-icon-groups.png",
-  "/assets/core-icon-channels.png",
-  "/assets/core-icon-voice.png",
-  "/assets/core-icon-video.png",
-  "/assets/core-icon-media.png",
+  assetPath("/assets/core-icon-private.png"),
+  assetPath("/assets/core-icon-groups.png"),
+  assetPath("/assets/core-icon-channels.png"),
+  assetPath("/assets/core-icon-voice.png"),
+  assetPath("/assets/core-icon-video.png"),
+  assetPath("/assets/core-icon-media.png"),
 ]
 ---
 

src/components/DownloadCTA.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,11 +8,11 @@ export interface Props {
 }
 
 const { t, siteLinks } = Astro.props
-const bgPattern = "/assets/cta-bg-pattern.svg";
-const talkproLogo = "/assets/cta-talkpro-logo.svg";
-const androidIcon = "/assets/cta-android-icon.svg";
-const appleIcon = "/assets/cta-apple-icon.svg";
-const phoneArt = "/assets/cta-phone-art.png";
+const bgPattern = assetPath("/assets/cta-bg-pattern.svg");
+const talkproLogo = assetPath("/assets/cta-talkpro-logo.svg");
+const androidIcon = assetPath("/assets/cta-android-icon.svg");
+const appleIcon = assetPath("/assets/cta-apple-icon.svg");
+const phoneArt = assetPath("/assets/cta-phone-art.png");
 const defaultApkHref = "https://talkspro.xyz/download";
 const siteLinksJson = JSON.stringify(siteLinks);
 ---

src/components/Experience.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,7 +7,11 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const images = ["/assets/exp-card-1.png", "/assets/exp-card-2.png", "/assets/exp-card-3.png"]
+const images = [
+  assetPath("/assets/exp-card-1.png"),
+  assetPath("/assets/exp-card-2.png"),
+  assetPath("/assets/exp-card-3.png"),
+]
 const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
 ---
 

src/components/Footer.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,7 +7,7 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const logoFull = "/assets/footer-logo.png";
+const logoFull = assetPath("/assets/footer-logo.png");
 ---
 
 <footer class="site-footer">

src/components/Header.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import { getLocalePath, languageLabels, languageNames, languages, type Lang, type Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,9 +8,9 @@ export interface Props {
 }
 
 const { lang, t } = Astro.props
-const logoIcon = "/assets/header-logo-icon.png";
-const logoWordmark = "/assets/header-logo-wordmark.svg";
-const globeIcon = "/assets/header-globe.svg";
+const logoIcon = assetPath("/assets/header-logo-icon.png");
+const logoWordmark = assetPath("/assets/header-logo-wordmark.svg");
+const globeIcon = assetPath("/assets/header-globe.svg");
 const navItems = [
   { href: '#hero', label: t.nav.home },
   { href: '#features', label: t.nav.features },

src/components/Hero.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,10 +8,10 @@ export interface Props {
 }
 
 const { t, download } = Astro.props
-const heroBg = "/assets/hero-bg.png";
-const phoneMockup = "/assets/hero-phone.png";
-const androidIcon = "/assets/cta-android-icon.svg";
-const appleIcon = "/assets/cta-apple-icon.svg";
+const heroBg = assetPath("/assets/hero-bg.png");
+const phoneMockup = assetPath("/assets/hero-phone.png");
+const androidIcon = assetPath("/assets/cta-android-icon.svg");
+const appleIcon = assetPath("/assets/cta-apple-icon.svg");
 const defaultApkHref = "https://talkspro.xyz/download";
 ---
 

src/components/Trust.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,6 +7,9 @@ export interface Props {
 }
 
 const { t } = Astro.props
+const trustIconSprite = assetPath("/assets/trust-icon-sprite.png")
+const trustIconImprovement = assetPath("/assets/trust-icon-improvement.png")
+const trustDivider = assetPath("/assets/trust-divider.svg")
 const iconClasses = [
   'trust-card__icon--one',
   'trust-card__icon--two',
@@ -35,7 +39,7 @@ const iconClasses = [
                 <img
                   alt=""
                   class={`trust-card__icon ${iconClasses[index]}`}
-                  src={index === 3 ? "/assets/trust-icon-improvement.png" : "/assets/trust-icon-sprite.png"}
+                  src={index === 3 ? trustIconImprovement : trustIconSprite}
                 />
               </div>
             </div>
@@ -47,7 +51,7 @@ const iconClasses = [
           {index < t.cards.length - 1 && (
             <div class="trust__divider">
               <div class="trust__divider-frame">
-                <img alt="" class="trust__divider-image" src="/assets/trust-divider.svg" />
+                <img alt="" class="trust__divider-image" src={trustDivider} />
               </div>
             </div>
           )}

src/components/WhyTalkPro.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,13 +7,14 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const underline = "/assets/why-underline.svg";
+const underline = assetPath("/assets/why-underline.svg");
 const icons = [
-  "/assets/why-icon-simple.svg",
-  "/assets/why-icon-familiar.svg",
-  "/assets/why-icon-connected.svg",
-  "/assets/why-icon-modern.svg",
+  assetPath("/assets/why-icon-simple.svg"),
+  assetPath("/assets/why-icon-familiar.svg"),
+  assetPath("/assets/why-icon-connected.svg"),
+  assetPath("/assets/why-icon-modern.svg"),
 ]
+const illustrationVideo = assetPath("/assets/why-illustration.mp4")
 const iconClasses = ['why-card__icon--simple', 'why-card__icon--familiar', 'why-card__icon--connected', 'why-card__icon--modern']
 ---
 
@@ -49,7 +51,7 @@ const iconClasses = ['why-card__icon--simple', 'why-card__icon--familiar', 'why-
           playsinline
           preload="metadata"
         >
-          <source src="/assets/why-illustration.mp4" type="video/mp4" />
+          <source src={illustrationVideo} type="video/mp4" />
         </video>
       </div>
     </div>