feat(docs): SEO metadata + a11y focus-visible rings (#18)

app/(home)/page.tsx

@@ -13,13 +13,13 @@ export default function HomePage() {
       <div className="flex flex-wrap items-center justify-center gap-3">
         <Link
           href="/docs"
-          className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90"
+          className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring"
         >
           Read the docs
         </Link>
         <Link
           href="https://git.moleculesai.app/molecule-ai/molecule-core"
-          className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted"
+          className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring"
         >
           View on Gitea
         </Link>

app/docs/[[...slug]]/page.tsx

@@ -41,8 +41,20 @@ export async function generateMetadata(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
+  const url = `https://doc.moleculesai.app/docs/${(params.slug ?? []).join("/")}`;
+
   return {
     title: page.data.title,
     description: page.data.description,
+    openGraph: {
+      title: `${page.data.title} | Molecule AI Docs`,
+      description: page.data.description,
+      url,
+      siteName: "Molecule AI Documentation",
+      type: "article" as const,
+    },
+    alternates: {
+      canonical: url,
+    },
   };
 }

app/layout.tsx

@@ -15,6 +15,19 @@ export const metadata = {
   description:
     'Build and run multi-agent organisations on the Molecule AI platform. Templates, plugins, channels, and the runtime that ties them together.',
   metadataBase: new URL('https://doc.moleculesai.app'),
+  openGraph: {
+    type: 'website',
+    siteName: 'Molecule AI Documentation',
+    title: 'Molecule AI Documentation',
+    description:
+      'Build and run multi-agent organisations on the Molecule AI platform. Templates, plugins, channels, and the runtime that ties them together.',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Molecule AI Documentation',
+    description:
+      'Build and run multi-agent organisations on the Molecule AI platform.',
+  },
 };
 
 export default function Layout({ children }: { children: ReactNode }) {