feat(docs): add integration resource links bar

src/components/docs/DocsArticlePage.astro

@@ -9,6 +9,7 @@ import { DocsTableOfContents } from '@/components/DocsTableOfContents';
 import { DocsPageDropdown } from '@/components/DocsPageDropdown';
 import { Prose } from '@/components/Prose';
 import { DocsLanding } from '@/components/docs/DocsLanding';
+import IntegrationResourceBar from '@/components/docs/IntegrationResourceBar.astro';
 import { docsLandings } from '@/components/docs/docsLandings';
 import { Icon, faPencil } from '@rivet-gg/icons';
 import { sitemap } from '@/sitemap/mod';
@@ -17,6 +18,7 @@ import { findActiveTab, findPageForHref } from '@/lib/sitemap';
 import { getContentSlugPath } from '@/lib/content-path';
 import { productAccent } from '@/lib/product-accent';
 import { getProductMetadata } from '@/sitemap/product-metadata';
+import { integrationFor } from '@/data/integrations';
 import * as mdxComponents from '@/components/mdx';
 import { jsonLdString } from '@/lib/jsonLd';
 import {
@@ -97,6 +99,9 @@ const slugPath = routeSlugOverride ?? getContentSlugPath(routeEntryId);
 const landing = docsLandings[entrySlugPath ?? ''];
 const isLanding = Boolean(landing);
 const fullPath = slugPath ? `${routePrefix}/${slugPath}/` : `${routePrefix}/`;
+const integration = productId && tabId === 'integrations' && slugPath
+	? integrationFor(productId, slugPath)
+	: undefined;
 const discovered = findActiveTab(fullPath, sitemap);
 const routeOwnedTab = productId && tabId
 	? sitemap.find((tab) => tab.href.replace(/\/$/, '') === `/${productId}/${tabId}`)
@@ -222,6 +227,7 @@ const breadcrumbSchema = {
 							)}
 							<h1>{title}</h1>
 							{description && <p>{description}</p>}
+							{integration && <IntegrationResourceBar integration={integration} />}
 							<Content components={{ ...mdxComponents, ...extraComponents }} />
 						</Prose>
 						<div class="border-t border-ink/10 mt-12 pt-6 flex flex-wrap items-center justify-between gap-4">

src/components/docs/IntegrationResourceBar.astro

@@ -0,0 +1,40 @@
+---
+import { Icon, faGithub } from '@rivet-gg/icons';
+import type { Integration } from '@/data/integrations';
+
+interface Props {
+	integration: Integration;
+}
+
+interface ResourceLink {
+	label: string;
+	href: string;
+}
+
+const { integration } = Astro.props;
+const links: ResourceLink[] = [];
+if (integration.exampleUrl) {
+	links.push({ label: 'Complete example', href: integration.exampleUrl });
+}
+links.push({ label: 'Integration source', href: integration.sourceUrl });
+---
+
+<nav
+	aria-label={`${integration.title} resources`}
+	class="not-prose my-6 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-ink/10 bg-white/55 px-4 py-3"
+>
+	<span class="text-xs font-semibold uppercase tracking-wider text-ink-faint">Resources</span>
+	<div class="flex flex-wrap items-center gap-2">
+		{links.map((link) => (
+			<a
+				href={link.href}
+				target="_blank"
+				rel="noreferrer"
+				class="inline-flex h-8 items-center gap-2 rounded-md border border-ink/15 bg-white px-3 text-sm font-medium text-ink no-underline shadow-sm transition-colors hover:border-ink/30 hover:bg-paper"
+			>
+				<Icon icon={faGithub} className="size-4 text-ink-soft" />
+				{link.label}
+			</a>
+		))}
+	</div>
+</nav>

src/data/integrations.ts

