@windrun-huaiin/third-ui 3.2.0

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '@lib/utils';
+import Link from 'fumadocs-core/link';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export function AirticalCards(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn('grid grid-cols-2 gap-4 @container', props.className)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export type AirticalCardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+
+  href?: string;
+  external?: boolean;
+};
+
+export function AirticalCard({ icon, title, description, ...props }: AirticalCardProps) {
+  const E = props.href ? Link : 'div';
+
+  return (
+    <E
+      {...props}
+      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',
+        props.href && 'hover:bg-fd-accent/80',
+        props.className,
+      )}
+    >
+      {icon ? (
+        <div className="not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4">
+          {icon}
+        </div>
+      ) : null}
+      <h3 className="not-prose mb-1 text-sm font-medium">{title}</h3>
+      {description ? (
+        <p className="!my-0 text-sm text-fd-muted-foreground">{description}</p>
+      ) : null}
+      {props.children ? (
+        <div className="text-sm text-fd-muted-foreground prose-no-margin">
+          {props.children}
+        </div>
+      ) : null}
+    </E>
+  );
+}

package/src/fuma/mdx/gradient-button.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Button } from "@base-ui/ui/button";
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon";
+import Link from "fumadocs-core/link";
+import React from 'react';
+
+export function GradientButton({
+  title,
+  icon,
+  href,
+  align = 'left',
+}: {
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+  href: string;
+  align?: 'left' | 'center' | 'right';
+}) {
+  // set justify class according to alignment
+  const getAlignmentClass = () => {
+    switch (align) {
+      case 'center':
+        return 'justify-center';
+      case 'right':
+        return 'justify-end';
+      default: // 'left'
+        return 'justify-start';
+    }
+  };
+
+  return (
+    <div className={`flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`}>
+      <Button
+        asChild
+        size="lg"
+        className="
+          bg-gradient-to-r 
+          from-purple-400 to-pink-500 
+          hover:from-purple-500 hover:to-pink-600
+          dark:from-purple-500 dark:to-pink-600 
+          dark:hover:from-purple-600 dark:hover:to-pink-700
+          text-white text-base font-bold shadow-lg hover:shadow-xl
+          transition-all duration-300
+          rounded-full
+        "
+      >
+        <Link href={href} target="_blank" rel="noopener noreferrer" className="no-underline hover:no-underline">
+          <span>{title}</span>
+          <span className="ml-1">
+            {icon ? 
+              React.cloneElement(icon as React.ReactElement<{ className?: string }>, { 
+                className: "h-4 w-4 text-white" 
+              }) : 
+              <icons.ArrowRight className="h-4 w-4 text-white" />
+            }
+          </span>
+        </Link>
+      </Button>
+    </div>
+    
+  );
+} 

package/src/fuma/mdx/image-grid.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { ImageZoom } from '@third-ui/fuma/mdx/image-zoom';
+
+export function ImageGrid({
+  type="url",
+  images,
+  altPrefix = '',
+  cdnBaseUrl,
+}: {
+  type: "url" | "local";
+  images: string[];
+  altPrefix?: string;
+  cdnBaseUrl?: string;
+}) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '16px',
+        justifyItems: 'center',
+        alignItems: 'center', 
+      }}
+    >
+      {images.map((img, idx) => (
+        <ImageZoom
+          key={img}
+          src={type === "url" ? `${cdnBaseUrl}/${img}` : img}
+          alt={`${altPrefix}-${idx+1}`}
+        />
+      ))}
+    </div>
+  );
+} 

