From 37a6061e739cbf2e879fb62f375a0fe6a57a183f Mon Sep 17 00:00:00 2001
From: gemdegem <dev3.w3@gmail.com>
Date: Mon, 8 Apr 2024 22:19:10 +0200
Subject: [PATCH] [fix docs]

---
 app/docs/[...slug]/page.tsx                   | 83 +++++++++++--------
 .../[...slug]/tutorials/create-commune.mdx    |  4 +-
 app/docs/[...slug]/tutorials/intro.mdx        |  2 +-
 .../[...slug]/tutorials/setup-commune.mdx     |  8 +-
 4 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/app/docs/[...slug]/page.tsx b/app/docs/[...slug]/page.tsx
index 1d98e7c..451fd37 100644
--- a/app/docs/[...slug]/page.tsx
+++ b/app/docs/[...slug]/page.tsx
@@ -48,51 +48,64 @@ export default async function Docs({ params }: { params: { slug: string } }) {
     return false
   }
 
-
   const previousContent = getPreviousContent()
   const nextContent = getNextContent()
   return (
     <>
-      <section className={`mx-auto w-full h-max`}>
-        <DocSidebar params={params} activeTutorial={activeTutorial} activeContent={activeContent} prefix={prefix} />
+      <section className={`mx-auto h-max w-full dark:bg-[#131B2A]`}>
+        <DocSidebar
+          params={params}
+          activeTutorial={activeTutorial}
+          activeContent={activeContent}
+          prefix={prefix}
+        />
 
-        <div className='flex h-[calc(100svh-129px)] w-full flex-col items-center overflow-y-scroll lg:pl-[19.5rem] pt-12'>
-          <div className='prose prose-invert flex w-full max-w-[70%] flex-col'>
-            {!!tutorials[activeTutorial].contents[activeContent] &&
-              tutorials[activeTutorial].contents[activeContent].component}
-          </div>
-          <div className='mb-10 mt-20  flex w-full max-w-[70%] justify-between text-base'>
-            {!!previousContent && (
+        <div className='flex h-[calc(100svh-129px)] w-full flex-col items-center overflow-y-scroll pt-6 md:pt-10 lg:h-[calc(100svh-81px)] lg:pl-[19.5rem]'>
+          <div className='text-subtitle prose flex w-full max-w-[100%] flex-col px-8 dark:prose-invert sm:max-w-[80%] xl:max-w-[70%] 2xl:max-w-6xl dark:text-gray-200'>
+            <div className='mb-6 flex w-full justify-end'>
               <Link
-                className='flex flex-col items-start rounded-2xl p-2 text-left text-gray-400 transition ease-in-out hover:border-gray-300 hover:text-gray-200'
-                href={`${prefix}/${previousContent.id}/${previousContent.content.href}`}
+                target='_blank'
+                href={`https://github.com/luxejs/communeai-app/blob/prod/app/docs/%5B...slug%5D/tutorials/${params.slug[1]}.mdx`}
+                className='border-title text-title shadow-custom hover:animate-squeeze dark:border-titleDark dark:text-titleDark dark:shadow-customDark flex rounded-xl border-2 bg-white px-4 py-2 text-center text-sm font-medium no-underline dark:bg-transparent'
               >
-                <span className='text-gray-300'>
-                  {previousContent.content.name}
-                </span>
-                <span className='flex text-xs'>
-                  <ArrowLongLeftIcon width={14} className='mr-2' />
-                  Previous
-                </span>
+                <span>Edit</span>
               </Link>
-            )}
-            {!!nextContent && (
-              <Link
-                className='ml-auto flex flex-col items-end rounded-2xl p-2 text-end text-gray-400 transition ease-in-out hover:border-gray-300 hover:text-gray-200'
-                href={`${prefix}/${nextContent.id}/${nextContent.content.href}`}
-              >
-                <span className='text-gray-300'>
-                  {nextContent.content.name}
-                </span>
-                <span className='flex text-xs'>
-                  Next
-                  <ArrowLongRightIcon width={14} className='ml-2' />
-                </span>
-              </Link>
-            )}
+            </div>
+            {!!tutorials[activeTutorial].contents[activeContent] &&
+              tutorials[activeTutorial].contents[activeContent].component}
+            <div className='mb-10 mt-20 flex w-full max-w-[100%] justify-between text-base'>
+              {!!previousContent && (
+                <Link
+                  className='flex flex-col items-start rounded-2xl p-2 text-left text-gray-400 transition ease-in-out hover:border-gray-300 hover:text-gray-200'
+                  href={`${prefix}/${previousContent.id}/${previousContent.content.href}`}
+                >
+                  <span className='text-subtitle dark:text-white'>
+                    {previousContent.content.name}
+                  </span>
+                  <span className='text-title dark:text-titleDark flex text-xs'>
+                    <ArrowLongLeftIcon width={14} className='mr-2' />
+                    Previous
+                  </span>
+                </Link>
+              )}
+              {!!nextContent && (
+                <Link
+                  className='ml-auto flex flex-col items-end rounded-2xl p-2 text-end text-gray-400 transition ease-in-out hover:border-gray-300 hover:text-gray-200'
+                  href={`${prefix}/${nextContent.id}/${nextContent.content.href}`}
+                >
+                  <span className='text-subtitle dark:text-white'>
+                    {nextContent.content.name}
+                  </span>
+                  <span className='text-title dark:text-titleDark flex text-xs'>
+                    Next
+                    <ArrowLongRightIcon width={14} className='ml-2' />
+                  </span>
+                </Link>
+              )}
+            </div>
           </div>
         </div>
-      </section >
+      </section>
     </>
   )
 }
