- item = one
+// entry) or, for single-entry sections, a plain heading/paragraph with no
+// list at all. Counting top-level
- s (without recursing into nested
+// lists inside an item) gives the entry count without hardcoding per-file.
+export function getAccordianItemCount(children) {
+ if (!children) return 0;
+
+ let itemCount = 0;
+ let sawList = false;
+
+ React.Children.forEach(children, (child) => {
+ if (React.isValidElement(child) && child.type === MDXUl) {
+ sawList = true;
+ itemCount += React.Children.toArray(child.props.children).filter(
+ React.isValidElement,
+ ).length;
+ }
+ });
+
+ return sawList ? itemCount : 1;
+}
+
export const Accordian = ({ title, children, defaultOpen = false }) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -9,6 +32,8 @@ export const Accordian = ({ title, children, defaultOpen = false }) => {
return null;
}
+ const itemCount = getAccordianItemCount(children);
+
return (
); @@ -88,12 +122,16 @@ export function TabsWrapper({ children }) {{tabs.map((tab, index) => { const isActive = activeIndex === index; + const itemCount = getTabItemCount(tab.props.children); + const label = itemCount + ? `${tab.props.name} (${itemCount})` + : tab.props.name; return ( ); })} diff --git a/src/theme/SearchBar/AIConverstion.module.css b/src/theme/SearchBar/AIConverstion.module.css index 45ce8a79..6ac5b55b 100644 --- a/src/theme/SearchBar/AIConverstion.module.css +++ b/src/theme/SearchBar/AIConverstion.module.css @@ -22,7 +22,11 @@ --shadow: 0 8px 40px rgba(27, 67, 130, 0.14), 0 2px 12px rgba(27, 67, 130, 0.08); --shadow-card: 0 2px 8px rgba(27, 67, 130, 0.08); - --askai-source-card-label:rgba(90, 90, 90, 1); + --askai-source-card-label: rgba(90, 90, 90, 1); + --sb-pink: #ff4785; + --sb-pink-light: #fff0f5; + --sb-pink-mid: #ffc2d6; + --sb-pink-dark: #d81b60; } /* Dark mode — follows Docusaurus [data-theme='dark'] convention */ @@ -45,8 +49,11 @@ --purple: #a78bfa; --shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.3); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); - --askai-source-card-label:rgba(255, 255, 255, 0.92); - + --askai-source-card-label: rgba(255, 255, 255, 0.92); + --sb-pink: #ff6b9d; + --sb-pink-light: rgba(255, 71, 133, 0.12); + --sb-pink-mid: rgba(255, 71, 133, 0.35); + --sb-pink-dark: #ff8fb3; } /* OVERLAY */ @@ -2534,6 +2541,341 @@ white-space: nowrap; } +/* ── STORYBOOK: component card + doc sections ──────────────── */ +.componentCard { + margin: 6px 0 8px; + border: 1px solid var(--border); + border-radius: 10px; + overflow: hidden; + background: var(--bg-modal); + transition: border-color 0.15s; +} + +.componentCard:hover { + border-color: var(--sb-pink-mid); +} + +.componentCardHeader { + display: flex; + align-items: center; + gap: 8px; + padding: 9px 11px; + text-decoration: none !important; + background: var(--sb-pink-light); + transition: background 0.15s; +} + +.componentCardHeader:hover .componentCardOpen { + color: var(--sb-pink); +} + +.componentCardInfo { + display: flex; + align-items: baseline; + gap: 7px; + min-width: 0; + flex: 1; +} + +.componentCardTitle { + font-size: 13px; + font-weight: 700; + color: var(--text); + font-family: var(--mono); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.componentCardCategory { + font-size: 10.5px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text3); + flex-shrink: 0; +} + +.componentCardOpen { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 10.5px; + font-weight: 700; + letter-spacing: 0.03em; + text-transform: uppercase; + color: var(--text3); + transition: color 0.15s; + flex-shrink: 0; +} + +.componentSectionRow { + display: flex; + align-items: center; + gap: 8px; + padding: 7px 11px; + border-top: 1px solid var(--border); + text-decoration: none !important; + transition: background 0.12s; +} + +.componentSectionRow:hover { + background: var(--bg-hover); +} + +.componentSectionTag { + display: inline-flex; + align-items: center; + padding: 1px 7px; + border-radius: 20px; + background: var(--sb-pink-light); + color: var(--sb-pink-dark); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.03em; + text-transform: uppercase; + flex-shrink: 0; + white-space: nowrap; +} + +.componentSectionHint { + flex: 1; + min-width: 0; + font-size: 12px; + color: var(--text2); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/* Keeps the affordance right-aligned on rows whose chunk had no prose line. */ +.componentSectionSpacer { + flex: 1; +} + +.componentSectionOpen { + display: inline-flex; + align-items: center; + font-size: 10.5px; + font-weight: 600; + color: var(--text4); + transition: color 0.15s; + flex-shrink: 0; +} + +.componentSectionRow:hover .componentSectionOpen { + color: var(--sb-pink); +} + +/* ── MARKETPLACE: artifact card + actions ─────────────────── */ +.artifactCard { + margin: 6px 0 8px; + border: 1px solid var(--border); + border-radius: 10px; + overflow: hidden; + background: var(--bg-modal); + transition: border-color 0.15s; +} + +.artifactCard:hover { + border-color: var(--wm-blue-mid); +} + +/* All padding lives here so the clamped description below has no padding of its + own — -webkit-line-clamp clips at the content box, so bottom padding on the + clamped element leaks the next line into view. */ +.artifactCardBody { + display: block; + padding: 10px 11px; + text-decoration: none !important; +} + +.artifactCardHeader { + display: flex; + align-items: center; + gap: 10px; +} + +.artifactCardBody:hover .artifactCardTitle { + color: var(--wm-blue); +} + +.artifactThumbnail { + width: 38px; + min-width: 38px; + height: 38px; + border-radius: 8px; + overflow: hidden; + /* Thumbnails are artwork on their own light ground; a white box keeps logos + legible in dark mode too. */ + background: #ffffff; + box-shadow: inset 0 0 0 1px var(--border); + display: flex; + align-items: center; + justify-content: center; +} + +.artifactThumbnailImg { + width: 100%; + height: 100%; + /* cover, not contain: these are wide artwork crops and letterboxing them into + a square left visible bars. */ + object-fit: cover; +} + +.artifactThumbnailFallback { + font-size: 15px; + font-weight: 700; + /* Fixed neutral: the thumbnail box is white in both themes. */ + color: #8892aa; + font-family: var(--sans); +} + +.artifactCardInfo { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + flex: 1; +} + +.artifactCardTitle { + font-size: 13px; + font-weight: 600; + color: var(--text); + line-height: 1.3; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + transition: color 0.15s; +} + +.artifactCardMetaRow { + display: flex; + align-items: center; + gap: 6px; + min-width: 0; +} + +.artifactTypeTag { + display: inline-flex; + align-items: center; + padding: 1px 6px; + border-radius: 4px; + background: var(--wm-blue-light); + color: var(--wm-blue-dark); + font-size: 9.5px; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.artifactCardVersion { + font-size: 10.5px; + color: var(--text4); + font-family: var(--mono); + flex-shrink: 0; +} + +.artifactCardDescription { + margin: 7px 0 0; + padding: 0; + font-size: 12px; + line-height: 1.45; + color: var(--text2); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + /* Belt and braces: if the webkit clamp is ever neutralised, the height still + clips at two lines instead of spilling a half-rendered third. */ + max-height: 2.9em; + overflow: hidden; +} + +.artifactCapabilities { + margin: 7px 0 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 3px; +} + +.artifactCapability { + position: relative; + padding-left: 10px; + font-size: 11.5px; + line-height: 1.4; + color: var(--text2); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.artifactCapability::before { + content: ''; + position: absolute; + left: 1px; + top: 7px; + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--text4); +} + +.artifactCardFooter { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 11px; + border-top: 1px solid var(--border); +} + +.artifactPublisher { + display: inline-flex; + align-items: center; + gap: 5px; + flex: 1; + min-width: 0; + font-size: 11px; + color: var(--text3); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.artifactPublisherAvatar { + width: 14px; + height: 14px; + border-radius: 50%; + flex-shrink: 0; + object-fit: cover; +} + +.artifactAction { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 11px; + font-weight: 600; + color: var(--text3); + text-decoration: none !important; + transition: color 0.15s; + flex-shrink: 0; +} + +.artifactAction::after { + content: '↗'; + font-size: 9px; +} + +.artifactAction:hover { + color: var(--wm-blue); +} + /* ═══════════════════════════════════════════════════════════════ VIDEO MODAL DIALOG ═══════════════════════════════════════════════════════════════ */ diff --git a/src/theme/SearchBar/SourceCards.jsx b/src/theme/SearchBar/SourceCards.jsx index 429174c2..3fb4a07b 100644 --- a/src/theme/SearchBar/SourceCards.jsx +++ b/src/theme/SearchBar/SourceCards.jsx @@ -142,6 +142,235 @@ function DocLinkList({ groups }) { ); } +// ── STORYBOOK: component card + doc sections ───────────────── +// Order the component's doc pages the way its Storybook sidebar reads. +const SECTION_ORDER = [ + 'overview', + 'props', + 'events', + 'methods', + 'styling', + 'style', + 'token', +]; + +const sectionRank = (section) => { + const index = SECTION_ORDER.indexOf(section); + return index === -1 ? SECTION_ORDER.length : index; +}; + +const titleCase = (value) => + value + .split(/[-_\s]+/) + .filter(Boolean) + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); + +// Chunks are raw markdown — mostly prop tables and code samples. Show the first +// line that reads as prose, and nothing at all when there isn't one. +const proseLine = (text) => { + if (!text) return ''; + const line = text + .split('\n') + .map((l) => + l + .replace(/^[#>\s*-]+/, '') + .replace(/[`*_]/g, '') + .trim(), + ) + .find( + (l) => + l.length > 24 && + l.includes(' ') && + /^[A-Za-z]/.test(l) && + !/[|=<>{}]/.test(l), + ); + return line ? line.slice(0, 90) : ''; +}; + +function StorybookComponentCard({ group }) { + const firstChunk = group.chunks[0]; + const category = firstChunk?.meta?.category || ''; + // Chunk URLs carry a #section fragment so fusion keeps them apart; the header + // links to the component's page itself. + const storyUrl = firstChunk?.meta?.story_url || group.url; + + // One row per doc section — the same section can arrive as several chunks, + // and chunks are already ranked, so the first one wins. + const sections = []; + group.chunks.forEach((chunk) => { + const section = chunk.meta?.section; + if (!section || sections.some((row) => row.section === section)) return; + sections.push({ + section, + label: chunk.meta?.section_title || titleCase(section), + hint: proseLine(chunk.excerpt), + href: chunk.url || storyUrl, + }); + }); + sections.sort((a, b) => sectionRank(a.section) - sectionRank(b.section)); + + return ( ++ ++ ); +} + +// ── MARKETPLACE: artifact card + actions ───────────────────── +function MarketplaceArtifactCard({ group }) { + const meta = group.chunks[0]?.meta || {}; + const detailUrl = meta.detail_url || group.url; + // Description and capabilities restate each other, so show one: the summary + // when there is one, otherwise the capability list standing in for it. + const description = meta.description?.trim(); + const capabilities = description + ? [] + : (meta.features?.length ? meta.features : meta.tags || []) + .filter((item) => item && String(item).trim()) + .slice(0, 2); + const actions = [ + meta.preview_url && { label: 'Preview', href: meta.preview_url }, + meta.github_url && { label: 'GitHub', href: meta.github_url }, + ].filter(Boolean); + + return ( ++ {group.title} + {category && ( + {category} + )} ++ {storyUrl && ( + + Storybook + + + )} + + + {sections.map((row) => ( + + {row.label} + {row.hint ? ( + {row.hint} + ) : ( + + )} + + + ))} ++ ++ ); +} + // ── ACADEMY: video card + timestamps ───────────────────────── function AcademyVideoCard({ group, onVideoOpen }) { const firstChunk = group.chunks[0]; @@ -343,11 +572,19 @@ function AcademyVideoCard({ group, onVideoOpen }) { } // ── Per-source accordion section ────────────────────────────── +const SOURCE_RENDERERS = { + storybook: (group) =>++ + {description && ( ++ {meta.thumbnail ? ( ++
+ ) : ( + + {group.title.charAt(0)} + + )} +
+ {group.title} + + {meta.artifact_type && ( + + {titleCase(meta.artifact_type)} + + )} + {meta.version && ( + + v{meta.version} + + )} + ++{description}
+ )} + + {capabilities.length > 0 && ( +-
+ {capabilities.map((capability, ci) => (
+
- + {capability} + + ))} +
+ {meta.published_by && ( + + {meta.published_icon && ( ++ )} ++ )} + {meta.published_by} + + )} + {actions.map((action) => ( + + {action.label} + + ))} +
, + marketplace: (group) => ( + + ), +}; + function SourceSection({ source, groups, defaultOpen, onVideoOpen }) { const [open, setOpen] = useState(defaultOpen); const IconComponent = SOURCE_ICONS[source] || SOURCE_ICONS.docs; const color = SOURCE_COLORS[source] || '#6b7280'; const isAcademy = source === 'academy'; + const renderGroup = SOURCE_RENDERERS[source]; return ( @@ -378,6 +615,8 @@ function SourceSection({ source, groups, defaultOpen, onVideoOpen }) { onVideoOpen={onVideoOpen} /> )) + ) : renderGroup ? ( + groups.map(renderGroup) ) : ()} @@ -463,9 +702,10 @@ export default function SourceCards({ cards, activeQuestion, isLoading }) { {navHeader}- {sortedSources.map((source) => { + {sortedSources.map((source, si) => { const groups = Object.values(bySource[source]); - const defaultOpen = source === 'docs' || source === 'academy'; + // Open the top-ranked sources; the rest stay one click away. + const defaultOpen = si < 2; return (( rx="4" fill="none" stroke="var(--ifm-color-dark, #18181B)" - stroke-width="4" + strokeWidth="4" /> ( x2="22" y2="54" stroke="var(--ifm-color-dark, #18181B)" - stroke-width="4" + strokeWidth="4" /> ( x2="16" y2="20" stroke="var(--ifm-color-dark, #18181B)" - stroke-width="4" - stroke-linecap="round" + strokeWidth="4" + strokeLinecap="round" /> ( x2="16" y2="28" stroke="var(--ifm-color-dark, #18181B)" - stroke-width="4" - stroke-linecap="round" + strokeWidth="4" + strokeLinecap="round" /> - + ); @@ -100,20 +100,20 @@ export const MarketplaceIcon = () => ( 40% { transform: scaleY(1) translateY(0); } } `} - + );