[Draft] react-custom-notion official document

packages/docs/app/[lang]/guide/[group]/[slug]/page.tsx

@@ -0,0 +1,102 @@
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeHighlight from "rehype-highlight";
+import { getAllDocuments, getDocumentBySlug } from "@/lib/mdx";
+import {
+  DynamicLayout,
+  MobileSidebar,
+  NavigationButton,
+  Sidebar,
+  TOC,
+} from "@/components";
+import { Metadata } from "next";
+import { generateTOC } from "@/lib/generateTOC";
+
+interface GuidePageProps {
+  params: {
+    lang: string;
+    group: string;
+    slug: string;
+  };
+}
+
+// TODO: Add URL and image
+export async function generateMetadata({
+  params,
+}: GuidePageProps): Promise<Metadata> {
+  const { lang, group, slug } = params;
+  const { title, content } = await getDocumentBySlug(lang, group, slug);
+
+  return {
+    title: `${title} | react-notion-custom Docs`,
+    description: content.slice(0, 160),
+    openGraph: {
+      title: `${title} | react-notion-custom Docs`,
+      description: content.slice(0, 160),
+      // url: "",
+    },
+    alternates: {
+      // canonical: "",
+    },
+  };
+}
+
+export default async function GuidePage({ params }: GuidePageProps) {
+  const { lang, group, slug } = params;
+
+  const { content, title, prevDocument, nextDocument } =
+    await getDocumentBySlug(lang, group, slug);
+  const allDocuments = getAllDocuments(lang);
+  const tocItems = generateTOC(content);
+
+  return (
+    <DynamicLayout
+      sidebar={
+        <Sidebar
+          documents={allDocuments}
+          currentSlug={slug}
+          currentGroup={group}
+          lang={lang}
+        />
+      }
+      mobileSidebar={
+        <MobileSidebar
+          documents={allDocuments}
+          currentSlug={slug}
+          currentGroup={group}
+          lang={lang}
+        />
+      }
+      toc={<TOC items={tocItems} />}
+    >
+      <div className="p-4 sm:p-8 md:p-12 bg-white dark:bg-black rounded-sm">
+        <p className="text-lg sm:text-xl font-bold mb-4 dark:text-white">
+          {group} &gt; {title}
+        </p>
+        <ReactMarkdown
+          className="prose prose-sm sm:prose lg:prose-lg dark:prose-invert prose-headings:dark:text-white prose-p:dark:text-gray-300 prose-strong:dark:text-white prose-code:dark:text-white prose-ul:dark:text-gray-300 prose-ol:dark:text-gray-300"
+          rehypePlugins={[rehypeRaw, rehypeHighlight]}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+      <div className="mt-8 mb-4 flex justify-between">
+        {prevDocument && (
+          <NavigationButton
+            document={prevDocument}
+            lang={lang}
+            direction="prev"
+          />
+        )}
+
+        {nextDocument && (
+          <NavigationButton
+            document={nextDocument}
+            lang={lang}
+            direction="next"
+          />
+        )}
+      </div>
+    </DynamicLayout>
+  );
+}

packages/docs/app/[lang]/page.tsx

@@ -0,0 +1,9 @@
+import MouseImageEffect from "@/components/effects/mouse-image-effect";
+
+export default function Home({
+  params: { lang },
+}: {
+  params: { lang: string };
+}) {
+  return <MouseImageEffect />;
+}

packages/docs/app/globals.css

@@ -2,26 +2,85 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+/* CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html,
+body {
+  height: 100%;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
+/* Global Styles */
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.6;
+  background-color: #f8f9fa;
+  color: #343a40;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(5deg);
   }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+.logo-image {
+  transition: transform 0.1s ease-in-out;
+}
+.logo-image:hover {
+  animation: shake 0.5s ease-in-out;
 }

packages/docs/app/layout.tsx

@@ -1,21 +1,28 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Navigation, ThemeProvider } from "@/components";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+const pretendard = localFont({
+  src: "./fonts/Pretendard-Regular.woff",
+  variable: "--font-pretendard",
   weight: "100 900",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "react-notion-custom Docs",
+  description:
+    "Comprehensive documentation for react-notion-custom library, a powerful tool for rendering Notion pages in React applications.",
+  keywords: "react, notion, custom, documentation, library, rendering",
+  openGraph: {
+    title: "react-notion-custom Documentation",
+    description:
+      "Learn how to use react-notion-custom to render Notion pages in your React apps.",
+    type: "website",
+    // TODO: Add URL and image
+    // url: "",
+    // image: "",
+  },
 };
 
 export default function RootLayout({
@@ -24,11 +31,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${pretendard.variable} font-sans`}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Navigation />
+          <main className="dark:bg-black">{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   );