Upstream Labs Website

Bilingual (English/Chinese) corporate website built with Astro 5.0 + Tailwind CSS.

Overview

Upstream Labs is a unique combination of venture capital, Y Combinator methodology, and incubator resources, dedicated to empowering the next generation of startups.

This website is based on the AstroWind template with bilingual (English/Chinese) support implemented using Astro's built-in i18n routing and i18next for translations.

Tech Stack

• Framework: Astro 5.0
• Styling: Tailwind CSS
• i18n Routing: Astro built-in i18n
• Translations: i18next
• TypeScript: Type-safe development
• Icons: Astro Icon (Tabler icons)

Quick Start

Development

# Install dependencies
npm install
# Start development server
npm run dev

The site will be available at http://localhost:4321

• English: http://localhost:4321/
• Chinese: http://localhost:4321/cn/

Important: URLs use trailing slashes (e.g., /cn/ not /cn)

Build

# Build for production
npm run build
# Preview production build
npm run preview

Bilingual Architecture

URL Structure

• English (default): / - No language prefix
• Chinese: /cn/ - Language prefix

Examples:

• Homepage: / (English), /cn/ (Chinese)
• About: /about/ (English), /cn/about/ (Chinese)
• Contact: /contact/ (English), /cn/contact/ (Chinese)

Note: All URLs use trailing slashes due to trailingSlash: true configuration.

How It Works

1. Routing: Astro's built-in i18n routing (configured in astro.config.ts)
2. Language Detection: Automatic detection from URL path
3. Translations: JSON files in src/i18n/locales/{en,zh}/
4. SEO: Automatic hreflang tags for search engines
5. Language Switcher: Header component for easy switching

Project Structure

/
├── src/
│ ├── i18n/ # Translation infrastructure
│ │ ├── locales/ # Translation JSON files
│ │ │ ├── en/ # English translations
│ │ │ │ ├── common.json
│ │ │ │ ├── nav.json
│ │ │ │ ├── home.json
│ │ │ │ └── footer.json
│ │ │ └── zh/ # Chinese translations
│ │ │ ├── common.json
│ │ │ ├── nav.json
│ │ │ ├── home.json
│ │ │ └── footer.json
│ │ ├── utils.ts # i18n utilities
│ │ └── index.ts # Exports
│ │
│ ├── pages/ # English pages (root)
│ │ ├── index.astro
│ │ ├── about.astro
│ │ ├── contact.astro
│ │ └── zh/ # Chinese pages
│ │ ├── index.astro
│ │ ├── about.astro
│ │ └── contact.astro
│ │
│ ├── components/
│ │ ├── common/
│ │ │ └── LanguageSwitcher.astro
│ │ └── widgets/
│ │
│ ├── layouts/
│ │ └── Layout.astro # Base layout with language detection
│ │
│ └── config.yaml # Site configuration
│
├── astro.config.ts # Astro + i18n configuration
├── package.json
└── README.md

Adding Translations

1. Add Translation Keys

Edit JSON files in src/i18n/locales/{en,zh}/:

English (src/i18n/locales/en/common.json):

{
"action": {
"submit": "Submit"
}
}

Chinese (src/i18n/locales/zh/common.json):

{
"action": {
"submit": "提交"
}
}

2. Use in Pages

---import { useTranslations } from'~/i18n';const { t } =awaituseTranslations('en'); // or 'zh'---
<button>{t('action.submit', { ns: 'common' })}</button>

3. Language Detection

The current language is automatically detected from the URL:

---import { getLangFromUrl } from'~/i18n';const currentLang =getLangFromUrl(Astro.url);const { t } =awaituseTranslations(currentLang);---

Adding New Pages

To add a new bilingual page:

1. Create English version in src/pages/

   touch src/pages/services.astro

2. Create Chinese version in src/pages/zh/

   touch src/pages/zh/services.astro

3. Use translations in both files

   ---import { useTranslations } from'~/i18n';const { t } =awaituseTranslations('en'); // or 'zh'---

4. Add navigation (if needed) - update navigation configuration

Translation Namespaces

Translation files are organized by namespace:

• common.json: Site-wide content (site name, CTAs, etc.)
• nav.json: Navigation labels
• footer.json: Footer content
• home.json: Homepage-specific content
• [page].json: Page-specific content (can be added as needed)

SEO Features

• Hreflang tags: Automatic alternate language links
• Language-specific meta: Title, description per language
• Sitemap: Includes all language versions
• OpenGraph: Correct locale for social sharing

Development Workflow

Stage 1 (Current)

• ✅ Bilingual infrastructure
• ✅ Route-based language switching
• ✅ Translation system
• ✅ Language switcher UI
• ✅ SEO optimization (hreflang)
• ✅ Basic pages (home, about, contact)

Stage 2 (Next)

• Content translation (real Upstream Labs content)
• Custom branding (colors, fonts, logo)
• Additional pages
• Blog translations
• Advanced features (contact forms, newsletter)
• Performance optimization

Code Quality

# Run all checks
npm run check
# Type checking
npm run check:astro
# Linting
npm run check:eslint
# Format checking
npm run check:prettier
# Auto-fix issues
npm run fix

Configuration

Site Configuration

Edit src/config.yaml to update:

• Site name and URL
• Metadata (title, description)
• Social media handles
• Analytics
• Blog settings

i18n Configuration

The bilingual setup is configured in astro.config.ts:

i18n: {defaultLocale: 'en',locales: ['en','cn'],routing: {prefixDefaultLocale: false,// English at root: /redirectToDefaultLocale: false,// Disable auto-redirect}}

Important Settings:

• prefixDefaultLocale: false - English uses root URLs without /en/ prefix
• redirectToDefaultLocale: false - Prevents automatic redirects based on browser language
• Edit to add new languages, change default language, or modify routing behavior

Deployment

The site is built as a static site and can be deployed to:

• Netlify: Pre-configured (netlify.toml)
• Vercel: Pre-configured (vercel.json)
• Docker: Dockerfile included
• Any static hosting service

Build Output

npm run build

Generates static files in dist/ directory.

Resources

• Astro Documentation
• Astro i18n Guide
• i18next Documentation
• Tailwind CSS Documentation

License

See LICENSE.md file for details.

Support

For issues or questions, please contact the Upstream Labs team.