Navigation
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).