basic setup

Author: sdairs

apps/web/public/content/dub.md

@@ -0,0 +1,22 @@
+# Connect Dub to Tinybird
+
+1. Open the Dub UI and go to the Settings > Webhooks page.
+   
+2. Select "Create Webhook".
+
+3. In Tinybird, go to Tokens, and copy the `append` token.
+
+4. Back in Dub, paste the Events API URL as your webhook URL. Use the query parameter `name=dub` and `token=<your token>`. For example:
+
+```
+https://api.tinybird.co/v0/events?name=dub&token=TOKEN
+```
+
+5. Select the checkboxes for the events you want to send to Tinybird, and select "Create webhook".
+
+6. You're done. Dub will now push events to Tinybird via the [Events API](https://tinybird.co/docs/get-data-in/ingest-apis/events-api).
+   
+    
+## See also
+
+* [Events API](https://tinybird.co/docs/get-data-in/ingest-apis/events-api).

apps/web/public/dub_favicon.png

@@ -0,0 +1,35 @@
+"use client"
+
+import { useQueryState } from 'nuqs'
+import { useEffect } from 'react'
+
+export default function DubDashboard() {
+    const [token] = useQueryState('token')
+
+    useEffect(() => {
+        async function fetchMetrics() {
+            if (!token) return
+
+            try {
+                const [] = await Promise.all([
+                ])
+            } catch (error) {
+                console.error('Failed to fetch metrics:', error)
+            }
+        }
+
+        fetchMetrics()
+    }, [token])
+
+    return (
+        <div className="space-y-8">
+            {/* Metrics Row */}
+            <div className="grid gap-4 md:grid-cols-3">
+            </div>
+
+            {/* Charts Grid */}
+            <div className="grid gap-4 md:grid-cols-2">
+            </div>
+        </div>
+    )
+}

apps/web/src/components/tools/dub/dashboard.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Markdown } from '@/components/markdown';
+import { getMarkdownContent } from '@/lib/markdown';
+
+export default function DubReadme() {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    getMarkdownContent('dub').then(setContent);
+  }, []);
+
+  return (
+    <div className="container max-w-4xl mx-auto py-8">
+      <Markdown content={content} />
+    </div>
+  );
+}

apps/web/src/components/tools/dub/readme.tsx

@@ -127,6 +127,15 @@ export const TOOLS: Record<string, AppGridItem> = {
         icon: '👀',
         icon_url: '/sentry_favicon.ico'
     },
+    // Links
+    dub: {
+        id: 'dub',
+        ds: 'dub',
+        name: 'dub',
+        description: 'Link infrastructure',
+        icon: '👀',
+        icon_url: '/dub_favicon.png'
+    },
 };
 
 export const TOOL_IMPORTS = {
@@ -182,6 +191,10 @@ export const TOOL_IMPORTS = {
         Dashboard: dynamic(() => import('@/components/tools/pagerduty/dashboard')),
         Readme: dynamic(() => import('@/components/tools/pagerduty/readme')),
     },
+    dub: {
+        Dashboard: dynamic(() => import('@/components/tools/dub/dashboard')),
+        Readme: dynamic(() => import('@/components/tools/dub/readme')),
+    },
 } as const;
 
 export type ToolId = keyof typeof TOOL_IMPORTS;

apps/web/src/lib/constants.ts

@@ -0,0 +1,13 @@
+TOKEN "append" APPEND
+TOKEN "read" READ
+
+TAGS "dub"
+
+SCHEMA >
+    `event_time` DateTime64(3) `json:$.tinybirdIngestTime` DEFAULT now(),
+    `event_type` String `json:$.type` DEFAULT 'unknown',
+    `event` JSON `json:$` DEFAULT '{}'
+
+ENGINE "MergeTree"
+ENGINE_PARTITION_KEY "toYYYYMM(event_time)"
+ENGINE_SORTING_KEY "event_time"