Routing

In the larger context of the project structure, src/pages/ serves as the routing engine for the Astrofy application. Astro uses a file-based routing mechanism where the file structure inside src/pages/ directly dictates the URL endpoints of the published website.

  1. File-Based Routing & Endpoint Mapping

Every .astro (or .js/.ts) file placed inside src/pages/ automatically maps to a corresponding web path:

  • Static Standard Pages:
    • src/pages/index.astro → Home page (/ or /index.html)
    • src/pages/cv.astro → Resume (/cv/index.html)
    • src/pages/projects.astro → Projects (/projects/index.html)
    • src/pages/services.astro → Services (/services/index.html)
    • src/pages/404.astro → Custom Error page (/404.html)
  • Dynamic Content Routes:
    • src/pages/blog/[slug].astro → Dynamically generates individual blog post URLs (e.g., /blog/docker-101/index.html) by fetching slugs from Markdown files.
    • src/pages/blog/[...page].astro & src/pages/blog/tag/[tag]/[...page].astro → Handles paginated blog listings and tag-filtered index pages.
  • API / Endpoint Routes:
    • src/pages/rss.xml.js → A JavaScript route handler that dynamically generates the RSS XML feed (/rss.xml).
  1. How src/pages Integrates into the Larger Project Structure

Rather than housing full visual designs or CSS directly, files in src/pages/ act as coordinators that stitch together the rest of the directory tree:

src/
├── pages/          <-- Routing & Page Orchestration
├── layouts/        <-- Master Structural Templates (BaseLayout.astro)
├── components/     <-- Reusable UI Blocks (SideBar, Cards)
├── content/        <-- Raw Content (Markdown files for blog/store)
└── config.ts       <-- Global Site Metadata
  • Layout Wrapping (src/layouts/): Pages do not write full <html>, <head>, or <body> tags. Instead, a page wraps its specific markup inside <BaseLayout>, passing props like sideBarActiveItemID="home" to control active navigation states. Astro then injects the page content into BaseLayout's <slot /> placeholder.
  • UI Assembly (src/components/): Pages import pre-built UI components—such as <HorizontalCard> for portfolio items or <SideBar> for navigation—and populate them with props.
  • Content Collections (src/content/): Dynamic routes (like blog/[slug].astro) query Markdown files stored in src/content/blog/ using Astro's strongly-typed getCollection API, transforming raw text into formatted web pages.
  • Global Metadata (src/config.ts): Page headers fetch overall site titles and descriptions from config.ts to populate meta tags.

  1. Compilation Behavior & Maintenance Considerations

  2. Static HTML Compilation: Because Astro is configured for static output (output: "static"), running npm run build evaluates every file in src/pages/ and compiles them into concrete static HTML folders inside /app/dist.

  3. Removing Unused Routes: If a content collection directory (such as src/content/store/) is empty or deleted, leaving its corresponding route file (src/pages/store/[...page].astro) in place can cause sitemap integrations (@astrojs/sitemap) to throw build errors during compilation. Removing the corresponding page folder inside src/pages/ cleanly disables the route.