diff --git a/app/docs/[...slug]/tutorials/create-commune.mdx b/app/docs/[...slug]/tutorials/create-commune.mdx
index 5d63451..8b93211 100644
--- a/app/docs/[...slug]/tutorials/create-commune.mdx
+++ b/app/docs/[...slug]/tutorials/create-commune.mdx
@@ -25,8 +25,8 @@ This creates a module path that represents the module path from commune, so in t
 The config and python class are as follows.
 
 ```yaml
-"model": "text-davinci-003"
-"tokenizer": "gpt2"
+'model': 'text-davinci-003'
+'tokenizer': 'gpt2'
 ```
 
 ```python
diff --git a/app/docs/[...slug]/tutorials/intro.mdx b/app/docs/[...slug]/tutorials/intro.mdx
index d7e8eec..02333ed 100644
--- a/app/docs/[...slug]/tutorials/intro.mdx
+++ b/app/docs/[...slug]/tutorials/intro.mdx
@@ -12,4 +12,4 @@ The overarching goal of Commune is to create a collaborative ecosystem where dev
 
 - Twitter: [@communeaidotorg](https://twitter.com/communeaidotorg)
 - Discord: [@commune.ai](https://discord.gg/communeai)
-- Website: Comming Soon
\ No newline at end of file
+- Website: [@communeai.org](https://communeai.org)
diff --git a/app/docs/[...slug]/tutorials/setup-commune.mdx b/app/docs/[...slug]/tutorials/setup-commune.mdx
index 9b50576..76f4dbd 100644
--- a/app/docs/[...slug]/tutorials/setup-commune.mdx
+++ b/app/docs/[...slug]/tutorials/setup-commune.mdx
@@ -4,7 +4,7 @@ To setup commune clone the repo and run the following commands
 
 1. **Clone the Commune Repository**: Open your terminal or command prompt and clone the Commune repository from GitHub:
 
-```
+```bash
 git clone https://github.com/commune-ai/commune.git
 ```
 
@@ -26,13 +26,13 @@ Ensure that you have Docker installed on your machine. If you don't, you can fol
 
 3. **Build the Docker Image**: Navigate to the cloned Commune repository and build the Docker image using the provided Dockerfile, This can be done via the docker-compsoe file.:
 
-```
+```bash
 docker-compose up # or docker build -t commune .
 ```
 
 4. **Run Commune in Docker**: Start a Docker container with the Commune image:
 
-```
+```bash
 docker-compose up
 ```
 
@@ -104,4 +104,4 @@ c port_range
 
 ```bash
 c set_port_range 8000 9000 # set the port range to 8000-9000
-```
\ No newline at end of file
+```