Adicione o horário da última modificação

Aprenda como criar um plugin remark que adiciona o horário da última modificação ao frontmatter dos seus arquivos Markdown e MDX. Use essa propriedade para exibir o horário da última modificação em suas páginas.

Receita

Instale Pacotes Auxiliares

Instale Day.js para modificar e formatar datas:
- npm
- pnpm
- Yarn
Janela do terminal
npm install dayjs
Janela do terminal
pnpm add dayjs
Janela do terminal
yarn add dayjs
Crie um Plugin Remark

Este plugin usa execSync para executar um comando Git que retorna a marca temporal do último commit no formato ISO 8601. Essa marca temporal é adicionada ao frontmatter do arquivo.
remark-modified-time.mjs
```
import { execSync } from "child_process";

export function remarkModifiedTime() {
  return function (tree, file) {
    const filepath = file.history[0];
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
    file.data.astro.frontmatter.lastModified = result.toString();
  };
}
```
Usando o sistema de arquivos em vez do Git
Embora usar Git seja a maneira recomendada para obter o horário da última modificação de um arquivo, é possível usar o horário de modificação do sistema de arquivos. Este plugin usa statSync para obter o mtime (horário de modificação) do arquivo no formato ISO 8601. A marca temporal é adicionada ao frontmatter do arquivo.
remark-modified-time.mjs
```
import { statSync } from "fs";

export function remarkModifiedTime() {
  return function (tree, file) {
    const filepath = file.history[0];
    const result = statSync(filepath);
    file.data.astro.frontmatter.lastModified = result.mtime.toISOString();
  };
}
```

Adicione o plugin na sua configuração

import { defineConfig } from 'astro/config';
import { remarkModifiedTime } from './remark-modified-time.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkModifiedTime],
  },
});

Agora, todos os documentos Markdown terão uma propriedade lastModified no frontmatter.

Exiba o horário da última modificação

Se o seu conteúdo estiver armazenado em uma coleção de conteúdo, acesse o remarkPluginFrontmatter a partir da função entry.render(). Em seguida, mostre lastModified em seu template onde preferir que ele apareça.

---
import { CollectionEntry, getCollection } from 'astro:content';
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

export async function getStaticPaths() {
  const blog = await getCollection('blog');
  return blog.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content, remarkPluginFrontmatter } = await entry.render();

const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
  .utc()
  .format("HH:mm:ss DD MMMM YYYY UTC");
---

<html>
  <head>...</head>
  <body>
    ...
    <p>Última Modificação: {lastModified}</p>
    ...
  </body>
</html>

Se você estiver usando um layout Markdown, utilize a propriedade lastModified do frontmatter a partir de Astro.props no seu modelo de layout.

---
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

const lastModified = dayjs()
  .utc(Astro.props.frontmatter.lastModified)
  .format("HH:mm:ss DD MMMM YYYY UTC");
---

<html>
  <head>...</head>
  <body>
    <p>{lastModified}</p>
    <slot />
  </body>
</html>

Contribua Comunidade Sponsor