Add Preview status badge support (page-preview attribute)

preview-src/preview-status-test.adoc

@@ -0,0 +1,16 @@
+= Preview Status Test Page
+:page-preview: true
+:description: This page tests the Preview status badge in the UI preview.
+
+This page demonstrates the **Preview** status badge.
+
+== Badge locations
+
+1. **In the sticky header** below the title: a dark "Preview" pill
+2. **In the left nav**: "(Preview)" after the page title (only when a content catalog is available; may not render in the gulp preview)
+
+== Test the tooltip
+
+Hover the Preview pill. Default text:
+
+_"This feature is in preview and may change."_

preview-src/ui-model.yml

@@ -232,6 +232,12 @@ page:
       - content: Home page
         url: /streaming/24.3/home.html
         urlType: internal
+      - content: Limited Availability Test
+        url: /limited-availability-test.html
+        urlType: internal
+      - content: Preview Status Test
+        url: /preview-status-test.html
+        urlType: internal
     - content: Get Started
       url: '#'
       urlType: internal
@@ -448,9 +454,6 @@ page:
       - content: Data Loss Prevention
         url: '#'
         urlType: internal
-      - content: Limited Availability Test
-        url: /streaming/24.3/limited-availability-test.html
-        urlType: internal
     - content: Dev Tools
       url: '#'
       urlType: internal

src/css/doc.css

@@ -460,6 +460,12 @@ html[data-theme="dark"] .component-indicator-sticky .sm-ver-pill-caret {
   border: 1px solid #fcd34d;
 }
 
