@ciderpress/ui 1.0.0-rc.10 → 1.0.0-rc.11

package/dist/theme/components/home/workspaces.tsx

@@ -1,69 +1,181 @@
-import type { HomeShowcaseConfig } from '@ciderpress/config'
-import { useFrontmatter } from '@rspress/core/runtime'
+import type { TruncateConfig } from '@ciderpress/config'
 import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import { useCiderpress } from '../../hooks/use-ciderpress'
-import type { WorkspaceGroupData } from '../../hooks/use-ciderpress'
+import type { WorkspaceCardData, WorkspaceGroupData } from '../../hooks/use-ciderpress'
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { WorkspaceCard } from '../workspaces/card'
 import { WorkspaceGrid } from '../workspaces/grid'
 
+/**
+ * A single card compiled from `showcase.source` — the same shape as a
+ * workspace card, minus the grouping.
+ */
+export type ShowcaseCard = WorkspaceCardData
+
 interface FrontmatterWorkspacesHeading {
   readonly label?: string
   readonly title?: string
-  readonly subtitle?: string
+  readonly body?: string
+}
+
+interface HomeWorkspacesProps {
+  readonly heading?: FrontmatterWorkspacesHeading
+  /**
+   * Cards compiled from an explicit `showcase.source` path list. When
+   * present they render as one ungrouped grid; otherwise the grouped
+   * workspace data from the theme config is used.
+   */
+  readonly cards?: readonly ShowcaseCard[]
+  readonly columns?: 1 | 2 | 3 | 4
+  readonly truncate?: TruncateConfig
 }
 
+const DEFAULT_COLUMNS: 1 | 2 | 3 | 4 = 2
+
 /**
- * Smart orchestrator that reads workspace data from themeConfig
- * and renders workspace groups with the correct card component per type.
- *
- * Optionally renders a top-level heading above the workspace groups
- * when `home.showcase.heading` is configured. The sync engine writes
- * it into frontmatter as `workspacesHeading`.
+ * Showcase grid block. Renders either the cards compiled from an
+ * explicit `showcase.source` path list (one ungrouped grid) or the
+ * grouped workspace data serialized from the repo at build time. Grid
+ * layout — heading, columns, truncation — comes from props.
  *
- * @returns React element with workspace groups or null
+ * @param props - Optional heading, cards, column count, and truncation limits.
+ * @returns React element with the showcase grid, or null when empty.
  */
