@windrun-huaiin/third-ui 20.1.0 → 22.0.0

package/src/fuma/fuma-page-genarator.tsx

@@ -13,7 +13,7 @@ interface FumaPageParams {
   /* 
    * The source of the mdx content
    */
-  mdxContentSource: any;
+  mdxContentSource: any | (() => Promise<any>);
   /* 
    * The  mdx components handler, refer to fumadocs 
    */
@@ -81,11 +81,20 @@ export function createFumaPage({
   localePrefixAsNeeded = true,
   defaultLocale = 'en',
 }: FumaPageParams) {
+  const getSource = async () => {
+    if (typeof mdxContentSource === 'function') {
+      return await mdxContentSource();
+    }
+
+    return mdxContentSource;
+  };
+
   const Page = async function Page({ params }: { params: Promise<{ locale: string; slug?: string[] }> }) {
     const { slug, locale } = await params;
-    const page = mdxContentSource.getPage(slug, locale);
+    const source = await getSource();
+    const page = source.getPage(slug, locale);
     if (!page) {
-      console.log('[FumaPage] missing page', { slug, locale, available: mdxContentSource.pageTree?.[locale]?.children?.map((c: any) => c.url) });
+      console.log('[FumaPage] missing page', { slug, locale, available: source.pageTree?.[locale]?.children?.map((c: any) => c.url) });
       return <FallbackPage siteIcon={siteIcon} />;
     }
 
@@ -103,7 +112,14 @@ export function createFumaPage({
       />
     );
 
-    const MDX = page.data.body;
+    const content =
+      typeof page.data.load === 'function'
+        ? await page.data.load(getMDXComponents())
+        : {
+            body: await page.data.body({ components: getMDXComponents() }),
+            toc: page.data.toc ?? [],
+          };
+
     return (
       <DocsPage
         breadcrumb={{enabled: showBreadcrumb}}
@@ -112,7 +128,7 @@ export function createFumaPage({
           single: false,
           component: (
             <PortableClerkTOC
-              toc={page.data.toc}
+              toc={content.toc}
               footer={tocFooterElement}
             />
           ),
@@ -120,25 +136,26 @@ export function createFumaPage({
         tableOfContentPopover={{
           enabled: false,
         }}
-        toc={page.data.toc}
-        article={{ className: 'max-sm:pb-16' }}
+        toc={content.toc}
+        className="max-sm:pb-16"
       >
         <DocsTitle>{page.data.title}</DocsTitle>
         <DocsDescription className="mb-2">{page.data.description}</DocsDescription>
         <DocsBody className="text-fd-foreground/80">
-          <MDX components={getMDXComponents()} />
+          {content.body}
         </DocsBody>
       </DocsPage>
     );
   };
 
   function generateStaticParams() {
-    return mdxContentSource.generateParams('slug', 'locale');
+    return getSource().then((source) => source.generateParams('slug', 'locale'));
   }
 
   async function generateMetadata(props: { params: Promise<{ slug?: string[]; locale?: string }> }) {
     const { slug, locale } = await props.params;
-    const page = mdxContentSource.getPage(slug, locale);
+    const source = await getSource();
+    const page = source.getPage(slug, locale);
     if (!page) {
       return {
         title: '404 - Page Not Found',

package/src/fuma/{mdx → heavy}/image-grid.tsx

@@ -32,4 +32,4 @@ export function ImageGrid({
       ))}
     </div>
   );
-} 
+} 

package/src/fuma/heavy/index.ts

@@ -0,0 +1,7 @@
+'use client';
+
+export * from './image-zoom';
+export * from './image-grid';
+export * from './math';
+export * from './mermaid';
+

package/src/fuma/heavy/math.tsx

@@ -0,0 +1,130 @@
+import katex from 'katex';
+import { cn } from '@windrun-huaiin/lib/utils';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type MathSourceProps = {
+  children?: ReactNode;
+  math?: string;
+  formula?: string;
+};
+
+type Align = 'left' | 'center' | 'right';
+
+export type MathBlockProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
+  MathSourceProps & {
+    title?: ReactNode;
+    titleAlign?: Align;
+  };
+
+export type InlineMathProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> &
+  MathSourceProps & {
+    align?: Align;
+  };
+
+const alignClassMap: Record<Align, string> = {
+  left: 'text-left justify-start',
+  center: 'text-center justify-center',
+  right: 'text-right justify-end',
+};
+
+const textAlignClassMap: Record<Align, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+function getMathSource({ children, math, formula }: MathSourceProps): string {
+  if (typeof math === 'string' && math.trim() !== '') return math.trim();
+  if (typeof formula === 'string' && formula.trim() !== '') return formula.trim();
+  if (typeof children === 'string' && children.trim() !== '') return children.trim();
+
+  if (Array.isArray(children)) {
+    const text = children
+      .map((item) => (typeof item === 'string' ? item : ''))
+      .join('')
+      .trim();
+
+    if (text !== '') return text;
+  }
+
+  return '';
+}
+
+function renderMath(source: string, displayMode: boolean) {
+  if (source === '') return '';
+
+  return katex.renderToString(source, {
+    displayMode,
+    throwOnError: false,
+    output: 'html',
+    strict: 'ignore',
+    trust: false,
+  });
+}
+
+export function MathBlock({
+  title,
+  titleAlign = 'center',
+  children,
+  math,
+  formula,
+  className,
+  ...props
+}: MathBlockProps) {
+  const source = getMathSource({ children, math, formula });
+  const html = renderMath(source, true);
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'not-prose my-6 overflow-x-auto rounded-xl border bg-fd-card p-4 text-fd-card-foreground',
+        className,
+      )}
+    >
+      {title ? (
+        <div
+          className={cn(
+            'mb-3 text-sm font-medium text-fd-muted-foreground',
+            alignClassMap[titleAlign].split(' ')[0],
+          )}
+        >
+          {title}
+        </div>
+      ) : null}
+      {html ? (
+        <div
+          className="min-w-fit [&_.katex-display]:my-0 [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : (
+        <div className="text-sm text-fd-muted-foreground">Empty math block.</div>
+      )}
+    </div>
+  );
+}
+
+export function InlineMath({
+  children,
+  math,
+  formula,
+  align = 'center',
+  className,
+  ...props
+}: InlineMathProps) {
+  const source = getMathSource({ children, math, formula });
+  const html = renderMath(source, false);
+
+  return (
+    <span
+      {...props}
+      className={cn(
+        'mx-1 inline-flex max-w-full align-middle rounded-md bg-neutral-200 px-2 py-0.5 text-sm leading-none dark:bg-white/20 [&_.katex]:text-inherit',
+        textAlignClassMap[align],
+        className,
+      )}
+    >
+      <span dangerouslySetInnerHTML={{ __html: html }} />
+    </span>
+  );
+}

package/src/fuma/llm-copy-handler.ts

@@ -42,8 +42,8 @@ export async function LLMCopyHandler(options: LLMCopyHandlerOptions): Promise<{
       return { error: 'Page file path information missing', status: 500 };
     }
 
-    const title = page.title;
-    const description = page.description;
+    const title = page.data?.title ?? page.title;
+    const description = page.data?.description ?? page.description;
     const relativeMdxFilePath = page.path;
     const absoluteFilePath = nodePath.join(process.cwd(), sourceDir, relativeMdxFilePath);
     console.log(`[LLMCopy] Attempting to read MDX content from: ${absoluteFilePath}`);
@@ -90,4 +90,4 @@ export async function LLMCopyHandler(options: LLMCopyHandlerOptions): Promise<{
     console.error('[LLMCopy] General Error object details:', JSON.stringify(error, Object.getOwnPropertyNames(error), 2));
     return { error: 'Internal Server Error', status: 500 };
   }
-} 
+} 

package/src/fuma/mdx/index.ts

@@ -1,9 +1,6 @@
 'use client';
 
-export * from './mermaid';
-export * from './image-zoom';
 export * from './trophy-card';
-export * from './image-grid';
 export * from './zia-card';
 export * from './gradient-button';
 export * from './toc-base';
@@ -13,4 +10,3 @@ export * from './toc-footer-wrapper';
 export * from './toc-clerk-portable';
 export * from './banner';
 export * from './suno-embed';
-export * from './markdown-component-map';

package/src/fuma/mdx/toc-clerk-portable.tsx

@@ -6,12 +6,11 @@
  */
 import * as Primitive from 'fumadocs-core/toc';
 import {
-  PageTOC,
-  PageTOCPopover,
-  PageTOCPopoverContent,
-  PageTOCPopoverTrigger,
-  PageTOCTitle,
-} from 'fumadocs-ui/layouts/docs/page';
+  TOC as PageTOC,
+  TOCPopover as PageTOCPopover,
+  type TOCProps as PageTOCProps,
+  type TOCPopoverProps as PageTOCPopoverProps,
+} from 'fumadocs-ui/layouts/docs/page/slots/toc';
 import {
   type ComponentProps,
   type ReactNode,
@@ -85,14 +84,20 @@ export function PortableClerkTOC({
   className,
 }: PortableClerkTOCProps) {
   return (
-    <PageTOC className={className}>
-      {header}
-      {title ?? <PageTOCTitle />}
-      <PortableClerkTOCScrollArea>
-        <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
-      </PortableClerkTOCScrollArea>
-      {footer}
-    </PageTOC>
+    <PageTOC
+      style="clerk"
+      container={{ className }}
+      header={
+        <>
+          {header}
+          {title ?? null}
+        </>
+      }
+      footer={footer}
+      list={{
+        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
+      } as PageTOCProps['list']}
+    />
   );
 }
 
@@ -103,16 +108,14 @@ export function PortableClerkTOCPopover({
   emptyLabel = 'No headings',
 }: Omit<PortableClerkTOCProps, 'title' | 'className'>) {
   return (
-    <PageTOCPopover>
-      <PageTOCPopoverTrigger />
-      <PageTOCPopoverContent>
-        {header}
-        <PortableClerkTOCScrollArea>
-          <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
-        </PortableClerkTOCScrollArea>
-        {footer}
-      </PageTOCPopoverContent>
-    </PageTOCPopover>
+    <PageTOCPopover
+      style="clerk"
+      header={header}
+      footer={footer}
+      list={{
+        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
+      } as PageTOCPopoverProps['list']}
+    />
   );
 }
 

package/src/fuma/mdx/zia-card.tsx

@@ -22,6 +22,7 @@ export function ZiaCard({ icon, title, description, ...props }: ZiaCardProps) {
     return (
       <Link
         href={props.href!}
+        prefetch={false}
         data-card
         className={cn(
           'block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full',

package/src/fuma/mdx/zia-file.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FileIcon, FolderOpenIcon, FolderIcon } from '@windrun-huaiin/base-ui/icons'; 
 import { type HTMLAttributes, type ReactNode, useState } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
@@ -81,4 +83,4 @@ export function ZiaFolder({
       </CollapsibleContent>
     </Collapsible>
   );
-} 
+} 

package/src/fuma/server/optional-features.tsx

@@ -0,0 +1,168 @@
+import type { MDXComponents, MDXProps } from 'mdx/types';
+import type { ReactNode } from 'react';
+import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import {
+  CSSIcon,
+  CSVIcon,
+  DiffIcon,
+  HtmlIcon,
+  HttpIcon,
+  JavaIcon,
+  JsonIcon,
+  LogIcon,
+  MDXIcon,
+  RegexIcon,
+  SQLIcon,
+  SchemeIcon,
+  SquareDashedBottomCodeIcon,
+  TxtIcon,
+  XMLIcon,
+  YamlIcon,
+} from '@windrun-huaiin/base-ui/icons';
+import { baseMarkdownComponents } from '../share/markdown-component-map';
+import { Mermaid, ImageGrid, ImageZoom, MathBlock, InlineMath } from '../heavy';
+import { TrophyCard } from '../mdx/trophy-card';
+import { ZiaCard } from '../mdx/zia-card';
+import { GradientButton } from '../mdx/gradient-button';
+import { ZiaFile, ZiaFolder } from '../mdx/zia-file';
+import { SunoEmbed } from '../mdx/suno-embed';
+
+const defaultCodeLanguageIconMap: Record<string, ReactNode> = {
+  css: <CSSIcon />,
+  csv: <CSVIcon />,
+  diff: <DiffIcon />,
+  html: <HtmlIcon />,
+  http: <HttpIcon />,
+  java: <JavaIcon />,
+  json: <JsonIcon />,
+  jsonc: <SquareDashedBottomCodeIcon />,
+  log: <LogIcon />,
+  mdx: <MDXIcon />,
+  plaintext: <TxtIcon />,
+  regex: <RegexIcon />,
+  scheme: <SchemeIcon />,
+  sql: <SQLIcon />,
+  text: <TxtIcon />,
+  txt: <TxtIcon />,
+  xml: <XMLIcon />,
+  yaml: <YamlIcon />,
+  yml: <YamlIcon />,
+};
+
+function tryToMatchIcon(
+  props: Readonly<MDXProps & { 'data-language'?: string; title?: string }>,
+  iconMap: Record<string, ReactNode>,
+): ReactNode | undefined {
+  let lang: string | undefined;
+
+  const dataLanguage = props['data-language'] as string | undefined;
+
+  if (dataLanguage && dataLanguage.trim() !== '') {
+    lang = dataLanguage.trim().toLowerCase();
+  } else {
+    const title = props.title as string | undefined;
+    if (title) {
+      const titleParts = title.split('.');
+      if (titleParts.length > 1 && titleParts[0] !== '') {
+        const extension = titleParts.pop()?.toLowerCase();
+        if (extension) {
+          lang = extension;
+        }
+      }
+    }
+  }
+
+  if (lang && iconMap[lang]) {
+    return iconMap[lang];
+  }
+
+  return undefined;
+}
+
+export function createBaseMdxComponents(
+  imageFallbackSrc?: string,
+): MDXComponents {
+  return {
+    ...baseMarkdownComponents,
+    img: (props) => (
+      <ImageZoom
+        {...(props as any)}
+        fallbackSrc={imageFallbackSrc}
+      />
+    ),
+  };
+}
+
+export function createCodeMdxComponents(
+  iconMap: Record<string, ReactNode> = {},
+): MDXComponents {
+  const mergedIconMap = {
+    ...defaultCodeLanguageIconMap,
+    ...iconMap,
+  };
+
+  return {
+    pre: (props) => {
+      const customIcon = tryToMatchIcon(props as MDXProps & { 'data-language'?: string; title?: string }, mergedIconMap);
+      return (
+        <CodeBlock
+          {...props}
+          {...(customIcon && { icon: customIcon })}
+        >
+          <Pre>{props.children}</Pre>
+        </CodeBlock>
+      );
+    },
+    CodeBlock,
+    Pre,
+  };
+}
+
+export function createMathMdxComponents(): MDXComponents {
+  return {
+    MathBlock,
+    InlineMath,
+  };
+}
+
+export function createMermaidMdxComponents(
+  watermarkEnabled?: boolean,
+  watermarkText?: string,
+): MDXComponents {
+  return {
+    Mermaid: (props) => (
+      <Mermaid
+        {...props}
+        watermarkEnabled={watermarkEnabled}
+        watermarkText={watermarkText}
+      />
+    ),
+  };
+}
+
+export function createTypeTableMdxComponents(): MDXComponents {
+  return {
+    TypeTable,
+  };
+}
+
+export function createWidgetMdxComponents(
+  cdnBaseUrl?: string,
+  imageFallbackSrc?: string,
+): MDXComponents {
+  return {
+    TrophyCard,
+    ZiaCard,
+    GradientButton,
+    ZiaFile,
+    ZiaFolder,
+    SunoEmbed,
+    ImageGrid: (props) => (
+      <ImageGrid {...props} cdnBaseUrl={cdnBaseUrl} />
+    ),
+    ImageZoom: (props) => (
+      <ImageZoom {...props} fallbackSrc={imageFallbackSrc} />
+    ),
+  };
+}

package/src/fuma/server/site-mdx-components.tsx

@@ -0,0 +1,48 @@
+import type { MDXComponents } from 'mdx/types';
+import type { ReactNode } from 'react';
+import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
+import {
+  composeSiteMdxComponents,
+  createSiteFeatureComponentMap,
+  DEFAULT_SITE_MDX_FEATURES,
+} from './site-mdx-presets';
+
+export interface SiteMdxComponentsOptions {
+  imageFallbackSrc?: string;
+  cdnBaseUrl?: string;
+  watermarkEnabled?: boolean;
+  watermarkText?: string;
+  additionalComponents?: MDXComponents;
+  iconMap?: Record<string, ReactNode>;
+  features?: SiteMdxFeature[];
+}
+
+export function createSiteMdxComponents(
+  options: SiteMdxComponentsOptions,
+) {
+  const {
+    additionalComponents,
+    cdnBaseUrl,
+    features = DEFAULT_SITE_MDX_FEATURES,
+    iconMap = {},
+    imageFallbackSrc,
+    watermarkEnabled,
+    watermarkText,
+  } = options;
+  const featureMap = createSiteFeatureComponentMap({
+    cdnBaseUrl,
+    iconMap,
+    imageFallbackSrc,
+    watermarkEnabled,
+    watermarkText,
+  });
+
+  return function getMDXComponents(components?: MDXComponents): MDXComponents {
+    return composeSiteMdxComponents(
+      features,
+      featureMap,
+      additionalComponents,
+      components,
+    );
+  };
+}

package/src/fuma/server/site-mdx-presets.ts

@@ -0,0 +1,80 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import type { MDXComponents } from 'mdx/types';
+import {
+  createBaseMdxComponents,
+  createCodeMdxComponents,
+  createMathMdxComponents,
+  createMermaidMdxComponents,
+  createTypeTableMdxComponents,
+  createWidgetMdxComponents,
+} from './optional-features';
+import { SiteX } from '../site-x';
+import type { SiteMdxComponentsOptions } from './site-mdx-components';
+import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
+
+const defaultFumaUiComponents: MDXComponents = {
+  Callout,
+  File,
+  Folder,
+  Files,
+  Accordion,
+  Accordions,
+  Tab,
+  Tabs,
+};
+
+export const DEFAULT_SITE_MDX_FEATURES: SiteMdxFeature[] = [
+  'base',
+  'code',
+  'math',
+  'mermaid',
+  'type-table',
+];
+
+export function createSiteFeatureComponentMap(
+  options: SiteMdxComponentsOptions,
+) {
+  const {
+    cdnBaseUrl,
+    iconMap = {},
+    imageFallbackSrc,
+    watermarkEnabled,
+    watermarkText,
+  } = options;
+
+  return {
+    base: {
+      ...defaultFumaUiComponents,
+      SiteX,
+      ...createBaseMdxComponents(imageFallbackSrc),
+      ...createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc),
+    },
+    code: createCodeMdxComponents(iconMap),
+    math: createMathMdxComponents(),
+    mermaid: createMermaidMdxComponents(watermarkEnabled, watermarkText),
+    'type-table': createTypeTableMdxComponents(),
+  } satisfies Record<SiteMdxFeature, MDXComponents>;
+}
+
+export function composeSiteMdxComponents(
+  features: readonly SiteMdxFeature[],
+  featureMap: Record<SiteMdxFeature, MDXComponents>,
+  additionalComponents?: MDXComponents,
+  components?: MDXComponents,
+): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    ...features.reduce<MDXComponents>((acc, feature) => {
+      return {
+        ...acc,
+        ...featureMap[feature],
+      };
+    }, {}),
+    ...additionalComponents,
+    ...components,
+  };
+}

package/src/fuma/share/index.ts

@@ -0,0 +1 @@
+export * from './markdown-component-map';

package/src/fuma/{mdx → share}/markdown-component-map.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@windrun-huaiin/lib/utils';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { type ComponentType } from 'react';
-import { ImageZoom } from './image-zoom';
+import { ImageZoom } from '../heavy';
 
 export type MarkdownComponentMap = Record<string, ComponentType<any>>;