wip: added markdown component

panel/src/components/MarkdownProse.tsx

@@ -0,0 +1,42 @@
+import { stripIndent } from '@/lib/utils';
+import Markdown, { Components } from 'react-markdown';
+import InlineCode from './InlineCode';
+import { LuExternalLink } from 'react-icons/lu';
+import { useLocation } from 'wouter';
+
+function CustomAnchor({ href, children }: { href?: string, children: React.ReactNode }) {
+    const setLocation = useLocation()[1];
+    const isExternal = href?.startsWith('http');
+    const onClick = () => {
+        if (isExternal) {
+            window.open(href, '_blank');
+        } else {
+            setLocation(href ?? '/');
+        }
+    }
+    return <button onClick={onClick} className="text-pink-600 no-underline hover:underline">
+        {children}
+        {isExternal && <LuExternalLink className="inline ml-1 mb-1" />}
+    </button>
+}
+
+// NOTE: we might not even need this
+// https://tailwindcss.com/docs/typography-plugin#advanced-topics
+const customComponents: Components = {
+    // blockquote: ({ children }) => <blockquote className="border-l-4 border-pink-600 pl-2">{children}</blockquote>,
+    code: ({ children }) => <InlineCode className="not-prose">{children}</InlineCode>,
+    pre: ({ children }) => <pre className="not-prose bg-muted p-2 rounded">{children}</pre>,
+    a: ({ children, href }) => <CustomAnchor href={href}>{children}</CustomAnchor>,
+}
+
+
+type Props = {
+    md: string;
+};
+export default function MarkdownProse({ md }: Props) {
+    return (
+        <Markdown components={customComponents} className="prose dark:prose-invert">
+            {stripIndent(md.replace(/\n/g, '  \n'))}
+        </Markdown>
+    );
+}

panel/src/pages/TestingPage.tsx

@@ -1,7 +1,44 @@
-import InputTest from "@/components/InputTest";
+import MarkdownProse from "@/components/MarkdownProse";
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/auth";
-import { useLocation } from "wouter";
+import { LuPersonStanding } from "react-icons/lu";
+
+const testMarkdown = `
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
+
+**bold**
+*italic*
+__underline__
+~~strikethrough~~
+
+list:
+- item 1
+- item 2
+- item 3
+    - item 3.1
+    - item 3.2
+
+1. item 1
+2. item 2
+3. item 3
+    1. item 3.1
+    2. item 3.2
+
+> blockquote
+
+\`\`\`js
+console.log('code block');
+\`\`\`
+
+[external link](https://google.com)
+[internal link](/server/server-log)
+
+`;
 
 export default function TestingPage() {
     const { authData, setAuthData, logout } = useAuth();
@@ -32,6 +69,18 @@ export default function TestingPage() {
             </div>
         )}
         <hr />
-        xxxxxxxxxx
+        <div className="space-x-4">
+            <Button size="sm">Lorem</Button>
+            <Button variant="secondary" size="sm">Lorem</Button>
+            <Button variant="destructive" size="sm">Lorem</Button>
+            <Button variant="outline" size="sm">Lorem</Button>
+            <Button variant="ghost" size="sm">Lorem</Button>
+            <Button variant="link" size="sm">Lorem</Button>
+            <Button variant="outline" size="icon"><LuPersonStanding /></Button>
+            <Button size="sm"><LuPersonStanding /> Player</Button>
+            <Button size="sm" disabled>Lorem</Button>
+        </div>
+        <hr />
+        <MarkdownProse md={testMarkdown} />
     </div>;
 }

panel/tailwind.config.cjs

@@ -89,5 +89,8 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require('@tailwindcss/typography'),
+  ],
 }