docs: refactor showcase page

Author: hughfenghen

doc-site/docs/showcase/ShowcaseCards.tsx

@@ -7,40 +7,46 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ name, cover, description, link }) => {
   return (
-    <a href={link} target="_blank" rel="noopener noreferrer">
-      <div className="w-72 rounded-lg shadow-md bg-white dark:bg-slate-700 hover:scale-105 transition-transform duration-300">
-        <img src={cover} className="w-full h-42 object-cover" />
-        <div className="h-32 p-4 flex flex-col">
-          <p className="text-xl font-semibold text-blue-600 dark:text-blue-200">
-            {name}
-          </p>
-          <p className="mt-1 text-gray-600 dark:text-white line-clamp-3">
-            {description}
-          </p>
-        </div>
+    <div className="w-72 rounded-lg shadow-md bg-white dark:bg-slate-700 hover:scale-105 transition-transform duration-300">
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        <img src={cover} className="w-full h-44 object-cover" />
+      </a>
+      <div className="h-32 p-4 flex flex-col">
+        <p className="text-xl font-semibold dark:text-blue-200">{name}</p>
+        <p className="mt-1 text-gray-600 dark:text-white line-clamp-3">
+          {description}
+        </p>
       </div>
-    </a>
+    </div>
   );
 };
 
 interface ShowcaseCardsProps {
-  cases: CardProps[];
+  data: {
+    tips: string;
+    list: CardProps[];
+  };
 }
 
-const ShowcaseCards: React.FC<ShowcaseCardsProps> = ({ cases }) => {
+const ShowcaseCards: React.FC<ShowcaseCardsProps> = ({
+  data: { list, tips },
+}) => {
   return (
-    <div className="flex flex-wrap">
-      {cases?.map((item, index) => (
-        <div key={index} className="mx-8 my-6">
-          <Card
-            name={item.name}
-            cover={item.cover}
-            description={item.description}
-            link={item.link}
-          />
-        </div>
-      ))}
-    </div>
+    <>
+      <div className="text-center italic">{tips}</div>
+      <div className="flex flex-wrap">
+        {list?.map((item, index) => (
+          <div key={index} className="mx-8 my-6">
+            <Card
+              name={item.name}
+              cover={item.cover}
+              description={item.description}
+              link={item.link}
+            />
+          </div>
+        ))}
+      </div>
+    </>
   );
 };
 

doc-site/docs/showcase/data.en-US.ts

@@ -1,10 +1,13 @@
-export default [
-  {
-    name: 'Melody Canvas',
-    cover:
-      'https://raw.githubusercontent.com/RylanBot/melody-canvas/refs/heads/main/public/image/preview.png',
-    description:
-      'An audio visualization editor that supports customizable effects and uses WebAV for video export.',
-    link: 'https://github.com/RylanBot/melody-canvas',
-  },
-];
+export default {
+  tips: 'Projects utilizing WebAV can submit their work via issues for recommendation—open-source projects are free; commercial products should contact the author to discuss sponsorship fees.',
+  list: [
+    {
+      name: 'Melody Canvas',
+      cover:
+        'https://raw.githubusercontent.com/RylanBot/melody-canvas/refs/heads/main/public/image/preview.png',
+      description:
+        'An audio visualization editor that supports customizable effects and uses WebAV for video export.',
+      link: 'https://github.com/RylanBot/melody-canvas',
+    },
+  ],
+};

doc-site/docs/showcase/data.ts

@@ -1,10 +1,13 @@
-export default [
-  {
-    name: 'Melody Canvas',
-    cover:
-      'https://raw.githubusercontent.com/RylanBot/melody-canvas/refs/heads/main/public/image/preview.png',
-    description:
-      '音频可视化编辑器，支持自定义多种属性，采用 WebAV 导出视频效果。',
-    link: 'https://github.com/RylanBot/melody-canvas',
-  },
-];
+export default {
+  tips: '使用了 WebAV 的项目可创建 Issue 投稿推荐自己的作品，开源项目免费，商业产品请联系作者详聊赞助费。',
+  list: [
+    {
+      name: 'Melody Canvas',
+      cover:
+        'https://raw.githubusercontent.com/RylanBot/melody-canvas/refs/heads/main/public/image/preview.png',
+      description:
+        '音频可视化编辑器，支持自定义多种属性，采用 WebAV 导出视频效果。',
+      link: 'https://github.com/RylanBot/melody-canvas',
+    },
+  ],
+};

doc-site/docs/showcase/index.en-US.md

@@ -12,5 +12,5 @@ sidebar: false
 import ShowcaseCards from './ShowcaseCards.tsx';
 import data from './data.en-US.ts';
 
-export default () => <ShowcaseCards cases={data} />;
+export default () => <ShowcaseCards data={data} />;
 ```

doc-site/docs/showcase/index.md

@@ -12,5 +12,5 @@ sidebar: false
 import ShowcaseCards from './ShowcaseCards.tsx';
 import data from './data.ts';
 
-export default () => <ShowcaseCards cases={data} />;
+export default () => <ShowcaseCards data={data} />;
 ```