Skip to content

Commit f186ec8

Browse files
SutuSebastianSebastian Sutu
SutuSebastian
and
Sebastian Sutu
authored
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]>
1 parent 8544952 commit f186ec8

20 files changed

+3623
-3824
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"editor.codeActionsOnSave": {
3-
"source.fixAll": true
3+
"source.fixAll": "explicit"
44
},
55
"editor.defaultFormatter": "esbenp.prettier-vscode",
66
"editor.formatOnPaste": false,

‎README.md

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,22 +104,25 @@ Add Tailwind CSS to a CSS file:
104104

105105
### Install Flowbite React
106106

107-
1. Install Flowbite and Flowbite React:
107+
1. Run the following command to install `flowbite-react`:
108108

109109
```bash
110-
npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
110+
npm i flowbite-react
111111
```
112112

113113
2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
114114

115-
```javascript
116-
module.exports = {
115+
```js
116+
/** @type {import('tailwindcss').Config} */
117+
export default {
117118
content: [
118-
...,
119-
'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
119+
// ...
120+
'node_modules/flowbite-react/lib/esm/**/*.js',
121+
],
122+
plugins: [
123+
// ...
124+
require('flowbite/plugin'),
120125
],
121-
plugins: [..., require('flowbite/plugin')],
122-
...
123126
};
124127
```
125128

@@ -143,7 +146,7 @@ export default function MyPage() {
143146

144147
#### Next.js
145148

146-
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.
149+
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.
147150

148151
#### Dark mode
149152

‎components/mdx.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
11
import type { MDXComponents } from 'mdx/types';
22
import { getMDXComponent } from 'next-contentlayer/hooks';
3+
import Link from 'next/link';
34
import * as examples from '~/examples';
45
import { theme } from '~/src';
56
import { CodeDemo, type CodeData } from './code-demo';
67
import { CodeHighlight } from './code-highlight';
78

89
const components: MDXComponents = {
10+
a: ({ ref, href = '', ...props }) => {
11+
const isLocal = href.startsWith('/');
12+
13+
return (
14+
<Link
15+
{...props}
16+
href={href}
17+
ref={ref as React.Ref<HTMLAnchorElement>}
18+
{...(!isLocal && { target: '_blank', rel: 'noreferrer' })}
19+
/>
20+
);
21+
},
922
// TODO: revisit
1023
h2: (props) => (
1124
<h2 className="group relative z-20 scroll-mt-20 text-2xl font-bold text-gray-900" {...props}>

‎content/docs/getting-started/introduction.mdx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,25 @@ Add Tailwind CSS to a CSS file:
4444

4545
### Install Flowbite React
4646

47-
1. Install Flowbite and Flowbite React:
47+
1. Run the following command to install `flowbite-react`:
4848

4949
```bash
50-
npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
50+
npm i flowbite-react
5151
```
5252

5353
2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
5454

55-
```javascript
56-
module.exports = {
55+
```js
56+
/** @type {import('tailwindcss').Config} */
57+
export default {
5758
content: [
58-
...,
59+
// ...
5960
'node_modules/flowbite-react/lib/esm/**/*.js',
6061
],
61-
plugins: [..., require('flowbite/plugin')],
62-
...
62+
plugins: [
63+
// ...
64+
require('flowbite/plugin'),
65+
],
6366
};
6467
```
6568

@@ -83,7 +86,7 @@ export default function MyPage() {
8386

8487
#### Next.js
8588

86-
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.
89+
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.
8790

8891
#### Dark mode
8992

‎content/docs/getting-started/nextjs.mdx

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎content/docs/getting-started/quickstart.mdx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,25 @@ Add Tailwind CSS to a CSS file:
4040

4141
## Install Flowbite React
4242

43-
1. Install Flowbite and Flowbite React:
43+
1. Run the following command to install `flowbite-react`:
4444

4545
```bash
46-
npm i flowbite-react # or yarn add flowbite flowbite-react
46+
npm i flowbite-react
4747
```
4848

4949
2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
5050

51-
```javascript
52-
module.exports = {
51+
```js
52+
/** @type {import('tailwindcss').Config} */
53+
export default {
5354
content: [
54-
...,
55-
'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
55+
// ...
56+
'node_modules/flowbite-react/lib/esm/**/*.js',
57+
],
58+
plugins: [
59+
// ...
60+
require('flowbite/plugin'),
5661
],
57-
plugins: [..., require('flowbite/plugin')],
58-
...
5962
};
6063
```
6164

@@ -79,7 +82,7 @@ export default function MyPage() {
7982

8083
#### Next.js
8184

82-
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.
85+
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.
8386

8487
#### Dark mode
8588

‎content/docs/guides/astro.mdx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: Use with Astro - Flowbite React
3+
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
4+
---
5+
6+
## Create project
7+
8+
1. Run the following command to create a new Astro project:
9+
10+
```bash
11+
npm create astro@latest
12+
```
13+
14+
2. Install `react` using the Astro CLI:
15+
16+
```bash
17+
npx astro add react
18+
```
19+
20+
**Note:** Make sure to answer `Yes` to all the questions.
21+
22+
## Setup Tailwind CSS
23+
24+
1. Install `tailwindcss` using the Astro CLI:
25+
26+
```bash
27+
npx astro add tailwind
28+
```
29+
30+
**Note:** Make sure to answer `Yes` to all the questions.
31+
32+
## Install Flowbite React
33+
34+
1. Run the following command to install `flowbite-react`:
35+
36+
```bash
37+
npm i flowbite-react
38+
```
39+
40+
2. Add the Flowbite plugin to `tailwind.config.mjs` and include content from `flowbite-react`:
41+
42+
```js {5,9}
43+
/** @type {import('tailwindcss').Config} */
44+
export default {
45+
content: [
46+
// ...
47+
'node_modules/flowbite-react/lib/esm/**/*.js',
48+
],
49+
plugins: [
50+
// ...
51+
require('flowbite/plugin'),
52+
],
53+
};
54+
```
55+
56+
## Dark mode
57+
58+
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).
59+
60+
`ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `<html>` element before hydration occurs.
61+
62+
### Configure
63+
64+
1. Create a root layout file under `src/layouts` folder called `index.astro`:
65+
66+
```tsx
67+
// src/layouts/index.astro
68+
69+
<html lang="en">
70+
<head></head>
71+
<body>
72+
<slot />
73+
</body>
74+
</html>
75+
```
76+
77+
2. Import and render `ThemeModeScript` in the `<head>` tag:
78+
79+
```tsx {4,9}
80+
// src/layouts/index.astro
81+
82+
---
83+
import { ThemeModeScript } from "flowbite-react";
84+
---
85+
86+
<html lang="en">
87+
<head>
88+
<ThemeModeScript />
89+
</head>
90+
<body>
91+
<slot />
92+
</body>
93+
</html>
94+
```
95+
96+
3. Import the newly created layout and wrap the page content with it:
97+
98+
```tsx {4,7-9}
99+
// src/pages/index.astro
100+
101+
---
102+
import RootLayout from "../layouts/index.astro";
103+
---
104+
105+
<RootLayout>
106+
// ...
107+
</RootLayout>
108+
109+
```
110+
111+
## Component hydration
112+
113+
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)).
114+
115+
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.
116+
117+
```tsx
118+
<DarkThemeToggle client:load />
119+
```
120+
121+
## Try it out
122+
123+
Now that you have successfully installed Flowbite React you can start using the components from the library.
124+
125+
```tsx
126+
// src/pages/index.astro
127+
128+
---
129+
import { Button } from "flowbite-react";
130+
import RootLayout from "../layouts/index.astro";
131+
---
132+
133+
<RootLayout>
134+
<Button>Click me</Button>
135+
</RootLayout>
136+
```

0 commit comments

Comments
 (0)