@windrun-huaiin/third-ui 21.0.0 → 22.0.0

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-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>>;
 

package/src/lib/fuma-schema-check-util.ts

@@ -1,5 +1,4 @@
 import { z, ZodObject } from 'zod';
-import { frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';
 
 // Reusable schema for date
 export const createDateSchema = () =>
@@ -22,9 +21,27 @@ export const createDateSchema = () =>
     .refine((val: any) => !isNaN(new Date(val).getTime()), 'Invalid date!')
   );
 
+const baseFrontmatterSchema = z
+  .object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+  })
+  .loose();
+
+const baseMetaSchema = z
+  .object({
+    title: z.string().optional(),
+    pages: z.array(z.string()).optional(),
+    description: z.string().optional(),
+    root: z.boolean().optional(),
+    defaultOpen: z.boolean().optional(),
+    icon: z.string().optional(),
+  })
+  .loose();
+
 // common docs frontmatter  schema
-// @ts-ignore
-export const createCommonDocsSchema = (): ZodObject<any> => frontmatterSchema
+export const createCommonDocsSchema = (): ZodObject<any> => baseFrontmatterSchema
   .extend({
     date: createDateSchema(),
     author: z.string().optional(),
@@ -32,8 +49,7 @@ export const createCommonDocsSchema = (): ZodObject<any> => frontmatterSchema
   });
 
 // common meta schema
-// @ts-ignore
-export const createCommonMetaSchema = (): ZodObject<any> => metaSchema.extend({
+export const createCommonMetaSchema = (): ZodObject<any> => baseMetaSchema.extend({
   
 });
 
@@ -41,4 +57,4 @@ export const remarkInstallOptions = {
   persist: {
     id: 'package-manager',
   },
-};
+};

package/src/lib/seo-metadata.ts

@@ -0,0 +1,47 @@
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
+
+export interface CreateLocalizedSiteMetadataOptions {
+  locale: string;
+  baseUrl: string;
+  locales: readonly string[];
+  defaultLocale: string;
+  localePrefixAsNeeded: boolean;
+}
+
+export type LocalizedSiteMetadata = Pick<
+  Metadata,
+  'title' | 'description' | 'keywords' | 'alternates' | 'icons'
+>;
+
+const DEFAULT_SITE_ICONS = [
+  { rel: 'icon', type: 'image/png', sizes: '16x16', url: '/favicon-16x16.png' },
+  { rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
+  { rel: 'icon', type: 'image/ico', url: '/favicon.ico' },
+  { rel: 'apple-touch-icon', sizes: '180x180', url: '/favicon-180x180.png' },
+  { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
+];
+
+export async function createLocalizedSiteMetadata(
+  options: CreateLocalizedSiteMetadataOptions,
+): Promise<LocalizedSiteMetadata> {
+  const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+  const t = await getTranslations({ locale, namespace: 'home' });
+
+  return {
+    title: t('webTitle'),
+    description: t('webDescription'),
+    keywords: t('keywords'),
+    alternates: {
+      canonical: `${baseUrl}${getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
+      languages: Object.fromEntries(
+        locales.map((siteLocale) => [
+          siteLocale,
+          `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
+        ]),
+      ),
+    },
+    icons: DEFAULT_SITE_ICONS,
+  };
+}

package/src/main/x-button.tsx

@@ -197,7 +197,7 @@ export function XButton(props: xButtonProps) {
   return (
     <div className={cn(
       "relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0",
-      menuOpen && "z-[90]",
+      menuOpen && "z-90",
       variant === 'soft'
         ? cn(themeBgColor, themeBorderColor, "border")
         : variant === 'subtle'
@@ -251,7 +251,7 @@ export function XButton(props: xButtonProps) {
       {menuOpen && (
         <div
           ref={menuRef}
-          className={`absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`}
+          className={`absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-100 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`}
         >
           {menuItems.map((item, index) => (
             <button

package/src/styles/fuma.css

@@ -21,10 +21,6 @@
   @apply top-24!;
 }
 
-/* #nd-subnav {
-  top: 20px !important;
-} */
-
 #nd-subnav {
   @apply 
     relative!
@@ -62,9 +58,9 @@ button[aria-label="Open Search"][data-search=""] {
 
 :root {
   --fd-layout-width: 100vw;
-  --fd-banner-height: 0px;       /* 如果有 banner，可换成真实高度 */
-  --fd-nav-height: 0px;         /* 这里写你的 Header 实际高度 */
-  --fd-tocnav-height: 0px;      /* 可选：移动端 TOC 顶栏高度 */
+  --fd-banner-height: 0px;
+  --fd-header-height: 3.5rem;
+  --fd-toc-popover-height: 0px;
 }
 
 /* fuma image-zoom COPY */

package/src/styles/third-ui.css

@@ -55,10 +55,6 @@
   box-shadow: 0 0 10px var(--nprogress-bar-color, #AC62FD) !important;
 }
 
-/* @theme {
-  --fd-page-width: 1800px;
-} */
-
 /* Icon stroke colors for light/dark themes */
 :root {
   --clerk-icon-stroke-color: #616161; /* Light theme */