+.status-badge--preview {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #111827;
+}
+
 .status-badge--la {
   background: #ede9fe;
   color: #5b21b6;
@@ -472,6 +478,12 @@ html[data-theme="dark"] .status-badge--beta {
   border-color: rgba(251, 191, 36, 0.3);
 }
 
+html[data-theme="dark"] .status-badge--preview {
+  background: rgba(148, 163, 184, 0.15);
+  color: #cbd5e1;
+  border-color: rgba(148, 163, 184, 0.3);
+}
+
 html[data-theme="dark"] .status-badge--la {
   background: rgba(139, 92, 246, 0.15);
   color: #c4b5fd;

src/css/metadata.css

@@ -167,6 +167,18 @@
   color: var(--beta-label-color);
 }
 
+/* Preview */
+.badge--preview {
+  color: var(--preview-label-background);
+  font-weight: bold;
+  background-color: var(--link-highlight-background-color);
+}
+
+.badge--large.badge--preview {
+  background-color: var(--preview-label-background);
+  color: var(--preview-label-color);
+}
+
 .beta-label {
   display: inline-flex;
   margin: 0;

src/css/nav.css

@@ -673,6 +673,13 @@ html[data-theme="light"] .nav-item-toggle {
   white-space: nowrap;
 }
 
+.nav-link.cloud-preview::after {
+  display: inline;
+  content: '(Preview)';
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
 .nav-link.cloud-limited-availability::after {
   display: inline;
   content: '(Limited)';

src/css/vars.css

@@ -127,6 +127,8 @@ html[data-theme=dark] {
   --beta-label-color: #fff;
   --beta-label-background: var(--link-highlight-color);
   --beta-label-border: var(--slate-800);
+  --preview-label-background: #1f2937;
+  --preview-label-color: #f9fafb;
   --limited-availability-label-color: #fff;
   --limited-availability-label-background: var(--default-header-color);
   --limited-availability-label-border: var(--amber-800);
@@ -196,6 +198,9 @@ html[data-theme=dark] {
   --byoc-label-color: #101828;
   --byoc-label-background: #4da8da;
   --byoc-highlight-background-color: rgba(77, 168, 218, 0.15);
+  /* Preview badge - dark mode */
+  --preview-label-background: #cbd5e1;
+  --preview-label-color: #1f2937;
   /* Cloud badge - brighter purple for dark mode visibility with dark text for contrast */
   --cloud-label-color: #101828;
   --cloud-label-background: #9d97ff;

src/helpers/is-preview-feature.js

@@ -0,0 +1,26 @@
+'use strict'
+
+// Cache: Map<componentName, Map<url, isPreview>>
+let urlCache = null
+let cachedComponent = null
+
+module.exports = (navUrl, { data: { root } }) => {
+  const { contentCatalog, page } = root
+  if (page.layout === '404') return false
+  if (!contentCatalog) return false
+
+  // Build URL map once per component (O(n) once, then O(1) lookups)
+  if (cachedComponent !== page.component.name) {
+    urlCache = new Map()
+    cachedComponent = page.component.name
+
+    const pages = contentCatalog.findBy({ component: page.component.name, family: 'page' })
+    for (const p of pages) {
+      if (p.pub?.url) {
+        urlCache.set(p.pub.url, !!p.asciidoc?.attributes?.['page-preview'])
+      }
+    }
+  }
+
+  return urlCache.get(navUrl) || false
+}

src/partials/article.hbs

@@ -24,10 +24,13 @@
     </div>
     {{/with}}
     {{> version-selector}}
-    {{!-- Status badges: Beta, Limited Availability --}}
+    {{!-- Status badges: Beta, Preview, Limited Availability --}}
     {{#if page.attributes.beta}}
     <span class="status-badge status-badge--beta" data-tippy-content="{{#if page.attributes.beta-text}}{{page.attributes.beta-text}}{{else}}This feature is in beta and may change.{{/if}}">beta</span>
     {{/if}}
+    {{#if page.attributes.preview}}
+    <span class="status-badge status-badge--preview" data-tippy-content="{{#if page.attributes.preview-text}}{{page.attributes.preview-text}}{{else}}This feature is in preview and may change.{{/if}}">Preview</span>
+    {{/if}}
     {{#if page.attributes.limited-availability}}
     <span class="status-badge status-badge--la" {{#if page.attributes.limited-availability-text}}data-tippy-content="{{page.attributes.limited-availability-text}}"{{/if}}>
       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -113,7 +116,7 @@
   {{!-- Metadata now shown in sticky bar above --}}
 </div>
 {{/unless}}
-{{#if (or page.attributes.beta page.attributes.limited-availability page.attributes.byoc page.attributes.cloud-only page.attributes.context-switcher)}}
+{{#if (or page.attributes.beta page.attributes.preview page.attributes.limited-availability page.attributes.byoc page.attributes.cloud-only page.attributes.context-switcher)}}
   <script>
   document.addEventListener("DOMContentLoaded", () => {
     const stickyHeader = document.querySelector(".component-indicator-sticky");
@@ -134,6 +137,18 @@
         appendTo: () => document.body,
       });
     }
+    const previewBadge = stickyHeader?.querySelector(".status-badge--preview");
+    if (previewBadge) {
+      tippy(previewBadge, {
+        content: previewBadge.dataset.tippyContent,
+        animation: "scale",
+        theme: "redpanda-term",
+        touch: "hold",
+        interactive: true,
+        allowHTML: true,
+        appendTo: () => document.body,
+      });
+    }
     if (navBetaBadge) {
       tippy(navBetaBadge, {
         content: "{{page.attributes.beta-text}}",

src/partials/nav-tree.hbs

@@ -5,7 +5,7 @@
     {{#if ./content}}
     <div class="item {{#if (eq ./url @root.page.url)}}is-current-page{{/if}} {{#if ./items.length}}dropdown{{/if}}">
     {{#if ./url}}
-    <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}{{~#unless @root.page.attributes.adp}}{{~#if (is-byoc-feature ./url)}} cloud-byoc{{~/if}}{{~#if (is-cloud-feature ./url)}} cloud-only{{~/if}}{{~/unless}}" href="
+    <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-preview-feature ./url)}} cloud-preview{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}{{~#unless @root.page.attributes.adp}}{{~#if (is-byoc-feature ./url)}} cloud-byoc{{~/if}}{{~#if (is-cloud-feature ./url)}} cloud-only{{~/if}}{{~/unless}}" href="
       {{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}
       {{~else}}{{{./url}}}{{~/if}}">{{{./content}}} </a>
     {{else}}