Configuration

Goal: Configure the 3 essentials - site name, base URL, and languages.

Configure your Astro Swiss Theme for your specific needs. These configuration options apply to both the free starter theme and the paid version.

Quick Reference

What to Configure	File	Section
Default language	`astro.config.mjs`	`i18n.defaultLocale`
Supported languages	`astro.config.mjs`	`i18n.locales`
Language names & flags	`src/i18n/ui.ts`	`languages` object
Translations	`src/i18n/ui.ts`	`ui` object
Contact info	`src/consts.ts`	All exports
Component base color	`starwind.config.json`	`tailwind.baseColor`
Brand colors	`src/styles/tokens.css`	See Styling Guide

Astro Configuration

File: astro.config.mjs

This file configures Astro’s build system and i18n routing.

Current Configuration

import tailwindcss from "@tailwindcss/vite";
// @ts-check
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  // IMPORTANT: Replace with your actual domain before deployment
  site: "https://example.com",

  vite: {
    plugins: [tailwindcss()],
  },

  i18n: {
    defaultLocale: "fr",
    locales: ["fr", "de", "en"],
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

i18n Options

`defaultLocale`

The default language for your site. This language will be served at the root path (/).

defaultLocale: "fr"  // French is default

`locales`

Array of all supported language codes. Must match the languages defined in src/i18n/ui.ts.

locales: ["fr", "de", "it", "rm"]  // Support 4 languages

`routing.prefixDefaultLocale`

When false, the default language is served at / instead of /fr/. Other languages use prefixes like /de/ and /en/.

prefixDefaultLocale: false  // French at /, German at /de/, English at /en/
prefixDefaultLocale: true   // French at /fr/, German at /de/, English at /en/

Adding a New Locale

Add the locale code to the locales array
Add translations in src/i18n/ui.ts
Create page folder in src/pages/[locale]/

See Adding Languages for detailed instructions.

Starwind Configuration

File: starwind.config.json

This file configures the Starwind UI component library.

Current Configuration

{
  "$schema": "https://starwind.dev/config-schema.json",
  "tailwind": {
    "css": "src/styles/starwind.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "componentDir": "src/components",
  "components": [
    { "name": "button", "version": "2.2.0" },
    { "name": "card", "version": "1.3.0" },
    { "name": "carousel", "version": "1.0.1" },
    { "name": "avatar", "version": "1.2.1" },
    { "name": "input", "version": "1.3.1" },
    { "name": "label", "version": "1.2.0" },
    { "name": "textarea", "version": "1.3.1" },
    { "name": "separator", "version": "1.0.0" },
    { "name": "dropdown", "version": "1.2.2" }
  ]
}

Configuration Options

`tailwind.css`

Path to the Starwind CSS file. This file contains the component styles.

"css": "src/styles/starwind.css"

`tailwind.baseColor`

Base color palette for components.

Options: neutral, slate, gray, zinc, stone

"baseColor": "slate"  // Use slate color palette

`tailwind.cssVariables`

When true, uses CSS variables for theming (recommended for dark mode support).

"cssVariables": true

`componentDir`

Directory where Starwind components are installed.

"componentDir": "src/components"

Adding Starwind Components

To add a new Starwind component:

npx starwind add [component-name]

This automatically updates starwind.config.json and installs the component files.

Global Constants

File: src/consts.ts

This file contains language-agnostic data: your company’s contact information (COMPANY) and your team members (EMPLOYEES).

Current Configuration

export const COMPANY: CompanyInfo = {
    name: "SwissDigital Agency",
    address: "Avenue de la Gare 15",
    pobox: "", // Leave empty if not used
    city: "CH-1003 Lausanne",
    phone: "+41 21 555 01 23",
    email: "contact@swissdigital.example",
    mapsUrl: "https://maps.google.com/?q=Avenue+de+la+Gare+15+1003+Lausanne",
    socials: {
        linkedin: "https://www.linkedin.com/company/example",
        facebook: "",
        instagram: "https://www.instagram.com/example",
        twitter: "",
        github: "",
    },
};

export const EMPLOYEES: Record<string, EmployeeInfo> = {
    SMA: {
        id: "SMA", // trigram ID, e.g. SMA for Sophie Martin
        name: "Sophie Martin",
        portrait: "/images/team/sophie-martin.webp", // "" if not available
        email: "sophie.martin@swissdigital.example",
        phone: "+41 21 555 01 24",
        socials: { linkedin: "https://www.linkedin.com/in/example", facebook: "", instagram: "", twitter: "", github: "" },
    },
    // ... more employees, keyed by trigram ID
};

The full file also defines the CompanyInfo, EmployeeInfo and SocialLinks interfaces — replace the values, keep the shapes. Empty strings are fine for anything you don’t use. Employee titles and bios are translatable and live in src/i18n/ui.ts, not here.

Usage in Components

Import these constants in your components:

---
import { COMPANY } from "@/consts";
---

<a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>
<a href={`tel:${COMPANY.phone}`}>{COMPANY.phone}</a>

i18n Configuration

File: src/i18n/ui.ts

This file defines all languages and translations for your site.

Language Definitions

export const languages = {
  fr: { name: 'Français', flag: 'FR' },
  de: { name: 'Deutsch', flag: 'DE' },
  en: { name: 'English', flag: 'EN' },
} as const;

export type Language = keyof typeof languages;
export const defaultLang: Language = 'fr';

Translation Keys

All translations are organized by language and key:

export const ui = {
  fr: {
    'nav.home': 'Accueil',
    'nav.work': 'Nos Réalisations',
    'nav.about': 'À Propos',
    'nav.contact': 'Contact',
    // ... more translations
  },
  de: {
    'nav.home': 'Startseite',
    'nav.work': 'Unsere Arbeiten',
    'nav.about': 'Über Uns',
    'nav.contact': 'Kontakt',
    // ... more translations
  },
} as const;

Translation Categories

Category	Keys	Purpose
Navigation	`nav.*`	Menu items, links
CTA	`cta.*`	Call-to-action buttons
Business	`business.*`	Tagline and description
Portfolio	`portfolio.*`	Portfolio section
Services	`services.*`	Services section (titles and descriptions)
Contact	`contact.*`	Contact form, info card and email texts
Site	`site.*`	SEO metadata (title, description)
Theme	`theme.*`	Theme toggle labels

Customizing Translations

1. Edit existing translations:

'business.tagline': 'Your tagline here',
'business.description': 'What your company does, in one or two sentences.',

2. Add new translation keys:

fr: {
  // ... existing keys
  'footer.copyright': '© 2025 Tous droits réservés',
},
de: {
  // ... existing keys
  'footer.copyright': '© 2025 Alle Rechte vorbehalten',
},

3. Use in components:

---
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
const lang = getLangFromUrl(Astro.url, Astro.currentLocale);
const t = useTranslations(lang);
---

<p>{t('footer.copyright')}</p>

Best Practices

✅ Keep translation keys consistent across all languages
✅ Use dot notation for namespacing (e.g., nav.home, contact.form.name)
✅ Store language-agnostic data (emails, phone numbers) in src/consts.ts
✅ Always include the as const assertion for type safety

TypeScript Path Aliases

The @/* alias maps to the src/ directory for cleaner imports:

// Instead of:
import { useTranslations } from '../../../i18n/utils';

// Use:
import { useTranslations } from '@/i18n/utils';

Next Steps

Customize Content

Learn how to customize components and add new pages.

Customization Guide →

Style Your Site

Configure colors, fonts, and design tokens.

Styling Guide →

Add a Language

Add support for additional languages.

Adding Languages →

Setup Analytics

Configure GA4 and GTM with privacy defaults.

Analytics & Tracking →