Custom components

Components Showcase
David Morales David Morales
/

PreCheck

Get ready to...

  • Run the create astro setup wizard to create a new Astro project
  • Start the Astro server in development (dev) mode
  • View a live preview of your website in your browser

ReadMore

This is a link and this is another for the read more block.

Quiz (Box + MultipleChoice + Option)

Test your knowledge

Which of the following is…

  1. A code editor, for making changes to your files and their content?

  1. An online version control provider for your repository?

  1. An application for running commands?

Box with challenge

Try it yourself - Customize your blog post layout

Challenge: Identify items common to every blog post, and use MarkdownPostLayout.astro to render them, instead of writing them in your Markdown in post-1.md and in every future blog post.

Here’s an example of refactoring your code to include the pubDate in the layout component instead of writing it in the body of your Markdown:

src/pages/posts/post-1.md
Published on: 2022-07-01


Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

Refactor as much as you think is useful to you, and add as much to your layout as you want, remembering that everything that you add to your layout is one less thing you will write in each and every blog post!

Here is an example of a refactored layout that leaves only individual blog post content rendered by the slot. Feel free to use this, or create your own!

src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />

Box with challenge and steps

Try it yourself - Add a Blog page

Add a third page blog.astro to your site, following the same steps as above.

(Don’t forget to add a third navigation link to every page.)

Show me the steps.
  1. Create a new file at src/pages/blog.astro.
  2. Copy the entire contents of index.astro and paste them into blog.astro.
  3. Add a third navigation link to the top of every page:
src/pages/index.astro
<body>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>


<h1>My Astro Site</h1>
</body>

Box with spoilers

Analyze the Pattern

Given the following .astro script:

src/pages/about.astro
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "boots";
const student = false;
---

For each Astro template expression, can you predict the HTML (if any!) that will be sent to the browser? Click to reveal if you’re right!

  1. <p>{operatingSystem}</p>

  1. {student && <p>I am still in school.</p>}

  1. <p>I have {quantity + 8} pairs of {footwear}</p>

  1. {operatingSystem === "MacOS" ? <p>I am using a Mac.</p> : <p>I am not using a Mac.</p>}