feat(docs): integrations

docs/src/components/EditPage.jsx

@@ -0,0 +1,26 @@
+import { pages } from "../pages.mjs";
+
+export default function EditPage({ pathname }) {
+  const filename =
+    pathname.split("/").length > 3
+      ? pages
+          .find(([filename]) =>
+            filename.includes(pathname.replace("/en", "/en/(pages)"))
+          )?.[0]
+          ?.replace(/^\.\//, "/") ?? ""
+      : pathname === "/en/team"
+        ? "/pages/en/(pages)/team/index.mdx"
+        : pathname === "/en"
+          ? "/pages/en/index.mdx"
+          : `/pages${pathname}.(index).mdx`;
+  return (
+    <a
+      href={`https://github.com/lazarv/react-server/edit/main/docs/src${filename}`}
+      target="_blank"
+      rel="noreferrer"
+      className="flex items-center gap-2 text-xs text-gray-600 hover:!text-gray-500 dark:!text-gray-500 dark:hover:!text-gray-400 hover:no-underline absolute right-0 top-0 z-50"
+    >
+      Edit this page
+    </a>
+  );
+}

docs/src/mdx-components.jsx

@@ -7,7 +7,7 @@ export default function useMDXComponents() {
       return (
         <pre {...props} className={`${className ?? ""} relative`}>
           {filename && (
-            <div className="text-sm text-gray-500 dark:text-gray-400">
+            <div className="text-sm text-gray-500 dark:text-gray-400 [&+code]:mt-0">
               {filename}
             </div>
           )}

docs/src/pages.mjs

@@ -10,6 +10,7 @@ export const pages = Array.from(
 
 export const categories = [
   "Guide",
+  "Integrations",
   "Framework",
   "Router",
   "Deploy",

docs/src/pages/(root).layout.jsx

@@ -5,6 +5,7 @@ import { cookie, usePathname } from "@lazarv/react-server";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/react";
 
+import EditPage from "../components/EditPage.jsx";
 export default function Layout({
   breadcrumb,
   header,
@@ -75,6 +76,7 @@ export default function Layout({
           {sidebar}
           <article>
             {breadcrumb}
+            <EditPage pathname={pathname} />
             {children}
             {navigation}
           </article>

docs/src/pages/@breadcrumb/[[lang]]/[category]/(breadcrumb).[...slug].page.jsx

@@ -5,7 +5,7 @@ export default function Breadcrumb({ lang, category }) {
     <a
       data-no-content
       href={`${lang === defaultLanguage ? "" : `/${lang}`}/${category}`}
-      className="block mb-2 text-md font-semibold capitalize text-indigo-500 dark:text-yellow-600"
+      className="inline-block mb-2 text-md font-semibold capitalize text-indigo-500 dark:text-yellow-600"
     >
       {category} →
     </a>

docs/src/pages/@header/[[lang]]/(header).[[...slug]].page.jsx

@@ -33,6 +33,12 @@ export default function Header({ lang }) {
         >
           Guide
         </a>
+        <a
+          href={`${baseUrl}integrations`}
+          className={`hidden lg:inline${activeClass("integrations")}`}
+        >
+          Integrations
+        </a>
         <a
           href={`${baseUrl}framework`}
           className={`hidden lg:inline${activeClass("framework")}`}
@@ -53,13 +59,13 @@ export default function Header({ lang }) {
         </a>
         <a
           href={`${baseUrl}tutorials`}
-          className={`hidden lg:inline${activeClass("tutorials")}`}
+          className={`mr-auto xl:mr-0 hidden lg:inline${activeClass("tutorials")}`}
         >
           Tutorials
         </a>
         <a
           href={`${baseUrl}team`}
-          className={`mr-auto hidden lg:inline${activeClass("team")}`}
+          className={`mr-auto hidden xl:inline${activeClass("team")}`}
         >
           Team
         </a>

docs/src/pages/en/(pages)/integrations/mantine.mdx

@@ -0,0 +1,12 @@
+---
+title: Mantine UI
+category: Integrations
+order: 5
+---
+
+import Link from "../../../../components/Link.jsx";
+
+# Mantine UI
+
+> Coming soon.
+

docs/src/pages/en/(pages)/integrations/mui.mdx

@@ -0,0 +1,12 @@
+---
+title: Material UI
+category: Integrations
+order: 6
+---
+
+import Link from "../../../../components/Link.jsx";
+
+# Material UI
+
+> Coming soon.
+

docs/src/pages/en/(pages)/integrations/react-query.mdx

@@ -0,0 +1,12 @@
+---
+title: TanStack Query
+category: Integrations
+order: 4
+---
+
+import Link from "../../../../components/Link.jsx";
+
+# TanStack Query
+
+> Coming soon.
+

docs/src/pages/en/(pages)/integrations/tailwind-css.mdx

@@ -0,0 +1,81 @@
+---
+title: Tailwind CSS
+category: Integrations
+order: 2
+---
+
+import Link from "../../../../components/Link.jsx";
+
+# Tailwind CSS
+
+`@lazarv/react-server` is compatible with Tailwind CSS. You can use Tailwind CSS the same way you use it in a standard React project with Vite, using the PostCSS and Autoprefixer plugins.
+
+<Link name="install">
+## Install
+</Link>
+
+You can install Tailwind CSS in your project by running the following command:
+
+```sh
+pnpm add -D tailwindcss postcss autoprefixer
+pnpm dlx tailwindcss init
+```
+
+Add Tailwind CSS to your `postcss.config.js` file:
+
+```js filename="./postcss.config.js"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+};
+```
+
+Configure your template paths in the `tailwind.config.js` file:
+
+```js filename="./tailwind.config.js"
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+Update or extend the `content` array in the `tailwind.config.js` file to include the paths to your components, pages, and other files including Tailwind CSS classes.
+
+Add the following lines to your `main.css` file:
+
+```css filename="./main.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+<Link name="use-tailwind-css">
+## Use Tailwind CSS
+</Link>
+
+You can now use Tailwind CSS in any of your React Server Components or client components.
+
+```tsx filename="./src/pages/index.tsx"
+export default function HomePage() {
+  return <h1 className="text-2xl font-bold">Hello World</h1>;
+}
+```
+
+You don't need to do anything more. Start your development server and you can see the styles applied.
+
+```sh
+pnpm exec react-server
+```
+
+Your styles will be also applied during a production build.
+
+```sh
+pnpm exec react-server build
+```

docs/src/pages/en/(pages)/integrations/typescript.mdx

@@ -0,0 +1,82 @@
+---
+title: TypeScript
+category: Integrations
+order: 1
+---
+
+import Link from "../../../../components/Link.jsx";
+
+# TypeScript
+
+`@lazarv/react-server` is compatible with TypeScript. You can use TypeScript normally like in any other React project. TypeScript just works with this framework as it is relying on Vite and Esbuild to transpile the code.
+
+<Link name="configuration">
+## Configuration
+</Link>
+
+You can keep all the TypeScript configuration in the `tsconfig.json` file. You can follow the [TypeScript configuration guide](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) to configure TypeScript.
+
+A basic example of `tsconfig.json` file to use with `@lazarv/react-server`:
+
+```json filename="./tsconfig.json"
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "types": ["react/experimental", "react-dom/experimental"],
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".react-server/**/*.ts"],
+  "exclude": ["**/*.js", "**/*.mjs"]
+}
+```
+
+The important part is to use the `react/experimental` and `react-dom/experimental` types for React as `@lazarv/react-server` uses the experimental React APIs.
+
+<Link name="typescript-file-system-routing">
+## Type-safe file-system based routing
+</Link>
+
+`@lazarv/react-server` uses the file-system based routing. This means that the file-system is the source of truth for the routing. When you create a new file, you create a new route.
+
+This is a very powerful feature, but it can be hard to work with if you are using TypeScript. `@lazarv/react-server` has a built-in feature to help you with this.
+
+By including the `.react-server` directory in the `tsconfig.json` file, you can use TypeScript to type the file-system based routing.
+
+<Link name="typescript-path-aliases">
+## TypeScript path aliases
+</Link>
+
+To make the TypeScript path aliases work, you need to include the `baseUrl` and `paths` in the `tsconfig.json` file.
+
+```json filename="./tsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+While you also need to include the paths in your `vite.config.js` file as `resolve.alias` entries to make the path aliases work.
+
+```js filename="./vite.config.mjs"
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@/': new URL('./src/', import.meta.url).pathname
+    }
+  }
+});
+```