feat: update docs get started page (#64)

Updates documentation "Get Started" page "Next steps" section.
Fixes some code examples in the documentation.
Fixes some styling in the documentation.

Related to #15

Author: lazarv

README.md

@@ -64,10 +64,10 @@ export default function App() {
 Similarly how you would run a script with `node`, use `react-server` to start your app. Magic!
 
 ```sh
-pnpm exec react-server ./App.tsx --open
+pnpm exec react-server ./App.tsx
 ```
 
-> **Note:** if you don't want to install the `@lazarv/react-server` package and you just want to try out something quickly, you can use `npx` to run the `react-server` CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a `.jsx` file with a React Server Component exported as default to run your application. Just run `npx @lazarv/react-server ./App.jsx --open` to start your application in development mode.
+> **Note:** if you don't want to install the `@lazarv/react-server` package and you just want to try out something quickly, you can use `npx` to run the `react-server` CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a `.jsx` file with a React Server Component exported as default to run your application. Just run `npx @lazarv/react-server ./App.jsx` to start your application in development mode.
 
 #### Build
 
@@ -116,7 +116,7 @@ Move your entrypoint component from `./App.tsx` to `./app/layout.tsx` and `./app
 Just start `react-server` without specifying an entrypoint.
 
 ```sh
-pnpm exec react-server --open
+pnpm exec react-server
 ```
 
 Read more about file-system based routing at [react-server.dev/router](https://react-server.dev/router).

docs/src/pages/en/(pages)/guide/get-started.mdx

@@ -4,6 +4,8 @@ order: 0
 ---
 
 import Link from "../../../../components/Link.jsx";
+import Card from "../../../../components/Card.jsx";
+import Pill from "../../../../components/Pill.jsx";
 
 # Get Started
 
@@ -49,9 +51,11 @@ export default function App() {
 To start your application in development mode, you can use the `react-server` CLI simply by passing the path to your application entry file. By using the `--open` flag, your application will be opened in your default browser on http://localhost:3000.
 
 ```sh
-pnpm exec react-server ./App.jsx --open
+pnpm exec react-server ./App.jsx
 ```
 
+> **Note:** if you want to open the application in your default browser, you can use the `--open` flag.
+
 <Link name="build">
 ## Build
 </Link>
@@ -72,10 +76,98 @@ To start your application in production, just use the `start` command. This will
 pnpm exec react-server start
 ```
 
-> **Note:** if you don't want to install the `@lazarv/react-server` package and you just want to try out something quickly, you can use `npx` to run the `react-server` CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a `.jsx` file with a React Server Component exported as default to run your application. Just run `npx @lazarv/react-server ./App.jsx --open` to start your application in development mode.
+> **Note:** if you don't want to install the `@lazarv/react-server` package and you just want to try out something quickly, you can use `npx` to run the `react-server` CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a `.jsx` file with a React Server Component exported as default to run your application. Just run `npx @lazarv/react-server ./App.jsx` to start your application in development mode.
 
 <Link name="next-steps">
 ## Next steps
 </Link>
 
-Now that you have a basic understanding of how to get started with `@lazarv/react-server`, you can learn more about the advanced features in the following sections.
+Success! You have now created your first application using `@lazarv/react-server`.
+
+Here are some recommended topics to learn more about. You can read these in any order you would like. You can even leave for now to start building your application and come back when you run into trouble or have a question.
+
+> Don't forget that you can join a discussion on [GitHub Discussions](https://github.com/lazarv/react-server/discussions) if you have any questions or need help.
+
+<div className="my-4 grid grid-cols-1 md:grid-cols-3 gap-4">
+  <Card>
+
+#### Integrations
+
+##### How to integrate with other libraries
+
+Learn how to integrate with other libraries and how the framework works togetherwith tools like Vite, TypeScript, Tailwind CSS and more.
+
+    <Pill href="/integrations">
+      Learn more
+    </Pill>
+  </Card>
+
+  <Card>
+
+#### Framework
+
+##### Advanced features
+
+Learn about the advanced features of the framework, like how to access the HTTP request and response objects, how to use caching, or how to build a micro-frontend application.
+
+    <Pill href="/framework">
+      Learn more
+    </Pill>
+  </Card>
+
+  <Card>
+
+#### Router
+
+##### File-system based router
+
+Learn how to use the file-system based router to create a full-fledged application with nested routes, dynamic routes, and more.
+
+    <Pill href="/router">
+      Learn more
+    </Pill>
+  </Card>
+</div>
+
+You can also learn more about the framework by reading the following tutorials. These are not required to get started, but they can be helpful to understand some of the concepts and features.
+
+<div className="my-4 grid grid-cols-1 md:grid-cols-3 gap-4">
+  <Card>
+
+#### Hello World!
+
+##### Your first application
+
+Create a new React application with server-side rendering in just a few steps. Start building your app with React Server Components and enjoy faster initial page loads.
+
+    <Pill href="/tutorials/hello-world">
+      Read tutorial
+    </Pill>
+  </Card>
+
+  <Card>
+
+#### Todo App
+
+##### Using server actions
+
+Build a simple Todo application with server actions. Learn how to interact with the server from your components and manage server-side operations efficiently.
+
+    <Pill href="/tutorials/todo-app">
+      Read tutorial
+    </Pill>
+  </Card>
+
+  <Card>
+
+#### Photos
+
+##### Using client components
+
+Learn how to use client components to create interactive elements in your application. Enhance your user experience with client-side rendering and dynamic content updates.
+
+    <Pill href="/tutorials/photos">
+      Read tutorial
+    </Pill>
+  </Card>
+</div>

docs/src/pages/en/(pages)/router/markdown.mdx

@@ -40,6 +40,7 @@ You can use any Remark or Rehype plugin with the file-system based router. Just
 
 ```mjs
 import rehypeHighlight from "rehype-highlight";
+import rehypeMdxCodeProps from "rehype-mdx-code-props";
 import remarkGfm from "remark-gfm";
 
 export default {
@@ -57,14 +58,14 @@ export default {
 To use custom components, you have to create an `mdx-components.jsx` or `mdx-components.tsx` file in your project root. This file should export a `useMDXComponents` function that returns an object with the custom components.
 
 ```jsx
-export function useMDXComponents() {
+export default function useMDXComponents() {
   return {
     h1: (props) => <h1 style={{ color: "red" }} {...props} />,
   };
 }
 ```
 
-You can also specify where your file exporting the `useMDXComponents` function is located in your `react-server.config.mjs` file.
+You can also specify where your file default exporting the `useMDXComponents` function is located in your `react-server.config.mjs` file.
 
 ```mjs
 export default {

docs/src/pages/en/index.mdx

@@ -38,7 +38,7 @@ export default function App() {
 ```
 
 ```sh
-npx @lazarv/react-server ./App.jsx --open
+npx @lazarv/react-server ./App.jsx
 ```
 
 </div>

docs/src/pages/global.css

@@ -183,6 +183,10 @@ article {
     @apply text-base mb-4 leading-7;
   }
 
+  & > pre {
+    @apply w-full;
+  }
+
   & pre code {
     @apply rounded-lg my-8 text-sm leading-5 border border-gray-500 shadow-xl shadow-gray-500 dark:shadow-[rgba(255,255,255,0.1)] dark:shadow-lg;
   }
@@ -224,7 +228,7 @@ article {
     @apply border-l-8 border-blue-300 p-4 mb-4 bg-blue-100 dark:bg-yellow-500 dark:border-yellow-600 dark:text-gray-800 shadow-xl dark:shadow-[rgba(255,255,255,0.1)];
 
     & code {
-      @apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm p-1;
+      @apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm whitespace-nowrap p-1;
     }
   }