Create a site

.gitignore

@@ -8,5 +8,6 @@
 /tmp/
 
 /demo/app/assets/builds
+/demo/build
 /demo/storage/*.sqlite3
 /demo/tmp/

README.md

@@ -52,7 +52,7 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ```css
 @import "flowbite/src/themes/default";
 @plugin "flowbite/plugin";
-@import "../builds/tailwind/flowbite-components";
+@import "../builds/tailwind/flowbite_components";
 ```
 
 ## Usage examples

demo/.github/workflows/parklife.yml

@@ -0,0 +1,48 @@
+name: Parklife
+
+on:
+  # Run on every push.
+  push:
+  # Allow manually triggering a build.
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: ruby/setup-ruby@v1
+      with:
+        bundler-cache: true
+    - uses: actions/configure-pages@v5
+      id: pages
+
+      # Build with Parklife and use its GitHub Pages URL (either its custom
+      # domain or username.github.io/repository).
+    - run: bin/static-build --base "${{ steps.pages.outputs.base_url }}"
+
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v3
+      if: github.ref == 'refs/heads/main' # Only upload on main branch.
+      with:
+        path: build/
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main' # Only deploy on main branch.
+    concurrency:
+      group: deploy
+      cancel-in-progress: true
+    steps:
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v4

demo/Gemfile

@@ -13,7 +13,9 @@ gem "puma", ">= 5.0"
 gem "tzinfo-data", platforms: %i[windows jruby]
 
 gem "flowbite-components", path: "../.." # Load the gem files from the parent directory
-gem "tailwindcss-rails", "~> 4.0.0"
+gem "tailwindcss-rails", "~> 4.3"
+
+gem "parklife"
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

demo/Gemfile.lock

@@ -94,6 +94,7 @@ GEM
       irb (~> 1.10)
       reline (>= 0.3.8)
     drb (2.2.3)
+    erb (5.0.2)
     erubi (1.13.1)
     ffi (1.17.2-aarch64-linux-gnu)
     ffi (1.17.2-aarch64-linux-musl)
@@ -109,7 +110,7 @@ GEM
     htmlentities (4.3.4)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    io-console (0.8.0)
+    io-console (0.8.1)
     irb (1.15.2)
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
@@ -167,6 +168,10 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.9-x86_64-linux-musl)
       racc (~> 1.4)
+    parklife (0.7.0)
+      nokogiri
+      rack-test
+      thor
     pp (0.6.2)
       prettyprint
     prettyprint (0.2.0)
@@ -175,7 +180,7 @@ GEM
       activesupport (>= 7.0.0)
       rack
       railties (>= 7.0.0)
-    psych (5.2.3)
+    psych (5.2.6)
       date
       stringio
     public_suffix (6.0.2)
@@ -219,14 +224,15 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
-    rake (13.2.1)
+    rake (13.3.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rdoc (6.13.1)
+    rdoc (6.14.2)
+      erb
       psych (>= 4.0.0)
     redcarpet (3.6.1)
-    reline (0.6.1)
+    reline (0.6.2)
       io-console (~> 0.5)
     rouge (4.5.2)
     securerandom (0.4.1)
@@ -239,31 +245,31 @@ GEM
     sqlite3 (2.6.0-x86_64-linux-gnu)
     sqlite3 (2.6.0-x86_64-linux-musl)
     stringio (3.1.7)
-    tailwindcss-rails (4.0.0)
+    tailwindcss-rails (4.3.0)
       railties (>= 7.0.0)
       tailwindcss-ruby (~> 4.0)
-    tailwindcss-ruby (4.1.10)
-    tailwindcss-ruby (4.1.10-aarch64-linux-gnu)
-    tailwindcss-ruby (4.1.10-aarch64-linux-musl)
-    tailwindcss-ruby (4.1.10-arm64-darwin)
-    tailwindcss-ruby (4.1.10-x86_64-darwin)
-    tailwindcss-ruby (4.1.10-x86_64-linux-gnu)
-    tailwindcss-ruby (4.1.10-x86_64-linux-musl)
+    tailwindcss-ruby (4.1.11)
+    tailwindcss-ruby (4.1.11-aarch64-linux-gnu)
+    tailwindcss-ruby (4.1.11-aarch64-linux-musl)
+    tailwindcss-ruby (4.1.11-arm64-darwin)
+    tailwindcss-ruby (4.1.11-x86_64-darwin)
+    tailwindcss-ruby (4.1.11-x86_64-linux-gnu)
+    tailwindcss-ruby (4.1.11-x86_64-linux-musl)
     thor (1.4.0)
     timeout (0.4.3)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uri (1.0.3)
     useragent (0.16.11)
-    view_component (4.0.1)
+    view_component (4.0.2)
       activesupport (>= 7.1.0, < 8.1)
       concurrent-ruby (~> 1)
     websocket-driver (0.7.7)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     yard (0.9.37)
-    zeitwerk (2.7.2)
+    zeitwerk (2.7.3)
 
 PLATFORMS
   aarch64-linux
@@ -282,11 +288,12 @@ DEPENDENCIES
   flowbite-components!
   listen
   lookbook (>= 2.3.11)
+  parklife
   propshaft
   puma (>= 5.0)
   rails (~> 8.0.2)
   sqlite3 (>= 2.1)
-  tailwindcss-rails (~> 4.0.0)
+  tailwindcss-rails (~> 4.3)
   tzinfo-data
 
 BUNDLED WITH

demo/Parkfile

@@ -0,0 +1,23 @@
+require 'parklife/rails'
+require_relative 'config/environment'
+
+Parklife.application.configure do |config|
+  # Serve trailing slash-less URLs from GitHub Pages.
+  config.nested_index = false
+
+  # See configuration options here:
+  # https://github.com/benpickles/parklife#configuration
+end
+
+Parklife.application.routes do
+  root crawl: true
+
+  # Add further paths not discovered by crawling from the root - Parklife's
+  # Rails integration lets you use the app's route helpers:
+  #
+  # get hidden_pages_path, crawl: true
+  # get feed_path(format: :atom)
+
+  # Services typically allow a custom 404 page.
+  # get '/404.html'
+end

demo/app/assets/tailwind/application.css

@@ -5,4 +5,8 @@
 @plugin "flowbite/plugin";
 
 /* Include CSS classes used by the components in the final CSS */
