Compare commits
5 Commits
1de7b09ceb
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
f3ee755f47 | ||
|
|
f8d97f46c5 | ||
|
|
edec5370b6 | ||
| 08699e6d0d | |||
|
|
74793fbc11 |
35
README.md
35
README.md
@@ -94,6 +94,41 @@ Figma assets are stored in `public/assets/`. To re-download them (valid for 7 da
|
||||
bash scripts/download-assets.sh
|
||||
```
|
||||
|
||||
## Cloudflare Cache & the `site-links-client.js` Version Flag
|
||||
|
||||
The site is proxied through **Cloudflare**, which aggressively caches static files. Astro's built CSS/JS bundles are safe because they get **content-hashed filenames** on every build (e.g. `_astro/index.Bx3kF9.js`) — Cloudflare never has an old copy because the filename itself changes.
|
||||
|
||||
`public/site-links-client.js` is the exception. It lives in `public/` so it always deploys to the same URL (`/site-links-client.js`). Cloudflare caches this URL and will keep serving the old version until either:
|
||||
|
||||
- The Cloudflare cache is **purged** (Caching → Purge Everything in the dashboard), or
|
||||
- The script URL is **versioned** so Cloudflare treats it as a new file.
|
||||
|
||||
The URL is versioned in `src/layouts/Base.astro`:
|
||||
|
||||
```html
|
||||
<script src="/site-links-client.js?v=2" defer></script>
|
||||
```
|
||||
|
||||
**Every time you change `site-links-client.js`**, bump this number (`?v=2` → `?v=3`, etc.) and redeploy. Cloudflare will fetch the latest file immediately without needing a cache purge.
|
||||
|
||||
| Change type | Cache action needed |
|
||||
|---|---|
|
||||
| CSS / Astro component change | None — hashed filename handles it |
|
||||
| `site-links-client.js` change | Bump `?v=N` in `Base.astro` and redeploy |
|
||||
| Emergency full reset | Cloudflare dashboard → Caching → Purge Everything |
|
||||
|
||||
## i18n — Adding or Updating Translations
|
||||
|
||||
All page copy lives in `src/i18n/translations.ts`. The English (`en`) entry is the base — every other language only needs to override the keys it wants to change; missing keys fall back to English automatically.
|
||||
|
||||
Supported languages: `en`, `zh-cn`, `zh-tw`, `es`, `vi`, `pt`, `de`, `fr`, `hi`, `ar`, `ru`, `id`, `ur`, `ja`, `ko`, `ms`.
|
||||
|
||||
To add a new language:
|
||||
1. Add the locale code to the `languages` array at the top of `translations.ts`.
|
||||
2. Add its label to `languageLabels` and `languageNames`.
|
||||
3. Add a translation object under `translations` (only the keys you want to override are required).
|
||||
4. Create the page route: copy `src/pages/[lang]/index.astro` if it doesn't exist.
|
||||
|
||||
## Design Source
|
||||
|
||||
Figma: [Talk Pro — Home Page Desktop](https://www.figma.com/design/Gb8WMJ2RLlcZ0bigoiOQx9/Talk-Pro?node-id=9505-537&m=dev)
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
const BTN =
|
||||
'cursor:pointer;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #ccc;background:#f5f5f5;color:#1a1a1a;';
|
||||
const BTN_PRIMARY = 'border-color:#1a6cff;background:#1a6cff;color:#fff;';
|
||||
const BTN_ORANGE = 'cursor:pointer;border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #f28a4b;background:#f28a4b;color:#fff;';
|
||||
|
||||
function initInAppBrowserModal() {
|
||||
if (document.getElementById('inapp-browser-modal')) return;
|
||||
@@ -185,8 +186,7 @@
|
||||
MODAL_ACTIONS +
|
||||
'">' +
|
||||
'<button type="button" data-app-soon-close style="' +
|
||||
BTN +
|
||||
BTN_PRIMARY +
|
||||
BTN_ORANGE +
|
||||
'"></button>' +
|
||||
'</div></div>';
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
@@ -27,7 +27,7 @@ const {
|
||||
</head>
|
||||
<body class="bg-surface font-sans overflow-x-hidden">
|
||||
<slot />
|
||||
<script src="/site-links-client.js" defer></script>
|
||||
<script src="/site-links-client.js?v=2" defer></script>
|
||||
<script>
|
||||
(() => {
|
||||
const header = document.getElementById('site-header');
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
gap: 32px;
|
||||
gap: 0px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 16px;
|
||||
}
|
||||
@@ -60,7 +60,7 @@
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -150,8 +150,8 @@ a.store-badge {
|
||||
}
|
||||
|
||||
.store-badge--ios {
|
||||
background: #383838;
|
||||
border: 1px solid #141414;
|
||||
background: #121212F0;
|
||||
border: 1px solid #2C2C2C;
|
||||
}
|
||||
|
||||
.store-badge__icon {
|
||||
@@ -168,7 +168,7 @@ a.store-badge {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #151515;
|
||||
background: #323232;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@@ -211,7 +211,7 @@ a.store-badge {
|
||||
}
|
||||
|
||||
.store-badge--ios .store-badge__platform {
|
||||
color: #ccc;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.store-badge__label {
|
||||
@@ -301,7 +301,7 @@ a.store-badge {
|
||||
|
||||
.download-cta__inner {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
gap: 16px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
|
||||
@@ -264,10 +264,6 @@
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
|
||||
.why__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.why-card {
|
||||
padding: 36px;
|
||||
min-height: 152px;
|
||||
@@ -287,6 +283,10 @@
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.why__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.why__intro {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user