Skip to content

Commit aac91db

Browse files
etewiahclaude
andcommitted
Optimize Flowbite: load via importmap, remove CDN JS script tags
- Pin Flowbite 2.5.2 via esm.sh for importmap compatibility - Create Stimulus controller for Flowbite initialization and Turbo reinit - Import Flowbite in application.js for global availability - Remove CDN JS script tags from all 6 theme layouts - Update CDN CSS from 2.3.0 to 2.5.2 for version consistency - Add data-controller="flowbite" to body tags for Stimulus init Benefits: - Fix version mismatch (was 2.3.0 CDN vs 4.0.1 npm) - Centralize JS loading via importmap (easier to manage) - Proper Turbo integration via Stimulus controller - One fewer HTTP request per page (JS CDN removed) Themes updated: default, barcelona, biarritz, bologna, brisbane, brussels 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 827cecd commit aac91db

File tree

11 files changed

+521
-31
lines changed

11 files changed

+521
-31
lines changed

app/javascript/application.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55
import Rails from "@rails/ujs"
66
Rails.start()
77

8+
// Flowbite UI components (Carousel, Dropdown)
9+
// Imported here to ensure it's available for the Stimulus controller
10+
import "flowbite"
11+
812
import "controllers"
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
import { initFlowbite, initCarousels, initDropdowns } from "flowbite"
3+
4+
/**
5+
* Flowbite Controller
6+
*
7+
* Initializes Flowbite UI components and handles re-initialization
8+
* after Turbo navigation. Only Carousel and Dropdown components
9+
* are actively used in this application.
10+
*
11+
* Usage: Add data-controller="flowbite" to the body or a parent element
12+
* that contains Flowbite components.
13+
*/
14+
export default class extends Controller {
15+
connect() {
16+
this.initializeFlowbite()
17+
}
18+
19+
/**
20+
* Initialize Flowbite components.
21+
* Called on initial page load and after Turbo navigation.
22+
*/
23+
initializeFlowbite() {
24+
// Initialize all Flowbite components
25+
// This handles data-carousel-*, data-dropdown-*, etc.
26+
if (typeof initFlowbite === 'function') {
27+
initFlowbite()
28+
} else {
29+
// Fallback: initialize specific components we use
30+
this.initializeCarousels()
31+
this.initializeDropdowns()
32+
}
33+
}
34+
35+
/**
36+
* Initialize carousel components specifically.
37+
* Used for property image galleries.
38+
*/
39+
initializeCarousels() {
40+
if (typeof initCarousels === 'function') {
41+
initCarousels()
42+
}
43+
}
44+
45+
/**
46+
* Initialize dropdown components specifically.
47+
* Used for search form select menus.
48+
*/
49+
initializeDropdowns() {
50+
if (typeof initDropdowns === 'function') {
51+
initDropdowns()
52+
}
53+
}
54+
55+
/**
56+
* Re-initialize after Turbo renders new content.
57+
* This handles both full page navigations and partial updates.
58+
*/
59+
turboLoad() {
60+
this.initializeFlowbite()
61+
}
62+
63+
/**
64+
* Re-initialize after Turbo Stream updates.
65+
*/
66+
turboFrameLoad() {
67+
this.initializeFlowbite()
68+
}
69+
}

app/themes/barcelona/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@
3636
<%= stylesheet_link_tag "barcelona_theme", media: "all" %>
3737
</noscript>
3838

39-
<%# Flowbite CSS - deferred %>
40-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
39+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
40+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4242

4343
<%# Lucide Icons - inline SVG styles %>
4444
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -54,7 +54,7 @@
5454
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#0B5394" %>">
5555
</head>
5656

57-
<body class="tnt-body barcelona-theme <%= @current_website.body_style %> font-sans antialiased bg-warm-50 text-warm-900">
57+
<body class="tnt-body barcelona-theme <%= @current_website.body_style %> font-sans antialiased bg-warm-50 text-warm-900" data-controller="flowbite">
5858
<%= render 'shared/demo_banner' %>
5959
<%# Brand icons SVG sprite - must be early in body for <use> references %>
6060
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -94,7 +94,7 @@
9494