-export function HomeWorkspaces(): React.ReactElement | null {
-  const { workspaces, home } = useCiderpress()
-  const gridConfig = home && home.showcase
-  const { frontmatter } = useFrontmatter()
-  const heading = (frontmatter as Record<string, unknown>).workspacesHeading as
-    | FrontmatterWorkspacesHeading
-    | undefined
+export function HomeWorkspaces(props: HomeWorkspacesProps): React.ReactElement | null {
+  const { workspaces } = useCiderpress()
+  const { heading, cards, columns, truncate } = props
+  const resolvedColumns = match(columns)
+    .with(P.nonNullable, (c) => c)
+    .otherwise(() => DEFAULT_COLUMNS)
 
-  return match(workspaces)
+  // A `cards` key means the block declared an explicit `showcase.source`
+  // — an empty array is "that source resolved to nothing", not "fall back
+  // to the workspace deck". Only an absent key takes the fallback.
+  const body = match(cards)
     .with(
-      P.when((w): w is readonly WorkspaceGroupData[] => Array.isArray(w) && w.length > 0),
-      (groups) => (
-        <div className="cp-workspace-section">
-          <hr className="cp-divider" />
-          {match(heading)
-            .with(undefined, () => null)
-            .otherwise((h) => (
-              <div className="cp-feature-section-head">
-                {match(h.label)
-                  .with(undefined, () => null)
-                  .otherwise((e) => (
-                    <div className="cp-feature-section-head__eyebrow">{e}</div>
-                  ))}
-                {match(h.title)
-                  .with(undefined, () => null)
-                  .otherwise((t) => (
-                    <h2 className="cp-feature-section-head__title">{t}</h2>
-                  ))}
-                {match(h.subtitle)
-                  .with(undefined, () => null)
-                  .otherwise((s) => (
-                    <p className="cp-feature-section-head__sub">{s}</p>
-                  ))}
-              </div>
-            ))}
-          {groups.map((group) => renderGroup(group, gridConfig))}
-        </div>
-      )
+      P.when((c): c is readonly ShowcaseCard[] => Array.isArray(c)),
+      (list) =>
+        match(list.length === 0)
+          .with(true, () => null)
+          .otherwise(() => [renderCardGrid(list, resolvedColumns, truncate)])
+    )
+    .otherwise(() =>
+      match(workspaces)
+        .with(
+          P.when((w): w is readonly WorkspaceGroupData[] => Array.isArray(w) && w.length > 0),
+          (groups) => groups.map((group, i) => renderGroup(group, resolvedColumns, truncate, i))
+        )
+        .otherwise(() => null)
     )
-    .otherwise(() => null)
+
+  return match(body)
+    .with(null, () => null)
+    .otherwise((content) => (
+      <div className="cp-workspace-section">
+        {/* The rule separates this band from the heading above it, so a
+            block with no heading of its own would render it as an orphan
+            line floating over the cards. */}
+        {match(renderHeading(heading))
+          .with(P.nullish, () => null)
+          .otherwise((head) => (
+            <>
+              <hr className="cp-divider" />
+              {head}
+            </>
+          ))}
+        {content}
+      </div>
+    ))
+}
+
+/**
+ * Render the block heading, or nothing when every field is absent.
+ *
+ * @private
+ * @param heading - Flat heading trio from the block
+ * @returns Heading element, or null
+ */
+function renderHeading(
+  heading: FrontmatterWorkspacesHeading | undefined
+): React.ReactElement | null {
+  if (heading === undefined) {
+    return null
+  }
+  const { label, title, body } = heading
+  const hasContent = [label, title, body].some((value) => typeof value === 'string')
+  if (!hasContent) {
+    return null
+  }
+  return (
+    <div className="cp-feature-section-head">
+      {match(label)
+        .with(P.string, (e) => (
+          <div className="cp-feature-section-head__eyebrow">{renderRichText(e)}</div>
+        ))
+        .otherwise(() => null)}
+      {match(title)
+        .with(P.string, (t) => (
+          <h2 className="cp-feature-section-head__title">{renderRichText(t)}</h2>
+        ))
+        .otherwise(() => null)}
+      {match(body)
+        .with(P.string, (s) => <p className="cp-feature-section-head__sub">{renderRichText(s)}</p>)
+        .otherwise(() => null)}
+    </div>
+  )
+}
+
+/**
+ * Render an ungrouped grid of cards compiled from `showcase.source`.
+ *
+ * @private
+ * @param cards - Resolved showcase cards
+ * @param columns - Column count for the grid
+ * @param truncate - Optional line-clamp limits for card text
+ * @returns Ungrouped workspace grid element
+ */
+function renderCardGrid(
+  cards: readonly ShowcaseCard[],
+  columns: 1 | 2 | 3 | 4,
+  truncate: TruncateConfig | undefined
+): React.ReactElement {
+  return (
+    <WorkspaceGrid key="showcase-source" columns={columns}>
+      {cards.map((card, i) => renderCard(card, i, truncate))}
+    </WorkspaceGrid>
+  )
+}
+
+/**
+ * Render a single showcase / workspace card.
+ *
+ * @private
+ * @param card - Card data
+ * @param index - Array index for key generation
+ * @param truncate - Optional line-clamp limits for card text
+ * @returns Workspace card element
+ */
+function renderCard(
+  card: WorkspaceCardData,
+  index: number,
+  truncate: TruncateConfig | undefined
+): React.ReactElement {
+  return (
+    <WorkspaceCard
+      key={`${card.title}-${index}`}
+      title={card.title}
+      href={card.href}
+      icon={card.icon}
+      scope={card.scope}
+      description={card.description}
+      tags={card.tags}
+      badge={card.badge}
+      titleLines={truncate && truncate.title}
+      descriptionLines={truncate && truncate.description}
+    />
+  )
 }
 
 /**
@@ -71,37 +183,27 @@ export function HomeWorkspaces(): React.ReactElement | null {
  *
  * @private
  * @param group - Workspace group data with heading, description, and cards
- * @param gridConfig - Optional grid layout config for columns and truncation
+ * @param columns - Column count for the grid
+ * @param truncate - Optional line-clamp limits for card text
+ * @param index - Position in the group list, to disambiguate the key
  * @returns Workspace grid element
  */
 function renderGroup(
   group: WorkspaceGroupData,
-  gridConfig: HomeShowcaseConfig | undefined
+  columns: 1 | 2 | 3 | 4,
+  truncate: TruncateConfig | undefined,
+  index: number
 ): React.ReactElement {
-  const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
-  const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description
-
   return (
+    // Heading alone is not unique — two configured workspace groups may
+    // share a title, which collided into one React key.
     <WorkspaceGrid
-      key={group.heading}
+      key={`${group.heading}-${index}`}
       heading={group.heading}
       description={group.description}
-      columns={gridConfig && gridConfig.columns}
+      columns={columns}
     >
-      {group.cards.map((card, i) => (
-        <WorkspaceCard
-          key={`${card.title}-${i}`}
-          title={card.title}
-          href={card.href}
-          icon={card.icon}
-          scope={card.scope}
-          description={card.description}
-          tags={card.tags}
-          badge={card.badge}
-          titleLines={titleLines}
-          descriptionLines={descLines}
-        />
-      ))}
+      {group.cards.map((card, i) => renderCard(card, i, truncate))}
     </WorkspaceGrid>
   )
 }

package/dist/theme/components/workspaces/card.css

@@ -69,6 +69,10 @@
   font-size: 15px;
   font-weight: 700;
   color: var(--cp-c-text-1);
+  /* Presentational lowercase. Done here rather than in JS because the
+     title may carry inline markup — lowercasing the source would also
+     lowercase link targets and class names inside it. */
+  text-transform: lowercase;
 }
 
 .cp-workspace-card__desc {

package/dist/theme/components/workspaces/card.tsx

@@ -1,6 +1,7 @@
 import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { Card } from '../shared/card'
 import { CardIcon } from '../shared/card-icon'
 import type { CardIconInput } from '../shared/resolve-card-icon'
@@ -65,7 +66,6 @@ export function WorkspaceCard({
   titleLines,
   descriptionLines,
 }: WorkspaceCardProps): React.ReactElement {
-  const name = title.toLowerCase()
   const resolved = resolveCardIcon(icon)
 
   const iconEl = match(resolved)
@@ -93,7 +93,7 @@ export function WorkspaceCard({
         className={clampClass('cp-workspace-card__desc', descriptionLines)}
         style={clampStyle(descriptionLines)}
       >
-        {d}
+        {renderRichText(d)}
       </span>
     ))
     .otherwise(() => null)
@@ -122,7 +122,7 @@ export function WorkspaceCard({
               className={clampClass('cp-workspace-card__name', titleLines)}
               style={clampStyle(titleLines)}
             >
-              {name}
+              {renderRichText(title)}
             </span>
           </div>
         </div>

package/dist/theme/components/workspaces/grid.tsx

@@ -1,16 +1,21 @@
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
+
 import './card.css'
 
 export interface WorkspaceGridProps {
   /**
-   * Section heading (e.g. "Apps", "Packages").
+   * Section heading (e.g. "Apps", "Packages"). Omitted for an ungrouped
+   * grid, such as a showcase block with an explicit `source` list.
    */
-  readonly heading: string
+  readonly heading?: string
   /**
-   * Brief description rendered below the heading.
+   * Brief description rendered below the heading. Omitted for an
+   * ungrouped grid.
    */
-  readonly description: string
+  readonly description?: string
   /**
    * Number of grid columns.
    */
@@ -38,8 +43,15 @@ export function WorkspaceGrid({
 
   return (
     <>
-      <h2>{heading}</h2>
-      <p className="cp-workspace-section__desc">{description}</p>
+      {/* Rich text, matching the card titles and descriptions this grid
+          wraps — a group heading was the one string in the block that
+          showed its `**markers**` literally. */}
+      {match(heading)
+        .with(P.string, (h) => <h2>{renderRichText(h)}</h2>)
+        .otherwise(() => null)}
+      {match(description)
+        .with(P.string, (d) => <p className="cp-workspace-section__desc">{renderRichText(d)}</p>)
+        .otherwise(() => null)}
       <div className="cp-workspace-grid" style={style}>
         {children}
       </div>

package/dist/theme/index.tsx

@@ -23,6 +23,7 @@ import './styles/layers.css'
 import './styles/overrides/fonts.css'
 import './styles/overrides/tokens.css'
 import './styles/overrides/rspress.css'
+import './styles/rich-text.css'
 // Theme color palettes — scoped via [data-cp-theme][data-cp-variant] selectors.
 // `mulled.css` ships first because it is `DEFAULT_THEME_NAME` — its rules emit
 // the `:root { ... }` FOUC fallback that paints before JS hydrates the
@@ -106,6 +107,10 @@ export { TrustStrip } from './components/home/trust-strip'
 export type { TrustStripProps } from './components/home/trust-strip'
 export { HomeSplit } from './components/home/split'
 export type { SplitProps, SplitAction } from './components/home/split'
+export { HomeTabs } from './components/home/tabs'
+export { RichText, renderRichText } from './lib/rich-text.tsx'
+export { hasAccentMarker, toPlainText } from './lib/rich-text-parse.ts'
+export type { HomeTabsProps, HomeTabEntry, TabsAction } from './components/home/tabs'
 export { CTA } from './components/home/cta'
 export type { CTAProps } from './components/home/cta'
 export { WorkspaceCard } from './components/workspaces/card'