One-click backups for AT Protocol
1import { Footer, Layout, Navbar } from "nextra-theme-docs";
2import { Banner, Head } from "nextra/components";
3import { getPageMap } from "nextra/page-map";
4import "nextra-theme-docs/style.css";
5import "./app.css";
6import Image from "next/image";
7import Link from "next/link";
8import { Metadata } from "next";
9import { Bluesky, Tangled } from "@/components/icons";
10
11export const metadata: Metadata = {
12 description: "One-click backup for Bluesky",
13 metadataBase: new URL("https://atbackup.pages.dev"),
14 keywords: ["Bluesky", "AT Backup", "Backup"],
15 generator: "Next.js",
16 applicationName: "AT Backup",
17 appleWebApp: {
18 title: "AT Backup",
19 },
20 title: {
21 default: "AT Backup – One-click backup for Bluesky",
22 template: "%s | AT Backup",
23 },
24 openGraph: {
25 // https://github.com/vercel/next.js/discussions/50189#discussioncomment-10826632
26 url: "./",
27 siteName: "AT Backup",
28 locale: "en_US",
29 type: "website",
30 },
31 other: {
32 "msapplication-TileColor": "#fff",
33 },
34 alternates: {
35 // https://github.com/vercel/next.js/discussions/50189#discussioncomment-10826632
36 canonical: "./",
37 },
38};
39
40const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>;
41const navbar = (
42 <Navbar
43 logo={
44 <div className="flex items-center gap-2">
45 <Image src="/icon.png" alt="ATBackup Icon" width={24} height={24} />
46 <span>AT Backup</span>
47 </div>
48 }
49 projectLink="https://github.com/turtlepaw/atproto-backup"
50 // ... Your additional navbar options
51 />
52);
53const footer = (
54 <Footer>
55 <div className="flex items-center justify-between w-full">
56 <span />
57 <div className="flex flex-row gap-2">
58 <Link
59 href="https://tangled.org/did:plc:5fzwpxt3rctfetyqpbigvgic/atbackup"
60 className="hover:opacity-70 transition-opacity"
61 target="_blank"
62 rel="noopener noreferrer"
63 >
64 <Tangled className="w-6 h-6 text-black dark:text-white" />
65 </Link>
66 <Link
67 href="https://bsky.app/profile/atbackup.pages.dev"
68 className="hover:opacity-70 transition-opacity"
69 target="_blank"
70 rel="noopener noreferrer"
71 >
72 <Bluesky className="w-6 h-6 text-black dark:text-white" />
73 </Link>
74 </div>
75 </div>
76 </Footer>
77);
78
79export default async function RootLayout({
80 children,
81}: React.PropsWithChildren) {
82 return (
83 <html
84 // Not required, but good for SEO
85 lang="en"
86 // Required to be set
87 dir="ltr"
88 // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
89 suppressHydrationWarning
90 >
91 <Head
92 // ... Your additional head options
93 >
94 {/* Your additional tags should be passed as `children` of `<Head>` element */}
95 </Head>
96 <body>
97 <Layout
98 //banner={banner}
99 navbar={navbar}
100 pageMap={await getPageMap()}
101 docsRepositoryBase="https://github.com/turtlepaw/atproto-backup/tree/main/docs"
102 footer={footer}
103 // ... Your additional layout options
104 >
105 {children}
106 </Layout>
107 </body>
108 </html>
109 );
110}