-
-
Notifications
You must be signed in to change notification settings - Fork 413
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs sidebar: cleanup old `isNew` badges * feat(web): docs/guides - add `AdonisJS` feat(cli): add `AdonisJS` * chore(ui): update README chore(web): add `AdonisJS` integration guide card in `quickstart` page * fix(docs): Dark mode `ThemeModeScript` render order * simplify tailwind.config->content
- Loading branch information
1 parent
ba3463d
commit a5d008e
Showing
7 changed files
with
178 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "create-flowbite-react": patch | ||
| "flowbite-react": patch | ||
| --- | ||
|
|
||
| add `AdonisJS` integration guide |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| --- | ||
| title: Use with AdonisJS - Flowbite React | ||
| description: Learn how to install Flowbite React for your AdonisJS project and start developing modern full-stack web applications | ||
| --- | ||
|
|
||
| ## Using the CLI | ||
|
|
||
| Run the following command to scaffold a new `Flowbite React` project using `AdonisJS`: | ||
|
|
||
| ```bash | ||
| # npm | ||
| npm create flowbite-react@latest -- --template adonisjs | ||
|
|
||
| # yarn | ||
| yarn create flowbite-react --template adonisjs | ||
|
|
||
| # pnpm | ||
| pnpm create flowbite-react@latest --template adonisjs | ||
|
|
||
| # bun | ||
| bun create flowbite-react@latest --template adonisjs | ||
| ``` | ||
|
|
||
| <TextDivider>Manual Installation</TextDivider> | ||
|
|
||
| ## Create project | ||
|
|
||
| Run the following command to create a new AdonisJS project using the CLI: | ||
|
|
||
| ```bash | ||
| npm init adonisjs@latest -- -K=inertia --adapter=react --ssr --install | ||
| ``` | ||
|
|
||
| ## Setup Tailwind CSS | ||
|
|
||
| 1. Install `tailwindcss` and its peer dependencies: | ||
|
|
||
| ```bash | ||
| npm i -D tailwindcss postcss autoprefixer | ||
| ``` | ||
|
|
||
| 2. Generate `tailwind.config.js` and `postcss.config.js` files: | ||
|
|
||
| ```bash | ||
| npx tailwindcss init -p | ||
| ``` | ||
|
|
||
| 3. Add the paths to all of your template files in your `tailwind.config.js` file: | ||
|
|
||
| ```js {3} | ||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| content: ["./inertia/**/*.{js,ts,jsx,tsx}", "./resources/**/*.{edge,js,ts,jsx,tsx}"], | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| }; | ||
| ``` | ||
|
|
||
| 4. Add the `@tailwind` directives for each of Tailwind's layers to your `./inertia/css/app.css` file: | ||
|
|
||
| ```css | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| ``` | ||
|
|
||
| ## Install Flowbite React | ||
|
|
||
| 1. Run the following command to install `flowbite-react`: | ||
|
|
||
| ```bash | ||
| npm i flowbite-react | ||
| ``` | ||
|
|
||
| 2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`: | ||
|
|
||
| ```js {1,7,11} | ||
| import flowbite from "flowbite-react/tailwind"; | ||
|
|
||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| content: [ | ||
| // ... | ||
| flowbite.content(), | ||
| ], | ||
| plugins: [ | ||
| // ... | ||
| flowbite.plugin(), | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| ## Dark mode | ||
|
|
||
| In server side rendered applications, such as AdonisJS, to avoid page flicker (if `dark` mode is set) before AdonisJS hydrates the content, `ThemeModeScript` component must be rendered (see implementation below). | ||
|
|
||
| `ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `<html>` element before hydration occurs. | ||
|
|
||
| ### Configure | ||
|
|
||
| 1. Import and render `ThemeModeScript` in the return body of `setup` function: | ||
|
|
||
| ```tsx {4,15-20} | ||
| // inertia/app/ssr.tsx | ||
|
|
||
| import { createInertiaApp } from "@inertiajs/react"; | ||
| import { ThemeModeScript } from "flowbite-react"; | ||
| import ReactDOMServer from "react-dom/server"; | ||
|
|
||
| export default function render(page: any) { | ||
| return createInertiaApp({ | ||
| page, | ||
| render: ReactDOMServer.renderToString, | ||
| resolve: (name) => { | ||
| const pages = import.meta.glob("../pages/**/*.tsx", { eager: true }); | ||
| return pages[`../pages/${name}.tsx`]; | ||
| }, | ||
| setup: ({ App, props }) => ( | ||
| <> | ||
| <ThemeModeScript /> | ||
| <App {...props} /> | ||
| </> | ||
| ), | ||
| }); | ||
| } | ||
| ``` | ||
| ## Try it out | ||
| Now that you have successfully installed Flowbite React you can start using the components from the library. | ||
| ```tsx | ||
| // inertia/pages/home.tsx | ||
| import { Button } from "flowbite-react"; | ||
| export default function Home() { | ||
| return <Button>Click me</Button>; | ||
| } | ||
| ``` | ||
|
|
||
| <hr /> | ||
|
|
||
| ## Templates | ||
|
|
||
| - [Github](https://github.com/themesberg/flowbite-react-template-adonisjs) | ||
| - [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-adonisjs) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters