diff --git a/src/app/docs/connect-turso/page.mdx b/src/app/docs/connect-turso/page.mdx new file mode 100644 index 00000000..43b4c12b --- /dev/null +++ b/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", +}; + + + +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."** + + diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx new file mode 100644 index 00000000..7c76dd18 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/app/docs/page.mdx b/src/app/docs/page.mdx new file mode 100644 index 00000000..745f2f7c --- /dev/null +++ b/src/app/docs/page.mdx @@ -0,0 +1 @@ +This is MDX diff --git a/src/app/docs/temporary-session/page.mdx b/src/app/docs/temporary-session/page.mdx new file mode 100644 index 00000000..354c59a6 --- /dev/null +++ b/src/app/docs/temporary-session/page.mdx @@ -0,0 +1,11 @@ +import { DocContent } from "@/components/mdx/docs"; + +export const metadata = { + title: "", +}; + + + +Blank Page + + diff --git a/src/app/globals.css b/src/app/globals.css index 5e2c261d..1db09eae 100644 --- a/src/app/globals.css +++ b/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; +} diff --git a/src/components/mdx/docs-navigation.tsx b/src/components/mdx/docs-navigation.tsx new file mode 100644 index 00000000..8843c0c4 --- /dev/null +++ b/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 = ( +
+ {content.map((contentGroup) => { + return ( +
+
{contentGroup.title}
+ {contentGroup.sub && ( + + )} +
+ ); + })} +
+ ); + + return ( + <> +
+
+
+ LibSQLStudio +
+
{title}
+
+ {sideMenu} +
+
+
{title}
+ + +
+ +
+ + {sideMenu} + +
+ + ); +} diff --git a/src/components/mdx/docs.tsx b/src/components/mdx/docs.tsx index e4df381c..b1155045 100644 --- a/src/components/mdx/docs.tsx +++ b/src/components/mdx/docs.tsx @@ -3,6 +3,8 @@ 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; @@ -10,67 +12,22 @@ interface DocTableContentGroup { sub?: DocTableContentGroup[]; } -type DocTableContent = DocTableContentGroup[]; +export type DocTableContent = DocTableContentGroup[]; export function DocContent({ children, title, -}: PropsWithChildren<{ title: string }>) { + group, +}: PropsWithChildren<{ title: string; group?: string }>) { return ( <> -
-

{title}

-
-
{children}
- - ); -} - -function DocNavigation({ content }: { content: DocTableContent }) { - const sideMenu = ( -
- {content.map((contentGroup) => { - return ( -
-
{contentGroup.title}
- {contentGroup.sub && ( - - )} -
- ); - })} -
- ); - - return ( - <> -
- {sideMenu} -
-
-
- LibSQLStudio +
+
+ {group && {group}} +

{title}

- - -
- -
- - {sideMenu} -
+
{children}
); } @@ -78,12 +35,13 @@ function DocNavigation({ content }: { content: DocTableContent }) { export function DocLayout({ children, content, -}: PropsWithChildren<{ content: DocTableContent }>) { + title, +}: PropsWithChildren<{ content: DocTableContent; title?: string }>) { return ( <> - +
-
{children}
+
{children}
);