Merge pull request #181 from premieroctet/feature/improve-docs

feat: improve doc and hp
premieroctet · Mar 19, 2024 · dad343c · dad343c
2 parents b7b78f2 + 7f63418
commit dad343c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/apps/docs/components/Hero.tsx b/apps/docs/components/Hero.tsx
@@ -26,7 +26,7 @@ export function Hero() {
         <p className="mt-4 font-normal text-2xl text-black dark:text-white max-w-xl text-center mx-auto">
           Ready-to-go Admin for Next.js and Prisma
         </p>
-        <div className="mt-10 max-w-xl text-center mx-auto flex flex-raw gap-4 justify-center">
+        <div className="mt-10 max-w-xl text-center mx-auto flex flex-col sm:flex-row gap-4 justify-center">
           <Link
             href="/docs"
             className="bg-black dark:bg-white dark:hover:bg-gray-700 rounded-lg px-6 py-3 text-white dark:text-black text-md font-semibold hover:bg-gray-800 dark:hover:bg-white/80 transition-colors duration-300 ease-in-out"
@@ -36,7 +36,7 @@ export function Hero() {
           <Link
             href="https://github.com/premieroctet/next-admin"
             target="_blank"
-            className="dark:text-white dark:fill-white dark:hover:text-black dark:hover:fill-black rounded-lg px-6 py-3 text-black text-md font-semibold hover:bg-gray-100 transition-colors duration-300 ease-in-out border border-gray-300 flex gap-2"
+            className="dark:text-white dark:fill-white dark:hover:text-black dark:hover:fill-black rounded-lg px-6 py-3 text-black text-md font-semibold hover:bg-gray-100 transition-colors duration-300 ease-in-out border border-gray-300 flex gap-2 justify-center"
           >
             <GitHubIcon />
             View on GitHub

diff --git a/apps/docs/pages/docs/getting-started.mdx b/apps/docs/pages/docs/getting-started.mdx
@@ -1,50 +1,52 @@
-import { Tabs, Callout } from "nextra/components";
+import { Callout, Tabs } from "nextra/components";
 
 # Getting Started
 
 ## Installation
 
-###### yarn
-
-```bash
+<Tabs items={["yarn", "npm", "pnpm"]}>
+  <Tabs.Tab>
+    ```bash
 yarn add @premieroctet/next-admin prisma-json-schema-generator
-```
-
-###### npm
+    ```
 
-```bash
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 npm install -S @premieroctet/next-admin prisma-json-schema-generator
-```
-
-###### pnpm
-
-```bash
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 pnpm install -S @premieroctet/next-admin prisma-json-schema-generator
-```
+    ```
+  </Tabs.Tab>
+</Tabs>
 
 ## SuperJson configuration
 
 SuperJson is required to avoid errors related to invalid serialisation properties that can occur when passing data from server to client.
 
 ### With Babel
 
-###### yarn
-
-```bash
+<Tabs items={["yarn", "npm", "pnpm"]}>
+  <Tabs.Tab>
+    ```bash
 yarn add -D babel-plugin-superjson-next superjson@^1
-```
-
-###### npm
+    ```
 
-```bash
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 npm install --save-dev babel-plugin-superjson-next superjson@^1
-```
-
-###### pnpm
-
-```bash
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 pnpm install -D babel-plugin-superjson-next superjson@^1
-```
+    ```
+  </Tabs.Tab>
+</Tabs>
 
 Add the `babel-plugin-superjson-next` plugin to your `.babelrc` file:
 
@@ -57,23 +59,24 @@ Add the `babel-plugin-superjson-next` plugin to your `.babelrc` file:
 
 ## With SWC (Experimental)
 
-###### yarn
-
-```bash
+<Tabs items={["yarn", "npm", "pnpm"]}>
+  <Tabs.Tab>
+    ```bash
 yarn add -E -D next-superjson-plugin@0.6.1 superjson
-```
-
-###### npm
+    ```
 
-```bash
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 npm install --save-dev -E next-superjson-plugin@0.6.1 superjson
-```
-
-###### pnpm
-
-```bash
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash
 pnpm install -E -D next-superjson-plugin@0.6.1 superjson
-```
+    ```
+  </Tabs.Tab>
+</Tabs>
 
 Add the `next-superjson-plugin` plugin to your `next.config.js` file: