diff --git a/.gitignore b/.gitignore index 5ef6a52..817acaa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,10 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# generated content +.contentlayer +.content-collections +.source + # dependencies /node_modules /.pnp diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx new file mode 100644 index 0000000..ef73501 --- /dev/null +++ b/app/(home)/layout.tsx @@ -0,0 +1,11 @@ +import type { ReactNode } from "react"; +import { HomeLayout } from "fumadocs-ui/layouts/home"; +import { baseOptions } from "@/app/layout.config"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + +
{children}
+ + ); +} diff --git a/app/page.tsx b/app/(home)/page.tsx similarity index 96% rename from app/page.tsx rename to app/(home)/page.tsx index 3a56b9e..157c272 100644 --- a/app/page.tsx +++ b/app/(home)/page.tsx @@ -13,16 +13,8 @@ import { export default function Home() { return (
-
-

- Discord Components -

-

- A collection of discord components for integrating discord UIs into - your project. -

-
+

Examples

@@ -398,7 +390,7 @@ export default function Home() {

Made with ❤️ by{" "} {" "} and{" "} ; +}) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) { + notFound(); + } + + const MDXContent = page.data.body; + + const time = await getGithubLastEdit({ + owner: "Would-You-Bot", + repo: "discord-components", + path: `content/docs/${page.path}` + }); + + return ( + + {page.data.title} + {page.data.description} + + { + return ; + } + })} + /> + + + ); +} + +function DocsCategory({ url }: { url: string }) { + return ( + + {getPageTreePeers(source.pageTree, url).map((peer) => ( + + {peer.description} + + ))} + + ); +} + +export function generateStaticParams() { + return source.generateParams(); +} + +export async function generateMetadata(props: { + params: Promise<{ slug: string[] }>; +}): Promise { + const { slug = [] } = await props.params; + const page = source.getPage(slug); + if (!page) { + notFound(); + } + + const description = + page.data.description || + "A collection of discord components for integrating discord UIs into your project."; + + const image = { + url: ["/og", ...slug, "image.png"].join("/"), + width: 1200, + height: 630 + }; + + return { + title: `${page.data.title} | Discord Components`, + description, + openGraph: { + images: [image] + }, + twitter: { + card: "summary_large_image", + images: [image] + } + }; +} diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx new file mode 100644 index 0000000..a87905c --- /dev/null +++ b/app/docs/layout.tsx @@ -0,0 +1,15 @@ +import { DocsLayout } from "fumadocs-ui/layouts/docs"; +import type { ReactNode } from "react"; +import { baseOptions } from "@/app/layout.config"; +import { source } from "@/lib/source"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/app/globals.css b/app/globals.css index a634dd4..3a999f3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,6 @@ @import "tailwindcss"; +@import "fumadocs-ui/css/neutral.css"; +@import "fumadocs-ui/css/preset.css"; @custom-variant dark (&:is(.dark *)); diff --git a/app/layout.config.tsx b/app/layout.config.tsx new file mode 100644 index 0000000..19c0b4e --- /dev/null +++ b/app/layout.config.tsx @@ -0,0 +1,33 @@ +import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; +import { Inter } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500", "600", "700"] +}); + +/** + * Shared layout configurations + * + * you can customise layouts individually from: + * Home Layout: app/(home)/layout.tsx + * Docs Layout: app/docs/layout.tsx + */ +export const baseOptions: BaseLayoutProps = { + themeSwitch: { + enabled: false, // TODO: Add better theme colors + mode: "light-dark" + }, + nav: { + title: ( + <> +

+ + ) + }, + // see https://fumadocs.dev/docs/ui/navigation/links + links: [], + githubUrl: "https://github.com/Would-You-Bot/discord-components" +}; diff --git a/app/layout.tsx b/app/layout.tsx index c0ed13b..ded2162 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,8 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import type React from "react"; import "./globals.css"; +import { RootProvider } from "fumadocs-ui/provider"; +import { Geist, Geist_Mono } from "next/font/google"; +import type { ReactNode } from "react"; +import type { Metadata, Viewport } from "next"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -13,21 +14,42 @@ const geistMono = Geist_Mono({ subsets: ["latin"] }); +export const viewport: Viewport = { + themeColor: "#059af6", + maximumScale: 5, + minimumScale: 1, + initialScale: 1 +}; + export const metadata: Metadata = { + metadataBase: new URL("https://discord-components.com"), title: "Discord Components", description: - "A collection of discord components for integrating discord UIs into your project." + "A collection of discord components for integrating discord UIs into your project.", + robots: "index, follow", + publisher: "Would You", + openGraph: { + title: "Discord Components", + description: + "A collection of discord components for integrating discord UIs into your project.", + type: "website", + url: "https://discord-components.com", + locale: "en_US" + }, + twitter: { + title: "Discord Components", + description: + "A collection of discord components for integrating discord UIs into your project." + }, + pinterest: { richPin: true } }; -export default function RootLayout({ - children -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function Layout({ children }: { children: ReactNode }) { return (