feat: add cards

oeyoews · Oct 24, 2024 · 7c936a9 · 7c936a9
1 parent 2e023b2
commit 7c936a9
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "0.9.1",
+  "version": "1.0.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
@@ -8,12 +8,51 @@ import {
 } from '@/components/ui/context-menu';
 import { Button } from '@/components/ui/button';
 import { Textarea } from './components/ui/textarea';
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './components/ui/card';
 
 function App() {
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [vscode, setVscode] = useState(null);
 
+  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',
+    },
+  ];
+
   useEffect(() => {
     inputRef.current?.focus();
 
@@ -24,6 +63,20 @@ function App() {
     }
   }, []);
 
+  function openLink(link: string) {
+    if (vscode) {
+      //@ts-expect-error
+      vscode.postMessage({
+        type: 'openLink',
+        data: {
+          link: link.toString(),
+        },
+      });
+    } else {
+      window.open(link.toString(), '_blank');
+    }
+  }
+
   // support ctrl enter to save
   function handleInputBoxSave(e: KeyboardEvent<HTMLTextAreaElement>) {
     if (e.ctrlKey && e.key === 'Enter') {
@@ -49,6 +102,26 @@ function App() {
           <ContextMenuItem>Coming</ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
+
+      {/* https://talks.antfu.me/2024/vue-fes-japan/15?clicks=6 */}
+      <div className="grid grid-cols-2 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">
+                <span className="i-lucide-link text-sm mr-1 align-top"></span>
+                {card.title}
+              </CardTitle>
+              <CardDescription className="text-gray-400 text-sm">
+                {card.description}
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+
       <div className="absolute inset-x-3 bottom-3 flex flex-col gap-2 p-0">
         <Textarea
           ref={inputRef}

diff --git a/packages/react/src/components/ui/card.tsx b/packages/react/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/webviews/index.ts b/src/webviews/index.ts
@@ -29,6 +29,9 @@ export class usewikiViewProvider implements vscode.WebviewViewProvider {
 
     webviewView.webview.onDidReceiveMessage(async (message) => {
       switch (message.type) {
+        case 'openLink':
+          vscode.env.openExternal(vscode.Uri.parse(message.data.link));
+          break;
         case 'openWiki':
           openWikiCmd.cli();
           break;