NoteTrayIndex
Render a note tray as a numbered index, card list, or dated timeline.
Overview
NoteTrayIndex is a server-rendered Preact component for listing the flat items in a note tray. It is globally available in MDX with no import or hydration directive.
The examples below use the showcase Blog tray.
Numbered Index
The default index style emphasizes stable, zero-padded ranks and includes each item's description. The whole row is the link, not only the title. Hovering or focusing a row lights the rules above and below it and underlines its text; the rank remains the row marker.
- 06Moving a Showcase Off AstroA framework migration is easier to review when the content tree remains the stable center of the site.
- 05Warn First, Error LaterTag governance can start as a useful audit signal before it becomes a build gate.
- 04Keeping Doc History Out of the BuildGit history stays useful when expensive per-document work runs outside the main site build.
- 03Designing the 16rem DrawerA fixed-width sidebar drawer keeps navigation predictable without taking over the document.
- 02When a Category Is Just a Flat ListA category index can stay simple when every child belongs to the same small collection.
- 01Why Routes Belong to the PackageMoving route and chrome behavior into zudo-doc keeps projects focused on their content.
<NoteTrayIndex category="blog" style="index" />Cards
The cards style gives each item more space and includes tags when tag navigation is enabled. As with CategoryNav, the framed card is the link, while tag chips inside the frame remain separate links. When showDate is set, the date appears in a column at the right edge of the card on wide viewports and after the title on narrow viewports.
Moving a Showcase Off Astro
UpdatedA framework migration is easier to review when the content tree remains the stable center of the site.
Warn First, Error Later
Tag governance can start as a useful audit signal before it becomes a build gate.
Keeping Doc History Out of the Build
Git history stays useful when expensive per-document work runs outside the main site build.
Designing the 16rem Drawer
A fixed-width sidebar drawer keeps navigation predictable without taking over the document.
When a Category Is Just a Flat List
A category index can stay simple when every child belongs to the same small collection.
Why Routes Belong to the Package
Moving route and chrome behavior into zudo-doc keeps projects focused on their content.
<NoteTrayIndex category="blog" style="cards" showDate />Timeline
The timeline style groups a dated tray by month. Each item shows the day number as a marker on the rail and starts with the title. The timeline never shows updated, and it throws a build error when used with an undated tray.
2026 March
- Moving a Showcase Off Astro
A framework migration is easier to review when the content tree remains the stable center of the site.
- Warn First, Error Later
Tag governance can start as a useful audit signal before it becomes a build gate.
2026 February
- Keeping Doc History Out of the Build
Git history stays useful when expensive per-document work runs outside the main site build.
- Designing the 16rem Drawer
A fixed-width sidebar drawer keeps navigation predictable without taking over the document.
2026 January
- When a Category Is Just a Flat List
A category index can stay simple when every child belongs to the same small collection.
- Why Routes Belong to the Package
Moving route and chrome behavior into zudo-doc keeps projects focused on their content.
<NoteTrayIndex category="blog" style="timeline" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
category | string | Current containing tray | Tray slug to list, such as "blog" |
style | "index" | "cards" | "timeline" | "index" | Listing presentation |
showDate | boolean | false | Shows date and updated in the index and card styles; the timeline always shows the date (created) only |
lang | Locale | auto-detected | Overrides the content locale |
Items follow the tray's category_sort_order. An empty tray, an unknown category, or a category that is not a note tray renders nothing.
See Note Trays for declaration fields, ordering, validation, and limitations.
Source
The MDX wrapper ships from @takazudo/ and the presentational component from @takazudo/. Package-owned routes register it automatically.