Add Rails 7 turbo support with flowbite.turbo.js file.

themesberg · Dec 8, 2022 · 95de60f · 95de60f
1 parent c22684e
commit 95de60f
Show file tree

Hide file tree

Showing 25 changed files with 169 additions and 471 deletions.
diff --git a/config.yml b/config.yml
@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
   homepage: "https://flowbite.com"
-  current_version: 1.5.4
+  current_version: 1.5.5
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 

diff --git a/content/getting-started/changelog.md b/content/getting-started/changelog.md
@@ -15,6 +15,11 @@ nextLink: customize/configuration/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v1.5.5
+
+- added support for Ruby on Rails 7 import map with turbo
+- improved event listeners for interactive components
+
 ### v1.5.4
 
 - released new Speed Dial component

diff --git a/content/getting-started/flask.md b/content/getting-started/flask.md
@@ -233,9 +233,9 @@ Let's start by adding a <a href="{{< ref "components/navbar" >}}">Navbar compone
 
 <body>
     <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
-        <div class="container flex flex-wrap justify-between items-center mx-auto">
+        <div class="container flex flex-wrap items-center justify-between mx-auto">
             <a href="https://flowbite.com/" class="flex items-center">
-                <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo">
+                <img src="https://flowbite.com/docs/images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Flowbite Logo">
                 <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
             </a>
             <div class="flex md:order-2">
@@ -254,32 +254,32 @@ Let's start by adding a <a href="{{< ref "components/navbar" >}}">Navbar compone
                     </svg>
                 </button>
             </div>
-            <div class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="navbar-cta">
+            <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-cta">
                 <ul
-                    class="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                    class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                     <li>
                         <a href="#"
-                            class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
+                            class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
                             aria-current="page">Home</a>
                     </li>
                     <li>
                         <a href="#"
-                            class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
+                            class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
                     </li>
                     <li>
                         <a href="#"
-                            class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
+                            class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
                     </li>
                     <li>
                         <a href="#"
-                            class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
+                            class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
                     </li>
                 </ul>
             </div>
         </div>
     </nav>
 
-    <script src="https://unpkg.com/[email protected].4/dist/flowbite.js"></script>
+    <script src="https://unpkg.com/[email protected].5/dist/flowbite.js"></script>
 </body>
 
 </html>
@@ -293,15 +293,15 @@ Let's add a free [Tailwind CSS hero section](https://flowbite.com/blocks/marketi
 
 ```html
 <section class="bg-white dark:bg-gray-900">
-    <div class="grid py-8 px-4 mx-auto max-w-screen-xl lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
-        <div class="place-self-center mr-auto lg:col-span-7">
-            <h1 class="mb-4 max-w-2xl text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">Payments tool for software companies</h1>
-            <p class="mb-6 max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
-            <a href="#" class="inline-flex justify-center items-center py-3 px-5 mr-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
+    <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
+        <div class="mr-auto place-self-center lg:col-span-7">
+            <h1 class="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">Payments tool for software companies</h1>
+            <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
+            <a href="#" class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
                 Get started
-                <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
             </a>
-            <a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
+            <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                 Speak to Sales
             </a> 
         </div>

diff --git a/content/getting-started/rails.md b/content/getting-started/rails.md
@@ -105,7 +105,7 @@ module.exports = {
 module.exports = {
 
     content: [
-        "./node_modules/flowbite/**/*.js"
+        './node_modules/flowbite/**/*.js'
     ]
 
 }
@@ -115,6 +115,9 @@ module.exports = {
 
 ```javascript
 import "flowbite"
+
+// for turbo support import the flowbite.turbo.js file which uses "turbo:load" event listeners
+import "flowbite/src/flowbite.turbo.js"
 ```
 
 11. Run the following command to include Flowbite's JavaScript inside the `importmap.rb` file:
@@ -127,13 +130,20 @@ Alternatively, you can also include the script separately or using CDN:
 
 ```html
 // relative path
-<script src="../path/to/flowbite/dist/flowbite.js"></script>
+<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>
 
 // CDN
 <link rel="stylesheet" href="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.min.css" />
 ```
 
+### Turbo load support CDN
+
+For turbo support you can include `flowbite.turbo.js` which add the `turbo:load` event listener on the window for the data attributes:
+
+<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.turbo.js"></script>
+
 Now you can use interactive components such as modals, dropdowns, navbars, and more.
+
 ## Building your project
 
 Run the following command to start a local server and build the source files:
@@ -144,6 +154,8 @@ Run the following command to start a local server and build the source files:
 
 This will create a local server and you will be able to access the pages on `localhost:3000`.
 
+You can also run `rails tailwindcss:build` to compile Tailwind CSS.
+
 ## Create a homepage
 
 First of all, you need to delete the default `index.html` file inside the `public/` directory and then follow these steps:
@@ -154,7 +166,7 @@ First of all, you need to delete the default `index.html` file inside the `publi
 
 ```html
 <button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
-<div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
+<div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
     Tooltip content
     <div class="tooltip-arrow" data-popper-arrow></div>
 </div>

diff --git a/content/getting-started/svelte.md b/content/getting-started/svelte.md
@@ -97,7 +97,7 @@ Modify the `src/app.html` by adding `flowbite.js` as the following:
     </head>
   <body>
     <div id="svelte">%svelte.body%</div>
-    <script src="https://unpkg.com/[email protected].4/dist/flowbite.js"></script>
+    <script src="https://unpkg.com/[email protected].5/dist/flowbite.js"></script>
   </body>
 </html>
 ```
@@ -121,7 +121,7 @@ the head and `flowbite.js` just before the body tag.
   </head>
   <body>
     <div id="svelte">%svelte.body%</div>
-   <script src="https://unpkg.com/[email protected].4/dist/flowbite.js"></script>
+   <script src="https://unpkg.com/[email protected].5/dist/flowbite.js"></script>
   </body>
 </html>
 ```

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,6 +1,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
     integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="{{ .Site.BaseURL }}flowbite.js?v=1.5.4a"></script>
-<script src="{{ .Site.BaseURL }}datepicker.js?v=1.5.4a"></script>
-<script src="{{ .Site.BaseURL }}docs.js?v=1.5.4a"></script>
+<script src="{{ .Site.BaseURL }}flowbite.js?v=1.5.5a"></script>
+<script src="{{ .Site.BaseURL }}datepicker.js?v=1.5.5a"></script>
+<script src="{{ .Site.BaseURL }}docs.js?v=1.5.5a"></script>
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
@@ -3,5 +3,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.5.4a">
-<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.5.4a">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.5.5a">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.5.5a">