feat: add more document

src/app/docs/connect-turso/page.mdx

@@ -0,0 +1,30 @@
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+  title: "Connect to Turso using LibSQL Studio - The Best GUI Client for Turso",
+};
+
+<DocContent title="Connect to Turso" group="Connecting">
+
+LibSQL Studio is an excellent GUI for working with the Turso database. Here is
+a step-by-step guide on how to connect your Turso database using LibSQL
+Studio.
+
+## Generate Token
+
+To connect to the Turso database, you need to generate a database token. Follow these steps via the Turso dashboard:
+
+1. Go to the Turso Database section.
+2. Navigate to the Database menu.
+3. Click on **"Get Token"** on the right side of the database you want to connect.
+4. Click **"Generate Token"** and then copy the token.
+
+## Connect
+
+Open LibSQL Studio
+
+1. Click **"New Connection"** and choose **"Turso"**.
+2. Enter your database URL and the token you generated earlier.
+3. Click **"Connect."**
+
+</DocContent>

src/app/docs/layout.tsx

@@ -0,0 +1,45 @@
+import { DocLayout } from "@/components/mdx/docs";
+
+const TableContent = [
+  {
+    title: "LibSQL Studio",
+  },
+  {
+    title: "Connecting",
+    sub: [
+      {
+        title: "Connect to Turso",
+        href: "/docs/connect-turso",
+      },
+      {
+        title: "Connect to rqlite",
+        href: "/learn/sqlite/introduction",
+      },
+      {
+        title: "Connect to Valtown",
+        href: "/learn/sqlite/introduction",
+      },
+    ],
+  },
+  {
+    title: "Other",
+    sub: [
+      {
+        title: "Self Hosting",
+        href: "/learn/sqlite/indexing",
+      },
+      {
+        title: "Temporary Session",
+        href: "/docs/temporary-session",
+      },
+    ],
+  },
+];
+
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <DocLayout content={TableContent} title="Document">
+      {children}
+    </DocLayout>
+  );
+}

src/app/docs/page.mdx

@@ -0,0 +1 @@
+This is MDX

src/app/docs/temporary-session/page.mdx

@@ -0,0 +1,11 @@
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+  title: "",
+};
+
+<DocContent title="Temporary Session" group="Other">
+
+Blank Page
+
+</DocContent>

src/app/globals.css

@@ -219,3 +219,29 @@
 .libsql-removed-row td {
   @apply bg-red-200;
 }
+
+/*
+For Markdown Side
+*/
+.mdx-content {
+  @apply leading-7;
+}
+
+.mdx-content h1 {
+  @apply text-3xl;
+}
+
+.mdx-content h2 {
+  @apply text-2xl my-4 pb-2 border-b font-bold;
+}
+
+.mdx-content h3 {
+  @apply text-xl my-4 pb-2 border-b font-bold;
+}
+
+.mdx-content ul {
+}
+
+.mdx-content ol {
+  @apply list-decimal pl-8 my-4;
+}

