Crie um arquivo de postagens do blog

Agora que você tem algumas postagens do blog para adicionar links para, é hora de configurar a página Blog para criar uma lista de postagens automaticamente!

Se prepare para...

Acessar dados de todas as suas postagens de uma vez utilizando Astro.glob()
Mostrar uma lista dinamicamente gerada de postagens na sua página Blog
Refatorar para utilizar um componente <BlogPost /> para cada item da lista

Dinamicamente mostre uma lista de postagens

Adicione o seguinte código em blog.astro para retornar informação sobre todos os seus arquivos Markdown. Astro.glob() irá retornar um array de objetos, um de cada postagem do blog.

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizado sobre Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Postagem 1</a></li>
    <li><a href="/posts/post-2/">Postagem 2</a></li>
    <li><a href="/posts/post-3/">Postagem 3</a></li>
  </ul>
</BaseLayout>

Para gerar a lista inteira de postagens dinamicamente, utilizando os títulos das postagens e URLs, substitua suas tags <li> individuais com o seguinte código Astro:

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizado sobre Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Postagem 1</a></li>
    <li><a href="/posts/post-2/">Postagem 2</a></li>
    <li><a href="/posts/post-3/">Postagem 3</a></li>

    {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>

Sua lista inteira de postagens do blog agora está sendo gerada dinamicamente, por mapear o array retornado por Astro.glob().

Adicione uma nova postagem do blog adicionando um novo arquivo post-4.md em src/pages/posts/ e adicionando algum conteúdo Markdown. Certifique-se de pelo menos adicionar as propriedades de frontmatter usadas abaixo.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: Minha Quarta Postagem no Blog
author: Aluno de Astro
description: "Esta postagem irá aparecer por si mesma!"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "A palavra astro contra uma ilustração de planetas e estrelas."
pubDate: 2022-08-08
tags: ["astro", "sucessos"]
---
Esta postagem deve aparecer junto das minhas outras postagens do blog, pois `Astro.glob()` está retornando uma lista de todas as minhas postagens para criar minha lista.

Revisite a página do seu blog na pré-visualização do seu navegador em http://localhost:4321/blog e procure por uma lista atualizada com quatro itens, incluindo sua nova postagem no blog!

Desafio: Crie um componente de Postagem do Blog

Tente sozinho fazer todas as mudanças necessárias ao seu projeto Astro para que você ao invés disso, utilize o seguinte código para gerar sua lista de postagens do blog:

<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

Expanda para ver as etapas

Crie um novo componente em src/components/.
Me mostre o nome do arquivo
```
BlogPost.astro
```
Escreva a linha de código no seu componente para que ele seja capaz de receber um title e url como Astro.props.
Mostre o código
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
Adicione o template utilizado para criar cada item na sua lista de postagens do blog.
Mostre o código
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

Importe o novo componente em sua página Blog.

Mostre o código

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizado sobre Astro";
---

Verifique você mesmo: veja o código completo do componente.

Mostre o código

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizado sobre Astro"
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

Teste seu conhecimento

Se o seu componente Astro contém a seguinte linha de código:

---
const minhasPostagens = await Astro.glob('../pages/posts/*.md');
---

Escolha a sintaxe que você pode escrever para representar:

O título da sua terceira postagem do blog.
1. minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)
2. minhasPostagens[2].frontmatter.title
3. <a href={minhasPostagens[0].url}>Primeira Postagem!!</a>
Um link para a URL da sua primeira postagem do blog.
1. minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)
2. minhasPostagens[2].frontmatter.title
3. <a href={minhasPostagens[0].url}>Primeira Postagem!!</a>
Um componente para cada postagem, mostrando a data que ele foi atualizado pela última vez.
1. minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)
2. minhasPostagens[2].frontmatter.title
3. <a href={minhasPostagens[0].url}>Primeira Postagem!!</a>