feat: render /integrations gallery from datasources catalog

.gitignore

@@ -5,6 +5,7 @@
 .contentlayer
 .content-collections
 redirects.json
+/public/integrations/logos/
 
 
 # test & build

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vendor/datasources"]
+	path = vendor/datasources
+	url = https://github.com/parseablehq/datasources.git

components/integrations/IntegrationGallery.tsx

@@ -0,0 +1,173 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import {
+  IconApi,
+  IconBox,
+  IconBrain,
+  IconChartBar,
+  IconCloud,
+  IconCode,
+  IconCpu,
+  IconDatabase,
+  IconFileText,
+  IconGitBranch,
+  IconPuzzle,
+  IconRobot,
+  IconServer,
+  IconShield,
+  IconStack2,
+} from '@tabler/icons-react';
+
+type Integration = {
+  id: string;
+  name: string;
+  resource: string;
+  telemetry_types: string[];
+  description: string;
+  isOtel?: boolean;
+  links: { docs: string };
+  assets?: { logo?: string | null };
+};
+
+type ResourceDef = { id: string; label: string; order: number };
+
+const resourceOrder: ResourceDef[] = [
+  { id: 'opentelemetry', label: 'OpenTelemetry', order: 1 },
+  { id: 'ebpf', label: 'eBPF', order: 2 },
+  { id: 'llm-ai-agents', label: 'LLMs & AI Agents', order: 3 },
+  { id: 'telemetry-agents', label: 'Telemetry Agents', order: 4 },
+  { id: 'databases', label: 'Databases', order: 5 },
+  { id: 'containers', label: 'Containers', order: 6 },
+  { id: 'streaming', label: 'Streaming', order: 7 },
+  { id: 'ci-cd', label: 'CI/CD', order: 8 },
+  { id: 'cloud-providers', label: 'Cloud Providers', order: 9 },
+  { id: 'security', label: 'Security', order: 10 },
+  { id: 'programming-languages', label: 'Programming Languages', order: 11 },
+];
+
+const fallbackIconByResource: Record<string, React.ReactNode> = {
+  'opentelemetry': <IconStack2 />,
+  'ebpf': <IconCpu />,
+  'llm-ai-agents': <IconRobot />,
+  'telemetry-agents': <IconChartBar />,
+  'databases': <IconDatabase />,
+  'containers': <IconBox />,
+  'streaming': <IconGitBranch />,
+  'ci-cd': <IconCode />,
+  'cloud-providers': <IconCloud />,
+  'security': <IconShield />,
+  'programming-languages': <IconFileText />,
+};
+
+const manifestPath = path.join(
+  process.cwd(),
+  'vendor',
+  'datasources',
+  'dist',
+  'integrations.json',
+);
+
+function loadIntegrations(): Integration[] | null {
+  try {
+    const raw = fs.readFileSync(manifestPath, 'utf8');
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed as Integration[];
+    if (parsed && Array.isArray(parsed.integrations)) {
+      return parsed.integrations as Integration[];
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function toInternalHref(docsUrl: string): string {
+  return docsUrl.replace(/^https?:\/\/(www\.)?parseable\.com/, '');
+}
+
+function logoSrc(logoPath: string | null | undefined): string | null {
+  if (!logoPath) return null;
+  const base = path.basename(logoPath);
+  return `/integrations/logos/${base.toLowerCase()}`;
+}
+
+function LogoIcon({ integration }: { integration: Integration }) {
+  const src = logoSrc(integration.assets?.logo);
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt=""
+        aria-hidden="true"
+        width={20}
+        height={20}
+        style={{ width: 20, height: 20, objectFit: 'contain' }}
+      />
+    );
+  }
+  return (
+    <>{fallbackIconByResource[integration.resource] ?? <IconPuzzle />}</>
+  );
+}
+
+export function IntegrationGallery() {
+  const integrations = loadIntegrations();
+
+  if (!integrations) {
+    return (
+      <div
+        style={{
+          padding: '1rem',
+          border: '1px dashed var(--color-fd-border, #ccc)',
+          borderRadius: 8,
+          fontSize: '0.875rem',
+          color: 'var(--color-fd-muted-foreground, #666)',
+        }}
+      >
+        Integrations catalog not found at
+        {' '}<code>vendor/datasources/dist/integrations.json</code>.
+        {' '}Run{' '}
+        <code>git submodule update --init --recursive</code>
+        {' '}then{' '}
+        <code>pnpm sync-catalog</code>.
+      </div>
+    );
+  }
+
+  const grouped = new Map<string, Integration[]>();
+  for (const integration of integrations) {
+    const list = grouped.get(integration.resource) ?? [];
+    list.push(integration);
+    grouped.set(integration.resource, list);
+  }
+  for (const list of grouped.values()) {
+    list.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  return (
+    <>
+      {resourceOrder.map((resource) => {
+        const items = grouped.get(resource.id);
+        if (!items || items.length === 0) return null;
+        return (
+          <section key={resource.id}>
+            <h2>{resource.label}</h2>
+            <Cards>
+              {items.map((integration) => (
+                <Card
+                  key={integration.id}
+                  title={integration.name}
+                  href={toInternalHref(integration.links.docs)}
+                  icon={<LogoIcon integration={integration} />}
+                >
+                  {integration.description}
+                </Card>
+              ))}
+            </Cards>
+          </section>
+        );
+      })}
+    </>
+  );
+}