src/components/mdx/docs-navigation.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
+import { LucideAlignJustify } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { DocTableContent } from "./docs";
+
+export function DocNavigation({
+  content,
+  title,
+}: {
+  content: DocTableContent;
+  title?: string;
+}) {
+  "use client";
+
+  const pathname = usePathname();
+
+  const sideMenu = (
+    <div className="flex flex-col gap-2 p-4 text-sm">
+      {content.map((contentGroup) => {
+        return (
+          <div key={contentGroup.title}>
+            <div>{contentGroup.title}</div>
+            {contentGroup.sub && (
+              <ul className="my-1">
+                {contentGroup.sub.map((content) => {
+                  return (
+                    <li
+                      key={content.title}
+                      className={cn(
+                        "border-l border-gray-200 pl-4 py-1.5",
+                        pathname === content.href ? "font-bold" : ""
+                      )}
+                    >
+                      <Link href={content.href ?? ""}>{content.title}</Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <>
+      <div className="hidden md:block fixed left-0 top-0 bottom-0 w-[300px] border-r overflow-y-auto">
+        <div className="p-4 border-b">
+          <div className="text-sm">
+            LibSQL<strong>Studio</strong>
+          </div>
+          <div className="text-xl font-semibold">{title}</div>
+        </div>
+        {sideMenu}
+      </div>
+      <div className="md:hidden p-2 border-b flex">
+        <div className="flex-grow px-2 font-bold">{title}</div>
+        <Sheet>
+          <SheetTrigger>
+            <div className="px-2">
+              <LucideAlignJustify />
+            </div>
+          </SheetTrigger>
+          <SheetContent className="px-0">{sideMenu}</SheetContent>
+        </Sheet>
+      </div>
+    </>
+  );
+}

src/components/mdx/docs.tsx

@@ -3,87 +3,45 @@ import Link from "next/link";
 import { PropsWithChildren } from "react";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { LucideAlignJustify } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { DocNavigation } from "./docs-navigation";
 
 interface DocTableContentGroup {
   title: string;
   href?: string;
   sub?: DocTableContentGroup[];
 }
 
-type DocTableContent = DocTableContentGroup[];
+export type DocTableContent = DocTableContentGroup[];
 
 export function DocContent({
   children,
   title,
-}: PropsWithChildren<{ title: string }>) {
+  group,
+}: PropsWithChildren<{ title: string; group?: string }>) {
   return (
     <>
-      <div className="-mx-4 px-4 pb-4 border-b text-2xl font-semibold mb-4">
-        <h1 className="max-w-[800px] mx-auto">{title}</h1>
-      </div>
-      <article className="max-w-[800px] mx-auto">{children}</article>
-    </>
-  );
-}
-
-function DocNavigation({ content }: { content: DocTableContent }) {
-  const sideMenu = (
-    <div className="flex flex-col gap-2 p-4 text-sm">
-      {content.map((contentGroup) => {
-        return (
-          <div key={contentGroup.title}>
-            <div>{contentGroup.title}</div>
-            {contentGroup.sub && (
-              <ul className="my-1">
-                {contentGroup.sub.map((content) => {
-                  return (
-                    <li
-                      key={content.title}
-                      className={cn("border-l border-gray-200 pl-4 py-1.5")}
-                    >
-                      <Link href={content.href ?? ""}>{content.title}</Link>
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-
-  return (
-    <>
-      <div className="hidden md:block fixed left-0 top-0 bottom-0 w-[300px] bg-white border-r overflow-y-auto">
-        {sideMenu}
-      </div>
-      <div className="md:hidden p-2 border-b flex">
-        <div className="flex-grow px-2">
-          LibSQL<strong>Studio</strong>
+      <div className="-mx-4 px-4 pb-4 border-b mb-4">
+        <div className="max-w-[800px] mx-auto">
+          {group && <span className="text-sm">{group}</span>}
+          <h1 className="text-2xl font-semibold">{title}</h1>
         </div>
-        <Sheet>
-          <SheetTrigger>
-            <div className="px-2">
-              <LucideAlignJustify />
-            </div>
-          </SheetTrigger>
-          <SheetContent className="px-0">{sideMenu}</SheetContent>
-        </Sheet>
       </div>
+      <article className="max-w-[800px] mx-auto">{children}</article>
     </>
   );
 }
 
 export function DocLayout({
   children,
   content,
-}: PropsWithChildren<{ content: DocTableContent }>) {
+  title,
+}: PropsWithChildren<{ content: DocTableContent; title?: string }>) {
   return (
     <>
-      <DocNavigation content={content} />
+      <DocNavigation content={content} title={title} />
       <div className="md:pl-[300px]">
-        <article className="p-4">{children}</article>
+        <article className="p-4 mdx-content">{children}</article>
       </div>
     </>
   );