@windrun-huaiin/third-ui 5.12.0 → 5.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/main/cta.tsx

@@ -3,6 +3,7 @@
 import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
 import { useTranslations } from 'next-intl';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function CTA({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('cta');
@@ -18,7 +19,7 @@ export function CTA({ sectionClassName }: { sectionClassName?: string }) {
           {t('title')} <span className="text-purple-400">{t('eyesOn')}</span>?
         </h2>
         <p className="text-2xl mx-auto mb-8">
-          {t('description1')}
+          {richText(t, 'description1')}
           <br />
           <span className="text-purple-400">{t('description2')}</span>
         </p>

package/src/main/faq.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslations } from 'next-intl';
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('faq');
@@ -27,7 +28,7 @@ export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')}
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="space-y-6">
         {items.map((item, idx) => {
@@ -48,7 +49,7 @@ export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
               </button>
               {isOpen && (
                 <div className="mt-4 text-gray-700 dark:text-gray-300 text-base">
-                  {item.answer}
+                  {richText(t, `items.${idx}.answer`)}
                 </div>
               )}
             </div>

package/src/main/features.tsx

@@ -4,6 +4,7 @@ import { getGlobalIcon } from '@base-ui/components/global-icon';
 import { useTranslations } from 'next-intl'
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function Features({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('features');
@@ -21,7 +22,7 @@ export function Features({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
         {featureItems.map((feature, index) => {
@@ -35,7 +36,7 @@ export function Features({ sectionClassName }: { sectionClassName?: string }) {
                 <Icon className="w-8 h-8" />
               </div>
               <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">{feature.title}</h3>
-              <p className="text-gray-700 dark:text-gray-300">{feature.description}</p>
+              <p className="text-gray-700 dark:text-gray-300">{richText(t, `items.${index}.description`)}</p>
             </div>
           )
         })}

package/src/main/gallery.tsx

@@ -21,68 +21,69 @@ export function Gallery({ sectionClassName, button }: GalleryProps) {
   const galleryItems = t.raw('prompts') as GalleryItem[];
   const defaultImgUrl = t.raw('defaultImgUrl') as string;
   const [imageErrors, setImageErrors] = useState<Set<number>>(new Set());
+  const [downloadingItems, setDownloadingItems] = useState<Set<number>>(new Set());
+  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL!;
 
   const handleDownload = async (item: GalleryItem, index: number) => {
+    // prevent duplicate clicks
+    if (downloadingItems.has(index)) {
+      return;
+    }
+
+    // set download status
+    setDownloadingItems(prev => new Set(prev).add(index));
+
     try {
-      // use fetch to force download, and DO NEED  CORS config in R2
-      const response = await fetch(item.url, {
-        method: 'GET',
-        // CORS mode declaration
-        mode: 'cors',
-      });
+      // use R2 proxy to download directly, no need to fetch
+      // convert original R2 URL to proxy URL
+      const originalUrl = new URL(item.url);
+      const filename = originalUrl.pathname.substring(1);
       
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+      // build proxy download URL
+      const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
       
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-
-      // set extension based on the actual file type
-      const contentType = response.headers.get('content-type');
+      // extract file extension from URL
+      const urlExtension = item.url.split('.').pop()?.toLowerCase();
       let extension = '.webp';
-
-      if (contentType) {
-        switch (contentType) {
-          case 'image/jpeg':
-          case 'image/jpg':
-            extension = '.jpg';
-            break;
-          case 'image/png':
-            extension = '.png';
-            break;
-          case 'image/gif':
-            extension = '.gif';
-            break;
-          case 'image/webp':
-            extension = '.webp';
-            break;
-          case 'image/svg+xml':
-            extension = '.svg';
-            break;
-          default:
-            // if cannot determine, try to extract the extension from the URL
-            const urlExtension = item.url.split('.').pop()?.toLowerCase();
-            if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
-              extension = `.${urlExtension}`;
-            }
-        }
+      if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
+        extension = `.${urlExtension}`;
       }
       const downloadPrefix = t('downloadPrefix');
+      
+      // fetch file from proxy
+      const response = await fetch(proxyUrl);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      // convert to blob
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      
+      // create download link and trigger download
       const a = document.createElement('a');
-      a.href = url;
+      a.href = blobUrl;
       a.download = `${downloadPrefix}-${index + 1}${extension}`;
       a.style.display = 'none';
       document.body.appendChild(a);
       a.click();
       
-      // clean up
+      // clean up DOM elements and blob URL
       setTimeout(() => {
-        window.URL.revokeObjectURL(url);
         document.body.removeChild(a);
+        URL.revokeObjectURL(blobUrl);
       }, 100);
+      
     } catch (error) {
       console.error('Download failed:', error);
+    } finally {
+      // clear download status
+      setDownloadingItems(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(index);
+        return newSet;
+      });
     }
   };
 
@@ -116,9 +117,19 @@ export function Gallery({ sectionClassName, button }: GalleryProps) {
             <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
               <button
                 onClick={() => handleDownload(item, index)}
-                className="bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300"
+                disabled={downloadingItems.has(index)}
+                className={cn(
+                  "p-2 rounded-full transition-all duration-300",
+                  downloadingItems.has(index)
+                    ? "bg-black/30 text-white/50"
+                    : "bg-black/50 hover:bg-black/70 text-white/80 hover:text-white"
+                )}
               >
-                <icons.Download className="h-5 w-5 text-white" />
+                {downloadingItems.has(index) ? (
+                  <icons.Loader2 className="h-5 w-5 text-white animate-spin" />
+                ) : (
+                  <icons.Download className="h-5 w-5 text-white" />
+                )}
               </button>
             </div>
           </div>
@@ -132,4 +143,3 @@ export function Gallery({ sectionClassName, button }: GalleryProps) {
     </section>
   )
 }
-

package/src/main/index.ts

@@ -15,4 +15,5 @@ export * from './nprogress-bar';
 export * from './price-plan';
 export * from './ads-alert-dialog';
 export * from './x-button'
-export * from './ai-prompt-textarea'
+export * from './ai-prompt-textarea'
+export * from './rich-text-expert'

package/src/main/rich-text-expert.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+// default tag renderers
+const defaultTagRenderers = {
+  // text Stong
+  strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+  // text Emphasis
+  em: (chunks: React.ReactNode) => <em>{chunks}</em>,
+  // text Underline
+  u: (chunks: React.ReactNode) => <u>{chunks}</u>,
+  // text Mark
+  mark: (chunks: React.ReactNode) => <mark className="bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded">{chunks}</mark>,
+  // text Delete
+  del: (chunks: React.ReactNode) => <del>{chunks}</del>,
+  // text Subscript
+  sub: (chunks: React.ReactNode) => <sub>{chunks}</sub>,
+  // text Superscript
+  sup: (chunks: React.ReactNode) => <sup>{chunks}</sup>,
+};
+
+// custom tag renderers
+type TagRenderer = (chunks: React.ReactNode) => React.ReactElement;
+type TagRenderers = Record<string, TagRenderer>;
+
+// create rich text renderer
+export function createRichTextRenderer(customRenderers?: TagRenderers) {
+  const renderers = { ...defaultTagRenderers, ...customRenderers };
+  
+  return function richText(t: any, key: string) {
+    return t.rich(key, renderers);
+  };
+}
+
+// default rich text renderer
+export const richText = createRichTextRenderer();

package/src/main/seo-content.tsx

@@ -3,6 +3,7 @@
 
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 interface Section {
   title: string;
@@ -14,28 +15,28 @@ export function SeoContent({ sectionClassName }: { sectionClassName?: string })
 
   return (
     <section id="seo" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
-      <h1 className="text-3xl md:text-4xl font-bold text-center mb-8">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
-      </h1>
+      </h2>
       <h3 className="text-center text-gray-600 dark:text-gray-400 mb-12 text-lg">
         {t('description')}
       </h3>
       <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         <div className="space-y-10">
           <p className="text-gray-600 dark:text-gray-400 text-lg">
-            {t('intro')}
+            {richText(t, 'intro')}
           </p>
           {t.raw('sections').map((section: Section, index: number) => (
             <div key={index}>
               <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
                 {section.title}
               </h2>
-              <p className="text-gray-700 dark:text-gray-300">{section.content}</p>
+              <p className="text-gray-700 dark:text-gray-300">{richText(t, `sections.${index}.content`)}</p>
             </div>
           ))}
         </div>
         <p className="mt-10 text-gray-600 dark:text-gray-400 text-lg">
-          {t('conclusion')}
+          {richText(t, 'conclusion')}
         </p>
       </div>
     </section>

package/src/main/tips.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 interface Tip {
   title: string;
@@ -24,12 +25,16 @@ export function Tips({ sectionClassName }: { sectionClassName?: string }) {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         {[leftColumn, rightColumn].map((column: Tip[], colIndex) => (
           <div key={colIndex} className="space-y-8">
-            {column.map((tip: Tip, tipIndex) => (
-              <div key={tipIndex} className="space-y-4">
-                <h3 className="text-2xl font-semibold">{tip.title}</h3>
-                <p className="">{tip.description}</p>
-              </div>
-            ))}
+            {column.map((tip: Tip, tipIndex) => {
+              // calculate the actual index in the original array
+              const actualIndex = colIndex === 0 ? tipIndex : tipIndex + midPoint;
+              return (
+                <div key={tipIndex} className="space-y-4">
+                  <h3 className="text-2xl font-semibold">{tip.title}</h3>
+                  <p className="">{richText(t, `sections.${actualIndex}.description`)}</p>
+                </div>
+              );
+            })}
           </div>
         ))}
       </div>

package/src/main/usage.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
 import { globalLucideIcons as icons, getGlobalIcon } from '@base-ui/components/global-icon'
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function Usage({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('usage');
@@ -18,7 +19,7 @@ export function Usage({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
@@ -33,7 +34,7 @@ export function Usage({ sectionClassName }: { sectionClassName?: string }) {
                   <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
                     {`${idx + 1}. ${step.title}`}
                   </h3>
-                  <p className="text-gray-700 dark:text-gray-300">{step.description}</p>
+                  <p className="text-gray-700 dark:text-gray-300">{richText(t, `steps.${idx}.description`)}</p>
                 </div>
               </div>
             )