9595
<%# JavaScript loaded at end of body for best performance %>
9696
<%= javascript_include_tag "pwb/application", defer: true %>
97-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
97+
<%# Flowbite JS now loaded via importmap in application.js %>
9898
<%= javascript_importmap_tags %>
9999

100100
<%# Deferred UI enhancements %>

app/themes/biarritz/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
<%= stylesheet_link_tag "pwb/themes/default", media: "all" %>
3535
</noscript>
3636

37-
<%# Flowbite CSS - deferred %>
38-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
39-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
37+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
38+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
39+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4040

4141
<%# Lucide Icons - inline SVG styles %>
4242
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -51,7 +51,7 @@
5151
<link rel="manifest" href="/manifest.json">
5252
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#0369A1" %>">
5353
</head>
54-
<body class="tnt-body biarritz-theme <%= @current_website.body_style %> bg-warm-50 text-gray-900">
54+
<body class="tnt-body biarritz-theme <%= @current_website.body_style %> bg-warm-50 text-gray-900" data-controller="flowbite">
5555
<%= render 'shared/demo_banner' %>
5656
<%# Brand icons SVG sprite - must be early in body for <use> references %>
5757
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -73,7 +73,7 @@
7373

7474
<%# JavaScript loaded at end of body for best performance %>
7575
<%= javascript_include_tag "pwb/application", defer: true %>
76-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
76+
<%# Flowbite JS now loaded via importmap in application.js %>
7777
<%= javascript_importmap_tags %>
7878

7979
<%= yield(:page_script) %>

app/themes/bologna/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@
3636
<%= stylesheet_link_tag "bologna_theme", media: "all" %>
3737
</noscript>
3838

39-
<%# Flowbite CSS - deferred %>
40-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
39+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
40+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4242

4343
<%# Lucide Icons - inline SVG styles %>
4444
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -54,7 +54,7 @@
5454
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#c2410c" %>">
5555
</head>
5656

57-
<body class="tnt-body bologna-theme <%= @current_website.body_style %> font-sans antialiased bg-warm-gray-50 text-warm-gray-900">
57+
<body class="tnt-body bologna-theme <%= @current_website.body_style %> font-sans antialiased bg-warm-gray-50 text-warm-gray-900" data-controller="flowbite">
5858
<%= render 'shared/demo_banner' %>
5959
<%# Brand icons SVG sprite - must be early in body for <use> references %>
6060
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -91,7 +91,7 @@
9191

9292
<%# JavaScript loaded at end of body for best performance %>
9393
<%= javascript_include_tag "pwb/application", defer: true %>
94-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
94+
<%# Flowbite JS now loaded via importmap in application.js %>
9595
<%= javascript_importmap_tags %>
9696

9797
<%# Deferred UI enhancements %>

app/themes/brisbane/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@
3636
<%= stylesheet_link_tag "brisbane_theme", media: "all" %>
3737
</noscript>
3838

39-
<%# Flowbite CSS - deferred %>
40-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
39+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
40+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
41+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4242

4343
<%# Lucide Icons - inline SVG styles %>
4444
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -54,7 +54,7 @@
5454
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#c9a962" %>">
5555
</head>
5656

57-
<body class="tnt-body brisbane-theme <%= @current_website.body_style %> font-sans antialiased bg-luxury-cream text-luxury-charcoal">
57+
<body class="tnt-body brisbane-theme <%= @current_website.body_style %> font-sans antialiased bg-luxury-cream text-luxury-charcoal" data-controller="flowbite">
5858
<%= render 'shared/demo_banner' %>
5959
<%# Brand icons SVG sprite - must be early in body for <use> references %>
6060
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -82,7 +82,7 @@
8282

