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 Navigation

Use the table below to jump to the configuration you need, or scroll through the guide for comprehensive coverage.

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

astro.config.mjs

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

export default defineConfig({
  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

1. Add the locale code to the locales array
2. Add translations in src/i18n/ui.ts
3. 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

starwind.config.json

{
  "$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.

Learn more

Visit Starwind Docs for available components and options.

---

Global Constants

File: src/consts.ts

This file contains language-agnostic constants like contact information.

Current Configuration

src/consts.ts

// 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:

src/consts.ts

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>

Note

For translatable content (like business name, taglines), use src/i18n/ui.ts instead.

---

i18n Configuration

File: src/i18n/ui.ts

This file defines all languages and translations for your site.

Language Definitions

src/i18n/ui.ts

export const languages = {
  fr: { name: 'Français', flag: '🇫🇷' },
  de: { name: 'Deutsch', flag: '🇩🇪' },
  en: { name: 'English', flag: '🇬🇧' },
} as const;

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

Translation Keys

All translations are organized by language and key:

src/i18n/ui.ts

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 →