Skip to main content

Lifecycle UI Behavior

This document defines the UI behavior for content lifecycle states in the Engineering Journal site.

Overview​

Lifecycle state is not only enforced in metadata — it is visible in the rendered site experience. Each non-active lifecycle state renders a banner at the top of the document, giving readers immediate context about the document's status.

Lifecycle States and UI Behavior​

LifecycleBannerColorWhen to use
draft⚠️ DraftAmberContent is incomplete or under active development
reviewnone—Content is complete and awaiting review
activenone—Content is current and accurate
deprecated🚫 DeprecatedOrangeContent has been superseded or is no longer recommended
archived📦 ArchivedSlateContent is preserved for reference but not maintained

Banners appear above the document title on all doc pages where the lifecycle frontmatter field is set to draft, deprecated, or archived.

Banners are:

  • Visually distinct from content — left-border accent, muted background
  • Accessible — rendered with role="alert" for screen readers
  • Dark mode compatible — all color tokens adapt to the active color scheme
  • Consistent across all content types (labs, case studies, journal, docs)

Implementation​

Implemented as a Docusaurus theme component wrapper at:

website/src/theme/DocItem/Layout/index.js

The wrapper reads frontMatter.lifecycle from the Docusaurus doc context and renders a LifecycleBanner component above the standard doc layout. No changes to content files are required — the banner is driven entirely by the existing lifecycle frontmatter field.

Adding a New Lifecycle State​

To add UI behavior for a new lifecycle state:

  1. Add the state to LIFECYCLE_CONFIG in website/src/theme/DocItem/Layout/index.js
  2. Add corresponding CSS classes to website/src/theme/DocItem/Layout/styles.module.css
  3. Update this document
  4. Update .github/governance/content-rules.yml if the state is new to the governance schema

Related Content​