135 lines
5.1 KiB
Markdown
135 lines
5.1 KiB
Markdown
# Talk Pro
|
|
|
|
Marketing landing page for Talk Pro — a modern messaging app designed for clear, simple, and reliable communication.
|
|
|
|
## Stack
|
|
|
|
- [Astro 6](https://astro.build) — static site generator, zero client-side JS
|
|
- [UnoCSS](https://unocss.dev) — atomic CSS engine (Tailwind-compatible, faster HMR)
|
|
- TypeScript (strict)
|
|
- Inter — Google Fonts
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Open [http://localhost:4321](http://localhost:4321)
|
|
|
|
## Commands
|
|
|
|
| Command | Description |
|
|
|---------|-------------|
|
|
| `npm run dev` | Start dev server at `localhost:4321` |
|
|
| `npm run build` | Build for production into `dist/` |
|
|
| `npm run preview` | Preview production build locally |
|
|
|
|
## Deploy (Gitea Actions → talkpro.info)
|
|
|
|
Pushes to **`main`** or **`master`** run [`.gitea/workflows/deploy-talkpro.yml`](.gitea/workflows/deploy-talkpro.yml): `npm ci` → `npm run build` → `rsync` `dist/` to the marketing server (`/home/ubuntu/talkpro`).
|
|
|
|
**Repository secret** (Gitea → Settings → Secrets → Actions) — **required**:
|
|
|
|
| Secret | Value |
|
|
|--------|--------|
|
|
| `TALKPRO_SSH_PRIVATE_KEY` | Full PEM text of the `ubuntu@talkpro` deploy key |
|
|
|
|
Host (`13.214.179.69`), user (`ubuntu`), and web root (`/home/ubuntu/talkpro`) are set in the workflow. Optional secrets `TALKPRO_HOST`, `TALKPRO_USER`, `TALKPRO_REMOTE_ROOT` override those defaults.
|
|
|
|
Manual deploy from this repo:
|
|
|
|
```bash
|
|
cp .env.deploy.example .env.deploy # edit paths
|
|
set -a && source .env.deploy && set +a
|
|
bash scripts/deploy-talkpro.sh
|
|
```
|
|
|
|
`/api/site-links` (APK / App Store URLs) is still updated via the parent **talkpro** repo: `./scripts/post-talkpro-site-links.sh` on your laptop.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
talk-pro/
|
|
├── public/
|
|
│ └── assets/ # Images downloaded from Figma
|
|
├── src/
|
|
│ ├── layouts/
|
|
│ │ └── Base.astro # HTML shell, Inter font, meta
|
|
│ ├── components/
|
|
│ │ ├── Header.astro # Sticky frosted-glass nav
|
|
│ │ ├── Hero.astro # Hero with phone mockup
|
|
│ │ ├── CoreSystem.astro # 6-feature card grid
|
|
│ │ ├── UseCases.astro # 3 identity cards
|
|
│ │ ├── DownloadCTA.astro # Store badges
|
|
│ │ └── Footer.astro # Links + copyright
|
|
│ ├── pages/
|
|
│ │ └── index.astro # Composes all sections
|
|
│ └── styles/
|
|
│ └── global.css
|
|
├── uno.config.ts # Design tokens + UnoCSS config
|
|
└── astro.config.mjs
|
|
```
|
|
|
|
## Design Tokens
|
|
|
|
Defined in `uno.config.ts`:
|
|
|
|
| Token | Value |
|
|
|-------|-------|
|
|
| `brand` | `#f28a4b` |
|
|
| `text-primary` | `#2e2a28` |
|
|
| `text-secondary` | `#7a726d` |
|
|
| `surface` | `#f8f3ee` |
|
|
| `surface-alt` | `#f2eae3` |
|
|
| `surface-footer` | `#efe6de` |
|
|
| `border-light` | `#e3d9d1` |
|
|
|
|
## Assets
|
|
|
|
Figma assets are stored in `public/assets/`. To re-download them (valid for 7 days from Figma export):
|
|
|
|
```bash
|
|
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)
|