Part 3

Project Structure

Overview of the AstroGlass codebase organization.

AstroGlass follows a standard Astro project structure with a few key organizational patterns.

Key Directories

src/components/pages/

Contains full-page components for dynamic routes, such as the Portfolio Page. Organized by page type:

pages/
โ”œโ”€โ”€ portfolio/
โ”‚ โ”œโ”€โ”€ aurora/
โ”‚ โ”‚ โ”œโ”€โ”€ PortfolioHeroAurora.astro
โ”‚ โ”‚ โ”œโ”€โ”€ ...
โ”‚ โ”œโ”€โ”€ liquid/
โ”‚ โ”‚ โ”œโ”€โ”€ PortfolioHeroLiquid.astro
โ”‚ โ”‚ โ”œโ”€โ”€ PortfolioGridLiquid.astro
โ”‚ โ”‚ โ”œโ”€โ”€ PortfolioModalLiquid.astro
โ”‚ โ”‚ โ”œโ”€โ”€ PortfolioCTALiquid.astro
โ”‚ โ”‚ โ””โ”€โ”€ ...
โ”‚ โ””โ”€โ”€ ...

src/components/sections/

Contains all page section components, organized by section type. Each section has a subdirectory with one variant per theme:

sections/
โ”œโ”€โ”€ hero/
โ”‚ โ”œโ”€โ”€ HeroLiquid.astro
โ”‚ โ”œโ”€โ”€ HeroGlass.astro
โ”‚ โ”œโ”€โ”€ HeroNeo.astro
โ”‚ โ”œโ”€โ”€ HeroLuxury.astro
โ”‚ โ”œโ”€โ”€ HeroMinimal.astro
โ”‚ โ””โ”€โ”€ HeroAurora.astro
โ”œโ”€โ”€ about/
โ”œโ”€โ”€ features/
โ”œโ”€โ”€ portfolio/
โ”œโ”€โ”€ pricing/
โ”œโ”€โ”€ testimonial/
โ”œโ”€โ”€ faq/
โ”œโ”€โ”€ cta/
โ”œโ”€โ”€ contact/
โ””โ”€โ”€ footer/

src/components/layout/header/

Theme-specific header/navbar components (e.g., HeaderGlass.astro, HeaderLuxury.astro).

src/components/ui/

Reusable UI primitives: Button, Card, Badge, Avatar, Input, Tabs, Charts, ThemeSwitcher, LanguageSwitcher, and Search.

src/config/

Central configuration files:

  • themes.ts โ€” Theme registry (IDs, names, enabled status, section lists)
  • locales.ts โ€” Supported languages and their metadata
  • navigation.ts โ€” Main site navigation structure
  • docs.ts โ€” Documentation sidebar config and version management

src/content/

Astro Content Collections for docs and blog posts. Structure inside docs/[lang]/ determines the URL paths for documentation.

src/locales/

JSON translation files organized by language code. Each file corresponds to a page section (e.g., hero.json, pricing.json, contact.json).

src/pages/

File-based routing. The [theme].astro dynamic route generates pages for each enabled theme. The [...lang] directory patterns handle localized page variants across the entire architecture.

src/styles/

Global CSS, theme overrides (_themes.css), animation keyframes, and component-specific stylesheets in components/.

src/utils/

Utility functions for i18n translations (i18n.ts), locale detection (locale-utils.ts), and documentation navigation (docs-nav.ts).