package/src/fuma/mdx/image-zoom.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Image, type ImageProps } from 'fumadocs-core/framework';
+import { type ImgHTMLAttributes, useState } from 'react';
+import Zoom, { type UncontrolledProps } from 'react-medium-image-zoom';
+
+export type ImageZoomProps = ImageProps & {
+  /**
+   * Image props when zoom in
+   */
+  zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
+
+  /**
+   * Props for `react-medium-image-zoom`
+   */
+  rmiz?: UncontrolledProps;
+
+  /**
+   * placeholder image path
+   */
+  fallbackSrc?: string;
+};
+
+function getImageSrc(src: ImageProps['src']): string {
+  if (typeof src === 'string') return src;
+
+  if (typeof src === 'object') {
+    // Next.js
+    if ('default' in src)
+      return (src as { default: { src: string } }).default.src;
+    return src.src;
+  }
+
+  return '';
+}
+
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+export function ImageZoom({
+  zoomInProps,
+  children,
+  rmiz,
+  fallbackSrc = '/default.webp',
+  ...props
+}: ImageZoomProps) {
+  const [imgSrc, setImgSrc] = useState(getImageSrc(props.src));
+
+  // fallback logic
+  const handleError = () => {
+    console.warn('ImageZoom check error:', imgSrc, fallbackSrc);
+    if (imgSrc !== fallbackSrc) {
+      setImgSrc(fallbackSrc);
+    }
+  };
+
+  return (
+    <Zoom
+      zoomMargin={20}
+      wrapElement="span"
+      {...rmiz}
+      zoomImg={{
+        src: imgSrc,
+        sizes: undefined,
+        ...zoomInProps,
+        onError: handleError,
+      }}
+    >
+      {children ?? (
+        <Image
+          {...props}
+          src={imgSrc}
+          onError={handleError}
+          sizes="(max-width: 400px) 100vw, 300px"
+          style={{ width: '100%', height: 'auto', maxWidth: 300 }}
+          alt={props.alt ?? ''}
+          width={300}
+          height={225}
+        />
+      )}
+    </Zoom>
+  );
+}

package/src/fuma/mdx/index.ts

@@ -0,0 +1,8 @@
+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';
+export * from './toc-base';

