Astro.js Architecture Notes

1. The `<slot />` tag

The <slot /> tag is usually in the <body> section. For example, it usually can be found within the <body> section of the Layout.astro file.

Layout.astro

---
import '../styles/global.css';
---

<html lang="en">
<head>
  <title>My CV</title>
</head>
<body>
  <slot />  <!-- Here the tag is-->
</body>
</html>

The <slot /> tag here tells your computer that, whoever invokes this Layout.astro, gets put into here.
The end result is a static HTML code. This would be done on the server end, before reaching to the user’s local browser.
It’s worth noting that there can be more than one <slot /> in a file. You just have to specify the names to each one so the machine won’t confuse.

Layout.astro

<head>
  <slot name="head" />
</head>
<body>
  <slot /> 
</body>

Page

<Layout>
  <title slot="head">My Custom Title</title> <!-- This tells the machine that you want this to be put into the <slot name="head" /> place. -->
  <p>This goes into the default body slot.</p>
</Layout>

2. View transitions

View transitions are animated transitions that make swiching between sites smoother. It is used for visual continuity. For example, the website uses view transitions to make changing betweeb pages looks fading in and out instead of sudden change.

However, this smooth experience has certain downsides which increases maintenance cost.
View transitions basically turn the website into a SPA (single page application) which means components don’t reload after changing the page. This directly made my light-dark mode toggle a one time toggle. I couldn’t change the theme once I changed the page.

To solve this, I had to change the

2. Pages vs. Components (Routes vs. Content)

Files in src/pages/ are Routes. Their filename determines the URL (e.g., index.astro is /). Files in src/components/ are Content fragments. They have no URL and must be imported into a page to be seen.

3. The Role of Layouts

A Layout is a master template. It contains the <html>, <head>, and <body> tags. By wrapping pages in a Layout, you ensure global elements like the custom cursor and navigation bar remain consistent across the entire site.

4. Global vs. Scoped Styles