solana-program · datasalaryman · May 12, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
@@ -3,6 +3,7 @@
 **/node_modules
 dist
 .next
+.source
 bun.lockb
 
 **/generated/
@@ -33,6 +34,7 @@ keys/
 webapp/playwright-report/
 webapp/test-results/
 webapp/tsconfig.tsbuildinfo
+docs/tsconfig.tsbuildinfo
 
 # TypeDoc generated API docs
 clients/typescript/docs/

@@ -0,0 +1,57 @@
+import { getMDXComponents } from '@/components/mdx';
+import { source } from '@/lib/source';
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
+import type { Metadata } from 'next';
+import { notFound, redirect } from 'next/navigation';
+
+type PageProps = {
+  params: Promise<{
+    slug?: string[];
+  }>;
+};
+
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+  if (!params.slug) redirect('/docs/program');
+
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+  const params = await props.params;
+  if (!params.slug) {
+    return {
+      title: 'Program Overview',
+    };
+  }
+
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    description: page.data.description,
+    title: page.data.title,
+  };
+}
@@ -0,0 +1,12 @@
+import { source } from '@/lib/source';
+import { baseOptions } from '@/lib/layout.shared';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import type { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
+      {children}
+    </DocsLayout>
+  );
+}
@@ -0,0 +1,12 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+html {
+  scrollbar-gutter: stable;
+}
+
+html > body[data-scroll-locked] {
+  margin-right: 0px !important;
+  --removed-body-scroll-bar-size: 0px !important;
+}
@@ -0,0 +1,13 @@
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import type { ReactNode } from 'react';
+import './global.css';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="flex min-h-screen flex-col">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function HomePage() {
+  redirect('/docs/program');
+}
@@ -0,0 +1,55 @@
+type GitHubContributor = {
+  avatar_url: string;
+  contributions: number;
+  html_url: string;
+  login: string;
+};
+
+async function getContributors(): Promise<GitHubContributor[]> {
+  const response = await fetch('https://api.github.com/repos/solana-program/subscriptions/contributors', {
+    headers: {
+      Accept: 'application/vnd.github+json',
+      'X-GitHub-Api-Version': '2022-11-28',
+    },
+    next: {
+      revalidate: 60 * 60 * 24,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch contributors: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function Contributors() {
+  const contributors = await getContributors();
+
+  return (
+    <div className="not-prose mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+      {contributors.map((contributor) => (
+        <a
+          key={contributor.login}
+          href={contributor.html_url}
+          className="flex items-center gap-3 rounded-xl border bg-fd-card p-3 text-sm transition-colors hover:bg-fd-accent"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={contributor.avatar_url}
+            alt={`${contributor.login} avatar`}
+            className="h-10 w-10 rounded-full"
+            loading="lazy"
+          />
+          <span className="min-w-0">
+            <span className="block truncate font-medium">{contributor.login}</span>
+            <span className="block text-xs text-fd-muted-foreground">
+              {contributor.contributions} contributions
+            </span>
+          </span>
+        </a>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Tab, Tabs as FumadocsTabs } from 'fumadocs-ui/components/tabs';
+import type { MDXComponents } from 'mdx/types';
+import type { ComponentProps } from 'react';
+
+type TabsProps = ComponentProps<typeof FumadocsTabs> & {
+  groupId?: string;
+  persist?: boolean;
+};
+
+function Tabs(props: TabsProps) {
+  const isLanguageTabs = props.items?.some(item => item.toLowerCase() === 'typescript') &&
+    props.items?.some(item => item.toLowerCase() === 'rust');
+
+  if (!isLanguageTabs) return <FumadocsTabs {...props} />;
+
+  return <FumadocsTabs groupId="preferred-language" persist {...props} />;
+}
+
+export function getMDXComponents(components?: MDXComponents) {
+  return {
+    ...defaultMdxComponents,
+    Tab,
+    Tabs,
+    ...components,
+  } satisfies MDXComponents;
+}
+
+export const useMDXComponents = getMDXComponents;
+
+declare global {
+  type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
+}
@@ -0,0 +1,46 @@
+'use client';
+
+import mermaid from 'mermaid';
+import { useEffect, useId, useRef, useState } from 'react';
+
+mermaid.initialize({
+  securityLevel: 'strict',
+  startOnLoad: false,
+  theme: 'default',
+});
+
+export function Mermaid({ chart }: { chart: string }) {
+  const id = useId().replace(/:/g, '');
+  const ref = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function render() {
+      try {
+        setError(null);
+        const { svg } = await mermaid.render(`mermaid-${id}`, chart);
+        if (!cancelled && ref.current) ref.current.innerHTML = svg;
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to render diagram');
+      }
+    }
+
+    void render();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, id]);
+
+  if (error) {
+    return (
+      <pre className="overflow-x-auto rounded-xl border bg-fd-muted p-4 text-sm text-fd-muted-foreground">
+        {chart}
+      </pre>
+    );
+  }
+
+  return <div ref={ref} className="not-prose my-6 overflow-x-auto rounded-xl border bg-white p-4" />;
+}