Technical documentation for developers.
# Install dependencies
npm install
# Start development server
npm run dev
# → http://localhost:4321
# Build for production
npm run build
# Preview production build
npm run previewsite_v3/
├── src/
│ ├── layouts/
│ │ └── Base.astro # Main layout (header, footer, scripts)
│ ├── components/
│ │ ├── Header.astro # Site header with logo + menu toggle
│ │ ├── MenuOverlay.astro # Full-screen menu overlay
│ │ └── Footer.astro # Site footer with contact + nav
│ └── pages/
│ ├── index.astro # Homepage
│ ├── mieten.astro # Rental/booking page
│ ├── studio.astro # Studio information
│ ├── workshops.astro # Workshops listing
│ └── veranstaltungen.astro # Events listing
├── public/
│ ├── Assets/ # Images and media
│ │ └── img/
│ ├── js/ # Client-side scripts
│ │ ├── animations.js # GSAP scroll animations
│ │ ├── menu.js # Menu toggle functionality
│ │ ├── hero.js # Homepage hero interactions
│ │ ├── slider.js # Image carousel
│ │ ├── accordion.js # Expandable sections
│ │ ├── calendar.js # Date picker
│ │ ├── form.js # Form validation
│ │ └── i18n.js # Translation system
│ ├── styles/
│ │ ├── main.css # Global styles + design tokens
│ │ └── components/ # Component-specific styles
│ └── content/ # Translation files (see EDITING.md)
│ ├── de/
│ ├── en/
│ ├── fr/
│ └── lu/
├── astro.config.mjs
├── package.json
└── tsconfig.json
| Technology | Purpose |
|---|---|
| Astro | Static site generator |
| @astrojs/sitemap | Sitemap generation |
| Vanilla JS | Client-side interactions |
| GSAP | Animations & scroll effects |
| CSS Custom Properties | Design tokens |
The site includes comprehensive SEO optimization for Google Rich Snippets.
- Sitemap: Auto-generated at
/sitemap-index.xml - Open Graph tags: For social media sharing (Facebook, LinkedIn)
- Twitter Cards: Large image cards for Twitter
- Canonical URLs: Prevent duplicate content issues
- JSON-LD Structured Data: Schema.org markup for rich snippets
| Page | Schema Type | Data |
|---|---|---|
index.astro |
Organization | Company info, contact, address |
studio.astro |
PhotographyBusiness | Location, hours, services |
workshops.astro |
Course (x3) | Workshop details, provider |
mieten.astro |
Product (x3) | Rental options with pricing |
Reusable component for JSON-LD structured data:
---
import SEO from '../components/SEO.astro';
const schema = {
'@type': 'Organization',
name: 'Studio Luxenburger',
// ... schema data
};
---
<Base title="Page Title">
<SEO schema={schema} slot="head" />
<!-- Page content -->
</Base>- Rich Results Test: https://search.google.com/test/rich-results
- Schema Validator: https://validator.schema.org/
- OG Debugger: https://developers.facebook.com/tools/debug/
The main layout wrapper. All pages use this layout.
Props:
title(string) - Page title (used in<title>and OG tags)description(string) - Meta description (defaults to site description)image(string) - OG image URL (defaults to/Assets/img/og-image.jpg)type(string) - OG type:websiteorarticle(defaults towebsite)noindex(boolean) - Settrueto exclude from search engines
Slots:
default- Main page contenthead- Additional elements for<head>(JSON-LD, etc.)scripts- Page-specific scripts
Usage:
---
import Base from '../layouts/Base.astro';
import SEO from '../components/SEO.astro';
---
<Base
title="Page Title - LUX Studio"
description="Custom page description for SEO"
image="/Assets/img/custom-og.jpg"
>
<SEO schema={schemaObject} slot="head" />
<!-- Page content -->
<script src="../scripts/page-script.js" slot="scripts"></script>
</Base>Site header with logo and hamburger menu toggle. No props.
Full-screen navigation overlay. Contains:
- Navigation links
- Contact information
- Language switcher
- Legal links
Site footer with:
- Logo
- Address
- Contact details
- Navigation
- Partners
- Language switcher
- Create
src/pages/newpage.astro:
---
import Base from '../layouts/Base.astro';
---
<Base title="New Page - LUX Studio">
<section class="page-header">
<div class="page-header__container grid">
<h1 class="page-header__title" data-i18n="header.title">Page Title</h1>
</div>
</section>
<!-- Page content -->
</Base>-
Create translation files in
public/content/*/newpage.md -
Add navigation links in:
src/components/MenuOverlay.astrosrc/components/Footer.astro
Scripts use the is:inline directive to prevent Astro bundling:
<!-- In Base.astro or page files -->
<script is:inline src="/js/script-name.js"></script>Add to the scripts slot in your page:
<script is:inline src="/js/accordion.js" slot="scripts"></script>Defined in public/styles/main.css:
:root {
--color-primary: #2A9D8F;
--color-black: #1a1a1a;
--color-white: #ffffff;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--font-body: 'Inter', sans-serif;
--font-detail: 'Lekton', monospace;
}12-column grid with grid class:
<div class="grid">
<!-- Content aligned to grid -->
</div>Client-side translation using markdown files with YAML frontmatter.
i18n.jsloads on page load- Detects language from: cookie → URL param → browser → default (de)
- Fetches
/content/{lang}/_global.mdand/content/{lang}/{page}.md - Replaces content in elements with
data-i18nattribute
<span data-i18n="section.key">Fallback text</span>See EDITING.md for content editing instructions.
npm run buildGenerates static HTML in dist/. Deploy to any static host.
# Current branch
git branch
# → astro-migration
# To revert to original HTML version
git checkout master