docs: 📝 Add docs about federation

components/ExperimentalWarning.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 export const ExperimentalWarning: FC = () => (
     <>
-        <div className="pointer-events-none z-50 fixed inset-x-0 bottom-0 sm:flex sm:justify-start sm:px-6 sm:pb-5 lg:px-8">
+        <aside className="pointer-events-none z-50 fixed inset-x-0 bottom-0 sm:flex sm:justify-start sm:px-6 sm:pb-5 lg:px-8">
             <div className="pointer-events-auto flex items-center justify-between gap-x-6 bg-zinc-900 sm:dark:shadow-brand-600 shadow-glow px-6 py-2.5 sm:rounded-md ring-1 ring-white/10 sm:py-3 sm:pl-4 sm:pr-3.5">
                 <p className="text-sm leading-6 text-white">
                     <strong className="font-semibold">Warning!</strong>
@@ -16,6 +16,6 @@ export const ExperimentalWarning: FC = () => (
                     This site is experimental and under active development.
                 </p>
             </div>
-        </div>
+        </aside>
     </>
 );

components/Footer.tsx

@@ -87,7 +87,12 @@ function SocialLink({
     children: ReactNode;
 }) {
     return (
-        <Link href={href} className="group">
+        <Link
+            href={href}
+            className="group"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
             <span className="sr-only">{children}</span>
             <Icon
                 icon={icon}
@@ -112,8 +117,11 @@ function SmallPrint() {
                 .
             </p>
             <div className="flex gap-4">
-                <SocialLink href="#" icon="mdi:github">
-                    Follow us on GitHub
+                <SocialLink
+                    href="https://github.com/lysand-org"
+                    icon="mdi:github"
+                >
+                    Find us on GitHub
                 </SocialLink>
             </div>
         </div>

components/Guides.tsx

@@ -1,41 +1,38 @@
+import type { ReactNode } from "react";
 import { Button } from "./Button";
 import { Heading } from "./Heading";
 
-const guides = [
-    {
-        href: "/authentication",
-        name: "Authentication",
-        description: "Learn how to authenticate your API requests.",
-    },
-];
-
-export function Guides() {
+export function Guides({ children }: { children: ReactNode }) {
     return (
         <div className="my-16 xl:max-w-none">
             <Heading level={2} id="guides">
                 Guides
             </Heading>
             <div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-4 dark:border-white/5">
-                {guides.map((guide) => (
-                    <div key={guide.href}>
-                        <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
-                            {guide.name}
-                        </h3>
-                        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
-                            {guide.description}
-                        </p>
-                        <p className="mt-4">
-                            <Button
-                                href={guide.href}
-                                variant="text"
-                                arrow="right"
-                            >
-                                Read more
-                            </Button>
-                        </p>
-                    </div>
-                ))}
+                {children}
             </div>
         </div>
     );
 }
+
+export function Guide({
+    href,
+    name,
+    description,
+}: { href: string; name: string; description: string }) {
+    return (
+        <div>
+            <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
+                {name}
+            </h3>
+            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+                {description}
+            </p>
+            <p className="mt-4">
+                <Button href={href} variant="text" arrow="right">
+                    Read more
+                </Button>
+            </p>
+        </div>
+    );
+}

components/Header.tsx

@@ -80,7 +80,10 @@ export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
                     </Link>
                 </div>
                 <div className="flex items-center gap-5">
-                    <nav className="hidden md:block">
+                    <nav
+                        className="hidden md:block"
+                        aria-label="Main navigation"
+                    >
                         <ul className="flex items-center gap-8">
                             <TopLevelNavItem href="/">API</TopLevelNavItem>
                             <TopLevelNavItem href="#">

components/MobileNavigation.tsx

@@ -3,6 +3,7 @@
 import {
     Dialog,
     DialogPanel,
+    DialogTitle,
     Transition,
     TransitionChild,
 } from "@headlessui/react";
@@ -109,6 +110,9 @@ function MobileNavigationDialog({
                 </TransitionChild>
 
                 <DialogPanel>
+                    <DialogTitle className="sr-only">
+                        Mobile navigation
+                    </DialogTitle>
                     <TransitionChild
                         enter="duration-300 ease-out"
                         enterFrom="opacity-0"

components/Navigation.tsx

@@ -250,6 +250,14 @@ export const navigation: NavGroup[] = [
             { title: "SDKs", href: "/sdks" },
             { title: "Entities", href: "/entities" },
             { title: "Signatures", href: "/signatures" },
+            { title: "Federation", href: "/federation" },
+        ],
+    },
+    {
+        title: "Federation",
+        links: [
+            { title: "HTTP", href: "/federation/http" },
+            { title: "Validation", href: "/federation/validation" },
         ],
     },
     {
@@ -270,7 +278,7 @@ export const navigation: NavGroup[] = [
 
 export function Navigation(props: ComponentPropsWithoutRef<"nav">) {
     return (
-        <nav {...props}>
+        <nav {...props} aria-label="Side navigation">
             <ul>
                 <TopLevelNavItem href="/">API</TopLevelNavItem>
                 <TopLevelNavItem href="#">Support</TopLevelNavItem>

components/Search.tsx

@@ -9,6 +9,7 @@ import {
 import {
     Dialog,
     DialogPanel,
+    DialogTitle,
     Transition,
     TransitionChild,
 } from "@headlessui/react";
@@ -412,6 +413,9 @@ function SearchDialog({
                     >
                         <DialogPanel className="mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800">
                             <div {...autocomplete.getRootProps({})}>
+                                <DialogTitle className="sr-only">
+                                    Search
+                                </DialogTitle>
                                 <form
                                     ref={formRef}
                                     {...autocomplete.getFormProps({