docs: new integration guides (#1194)

* replace `@mapbox/rehype-prism` in favor of `rehype-prism-plus` for line highlighting features

* docs:
- add new "integration guides" section
- create new Next.js guide

* docs: create new Vite guide; fix `token.operator` bg color

* docs: Next.js guide - slight refactor

* fix: typo

* docs: create new Remix guide

* docs: create new Astro guide

* fix: astro typo

* docs: create new Gatsby guide

* docs: create new Laravel + Inertia guide

* docs: create new Parcel guide

* docs: create new Create React App guide

* docs: create new RedwoodJS guide

* move all docs packages to `devDependencies`

* bring back `contentlayer` to `dependencies` due to `yarn@V1` failing to mix CJS and ESM modules bundle (known issue)

* fix deprecated value in `settings.json` file

* remove redundant installation of `flowbite` in docs

* fix nextjs guide path

* mdx: use Next.js `Link` instead of `a` element + open in new tab for external links

---------

Co-authored-by: Sebastian Sutu <[email protected]>

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnPaste": false,

README.md

@@ -104,22 +104,25 @@ Add Tailwind CSS to a CSS file:
 
 ### Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
-    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
+    // ...
+    'node_modules/flowbite-react/lib/esm/**/*.js',
+  ],
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
 };
 ```
 
@@ -143,7 +146,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](https://flowbite.com/docs/getting-started/next-js/), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](https://flowbite.com/docs/guides/next-js/), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode
 

components/mdx.tsx

@@ -1,11 +1,24 @@
 import type { MDXComponents } from 'mdx/types';
 import { getMDXComponent } from 'next-contentlayer/hooks';
+import Link from 'next/link';
 import * as examples from '~/examples';
 import { theme } from '~/src';
 import { CodeDemo, type CodeData } from './code-demo';
 import { CodeHighlight } from './code-highlight';
 
 const components: MDXComponents = {
+  a: ({ ref, href = '', ...props }) => {
+    const isLocal = href.startsWith('/');
+
+    return (
+      <Link
+        {...props}
+        href={href}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...(!isLocal && { target: '_blank', rel: 'noreferrer' })}
+      />
+    );
+  },
   // TODO: revisit
   h2: (props) => (
     <h2 className="group relative z-20 scroll-mt-20 text-2xl font-bold text-gray-900" {...props}>

content/docs/getting-started/introduction.mdx

@@ -44,22 +44,25 @@ Add Tailwind CSS to a CSS file:
 
 ### Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
+    // ...
     'node_modules/flowbite-react/lib/esm/**/*.js',
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
+  ],
 };
 ```
 
@@ -83,7 +86,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](/docs/getting-started/nextjs), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](/docs/guides/next-js), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode
 

content/docs/getting-started/quickstart.mdx

@@ -40,22 +40,25 @@ Add Tailwind CSS to a CSS file:
 
 ## Install Flowbite React
 
-1. Install Flowbite and Flowbite React:
+1. Run the following command to install `flowbite-react`:
 
 ```bash
-npm i flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
 
-```javascript
-module.exports = {
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    ...,
-    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
+    // ...
+    'node_modules/flowbite-react/lib/esm/**/*.js',
+  ],
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
   ],
-  plugins: [..., require('flowbite/plugin')],
-  ...
 };
 ```
 
@@ -79,7 +82,7 @@ export default function MyPage() {
 
 #### Next.js
 
-If you're using Next.js, you can follow the [Next.js install guide](/docs/getting-started/nextjs), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
+If you're using Next.js, you can follow the [Next.js install guide](/docs/guides/next-js), which includes a [Next.js starter project](https://github.com/tulupinc/flowbite-next-starter) with Flowbite React already set up.
 
 #### Dark mode
 

content/docs/guides/astro.mdx

@@ -0,0 +1,136 @@
+---
+title: Use with Astro - Flowbite React
+description: Learn how to install Flowbite React for your Astro project and start building modern websites with a lightning fast and content-focused web framework
+---
+
+## Create project
+
+1. Run the following command to create a new Astro project:
+
+```bash
+npm create astro@latest
+```
+
+2. Install `react` using the Astro CLI:
+
+```bash
+npx astro add react
+```
+
+**Note:** Make sure to answer `Yes` to all the questions.
+
+## Setup Tailwind CSS
+
+1. Install `tailwindcss` using the Astro CLI:
+
+```bash
+npx astro add tailwind
+```
+
+**Note:** Make sure to answer `Yes` to all the questions.
+
+## Install Flowbite React
+
+1. Run the following command to install `flowbite-react`:
+
+```bash
+npm i flowbite-react
+```
+
+2. Add the Flowbite plugin to `tailwind.config.mjs` and include content from `flowbite-react`:
+
+```js {5,9}
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    // ...
+    'node_modules/flowbite-react/lib/esm/**/*.js',
+  ],
+  plugins: [
+    // ...
+    require('flowbite/plugin'),
+  ],
+};
+```
+
+## Dark mode
+
+In server side rendered applications, such as Astro, to avoid page flicker (if `dark` mode is set) before Astro hydrates the content, `ThemeModeScript` component must be rendered in `Head` component (see implementation below).
+
+`ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `<html>` element before hydration occurs.
+
+### Configure
+
+1. Create a root layout file under `src/layouts` folder called `index.astro`:
+
+```tsx
+// src/layouts/index.astro
+
+<html lang="en">
+  <head></head>
+  <body>
+    <slot />
+  </body>
+</html>
+```
+
+2. Import and render `ThemeModeScript` in the `<head>` tag:
+
+```tsx {4,9}
+// src/layouts/index.astro
+
+---
+import { ThemeModeScript } from "flowbite-react";
+---
+
+<html lang="en">
+  <head>
+    <ThemeModeScript />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+```
+
+3. Import the newly created layout and wrap the page content with it:
+
+```tsx {4,7-9}
+// src/pages/index.astro
+
+---
+import RootLayout from "../layouts/index.astro";
+---
+
+<RootLayout>
+  // ...
+</RootLayout>
+
+```
+
+## Component hydration
+
+By default, a UI Framework component is not hydrated in the client. If no `client:*` directive is provided, its HTML is rendered onto the page without JavaScript ([Astro - Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives)).
+
+To enable Flowbite React components to be interactive add `client:load`, `client:idle` or `client:visible` ([see docs](https://docs.astro.build/en/reference/directives-reference/#clientload)) as a prop.
+
+```tsx
+<DarkThemeToggle client:load />
+```
+
+## Try it out
+
+Now that you have successfully installed Flowbite React you can start using the components from the library.
+
+```tsx
+// src/pages/index.astro
+
+---
+import { Button } from "flowbite-react";
+import RootLayout from "../layouts/index.astro";
+---
+
+<RootLayout>
+  <Button>Click me</Button>
+</RootLayout>
+```