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