fix(asset): bust cached public assets #9

Merged
Finn merged 1 commits from finn-staging into main 2026-05-18 07:42:04 +00:00
10 changed files with 58 additions and 34 deletions

5
src/assets.ts Normal file
View File

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

View File

@@ -1,4 +1,5 @@
--- ---
import { assetPath } from '../assets'
import type { Translations } from '../i18n/translations' import type { Translations } from '../i18n/translations'
export interface Props { export interface Props {
@@ -7,10 +8,12 @@ export interface Props {
const { t } = Astro.props const { t } = Astro.props
const slides = [ const slides = [
"/assets/preview-phone.png", assetPath("/assets/preview-phone.png"),
"/assets/preview-phone.png", assetPath("/assets/preview-phone.png"),
"/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"> <section class="app-preview">
@@ -31,7 +34,7 @@ const slides = [
<div class="app-preview__control-wrap"> <div class="app-preview__control-wrap">
<div class="app-preview__control-inner"> <div class="app-preview__control-inner">
<button id="btn-prev" class="app-preview__button"> <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> </button>
</div> </div>
</div> </div>
@@ -43,7 +46,7 @@ const slides = [
<div class="app-preview__control-wrap"> <div class="app-preview__control-wrap">
<div class="app-preview__control-inner"> <div class="app-preview__control-inner">
<button id="btn-next" class="app-preview__button"> <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> </button>
</div> </div>
</div> </div>

View File

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

View File

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

View File

@@ -1,4 +1,5 @@
--- ---
import { assetPath } from '../assets'
import type { Translations } from '../i18n/translations' import type { Translations } from '../i18n/translations'
export interface Props { export interface Props {
@@ -6,7 +7,11 @@ export interface Props {
} }
const { t } = Astro.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'] const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
--- ---

View File

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

View File

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

View File

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

View File

@@ -1,4 +1,5 @@
--- ---
import { assetPath } from '../assets'
import type { Translations } from '../i18n/translations' import type { Translations } from '../i18n/translations'
export interface Props { export interface Props {
@@ -6,6 +7,9 @@ export interface Props {
} }
const { t } = Astro.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 = [ const iconClasses = [
'trust-card__icon--one', 'trust-card__icon--one',
'trust-card__icon--two', 'trust-card__icon--two',
@@ -35,7 +39,7 @@ const iconClasses = [
<img <img
alt="" alt=""
class={`trust-card__icon ${iconClasses[index]}`} 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>
</div> </div>
@@ -47,7 +51,7 @@ const iconClasses = [
{index < t.cards.length - 1 && ( {index < t.cards.length - 1 && (
<div class="trust__divider"> <div class="trust__divider">
<div class="trust__divider-frame"> <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>
</div> </div>
)} )}

View File

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