feat: better card list

oeyoews · Oct 26, 2024 · 67765ec · 67765ec
1 parent 878ecd5
commit 67765ec
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/components/ui/accordion';
 import { sound } from './sound';
 import { WebviewMessenger } from './utils/WebViewMessenger';
+import { links as cards } from './links';
 
 // @ts-expect-error
 const vscode = acquireVsCodeApi();
@@ -31,39 +32,6 @@ function App() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [placeholder, setPlaceholder] = useState('');
 
-  const cards = [
-    {
-      title: '太微官网',
-      description: 'a non-linear personal web notebook',
-      link: 'https://tiddlywiki.com',
-      class: 'bg-green-300/15',
-    },
-    {
-      title: '太微 GitHub',
-      description: 'The TiddlyWiki5 source code',
-      link: 'https://github.com/TiddlyWiki/TiddlyWiki5',
-      class: 'bg-rose-300/15',
-    },
-    {
-      title: '太微官方论坛',
-      description: 'The official TiddlyWiki5 forum',
-      link: 'https://talk.tiddlywiki.org',
-      class: 'bg-yellow-300/15',
-    },
-    {
-      title: '中文太微文档',
-      description: 'The TiddlyWiki5 Chinese documentation',
-      link: 'https://bramchen.github.io/tw5-docs/zh-Hans',
-      class: 'bg-purple-300/15',
-    },
-    {
-      title: '中文太微教程',
-      description: 'The TiddlyWiki5 Chinese tutorial',
-      link: 'https://tw-cn.netlify.app',
-      class: 'bg-orange-300/15',
-    },
-  ];
-
   // function test() {
   //   messenger.send('ping', { text: 'Ping from Webview!' });
   //   messenger.on('pong', (data) => {
@@ -111,6 +79,15 @@ function App() {
     });
   }, []);
 
+  if (!vscode) {
+    return (
+      <div className="relative h-screen p-3 antialiased">
+        <h1 className="text-xl font-bold">UseWiki2</h1>
+        <p className="text-sm">Please use VS Code.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="relative h-screen p-3 antialiased">
       <h1 className="text-xl font-bold">UseWiki2</h1>
@@ -130,17 +107,20 @@ function App() {
             Realted Links
           </AccordionTrigger>
           <AccordionContent>
-            <div className="grid grid-cols-2 gap-3 mt-4">
+            <div className="grid grid-cols-1 min-[540px]:grid-cols-2 md:grid-cols-3 gap-3 mt-4">
               {cards.map((card) => (
                 <Card
                   className={`rounded-sm shadow-none border-none cursor-pointer ${card.class}`}
                   onClick={() => openLink(card.link)}>
                   <CardHeader className="p-3">
-                    <CardTitle className="text-blue-400">
+                    <CardTitle className="">
                       <span className="i-lucide-link text-sm mr-1 align-top"></span>
                       {card.title}
                     </CardTitle>
-                    <CardDescription className="text-gray-400 text-sm">
+                    <CardDescription
+                      className={`text-[12px] line-clamp-2 ${card.class
+                        .split(' ')
+                        .pop()}`}>
                       {card.description}
                     </CardDescription>
                   </CardHeader>
@@ -156,7 +136,7 @@ function App() {
           ref={inputRef}
           autoFocus
           onKeyDown={handleInputBoxSave}
-          rows={5}
+          rows={6}
           placeholder={placeholder}
           className="focus-visible:ring-0 border-none input-bg resize-none"
           onChange={(e) => setInputValue(e.target.value)}

diff --git a/packages/react/src/links.ts b/packages/react/src/links.ts
@@ -0,0 +1,56 @@
+type Colors =
+  | 'green'
+  | 'rose'
+  | 'yellow'
+  | 'purple'
+  | 'indigo'
+  | 'sky'
+  | 'blue';
+
+const getClass = (color: Colors) => {
+  // NOTE: tailwindcss不支持动态写法
+  const colors = {
+    green: 'bg-green-300/15 text-green-500',
+    rose: 'bg-rose-300/15 text-rose-500',
+    yellow: 'bg-yellow-300/15 text-yellow-500',
+    purple: 'bg-purple-300/15 text-purple-500',
+    indigo: 'bg-indigo-300/15 text-indigo-500',
+    sky: 'bg-sky-300/15 text-sky-500',
+    blue: 'bg-blue-300/15 text-blue-500',
+  };
+
+  return colors[color];
+};
+
+export const links = [
+  {
+    title: '太微官网',
+    description: 'A non-linear personal web notebook',
+    link: 'https://tiddlywiki.com',
+    class: getClass('green'),
+  },
+  {
+    title: '太微 GitHub',
+    description: 'The TiddlyWiki5 source code',
+    link: 'https://github.com/TiddlyWiki/TiddlyWiki5',
+    class: getClass('rose'),
+  },
+  {
+    title: '太微官方论坛',
+    description: 'The official TiddlyWiki5 forum',
+    link: 'https://talk.tiddlywiki.org',
+    class: getClass('yellow'),
+  },
+  {
+    title: '中文太微文档',
+    description: 'The TiddlyWiki5 Chinese documentation',
+    link: 'https://bramchen.github.io/tw5-docs/zh-Hans',
+    class: getClass('purple'),
+  },
+  {
+    title: '中文太微教程',
+    description: 'The TiddlyWiki5 Chinese tutorial',
+    link: 'https://tw-cn.netlify.app',
+    class: getClass('indigo'),
+  },
+];
diff --git a/packages/react/tailwind.config.cjs b/packages/react/tailwind.config.cjs
@@ -11,77 +11,77 @@ export default {
   //   preflight: true,
   // },
   theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
+    extend: {
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'transparent',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+      },
+      keyframes: {
+        'accordion-down': {
+          from: {
+            height: '0',
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+        },
+        'accordion-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: '0',
+          },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
   },
   plugins: [
     require('tailwindcss-animate'),

diff --git a/src/generated/meta.ts b/src/generated/meta.ts
@@ -4,7 +4,7 @@
 // Meta info
 export const publisher = "oeyoews"
 export const name = "usewiki2"
-export const version = "2.0.0"
+export const version = "2.1.0"
 export const displayName = "usewiki2"
 export const description = undefined
 export const extensionId = `${publisher}.${name}`