-@source "../../../../app/components/flowbite";
+@import "../builds/tailwind/flowbite_components";
+
+footer a {
+  @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
+}

demo/app/controllers/pages_controller.rb

@@ -0,0 +1,4 @@
+class PagesController < ApplicationController
+  def index
+  end
+end

demo/app/views/layouts/application.html.erb

@@ -22,8 +22,57 @@
   </head>
 
   <body>
+    <header>
+      <nav class="bg-white border-gray-200 dark:bg-gray-900">
+        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+          <%= link_to(root_path, class: "flex items-center space-x-3 rtl:space-x-reverse") do %>
+            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">flowbite-components</span>
+          <% end %>
+          <% if @menu_toggle_implemented %>
+            <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+                <span class="sr-only">Open main menu</span>
+                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+                </svg>
+            </button>
+          <% end %>
+          <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+            <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+              <li>
+                <%= link_to("Home", root_url, class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
+              </li>
+              <li>
+                <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
     <main class="container mx-auto mt-28 px-5 flex">
-      <%= yield %>
+      <article>
+        <%= yield %>
+      </article>
     </main>
+
+    <footer class="mt-28 px-5 py-5 flex border-t-2 border-gray-200 dark:border-gray-70">
+      <div class="space-y-5">
+        <div class="flex space-x-5">
+          <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components") %>
+          <%= link_to("RubyGems", "https://rubygems.org/gems/flowbite-components") %>
+          <%= link_to("RubyDoc documentation", "https://www.rubydoc.info/gems/flowbite-components/") %>
+        </div>
+
+        <div>
+          Licensed under the <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>, except where otherwise stated
+        </div>
+
+        <div>
+          The Flowbite name and logos are trademarks of <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>.
+          The Tailwind name and logos are trademarks of <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
+        </div>
+      </div>
+    </footer>
   </body>
 </html>

demo/app/views/pages/index.html.erb

@@ -0,0 +1,68 @@
+<section class="bg-white dark:bg-gray-900">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Rails meets Flowbite</h1>
+    <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.</p>
+    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+      <%= link_to("https://github.com/substancelab/flowbite-components?tab=readme-ov-file#installation", class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %>
+          Get started
+        <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+      <% end %>
+      <%= link_to(lookbook_path, class: Flowbite::Button.classes(size: :lg, style: :alternative)) do %>
+          View components
+      <% end %>
+    </div>
+  </div>
+</section>
+
+<div class="flex flex-col gap-6 sm:flex-row">
+  <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 sm:flex-1">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
+      <path fill-rule="evenodd" d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z" clip-rule="evenodd" />
+    </svg>
+    <%= link_to("https://flowbite.com/") do %>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Designed by Flowbite</h2>
+    <% end %>
+    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Open-source library of over 600+ UI components, sections, and pages.</p>
+    <%= link_to("https://flowbite.com/", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+      Flowbite documentation
+      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/></svg>
+    <% end %>
+  </div>
+
+  <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 sm:flex-1">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
+      <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+    </svg>
+    <%= link_to("https://tailwindcss.com") do %>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Powered by Tailwind CSS</h2>
+    <% end %>
+    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Utility-first CSS framework that can be composed to build any design, directly in your markup.</p>
+    <%= link_to("https://tailwindcss.com", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+      Tailwind CSS documentation
+      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
+      </svg>
+    <% end %>
+  </div>
+
+  <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 sm:flex-1">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
+      <path fill-rule="evenodd" d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z" clip-rule="evenodd" />
+      <path d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z" />
+      <path fill-rule="evenodd" d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+    </svg>
+    <%= link_to("https://viewcomponent.org") do %>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Built on ViewComponent</h2>
+    <% end %>
+    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Reusable, testable & encapsulated view components for Ruby on Rails.</p>
+    <%= link_to("https://viewcomponent.org", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+      ViewComponent documentation
+      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
+      </svg>
+    <% end %>
+  </div>
+</div>

demo/bin/static-build

@@ -0,0 +1,27 @@
+#!/usr/bin/env sh
+
+set -eu
+
+# Run the app in production mode to ensure correct asset URLs are generated etc.
+export RAILS_ENV=production
+export SECRET_KEY_BASE=dummy
+
+# If your Rails app uses ActiveRecord then this is a good point to create and
+# seed the database from db/seeds.rb.
+# bundle exec rails db:setup
+
+# Generate production-optimised assets with Sprockets and friends. This must be
+# done before generating the Parklife build as Rails will blow up if it detects
+# missing assets in production.
+bundle exec rails assets:precompile
+
+# Build with Parklife - and forward arguments sent to this script.
+bundle exec parklife build "$@"
+
+# Copy all public resources to ./build.
+if [ -d public ]; then
+  cp -R public/* build
+fi
+
+# List all files in the build (useful for debugging).
+find build -type f | sort