8383
<%# JavaScript loaded at end of body for best performance %>
8484
<%= javascript_include_tag "pwb/application", defer: true %>
85-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
85+
<%# Flowbite JS now loaded via importmap in application.js %>
8686
<%= javascript_importmap_tags %>
8787

8888
<%# Deferred UI enhancements - loaded after main content %>

app/themes/brussels/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535
<%= stylesheet_link_tag "brussels_theme", media: "all" %>
3636
</noscript>
3737

38-
<%# Flowbite CSS - deferred %>
39-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
40-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
38+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
39+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
40+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4141

4242
<%# Lucide Icons - inline SVG styles %>
4343
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -53,7 +53,7 @@
5353
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#9ACD32" %>">
5454
</head>
5555

56-
<body class="tnt-body brussels-theme <%= @current_website.body_style %> font-sans antialiased bg-brussels-light text-brussels-dark">
56+
<body class="tnt-body brussels-theme <%= @current_website.body_style %> font-sans antialiased bg-brussels-light text-brussels-dark" data-controller="flowbite">
5757
<%= render 'shared/demo_banner' %>
5858
<%# Brand icons SVG sprite %>
5959
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -81,7 +81,7 @@
8181

8282
<%# JavaScript loaded at end of body for best performance %>
8383
<%= javascript_include_tag "pwb/application", defer: true %>
84-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
84+
<%# Flowbite JS now loaded via importmap in application.js %>
8585
<%= javascript_importmap_tags %>
8686

8787
<%# Header scroll effect %>

app/themes/default/views/layouts/pwb/application.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
<%= stylesheet_link_tag "pwb/themes/default", media: "all" %>
3535
</noscript>
3636

37-
<%# Flowbite CSS - deferred %>
38-
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
39-
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"></noscript>
37+
<%# Flowbite CSS - deferred (JS loaded via importmap) %>
38+
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
39+
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet"></noscript>
4040

4141
<%# Lucide Icons - inline SVG styles %>
4242
<%= stylesheet_link_tag "icons", media: "all" %>
@@ -52,7 +52,7 @@
5252
<link rel="manifest" href="/manifest.json">
5353
<meta name="theme-color" content="<%= @current_website.style_variables["primary_color"] || "#3b82f6" %>">
5454
</head>
55-
<body class="tnt-body default-theme <%= @current_website.body_style %> bg-gray-50 text-gray-900">
55+
<body class="tnt-body default-theme <%= @current_website.body_style %> bg-gray-50 text-gray-900" data-controller="flowbite">
5656
<%= render 'shared/demo_banner' %>
5757
<%# Brand icons SVG sprite - must be early in body for <use> references %>
5858
<%= render partial: '/pwb/brand_icons_sprite' %>
@@ -74,7 +74,7 @@
7474

7575
<%# JavaScript loaded at end of body for best performance %>
7676
<%= javascript_include_tag "pwb/application", defer: true %>
77-
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script>
77+
<%# Flowbite JS now loaded via importmap in application.js %>
7878
<%= javascript_importmap_tags %>
7979

8080
<%= yield(:page_script) %>

app/views/layouts/pwb/page_part.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
# All themes now use Tailwind CSS
1414
%>
1515
<%= stylesheet_link_tag tailwind_file, "data-turbo-track": "reload" %>
16-
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
16+
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet" />
1717
<%
1818
case theme_name
1919
when 'brisbane'

config/importmap.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@
88

99
# Rails UJS for AJAX forms (replaces jquery_ujs without jQuery dependency)
1010
pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/ujs@7.1.3/app/assets/javascripts/rails-ujs.esm.js"
11+
12+
# Flowbite - UI components (Carousel, Dropdown)
13+
# Using esm.sh for ES module compatibility with importmap
14+
pin "flowbite", to: "https://esm.sh/flowbite@2.5.2/dist/flowbite.es.js"

0 commit comments

Comments
 (0)