PageInfo

The line at the foot of a page: an edit link and the date of the last change.

Preview

Last updated October 28, 2026

src/examples/page-info/example.astro

---
import { PageInfo } from "@/presentation/components/site/page-info";
---

<PageInfo
  editUrl="https://github.com/demo/widget/edit/main/docs/guide.md"
  updated={{ datetime: "2026-10-28", text: "October 28, 2026" }}
/>

Add to your site

npx docs-sitekit add page-info

It writes these files, and keeps a file you changed:

src/presentation/components/site/page-info.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of PageInfo
Key	Type	Default	Allowed values	Description
`editUrl`	string	-	-	The address of the source file on the repository host. Without it the link is left out.
`updated`	PageUpdated	-	-	The day of the last change. Without it the date is left out.

Fields of PageUpdated
Key	Type	Default	Allowed values	Description
`datetime`	string	required	-	The value of the datetime attribute, for example 2026-10-28.
`text`	string	required	-	The date as a reader sees it.

Variants and states

Only the edit link

Without a date, for a page outside git.

Edit this page

src/examples/page-info/edit-only.astro

---
import { PageInfo } from "@/presentation/components/site/page-info";
---

<PageInfo editUrl="https://github.com/demo/widget/edit/main/docs/guide.md" />

Only the date

Without an address to edit, for a page that is not on a known host.

Last updated October 28, 2026

src/examples/page-info/date-only.astro

---
import { PageInfo } from "@/presentation/components/site/page-info";
---

<PageInfo updated={{ datetime: "2026-10-28", text: "October 28, 2026" }} />

About

The line at the foot of a page: an “Edit this page” link to the source file on the repository host, and the date of the last change. Each part shows only when it is given, and the whole line is left out when neither is. See Edit this page for the configuration that feeds it.

Accessibility

The link is at least 44 px high.
The date is a <time> element with a machine-readable datetime.
The pencil icon is aria-hidden.
The text uses the fg-muted token, which reaches AA in both themes.

Source

page-info.tsx

Edit this page

Last updated 5 November 2026