Merge pull request #394 from RylanBot/feat/showcase

feat: add a showcase page

Author: hughfenghen

doc-site/docs/showcase/ShowcaseCards.tsx

@@ -0,0 +1,47 @@
+interface CardProps {
+  name: string;
+  cover: string;
+  description: string;
+  link: string;
+}
+
+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>
+    </a>
+  );
+};
+
+interface ShowcaseCardsProps {
+  cases: CardProps[];
+}
+
+const ShowcaseCards: React.FC<ShowcaseCardsProps> = ({ cases }) => {
+  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>
+  );
+};
+
+export default ShowcaseCards;

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

@@ -0,0 +1,10 @@
+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',
+  },
+];

doc-site/docs/showcase/data.ts

@@ -0,0 +1,10 @@
+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',
+  },
+];

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

@@ -0,0 +1,16 @@
+---
+nav:
+  title: Showcase
+  order: 5
+sidebar: false
+---
+
+```tsx
+/**
+ * inline: true
+ */
+import ShowcaseCards from './ShowcaseCards.tsx';
+import data from './data.en-US.ts';
+
+export default () => <ShowcaseCards cases={data} />;
+```

doc-site/docs/showcase/index.md

@@ -0,0 +1,16 @@
+---
+nav:
+  title: 案例
+  order: 5
+sidebar: false
+---
+
+```tsx
+/**
+ * inline: true
+ */
+import ShowcaseCards from './ShowcaseCards.tsx';
+import data from './data.ts';
+
+export default () => <ShowcaseCards cases={data} />;
+```

doc-site/tailwind.config.js

@@ -1,8 +1,7 @@
 module.exports = {
   theme: {},
+  darkMode: ['selector', '[data-prefers-color="dark"]'],
   variants: {},
   plugins: [],
-  content: [
-    './docs/**/*.{tsx,md}',
-  ],
-}
+  content: ['./docs/**/*.{tsx,md}'],
+};

doc-site/tailwind.css

@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;