improve(dashboard): add basic code snippets for script tag and curl on onboarding

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx

@@ -1,6 +1,7 @@
 import { pushModal } from '@/modals';
 import { ServerIcon } from 'lucide-react';
 
+import Syntax from '@/components/syntax';
 import type { IServiceClient } from '@openpanel/db';
 import { frameworks } from '@openpanel/sdk-info';
 
@@ -10,45 +11,70 @@ type Props = {
 
 const ConnectBackend = ({ client }: Props) => {
   return (
-    <div className="rounded-lg border p-4 md:p-6">
+    <div className="col gap-4 rounded-lg border p-4 md:p-6">
       <div className="flex items-center gap-2 text-2xl capitalize">
         <ServerIcon />
         Backend
       </div>
-      <p className="mt-2  text-muted-foreground">
-        Pick a framework below to get started.
-      </p>
-      <div className="mt-4 grid gap-4 md:grid-cols-2">
-        {frameworks
-          .filter((framework) => framework.type.includes('backend'))
-          .map((framework) => (
-            <button
-              type="button"
-              onClick={() =>
-                pushModal('Instructions', {
-                  framework,
-                  client,
-                })
-              }
-              className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
-              key={framework.name}
-            >
-              <div className="h-10 w-10 rounded-md bg-def-200 p-2">
-                <framework.IconComponent className="h-full w-full" />
-              </div>
-              <div className="flex-1 font-semibold">{framework.name}</div>
-            </button>
-          ))}
+
+      <div>
+        <div className="text-lg font-medium mb-2">
+          Try with a basic curl command
+        </div>
+        <Syntax
+          language="bash"
+          className="border"
+          code={`curl -X POST ${process.env.NEXT_PUBLIC_API_URL}/track \\
+-H "Content-Type: application/json" \\
+-H "openpanel-client-id: ${client?.id}" \\
+-H "openpanel-client-secret: ${client?.secret}" \\
+-d '{
+  "type": "track",
+  "payload": {
+    "name": "test_event",
+    "properties": {
+      "test": "property"
+    }
+  }
+}'`}
+        />
+      </div>
+      <div>
+        <p className="text-muted-foreground mb-2">
+          Pick a framework below to get started.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          {frameworks
+            .filter((framework) => framework.type.includes('backend'))
+            .map((framework) => (
+              <button
+                type="button"
+                onClick={() =>
+                  pushModal('Instructions', {
+                    framework,
+                    client,
+                  })
+                }
+                className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+                key={framework.name}
+              >
+                <div className="h-10 w-10 rounded-md bg-def-200 p-2">
+                  <framework.IconComponent className="h-full w-full" />
+                </div>
+                <div className="flex-1 font-semibold">{framework.name}</div>
+              </button>
+            ))}
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Missing a framework?{' '}
+          <a
+            href="mailto:hello@openpanel.dev"
+            className="text-foreground underline"
+          >
+            Let us know!
+          </a>
+        </p>
       </div>
-      <p className="mt-2 text-sm text-muted-foreground">
-        Missing a framework?{' '}
-        <a
-          href="mailto:hello@openpanel.dev"
-          className="text-foreground underline"
-        >
-          Let us know!
-        </a>
-      </p>
     </div>
   );
 };

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx

@@ -1,6 +1,7 @@
 import { pushModal } from '@/modals';
 import { MonitorIcon } from 'lucide-react';
 
+import Syntax from '@/components/syntax';
 import type { IServiceClient } from '@openpanel/db';
 import { frameworks } from '@openpanel/sdk-info';
 
@@ -10,45 +11,66 @@ type Props = {
 
 const ConnectWeb = ({ client }: Props) => {
   return (
-    <div className="rounded-lg border p-4 md:p-6">
+    <div className="rounded-lg border p-4 md:p-6 col gap-4">
       <div className="flex items-center gap-2 text-2xl capitalize">
         <MonitorIcon />
         Website
       </div>
-      <p className="mt-2  text-muted-foreground">
-        Pick a framework below to get started.
-      </p>
-      <div className="mt-4 grid gap-4 md:grid-cols-2">
-        {frameworks
-          .filter((framework) => framework.type.includes('website'))
-          .map((framework) => (
-            <button
-              type="button"
-              onClick={() =>
-                pushModal('Instructions', {
-                  framework,
-                  client,
-                })
-              }
-              className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
-              key={framework.name}
-            >
-              <div className="h-10 w-10 rounded-md bg-def-200 p-2">
-                <framework.IconComponent className="h-full w-full" />
-              </div>
-              <div className="flex-1 font-semibold">{framework.name}</div>
-            </button>
-          ))}
+
+      <div>
+        <div className="text-lg font-medium mb-2">
+          Paste the script to your website
+        </div>
+        <Syntax
+          className="border"
+          code={`<script>
+  window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+  window.op('init', {
+    clientId: '${client?.id ?? 'YOUR_CLIENT_ID'}',
+    trackScreenViews: true,
+    trackOutgoingLinks: true,
+    trackAttributes: true,
+  });
+</script>
+<script src="https://openpanel.dev/op1.js" defer async></script>`}
+        />
+      </div>
+      <div>
+        <p className="text-muted-foreground mb-2">
+          Or pick a framework below to get started.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          {frameworks
+            .filter((framework) => framework.type.includes('website'))
+            .map((framework) => (
+              <button
+                type="button"
+                onClick={() =>
+                  pushModal('Instructions', {
+                    framework,
+                    client,
+                  })
+                }
+                className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+                key={framework.name}
+              >
+                <div className="h-10 w-10 rounded-md bg-def-200 p-2">
+                  <framework.IconComponent className="h-full w-full" />
+                </div>
+                <div className="flex-1 font-semibold">{framework.name}</div>
+              </button>
+            ))}
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Missing a framework?{' '}
+          <a
+            href="mailto:hello@openpanel.dev"
+            className="text-foreground underline"
+          >
+            Let us know!
+          </a>
+        </p>
       </div>
-      <p className="mt-2 text-sm text-muted-foreground">
-        Missing a framework?{' '}
-        <a
-          href="mailto:hello@openpanel.dev"
-          className="text-foreground underline"
-        >
-          Let us know!
-        </a>
-      </p>
     </div>
   );
 };

apps/dashboard/src/components/syntax.tsx

@@ -1,20 +1,29 @@
 'use client';
 
 import { clipboard } from '@/utils/clipboard';
+import { cn } from '@/utils/cn';
 import { CopyIcon } from 'lucide-react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash';
 import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
 import docco from 'react-syntax-highlighter/dist/cjs/styles/hljs/vs2015';
 
 SyntaxHighlighter.registerLanguage('typescript', ts);
+SyntaxHighlighter.registerLanguage('bash', bash);
 
 interface SyntaxProps {
   code: string;
+  className?: string;
+  language?: 'typescript' | 'bash';
 }
 
-export default function Syntax({ code }: SyntaxProps) {
+export default function Syntax({
+  code,
+  className,
+  language = 'typescript',
+}: SyntaxProps) {
   return (
-    <div className="group relative">
+    <div className={cn('group relative rounded-lg', className)}>
       <button
         type="button"
         className="absolute right-1 top-1 rounded bg-card p-2 opacity-0 transition-opacity group-hover:opacity-100 row items-center gap-2"
@@ -28,8 +37,9 @@ export default function Syntax({ code }: SyntaxProps) {
       <SyntaxHighlighter
         // wrapLongLines
         style={docco}
+        language={language}
         customStyle={{
-          borderRadius: '0.5rem',
+          borderRadius: 'var(--radius)',
           padding: '1rem',
           paddingTop: '0.5rem',
           paddingBottom: '0.5rem',