@conduction/docusaurus-preset 3.24.0 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/FeatureGrid/FeatureGrid.jsx

@@ -47,20 +47,29 @@ import styles from './FeatureGrid.module.css';
 
 const STATUS_CLASSES = {stable: '', beta: styles.beta, soon: styles.soon};
 
-export function FeatureItem({label, tip, status = 'stable', href, className}) {
+export function FeatureItem({label, tip, status = 'stable', href, className, showDescription = false}) {
   const hexClass = [styles.h, STATUS_CLASSES[status]].filter(Boolean).join(' ');
-  const body = (
+  const body = showDescription ? (
+    <>
+      <span className={styles.head}>
+        <span className={hexClass} aria-hidden="true" />
+        <span className={styles.label}>{label}</span>
+      </span>
+      {tip && <span className={styles.desc}>{tip}</span>}
+    </>
+  ) : (
     <>
       <span className={hexClass} aria-hidden="true" />
       <span className={styles.label}>{label}</span>
       {tip && <span className={styles.tip}>{tip}</span>}
     </>
   );
+  const cardClass = showDescription ? styles.itemCard : null;
   if (href) {
     const isExternal = /^https?:\/\//.test(href);
     return (
       <a
-        className={[styles.item, styles.itemLink, className].filter(Boolean).join(' ')}
+        className={[styles.item, cardClass, styles.itemLink, className].filter(Boolean).join(' ')}
         href={href}
         title={tip || label}
         {...(isExternal ? {target: '_blank', rel: 'noopener noreferrer'} : {})}
@@ -71,7 +80,7 @@ export function FeatureItem({label, tip, status = 'stable', href, className}) {
   }
   return (
     <div
-      className={[styles.item, className].filter(Boolean).join(' ')}
+      className={[styles.item, cardClass, className].filter(Boolean).join(' ')}
       tabIndex={0}
       title={tip || label}
     >
@@ -84,16 +93,17 @@ export function FeatureGridGroup({label, className}) {
   return <h4 className={[styles.group, className].filter(Boolean).join(' ')}>{label}</h4>;
 }
 
-export default function FeatureGrid({items, legend = false, children, className}) {
+export default function FeatureGrid({items, legend = false, children, className, withDescriptions = false}) {
+  const gridClass = [styles.grid, withDescriptions ? styles.gridCards : null].filter(Boolean).join(' ');
   return (
     <div className={className}>
       {legend && <Legend />}
-      <div className={styles.grid}>
+      <div className={gridClass}>
         {items
           ? items.map((it, i) => (
               it.group
                 ? <FeatureGridGroup key={i} label={it.group} />
-                : <FeatureItem key={i} {...it} />
+                : <FeatureItem key={i} showDescription={withDescriptions} {...it} />
             ))
           : children}
       </div>

package/src/components/FeatureGrid/FeatureGrid.module.css

@@ -70,14 +70,50 @@
   background: var(--c-mint-500);
   flex-shrink: 0;
 }
-.beta { background: var(--c-orange-knvb); }
-.soon { background: var(--c-cobalt-300); }
+.beta { background: var(--c-cobalt-500); }
+.soon { background: var(--c-orange-knvb); }
 
 .label {
   flex: 1;
   line-height: 1.3;
 }
 
+/* Card layout (withDescriptions): hex + label on a header row, the full
+   description shown inline below instead of as a hover tooltip. */
+.gridCards {
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px 24px;
+}
+.itemCard {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  padding: 14px 16px;
+  cursor: default;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  background: white;
+}
+.itemCard.itemLink { cursor: pointer; }
+.itemCard:hover,
+.itemCard:focus-visible {
+  background: var(--c-cobalt-50);
+  border-color: var(--c-cobalt-200);
+  padding: 14px 16px;
+  margin: 0;
+}
+.head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.desc {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+  margin-left: 22px;
+}
+
 /* Tooltip: appears above the item on hover or keyboard focus */
 .tip {
   position: absolute;

package/src/components/FeaturesPage/FeaturesPage.jsx

@@ -34,7 +34,7 @@ export default function FeaturesPage({data}) {
   const items = features.map((f) => ({
     label: f.title || f.slug,
     tip: f.summary || '',
-    status: 'stable',
+    status: f.status || 'stable',
     href: f.docsUrl || undefined,
   }));
 
@@ -49,7 +49,7 @@ export default function FeaturesPage({data}) {
         {items.length === 0 ? (
           <p>No features documented yet.</p>
         ) : (
-          <FeatureGrid items={items} legend />
+          <FeatureGrid items={items} legend withDescriptions />
         )}
       </main>
     </Layout>

package/src/plugins/extractFeatures.js

@@ -22,6 +22,36 @@ const fs = require('fs');
 const path = require('path');
 
 const FRONTMATTER_RE = /^---\s*\n([\s\S]*?\n)---\s*\n([\s\S]*)$/;
+const SLUGGY_RE = /^[a-z0-9]+(?:-[a-z0-9]+)+$/;
+
+// Map a spec's frontmatter status to a roadmap kind: stable (mint),
+// beta (cobalt blue), soon (orange). Unmapped statuses are skipped.
+const STATUS_KIND = {
+  done: 'stable', implemented: 'stable', reviewed: 'stable', active: 'stable', stable: 'stable',
+  'in-progress': 'beta', implementing: 'beta', partial: 'beta', beta: 'beta',
+  draft: 'soon', specified: 'soon', proposed: 'soon', planned: 'soon', 'coming-soon': 'soon', soon: 'soon',
+};
+
+const ACRONYMS = new Set([
+  'ai', 'api', 'ui', 'ux', 'or', 'bi', 'mcp', 'tmlo', 'mdto', 'dcat', 'woo',
+  'vth', 'kcc', 'crm', 'pdf', 'csv', 'sepa', 'zgw', 'ztc', 'dso', 'rbac',
+  'gdpr', 'avg', 'kvk', 'brp', 'sso', 'jwt', 'cli', 'ocr', 'ner', 'kpi',
+  'saas', 'oas', 'json', 'xml', 'html', 'css', 'url', 'http', 'https', 'id',
+  'pwa', 'sip', 'eml', 'sla', 'llm', 'rag', 'e2e', 'qr', 'vng',
+]);
+
+function titlecaseSlug(slug) {
+  return slug
+    .split('-')
+    .map((w) => (ACRONYMS.has(w) ? w.toUpperCase() : w.charAt(0).toUpperCase() + w.slice(1)))
+    .join(' ');
+}
+
+function cleanTitle(rawTitle, slug) {
+  let title = rawTitle.replace(/^\s*spec:\s*/i, '').replace(/\s+specification\s*$/i, '').trim();
+  if (!title || title === slug || SLUGGY_RE.test(title)) title = titlecaseSlug(slug);
+  return title;
+}
 
 function parseSpec(specPath, slug) {
   let text;
@@ -38,11 +68,12 @@ function parseSpec(specPath, slug) {
 
   const statusMatch = front.match(/^status:\s*(.+?)\s*$/m);
   const status = statusMatch ? statusMatch[1].trim().replace(/^["']|["']$/g, '').toLowerCase() : '';
-  if (status !== 'done') return null;
+  const kind = STATUS_KIND[status];
+  if (!kind) return null;
 
   const titleMatch = body.match(/^#\s+(.+?)\s*$/m);
   const rawTitle = titleMatch ? titleMatch[1].trim() : slug;
-  const title = rawTitle.replace(/\s+specification\s*$/i, '').trim();
+  const title = cleanTitle(rawTitle, slug);
 
   let summary = '';
   const purposeHeading = body.match(/^##\s+Purpose\s*$/m);
@@ -58,6 +89,7 @@ function parseSpec(specPath, slug) {
     slug,
     title,
     summary,
+    status: kind,
     docsUrl: `openspec/specs/${slug}/spec.md`,
   };
 }