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";
import { defineConfig } from "astro/config";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  i18n: {
    defaultLocale: "fr",
    locales: ["fr", "de"],
    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/.

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

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 constants like contact information.

Current Configuration

// Language-agnostic contact information
export const AUTHOR_NAME = 'John Doe';
export const AUTHOR_EMAIL = 'info@professionalservices.com';
export const AUTHOR_PHONE = '+41 89 123 45 67';
export const AUTHOR_LINKEDIN_LINK = 'https://www.linkedin.com/in/vincentheimann/';

Customization

Replace these values with your actual information:

export const AUTHOR_NAME = 'Your Name';
export const AUTHOR_EMAIL = 'your.email@example.com';
export const AUTHOR_PHONE = '+1 234 567 8900';
export const AUTHOR_LINKEDIN_LINK = 'https://www.linkedin.com/in/yourprofile/';

Usage in Components

Import these constants in your components:

---
import { AUTHOR_EMAIL, AUTHOR_PHONE } from '@/consts';
---

<a href={`mailto:${AUTHOR_EMAIL}`}>{AUTHOR_EMAIL}</a>
<a href={`tel:${AUTHOR_PHONE}`}>{AUTHOR_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: '🇫🇷' },
  de: { name: 'Deutsch', flag: '🇩🇪' },
} 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.*`	Company name, tagline, description
Portfolio	`portfolio.*`	Portfolio section
Owner	`owner.*`	Owner/founder information
Contact	`contact.*`	Contact form and info
Site	`site.*`	SEO metadata (title, description)
Author	`author.*`	Author details
Theme	`theme.*`	Theme toggle labels

Customizing Translations

1. Edit existing translations:

'business.name': 'Your Company Name',
'business.tagline': 'Your tagline here',

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 { useTranslations } from '@/i18n/utils';
const t = useTranslations(Astro.currentLocale);
---

<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 →