feat: add initial document

outerbase · Jul 4, 2024 · cc5cdc4 · cc5cdc4
1 parent bf10aa4
commit cc5cdc4
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 19 deletions.
diff --git a/src/app/docs/connect-valtown/page.mdx b/src/app/docs/connect-valtown/page.mdx
@@ -0,0 +1,28 @@
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+  title: "Connect to Val.town Database using LibSQL Studio",
+};
+
+<DocContent title="Connect to Valtown" group="Connecting">
+
+
+LibSQL Studio is an excellent SQLite GUI client that offers extensive functionality.
+Since Val.town's database is based on SQLite, LibSQL Studio is the perfect tool for managing it.
+With LibSQL Studio, connecting to your Val.town personal database is easy. Please follow the steps below:
+
+## Generate Token
+
+1. Goto [API Token Setting](https://www.val.town/settings/api)
+2. Click "New" if you haven't generated token before
+3. Copy the token
+
+## Connect
+
+Open LibSQL Studio
+
+1. Click **"New Connection"** and choose **"Valtown"**.
+2. Enter your Val.town token.
+3. Click **"Connect."**
+
+</DocContent>
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
@@ -3,6 +3,7 @@ import { DocLayout } from "@/components/mdx/docs";
 const TableContent = [
   {
     title: "LibSQL Studio",
+    href: "/docs",
   },
   {
     title: "Connecting",
@@ -11,23 +12,15 @@ const TableContent = [
         title: "Connect to Turso",
         href: "/docs/connect-turso",
       },
-      {
-        title: "Connect to rqlite",
-        href: "/learn/sqlite/introduction",
-      },
       {
         title: "Connect to Valtown",
-        href: "/learn/sqlite/introduction",
+        href: "/docs/connect-valtown",
       },
     ],
   },
   {
     title: "Other",
     sub: [
-      {
-        title: "Self Hosting",
-        href: "/learn/sqlite/indexing",
-      },
       {
         title: "Temporary Session",
         href: "/docs/temporary-session",

diff --git a/src/app/docs/page.mdx b/src/app/docs/page.mdx
@@ -1 +1,15 @@
-This is MDX
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+  title: "What's LibSQL Studio",
+};
+
+<DocContent title="LibSQL Studio" group="About Us">
+
+
+LibSQL Studio is an extremely powerful and lightweight SQLite GUI that runs in your browser. It comes packed with a ton of features, including:
+- A powerful data editor capable of handling thousands of rows and columns without overwhelming your RAM.
+- A SQL query editor with syntax highlighting, tooltips, and auto-completion to boost your productivity.
+- Advanced tools for editing your table schema and indexes.
+
+</DocContent>
diff --git a/src/app/docs/temporary-session/page.mdx b/src/app/docs/temporary-session/page.mdx
@@ -1,11 +1,29 @@
 import { DocContent } from "@/components/mdx/docs";
 
 export const metadata = {
-  title: "",
+  title: "Create Temporary Session - LibSQL Studio",
 };
 
 <DocContent title="Temporary Session" group="Other">
 
-Blank Page
+LibSQL Studio allows users to create temporary sessions, providing a temporary link that grants access to the database for a limited period.
+
+**Request**
+```
+curl --location 'https://libsqlstudio.com/api/temp_session' \
+--header 'Content-Type: application/json' \
+--data '{
+    "driver": "turso",
+    "url": "xxxx",
+    "token": "xxxx"
+}'
+```
+
+**Response**
+```
+{
+  "redirect": "https://libsqlstudio.com/client/temp_sess?sid=xxxxxx"
+}
+```
 
 </DocContent>
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -240,8 +240,21 @@ For Markdown Side
 }
 
 .mdx-content ul {
+  @apply list-disc pl-8 my-4;
 }
 
 .mdx-content ol {
   @apply list-decimal pl-8 my-4;
 }
+
+.mdx-content pre {
+  @apply bg-gray-100 dark:bg-gray-700 p-4 leading-5 rounded overflow-x-auto;
+}
+
+.mdx-content p {
+  @apply my-2;
+}
+
+.mdx-content a {
+  @apply text-blue-500 underline;
+}
diff --git a/src/components/mdx/docs-navigation.tsx b/src/components/mdx/docs-navigation.tsx
@@ -22,7 +22,19 @@ export function DocNavigation({
       {content.map((contentGroup) => {
         return (
           <div key={contentGroup.title}>
-            <div>{contentGroup.title}</div>
+            {contentGroup.href ? (
+              <div>
+                <Link
+                  href={contentGroup.href ?? ""}
+                  className={pathname === contentGroup.href ? "font-bold" : ""}
+                >
+                  {contentGroup.title}
+                </Link>
+              </div>
+            ) : (
+              <div>{contentGroup.title}</div>
+            )}
+
             {contentGroup.sub && (
               <ul className="my-1">
                 {contentGroup.sub.map((content) => {

diff --git a/src/components/mdx/docs.tsx b/src/components/mdx/docs.tsx
@@ -1,9 +1,4 @@
-import { cn } from "@/lib/utils";
-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 {

diff --git a/src/components/website-layout.tsx b/src/components/website-layout.tsx
@@ -65,7 +65,20 @@ function Footer() {
     <div className="border-t py-4 text-sm">
       <div className="mx-auto container flex">
         <div className="flex-grow">
-          <ul className="flex gap-4 mb-2">
+          <ul className="flex flex-wrap gap-4 mb-2">
+            <li>
+              <Link
+                href="/Playground"
+                className="font-semibold hover:underline"
+              >
+                Playground
+              </Link>
+            </li>
+            <li>
+              <Link href="/docs" className="font-semibold hover:underline">
+                Document
+              </Link>
+            </li>
             <li>
               <Link href="/terms" className="font-semibold hover:underline">
                 Terms and Condition