package/src/fuma/mdx/mermaid.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import type { MermaidConfig } from 'mermaid';
+import { useTheme } from 'next-themes';
+import { useEffect, useId, useState } from 'react';
+
+interface MermaidProps {
+  chart: string;
+  title?: string;
+  watermarkEnabled?: boolean;
+  watermarkText?: string;
+}
+ 
+export function Mermaid({ chart, title, watermarkEnabled, watermarkText }: MermaidProps) {
+  const id = useId();
+  const [svg, setSvg] = useState('');
+  const { resolvedTheme } = useTheme();
+  
+  useEffect(() => {
+    let isMounted = true;
+    void renderChart();
+ 
+    async function renderChart() {
+      const mermaidConfig: MermaidConfig = {
+        startOnLoad: false,
+        securityLevel: 'loose',
+        fontFamily: 'inherit',
+        themeCSS: 'margin: 1.5rem auto 0;',
+        theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+      };
+ 
+      const { default: mermaid } = await import('mermaid');
+ 
+      try {
+        mermaid.initialize(mermaidConfig);
+        const { svg } = await mermaid.render(
+          id.replaceAll(':', ''),
+          chart.replaceAll('\\n', '\n')
+        );
+        let svgWithWatermark = svg;
+        if (watermarkEnabled && watermarkText) {
+          svgWithWatermark = addWatermarkToSvg(svg, watermarkText);
+        }
+        if (isMounted) setSvg(svgWithWatermark);
+      } catch (error) {
+        console.error('Error while rendering mermaid', error);
+      }
+    }
+    return () => {
+      isMounted = false;
+      setSvg('');
+    };
+  }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+ 
+  return (
+    <div>
+      <div dangerouslySetInnerHTML={{ __html: svg }} />
+      {title && (
+        <div
+          className="mt-2 flex items-center justify-center text-center text-[13px] font-italic text-[#AC62FD]"
+        >
+          <icons.Mmd className='mr-1 h-4 w-4' />
+          <span>{title}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function addWatermarkToSvg(svg: string, watermark: string) {
+  const watermarkText = `
+    <text
+      x="100%"
+      y="98%"
+      text-anchor="end"
+      font-size="12"
+      font-style="italic"
+      fill="#AC62FD"
+      opacity="0.40"
+      class="pointer-events-none"
+      dx="-8"
+      dy="-4"
+    >${watermark}</text>
+  `;
+  return svg.replace('</svg>', `${watermarkText}</svg>`);
+}

package/src/fuma/mdx/toc-base.tsx

@@ -0,0 +1,88 @@
+'use client';
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
+import Link from 'fumadocs-core/link';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { Button } from '@base-ui/ui/button';
+
+const cache = new Map<string, string>();
+
+export function LLMCopyButton({ llmApiUrl }: { llmApiUrl?: string } = {}) {
+  const [isLoading, setLoading] = useState(false);
+  const params = useParams();
+  const locale = params.locale as string;
+  const slug = params.slug as string[];
+
+  const [checked, onClick] = useCopyButton(async () => {
+    setLoading(true);
+
+    // Handle cases where slug might be undefined or empty
+    const path = (slug && Array.isArray(slug)) ? slug.join('/') : '';
+    const apiPrefix = llmApiUrl || '/api/llm-content';
+    const apiUrl = `${apiPrefix}?locale=${encodeURIComponent(locale)}&path=${encodeURIComponent(path)}`;
+    console.log('Fetching LLM content from:', apiUrl);
+
+    try {
+      const content: string =
+        cache.get(apiUrl) ?? (await fetch(apiUrl).then((res) => {
+          if (!res.ok) {
+            throw new Error(`Failed to fetch LLM content: ${res.status} ${res.statusText}`);
+          }
+          return res.text();
+        }));
+
+      cache.set(apiUrl, content);
+      await navigator.clipboard.writeText(content);
+    } catch (error) {
+      console.error("Error fetching or copying LLM content:", error);
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      loading={isLoading}
+      // force button to left align
+      className="justify-start px-0 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300"
+      onClick={onClick}
+    >
+      {checked ? (
+        <>
+          <icons.Check/>
+          Copied!
+        </>
+      ) : (
+        <>
+          <icons.Markdown/>
+          Copy page as Markdown
+        </>
+      )}
+    </Button>
+  );
+}
+
+export function EditOnGitHub({ url }: { url: string }) {
+  return (
+    <Link
+      className="flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm"
+      href={url}
+    >
+      <icons.GitHub/>
+      Edit this page on GitHub
+    </Link>
+  );
+}
+
+// New component for displaying the last updated date with an icon
+export function LastUpdatedDate({ date }: { date: string | undefined }) {
+  return (
+    <div className="flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm">
+      <icons.LastUpdated/>
+      Lastest on {date ? date : "Ages ago"}
+    </div>
+  );
+}

package/src/fuma/mdx/toc.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { EditOnGitHub, LastUpdatedDate, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
+
+interface TocFooterProps {
+  /**
+   * The last modified date of the page.
+   */
+  lastModified: string | undefined;
+  /**
+   * The path to the file for the \"Edit on GitHub\" link.
+   * This should be the relative path from the repository root, e.g., 'src/mdx/docs/your-page.mdx'.
+   */
+  editPath?: string | undefined;
+  /**
+   * Whether to show the copy button.
+   */
+  showCopy?: boolean | undefined;
+  /**
+   * GitHub base URL for edit links
+   */
+  githubBaseUrl?: string;
+}
+
+export function TocFooter({ lastModified, showCopy, editPath, githubBaseUrl }: TocFooterProps) {
+  const showEdit = githubBaseUrl && editPath;
+  
+  return (
+    <div className="flex flex-col gap-y-2 items-start m-4">
+      <LastUpdatedDate date={lastModified} />
+      {showCopy && <LLMCopyButton />}
+      {showEdit && <EditOnGitHub url={`${githubBaseUrl}${editPath}`} />}
+    </div>
+  );
+} 

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

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+
+export function TrophyCard({
+  icon,
+  title,
+  children,
+}: {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      className="
+        border-2 rounded-xl px-4 py-2
+        border-purple-200 dark:border-gray-500
+      "
+    >
+      <div className="flex items-center font-bold text-sm">
+        <span className="mr-2">{icon}</span>
+        <span>{title}</span>
+      </div>
+      {/* leading-none：line-height: 1
+      leading-tight：line-height: 1.25
+      leading-snug：line-height: 1.375
+      leading-normal：line-height: 1.5
+      leading-relaxed：line-height: 1.625
+      leading-loose：line-height: 2 */}
+      <div className="text-sm -mt-1 leading-none">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { cn } from '@lib/utils';
+import Link from 'fumadocs-core/link';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type ZiaCardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+
+  href?: string;
+  external?: boolean;
+};
+
+export function ZiaCard({ icon, title, description, ...props }: ZiaCardProps) {
+  const E = props.href ? Link : 'div';
+
+  return (
+    <E
+      {...props}
+      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',
+        props.href && 'hover:bg-fd-accent/80',
+        props.className,
+      )}
+    >
+      <div className="not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4">
+        {icon ? icon : <icons.CircleSmall />}
+      </div>
+      <h3 className="not-prose mb-1 text-sm font-medium line-clamp-2 min-h-[2.5rem]">{title}</h3>
+      {description ? (
+        <p className="!my-0 text-sm text-fd-muted-foreground">{description}</p>
+      ) : (
+        <p className="!my-0 text-sm text-fd-muted-foreground opacity-0 select-none">&nbsp;</p>
+      )}
+      {props.children ? (
+        <div className="text-sm text-fd-muted-foreground prose-no-margin">
+          {props.children}
+        </div>
+      ) : null}
+    </E>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+// Re-export all modules
+export * from './clerk';
+export * from './main';
+export * from './fuma';

package/src/lib/clerk-intl.ts

@@ -0,0 +1,13 @@
+import { enUS, zhCN } from '@clerk/localizations';
+import type { LocalizationResource } from '@clerk/types';
+
+// https://github.com/clerk/javascript/blob/main/packages/localizations/src/en-US.ts#L492
+// https://clerk.com/docs/customization/localization
+const customZH: LocalizationResource = {
+  ...zhCN,
+}
+
+export const clerkIntl = {
+  en: enUS,
+  zh: customZH,
+}

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

@@ -0,0 +1,73 @@
+import { z } from 'zod';
+import { frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';
+
+
+// Reusable schema for title
+export const createTitleSchema = () =>
+  z.string({
+    required_error: "Title is required",
+    invalid_type_error: "Title must be a string and cannot be null",
+  })
+  .trim()
+  .min(1, { message: "Title cannot be empty or consist only of whitespace" });
+
+// Reusable schema for description
+export const createDescriptionSchema = () =>
+  z.preprocess(
+    (val: any) => {
+      if (typeof val === 'string') {
+        return val.trim() === "" || val === null ? undefined : val.trim();
+      }
+      return val === null ? undefined : val;
+    },
+    z.string().optional()
+  );
+
+// Reusable schema for icon
+export const createIconSchema = () =>
+  z.preprocess(
+    (val: any) => (val === "" || val === null ? undefined : val),
+    z.string().optional()
+  );
+
+// Reusable schema for date
+export const createDateSchema = () =>
+  z.preprocess((arg: any) => {
+    if (arg instanceof Date) {
+      // Format Date object to YYYY-MM-DD string
+      const year = arg.getFullYear();
+      const month = (arg.getMonth() + 1).toString().padStart(2, '0');
+      const day = arg.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+    if (typeof arg === 'string') {
+      return arg.trim();
+    }
+    // For other types or null/undefined, let the subsequent string validation handle it
+    return arg; 
+  },
+  z.string()
+    .regex(/^\d{4}-\d{2}-\d{2}$/, "Date must be in YYYY-MM-DD format or a valid Date object")
+    .refine((val: any) => !isNaN(new Date(val).getTime()), 'Invalid date!')
+  );
+
+// common docs frontmatter  schema
+export const createCommonDocsSchema = () => frontmatterSchema.extend({
+  title: createTitleSchema(),
+  description: createDescriptionSchema(),
+  icon: createIconSchema(),
+  date: createDateSchema(),
+  author: z.string().optional(),
+  keywords: z.array(z.string()).optional(),
+});
+
+// common meta schema
+export const createCommonMetaSchema = () => metaSchema.extend({
+  description: z.string().optional(),
+});
+
+export const remarkInstallOptions = {
+  persist: {
+    id: 'package-manager',
+  },
+};

package/src/lib/fuma-search-util.ts

@@ -0,0 +1,6 @@
+import { Translations } from 'fumadocs-ui/i18n';
+
+export const fumaI18nCn: Partial<Translations> = {
+  search: 'Translated Content',
+  // other translations
+};

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './fuma-search-util';
+export * from './clerk-intl';
+export * from './fuma-schema-check-util';