Components

In the larger context of the project structure, src/layouts/ acts as the master shell and templating wrapper for the Astrofy application.

Instead of repeating foundational HTML markup across every individual page, src/layouts/ houses reusable master templates—primarily BaseLayout.astro—that wrap page content and orchestrate global elements.

  1. The Master Wrapper (BaseLayout.astro)

  2. Eliminating Boilerplate: Every website requires standard HTML structural tags (<html>, <head>, <body>, and meta tags). BaseLayout.astro defines these global tags in a single place so individual pages do not need to rewrite them.

  3. The Injection Mechanism: Inside BaseLayout.astro, Astro uses a special placeholder tag. When a page route in src/pages/ (such as index.astro or cv.astro) wraps its content in <BaseLayout>, Astro shoves that page's specific HTML directly into the <slot /> placeholder at compile time to assemble a complete page.
  1. Orchestration of Global UI Components & View Transitions

src/layouts/BaseLayout.astro acts as the structural glue that pulls together shared components from across the project:

  • Persistent UI Elements: It imports and positions global components from src/components/, such as the persistent SideBar.astro, Header.astro, and Footer.astro.
  • SPA-like Transitions: It includes Astro's <ViewTransitions /> element to enable smooth, single-page-application style page routing without full browser refreshes.
  1. Component Communication & Prop Delegation

src/layouts/ serves as the crucial middleman in the component prop chain:

  1. A page in src/pages/index.astro defines which navigation item is active by passing a property (prop) to the layout: <BaseLayout sideBarActiveItemID="home">.
  2. BaseLayout.astro receives this prop and passes it down to the sidebar component: <SideBar sideBarActiveItemID={sideBarActiveItemID} />.
  3. The message is passed down to SideBarMenu.astro, where client-side JavaScript highlights the matching tab ID (id="home").
  1. The Global Aesthetic Anchor (DaisyUI Theming)

BaseLayout.astro serves as the centralized anchor for the site's entire color palette and visual theme:

  • The data-theme Attribute: DaisyUI attaches its theme engine directly to the root <html> tag inside BaseLayout.astro (e.g., data-theme="lofi").
  • Site-Wide Palette Swapping: Updating this single string in BaseLayout.astro (such as changing "lofi" to "dracula", "dark", or "business") instantly updates CSS variables for buttons, cards, and text colors across all pages rendered within the layout.
  1. Role in the Overall Project Directory Hierarchy
src/
├── pages/          <-- Content routes (Passes active state props)
├── layouts/        <-- BaseLayout.astro (Receives props, injects <slot />, anchors theme)
├── components/     <-- Shared UI blocks (Header, Footer, SideBar rendered inside layout)
└── content/        <-- Raw Markdown data (Injected through pages into layout slots)

By separating src/layouts/ from src/pages/ and src/components/, the architecture maintains a clean separation of concerns: pages control routing and data fetching, components define small UI blocks, and layouts provide the outer structural framework and theme state.