@@ -20,6 +20,8 @@ export interface Integration extends SeoOverrides {
 	category: string;
 	icon: { src: string };
 	badge?: string;
+	exampleUrl?: string;
+	sourceUrl: string;
 }
 
 const ACTORS: Integration[] = [
@@ -30,6 +32,8 @@ const ACTORS: Integration[] = [
 		category: "Agents",
 		icon: { src: "/images/vendors/flue.svg" },
 		badge: "Beta",
+		exampleUrl: "https://github.com/rivet-dev/agentos/tree/main/examples/flue",
+		sourceUrl: "https://github.com/rivet-dev/agentos/tree/main/packages/flue",
 	},
 	{
 		title: "Vercel Eve",
@@ -38,6 +42,9 @@ const ACTORS: Integration[] = [
 		category: "Agents",
 		icon: { src: "/images/vendors/eve.svg" },
 		badge: "Beta",
+		exampleUrl:
+			"https://github.com/rivet-dev/agentos/tree/main/examples/vercel-eve",
+		sourceUrl: "https://github.com/rivet-dev/agentos/tree/main/packages/eve",
 	},
 	{
 		title: "Workflow SDK",
@@ -46,13 +53,19 @@ const ACTORS: Integration[] = [
 		category: "Workflows",
 		icon: { src: "/images/vendors/workflow.svg" },
 		badge: "Beta",
+		exampleUrl:
+			"https://github.com/rivet-dev/rivet/tree/main/examples/workflow-sdk",
+		sourceUrl:
+			"https://github.com/rivet-dev/rivet/tree/main/integrations/workflow-world",
 	},
 	{
 		title: "Durable Streams",
-		description: "Real-time streams with durable, replayable history, backed by Rivet Actors.",
+		description:
+			"Real-time streams with durable, replayable history, backed by Rivet Actors.",
 		slug: "durable-streams",
 		category: "Streams",
 		icon: { src: "/images/vendors/durable-streams.svg" },
+		sourceUrl: "https://github.com/rivet-dev/rivet-durable-streams",
 	},
 ];
 
@@ -64,6 +77,8 @@ const AGENTOS: Integration[] = [
 		category: "Frameworks",
 		icon: { src: "/images/vendors/flue.svg" },
 		badge: "Beta",
+		exampleUrl: "https://github.com/rivet-dev/agentos/tree/main/examples/flue",
+		sourceUrl: "https://github.com/rivet-dev/agentos/tree/main/packages/flue",
 	},
 	{
 		title: "Vercel Eve",
@@ -72,13 +87,20 @@ const AGENTOS: Integration[] = [
 		category: "Frameworks",
 		icon: { src: "/images/vendors/eve.svg" },
 		badge: "Beta",
+		exampleUrl:
+			"https://github.com/rivet-dev/agentos/tree/main/examples/vercel-eve",
+		sourceUrl: "https://github.com/rivet-dev/agentos/tree/main/packages/eve",
 	},
 	{
 		title: "Rivet Actors",
 		description: "Run agentOS on Rivet Actors for persistence and scheduling.",
 		slug: "rivet-actors",
 		category: "Platform",
 		icon: { src: "/images/vendors/rivet.svg" },
+		exampleUrl:
+			"https://github.com/rivet-dev/agentos/tree/main/examples/quickstart-app",
+		sourceUrl:
+			"https://github.com/rivet-dev/agentos/tree/main/packages/agentos",
 	},
 ];
 
@@ -92,6 +114,15 @@ export function integrationsFor(productId: string): Integration[] {
 	return INTEGRATIONS[productId] ?? [];
 }
 
+export function integrationFor(
+	productId: string,
+	slug: string,
+): Integration | undefined {
+	return integrationsFor(productId).find(
+		(integration) => integration.slug === slug,
+	);
+}
+
 /**
  * Integrations sidebar for a product: an Overview entry, then one section per
  * category in first-seen order.

src/styles/main.css

@@ -504,7 +504,7 @@
 	flex-shrink: 0;
 	width: 1.05rem;
 	height: 1.05rem;
-	margin-top: 0.2rem;
+	margin-top: 0.375rem;
 }
 .mdx-callout__body {
 	min-width: 0;