fix: build issues

docs/app/_meta.tsx

···
+export default {
+  index: {
+    type: "page",
+    display: "hidden",
+  },
+  auth: {
+    type: "page",
+    display: "hidden",
+  },
+  docs: {
+    type: "page",
+    title: "Documentation",
+  },
+};

docs/app/layout.tsx

···
 import "./app.css";
 import Image from "next/image";
 import Link from "next/link";
+import { Metadata } from "next";
 
-export const metadata = {
-  // Define your metadata here
-  // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+export const metadata: Metadata = {
+  description: "One-click backup for Bluesky",
+  metadataBase: new URL("https://atbackup.pages.dev"),
+  keywords: ["Bluesky", "AT Backup", "Backup"],
+  generator: "Next.js",
+  applicationName: "AT Backup",
+  appleWebApp: {
+    title: "AT Backup",
+  },
+  title: {
+    default: "AT Backup – One-click backup for Bluesky",
+    template: "%s | AT Backup",
+  },
+  openGraph: {
+    // https://github.com/vercel/next.js/discussions/50189#discussioncomment-10826632
+    url: "./",
+    siteName: "AT Backup",
+    locale: "en_US",
+    type: "website",
+  },
+  other: {
+    "msapplication-TileColor": "#fff",
+  },
+  alternates: {
+    // https://github.com/vercel/next.js/discussions/50189#discussioncomment-10826632
+    canonical: "./",
+  },
 };
 
 const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>;
···
         <span>AT Backup</span>
       </div>
     }
+    projectLink="https://github.com/turtlepaw/atproto-backup"
     // ... Your additional navbar options
   />
 );

docs/app/page.tsx

···
     };
   }, []);
 
+  const Component = playing ? Pause : Play;
+
   return (
     <div
       className={`relative flex flex-col items-center ${className}`}
···
       />
       <button
         onClick={togglePlay}
-        className="absolute bottom-3 right-3 p-3 bg-black/15 border-[1px] border-white/10 backdrop-blur-sm rounded-[100rem] hover:bg-black/5 transition cursor-pointer"
+        className="absolute bottom-3 right-3 p-2 bg-black/80 border-[1px] border-white/10 backdrop-blur-sm rounded-[100rem] hover:bg-black/50 transition cursor-pointer"
         aria-label={playing ? "Pause video" : "Play video"}
         style={{ pointerEvents: "auto" }}
       >
-        {playing ? <Pause /> : <Play />}
+        <Component className="text-white" width={20} height={20} />
       </button>
     </div>
   );

docs/content/index.mdx

···
+# Welcome to the docs

docs/next.config.mjs

···
 
 // Set up Nextra with its configuration
 const withNextra = nextra({
-  // ... Add Nextra-specific options here
+  contentDirBasePath: "/docs",
 });
 
 // Export the final Next.js config with Nextra included