Skip to main content
This page provides an overview of the wedding website’s file structure and architectural patterns.

​
Directory Overview

The project follows Astro’s standard conventions with additional organization for internationalization and components: 
boda/
├── public/              # Static assets
│   ├── favicon.ico
│   └── favicon.svg
├── src/                 # Source code
│   ├── assets/          # Dynamic assets (images, fonts, icons)
│   ├── components/      # Reusable Astro components
│   ├── i18n/           # Internationalization files
│   ├── layouts/        # Page layouts
│   ├── pages/          # Routes and API endpoints
│   └── styles/         # Global styles
├── astro.config.mjs    # Astro configuration
├── package.json        # Dependencies and scripts
└── tsconfig.json       # TypeScript configuration

​
Key Directories

​
/src/assets/

Contains dynamic assets that are processed by Astro’s build system:
  • fonts/ - Custom web fonts
  • icons/ - SVG icons and graphics
  • images/ - Photos and images used throughout the site
Assets in this directory are optimized during build time. Astro can automatically optimize images placed here.

​
/src/components/

Reusable Astro components that make up the wedding website. Each component represents a distinct section:
ComponentPurpose
Header.astroSite navigation and language switcher
Footer.astroFooter with contact information
SectionPrincipal.astroHero section with couple names
SectionCelebration.astroWedding date and venue details
SectionForm.astroRSVP confirmation form
SectionGaleria.astroPhoto gallery
SectionGift.astroGift registry information
SectionHospedaje.astroAccommodation recommendations
SectionDressCode.astroDress code guidelines
SectionContact.astroContact information
SectionPlayList.astroMusic playlist suggestions
SectionPreWeding.astroPre-wedding events
SectionSugerencia.astroSuggestions and tips
SectionImgFondo.astroBackground image sections
Components follow a clear naming convention: Section* for page sections, making it easy to identify their purpose.

​
/src/i18n/

Internationalization (i18n) system supporting three languages:
  • es.json - Spanish translations (default)
  • en.json - English translations
  • de.json - German translations
  • index.ts - Translation utilities and language detection

​
How It Works

import { getLang, useTranslations } from '@/i18n';

// Detect language from URL
const lang = getLang(Astro.url); // Returns 'es' | 'en' | 'de'

// Get translations for current language
const t = useTranslations(lang);
Spanish (es) is the default language. URLs with /en/ or /de/ prefixes load English or German versions.

​
/src/layouts/

Contains layout components that wrap page content:
  • Layout.astro - Main layout with HTML structure, meta tags, and global styles

​
/src/pages/

Defines routes using Astro’s file-based routing: 
pages/
├── index.astro          # Homepage (Spanish) - /
├── en/
│   └── index.astro     # English homepage - /en/
├── de/
│   └── index.astro     # German homepage - /de/
└── api/
    └── confirmar.ts    # RSVP API endpoint - /api/confirmar

​
API Routes

The /api/confirmar.ts endpoint handles RSVP form submissions:
  • Method: POST
  • Payload: { nombre: string, alergia?: string, asistencia: string }
  • Functionality: Sends confirmation emails via Nodemailer
  • Prerender: Disabled (prerender = false) for SSR
API routes use the @astrojs/node adapter to enable server-side functionality in production.

​
/src/styles/

Global CSS and Tailwind configuration files.

​
/public/

Static files served directly without processing:
  • Favicons
  • Robots.txt (if needed)
  • Other static assets that don’t require optimization
Files in /public/ are served at the root URL. For example, /public/favicon.ico is accessible at /favicon.ico.

​
Configuration Files

​
astro.config.mjs

Main Astro configuration: 
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import node from '@astrojs/node';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()]
  },
  adapter: node({
    mode: 'standalone'
  })
});
Key settings:
  • Vite plugin: Integrates TailwindCSS 4.x
  • Node adapter: Enables SSR in standalone mode
  • Standalone mode: Generates a self-contained server for deployment

​
tsconfig.json

TypeScript configuration: 
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}
Uses Astro’s strict TypeScript preset for better type safety.

​
package.json

Project metadata and dependencies:
  • Name: boda (Spanish for “wedding”)
  • Type: module (ES modules)
  • Version: 0.0.1

​
Routing & Internationalization

The site uses URL-based language detection:
URLLanguage
/Spanish (default)
/en/English
/de/German

​
Adding a New Language

1

Create translation file

Add a new JSON file in /src/i18n/ (e.g., fr.json for French).
2

Update i18n index

Import and add the language to src/i18n/index.ts:
import fr from './fr.json';
const translations = { es, en, de, fr };
export type Lang = 'es' | 'en' | 'de' | 'fr';
3

Create page route

Create a new directory in /src/pages/ with an index.astro file:
src/pages/fr/index.astro

​
Architecture Patterns

​
Component Composition

The homepage (index.astro) imports and composes section components: 
---
import Layout from '@/layouts/Layout.astro';
import SectionPrincipal from '@/components/SectionPrincipal.astro';
import SectionForm from '@/components/SectionForm.astro';
// ... more components
---

<Layout>
  <SectionPrincipal />
  <SectionForm />
  <!-- More sections -->
</Layout>
This pattern keeps pages clean and components reusable.

​
Server-Side Rendering (SSR)

The project uses hybrid rendering:
  • Static pages: Pre-rendered at build time (default)
  • API routes: Server-rendered on-demand (SSR)
API routes disable prerendering: 
export const prerender = false; // Enables SSR for this route
The standalone mode in the Node adapter creates a production server that can handle both static files and SSR routes.

​
Best Practices

  1. Component Organization: Keep section components focused on a single responsibility
  2. Translations: Always add new text to all language files (es.json, en.json, de.json)
  3. Assets: Place processed assets in /src/assets/ and static files in /public/
  4. Type Safety: Leverage TypeScript for better code quality and autocomplete
  5. Environment Variables: Never commit .env files with real credentials

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us