Step
3/11
Extract a component
You'll want many cards. Time to make one you can reuse.
Two new ideas in this lesson — they're tangled, so we'll do them together.
Components : the card lives in its own file now. Any page can import it. Astro looks for components in src/components/ .
Frontmatter and { } : the lines between --- at the top of any .astro file are JavaScript. Anything in { } down in the template uses those values.
The card already uses name and mission variables. Change them — the polaroid follows along.
✦ src/components/Card.astro — brand new file live
Now your index.astro can be tiny :
✦ src/pages/index.astro — much smaller
read-only
1
2
3
4
5
---
import Card from "~/components/Card.astro";
---
<Card />Same output. But your card is reusable now. We'll pass different astronauts to it on the next page.
— page 3 —