Skip to content

feat(ipa): preliminary IPA metadata UI with frontmatter parsing and validation#38

Open
andmatei wants to merge 10 commits intomainfrom
andmatei/ipa-badge-state
Open

feat(ipa): preliminary IPA metadata UI with frontmatter parsing and validation#38
andmatei wants to merge 10 commits intomainfrom
andmatei/ipa-badge-state

Conversation

@andmatei
Copy link
Copy Markdown
Collaborator

@andmatei andmatei commented Apr 14, 2026

Context

This is preliminary work towards surfacing top-level IPA metadata in the UI.

The IPA state (adopt, experimental, deprecated, retired) was previously embedded in the page body as an admonition block. This PR moves it into frontmatter, renders it visibly above the page title, and validates / normalizes IPA frontmatter during parsing.

What this PR adds

  • Structured IPA state in frontmatter across all IPA documents
  • A top-level metadata UI component that displays the state above the IPA title
  • A reusable Badge component used to render the state consistently
  • Frontmatter parsing and validation for IPA docs
  • Frontmatter normalization for IPA docs, including deriving the slug from id
  • Schema + tests for IPA frontmatter parsing and validation
  • TypeScript implementation for the metadata component, badge component, Docusaurus swizzle, config, sidebar, parser, and tests

Before / After

Before

Before

After

After

State previews

Adopt

Adopt

Experimental

Experimental state

Deprecated

Deprecated state

Retired

Retired state

Notes

This is intentionally scoped as a first step towards richer IPA metadata in the UI. It now also includes parser-level validation and normalization so IPA frontmatter is both visible in the UI and enforced consistently.

…mponent

- Add `state: adopt|experimental` to frontmatter of all 37 IPA docs,
  replacing the previous :::info[State] admonition blocks
- Add generic Badge component (src/components/ui/Badge/) — a reusable
  pill badge with color and dot props, six colour variants, dark mode support
- Add IpaMetadata component (src/components/ipa/IpaMetadata/) — reads
  `state` from page frontmatter via useDoc() and renders a colour-coded
  pill above the page title
- Swizzle DocItem/Content in wrap mode to inject IpaMetadata automatically
  on every doc page — no changes needed to individual IPA files
@andmatei andmatei changed the title feat(ipa): IPA state in frontmatter + Badge + IpaMetadata component feat(ipa): preliminary IPA metadata - state in frontmatter with UI badge Apr 14, 2026
@andmatei andmatei changed the title feat(ipa): preliminary IPA metadata - state in frontmatter with UI badge feat(ipa): Add IPA state in frontmatter with UI badge Apr 14, 2026
@andmatei andmatei changed the title feat(ipa): Add IPA state in frontmatter with UI badge feat(ipa): preliminary IPA metadata - state in frontmatter with UI badge Apr 14, 2026
@andmatei andmatei changed the title feat(ipa): preliminary IPA metadata - state in frontmatter with UI badge feat(ipa): Add IPA state in frontmatter with UI badge Apr 14, 2026
@andmatei andmatei marked this pull request as ready for review April 14, 2026 10:16
@andmatei andmatei requested a review from a team as a code owner April 14, 2026 10:16

/**
* @typedef {"adopt" | "experimental" | "deprecated" | "retired"} IpaState
* @typedef {"green" | "amber" | "blue" | "orange" | "red" | "muted"} TagColor
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have blue and red defined among the TagColors as well. Do we use them in the scope of this PR? If not, we can introduce them when they are in use

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good will remove them

Copy link
Copy Markdown
Collaborator

@yelizhenden-mdb yelizhenden-mdb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remind me if we are planning to introduce state in the metadata per guideline? And, if it is the case, will this approach be deprecated, or can it be re-used?

@andmatei
Copy link
Copy Markdown
Collaborator Author

andmatei commented Apr 14, 2026

@yelizhenden-mdb

Can you remind me if we are planning to introduce state in the metadata per guideline? And, if it is the case, will this approach be deprecated, or can it be re-used?

Yes, each guideline will inherit the state of the IPA unless overwritten - so the IPA can be stable, and a new guideline can be marked as experimental. We can re-use the logic introduced here for that once we have a discussion about it on the design doc

---
id: 1
slug: /1
state: adopt
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also update the guidance in https://mongodb.github.io/ipa/1 to cover the new state tagging? Currently it explicitly states to use admonitions

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All done let me know what you think

adopt: { label: "Adopt", color: "green" },
experimental: { label: "Experimental", color: "amber" },
deprecated: { label: "Deprecated", color: "orange" },
retired: { label: "Retired", color: "muted" },
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Nit] I wonder if we should perhaps use red for retired, to make the tag a bit more noticeable? I think it's pretty low-contrast right now, so it might be easily missed

@andmatei andmatei changed the title feat(ipa): Add IPA state in frontmatter with UI badge feat(ipa): preliminary IPA metadata UI with frontmatter parsing and validation Apr 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants