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,15 +11,39 @@ 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">
+
+      <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="mt-4 grid gap-4 md:grid-cols-2">
+        <div className="grid gap-4 md:grid-cols-2">
           {frameworks
             .filter((framework) => framework.type.includes('backend'))
             .map((framework) => (
@@ -50,6 +75,7 @@ const ConnectBackend = ({ client }: Props) => {
           </a>
         </p>
       </div>
+    </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,15 +11,35 @@ 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.
+      <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="mt-4 grid gap-4 md:grid-cols-2">
+        <div className="grid gap-4 md:grid-cols-2">
           {frameworks
             .filter((framework) => framework.type.includes('website'))
             .map((framework) => (
@@ -50,6 +71,7 @@ const ConnectWeb = ({ client }: Props) => {
           </a>
         </p>
       </div>
+    </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',