Añadir tiempo de última modificación

Aprende cómo construir un remark plugin que añade el tiempo de última modificación como una propiedad personalizada del frontmatter de tus archivos Markdown y MDX. Usa esta propiedad para mostrar el tiempo de modificación en tus páginas.

Receta

Instala Day.js para modificar y formatear tiempos, y @astrojs/markdown-remark para usar el procesador unified():
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install dayjs @astrojs/markdown-remark
Ventana de la terminal
pnpm add dayjs @astrojs/markdown-remark
Ventana de la terminal
yarn add dayjs @astrojs/markdown-remark

Crear un Remark Plugin

Este plugin usa execSync para ejecutar un comando de Git que devuelve el timestamp del último commit en formato ISO 8601. El timestamp se añade luego al frontmatter del archivo.

import { execSync } from "node: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();
  };
}

Usar el sistema de archivos en lugar de Git

Aunque usar Git es la forma recomendada de obtener el timestamp de última modificación de un archivo, es posible usar el tiempo de modificación del sistema de archivos. Este plugin usa statSync para obtener el mtime (tiempo de modificación) del archivo en formato ISO 8601. El timestamp se añade luego al frontmatter del archivo.

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();
  };
}

Añadir el plugin a tu configuración

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

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

Ahora todos los documentos Markdown tendrán una propiedad lastModified en su frontmatter.

Mostrar el tiempo de última modificación

Si tu contenido está almacenado en una content collection, accede al remarkPluginFrontmatter desde la función render(entry). Luego renderiza lastModified en tu plantilla donde quieras que aparezca.

---
import { getCollection, render } 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.id },
    props: { entry },
  }));
}

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

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

<html>
  <head>...</head>
  <body>
    ...
    <p>Last Modified: {lastModified}</p>
    ...
  </body>
</html>

Si estás usando un Markdown layout, usa la propiedad de frontmatter lastModified de Astro.props en tu plantilla 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>

Contribuir Comunidad Patrocinar