Docusaurus H1 Meta Info

Display creation date, last updated date, and author name under h1 titles on Docusaurus documentation pages. Data is sourced from git history and rendered via SSR (works without JavaScript).

Prerequisites

• Docusaurus v3.x project with TypeScript
• Git repository (dates are extracted from git history)
• clsx package (usually already installed with Docusaurus)

Implementation Steps

Step 1: Detect Docusaurus Root

Find the Docusaurus project root by locating docusaurus.config.ts (or .js). Store this path as DOCUSAURUS_ROOT.

Step 2: Create the Remark Plugin

Read assets/remark-creation-date.js from this skill directory and copy it to:

{DOCUSAURUS_ROOT}/plugins/remark-creation-date.js

This plugin extracts the git creation date (first commit) for each markdown file and injects it into frontmatter as custom_creation_date (formatted as YYYY/MM/DD) and custom_creation_timestamp.

Step 3: Swizzle DocItem/Content Component

Read assets/DocItem-Content-index.tsx from this skill directory and copy it to:

{DOCUSAURUS_ROOT}/src/theme/DocItem/Content/index.tsx

Create the directory structure if it doesn't exist. This swizzled component:

• Renders the DocMetadata component between the h1 title and the page content
• Shows "Created:", "Updated:", and "Author:" fields
• Uses semantic HTML (<ul>, <time>, <address>)
• Falls back gracefully when data is unavailable

Step 4: Add CSS Styles

Append the following CSS to {DOCUSAURUS_ROOT}/src/css/custom.css:

/* ===== Document Meta Info (under h1) ===== */

/* Meta container */
.theme-doc-meta {
  border-top: 1px solid var(--ifm-color-emphasis-200);
  padding: 0.5em 0 0;
  list-style: none;
  margin: -0.5em 0 1em;
}

/* Enable flexbox for proper ordering: header -> meta -> content */
.markdown {
  display: flex;
  flex-direction: column;
}

/* Synthetic title header at top (when present) */
.markdown > header {
  order: -2;
}

/* Metadata comes after header but before content */
.markdown > .theme-doc-meta {
  order: -1;
}

/* Everything else (MDX content) appears after metadata */
.markdown > div,
.markdown > * {
  order: 0;
}

[data-theme='dark'] .theme-doc-meta {
  border-top-color: var(--ifm-color-emphasis-300);
}

.theme-doc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0.25em;
}

.theme-doc-meta-created,
.theme-doc-meta-updated,
.theme-doc-meta-author {
  display: flex;
  align-items: center;
}

/* Pipe separator between items */
.theme-doc-meta-created::after,
.theme-doc-meta-updated::after {
  content: '|';
  margin: 0 0 0 0.5em;
}

.theme-doc-meta-author::after {
  content: none;
}

.theme-doc-meta-created span,
.theme-doc-meta-updated span,
.theme-doc-meta-author span {
  margin-right: 0.25em;
}

.theme-doc-meta-author address {
  font-style: normal;
}

Important: If the target project's custom.css already has .markdown { ... } rules, merge the display: flex; flex-direction: column; properties into the existing rule rather than creating a duplicate.

Step 5: Configure Docusaurus

Edit {DOCUSAURUS_ROOT}/docusaurus.config.ts (or .js) to enable git metadata and register the remark plugin.

In the docs section of the classic preset options, add/ensure:

docs: {
  // ... existing config ...
  showLastUpdateTime: true,
  showLastUpdateAuthor: true,
  beforeDefaultRemarkPlugins: [
    [require('./plugins/remark-creation-date.js'), {}],
  ],
},

If beforeDefaultRemarkPlugins already exists, append the new plugin to the existing array.

Step 6: Verify

After implementing, verify:

1. {DOCUSAURUS_ROOT}/plugins/remark-creation-date.js exists
2. {DOCUSAURUS_ROOT}/src/theme/DocItem/Content/index.tsx exists
3. CSS rules for .theme-doc-meta are in custom.css
4. docusaurus.config has showLastUpdateTime: true, showLastUpdateAuthor: true, and the remark plugin registered

Run the dev server and confirm:

• Each doc page shows metadata under the h1 title
• Metadata includes "Created: YYYY/MM/DD", "Updated: YYYY/MM/DD", and "Author: "
• Items are separated by pipe (|) characters
• A thin border-top line separates the meta from the title
• Pages with no git history show gracefully (no broken UI)

How It Works

The feature has two data sources:

1. Creation date: A custom remark plugin (remark-creation-date.js) runs git log --all --follow --format=%at --reverse -n 1 to find the earliest commit for each file. The date is injected into frontmatter as custom_creation_date.

2. Last updated date & author: Docusaurus's built-in git integration (showLastUpdateTime + showLastUpdateAuthor) provides metadata.lastUpdatedAt and metadata.lastUpdatedBy.

The swizzled DocItem/Content component reads both sources, formats dates as YYYY/MM/DD, and renders semantic HTML (<ul> with <time> and <address> elements). CSS flexbox ordering ensures the metadata always appears between the h1 title and the page content, regardless of DOM order. The entire feature is SSR-compatible.

Assets

• assets/DocItem-Content-index.tsx - Swizzled DocItem/Content component with DocMetadata renderer. Target: {DOCUSAURUS_ROOT}/src/theme/DocItem/Content/index.tsx
• assets/remark-creation-date.js - Remark plugin that extracts git creation date. Target: {DOCUSAURUS_ROOT}/plugins/remark-creation-date.js