Crie um arquivo de postagens do blog

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

Get ready to…

Acessar dados de todas as suas postagens de uma vez usando Astro.glob()
Mostrar uma lista de postagens gerada dinamicamente 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() retornará um array de objetos, um para cada postagem do blog.

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('./posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem 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('./posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem 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 criando um novo arquivo post-4.md em src/pages/posts/ e adicionando algum conteúdo Markdown. Certifique-se de adicionar as propriedades de frontmatter usadas abaixo.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: Minha Quarta Postagem no Blog
author: Aluno Astro
description: "Esta postagem irá aparecer por si mesma!"
image:
    url: "https://docs.astro.build/default-og-image.png"
    alt: "A palavra astro acima de 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 BlogPost

Tente por si só fazer todas as mudanças necessárias em seu projeto Astro para que você posssa usar 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/.
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 Aprendizagem 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 Aprendizagem 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('./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>