Start on new test/dummy app for docs, demos, and tests

test/dummy/app/javascript/application.js

@@ -1,6 +1,7 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
 import '@hotwired/turbo-rails'
+import 'flowbite'
 import './turbo-boost-commands'
 import './debounced'
 import './controllers'

test/dummy/app/views/layouts/_features.html.erb

@@ -0,0 +1,105 @@
+<section>
+  <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
+    <div class="max-w-screen-md">
+      <h2 class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+        Take <span class="">Turbo Frames</span> to the Next Level
+      </h2>
+
+      <p class="text-gray-500 sm:text-xl dark:text-gray-400">
+      Unlock the potential of Turbo Frames with TurboBoost <strong class="underline underline-offset-4 decoration-dotted">Commands</strong> and boost your team's productivity in ways you never thought possible.
+      <span class="text-accent-500 dark:text-accent-300">Less boilerplate, more features.</span>
+      </p>
+    </div>
+
+    <div class="max-w-screen-md mt-8 mb-12">
+      <a href="#" class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900">
+        Get started
+        <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 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">
+        View the demos
+      </a>
+    </div>
+
+    <div class="space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0 lg:grid-cols-3">
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 5 4 4-4 4m5 0h5M2 1h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Friendly Tools</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands work seamlessly with Rails and Hotwire.
+        They enhance the way you already work, and can be introduced gradually to existing projects with almost no risk.
+        </p>
+      </div>
+
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="20" fill="none" viewBox="0 0 14 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7a3 3 0 0 1 3-3M5 19h4m0-3c0-4.1 4-4.9 4-9A6 6 0 1 0 1 7c0 4 4 5 4 9h4Z"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Shared Concepts</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands share a similar mental model with popular client-side frameworks →
+        trigger events, change state, and re-render... but, vastly simplified with server side rendering and state management.
+        </p>
+      </div>
+
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Reliable Protocols</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands run over standard HTTP.
+        This means that reactivity is incredibly robust,
+        and the same tools you use for scaling and debugging web requests will work for your reactive features.
+        </p>
+      </div>
+
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5h8m-1-3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1m6 0v3H6V2m6 0h4a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4m0 9.464 2.025 1.965L12 9.571"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Standard Mechanics</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands are simply plain Ruby methods that get called by a Rails controller before action.
+        They perform some discrete business logic and then allow normal Rails mechanics to resume.
+        </p>
+      </div>
+
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 21">
+            <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M7.24 7.194a24.16 24.16 0 0 1 3.72-3.062m0 0c3.443-2.277 6.732-2.969 8.24-1.46 2.054 2.053.03 7.407-4.522 11.959-4.552 4.551-9.906 6.576-11.96 4.522C1.223 17.658 1.89 14.412 4.121 11m6.838-6.868c-3.443-2.277-6.732-2.969-8.24-1.46-2.054 2.053-.03 7.407 4.522 11.959m3.718-10.499a24.16 24.16 0 0 1 3.719 3.062M17.798 11c2.23 3.412 2.898 6.658 1.402 8.153-1.502 1.503-4.771.822-8.2-1.433m1-6.808a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Hybrid Solutions</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands let you to "sprinkle" in RPC (remote procedure calls) whenever strict REST semantics show diminishing returns.
+        They reduce boilerplate and allow you to focus on the task at hand.
+        </p>
+      </div>
+
+      <div>
+        <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:w-12 lg:h-12 bg-primary-100 dark:bg-primary-900">
+          <svg class="w-5 h-5 lg:w-6 lg:h-6 text-primary-600 dark:text-primary-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 9.376v.786l8 3.925 8-3.925v-.786M1.994 14.191v.786l8 3.925 8-3.925v-.786M10 1.422 2 5.347l8 3.925 8-3.925-8-3.925Z"/>
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Isolated Concerns</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+        Commands help you avoid non-RESTful routes, and reduce the risk of fat models and controllers.
+        They isolate concerns and work to keep your codebase clean, testable, and maintainable.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>

test/dummy/app/views/layouts/_main.html.erb

@@ -0,0 +1,52 @@
+<main class="p-4 pt-20 h-auto md:ml-64">
+  <%= render "layouts/features" %>
+
+  <div class="grid grid-cols-1 gap-4 mb-4 sm:grid-cols-2 lg:grid-cols-4">
+    <div
+        class="h-32 rounded-lg border-2 border-gray-300 border-dashed md:h-64 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-32 rounded-lg border-2 border-gray-300 border-dashed md:h-64 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-32 rounded-lg border-2 border-gray-300 border-dashed md:h-64 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-32 rounded-lg border-2 border-gray-300 border-dashed md:h-64 dark:border-gray-600"
+        ></div>
+  </div>
+  <div
+      class="mb-4 h-96 rounded-lg border-2 border-gray-300 border-dashed dark:border-gray-600"
+      ></div>
+  <div class="grid grid-cols-2 gap-4 mb-4">
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+  </div>
+  <div
+      class="mb-4 h-96 rounded-lg border-2 border-gray-300 border-dashed dark:border-gray-600"
+      ></div>
+  <div class="grid grid-cols-2 gap-4">
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+    <div
+        class="h-48 rounded-lg border-2 border-gray-300 border-dashed md:h-72 dark:border-gray-600"
+        ></div>
+  </div>
+</main>

test/dummy/app/views/layouts/application.html.erb

@@ -13,22 +13,11 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body class="bg-gray-50 dark:bg-gray-900">
-    <%= render "layouts/navbar" %>
-
-    <div class="flex overflow-hidden pt-16">
-      <%= render "layouts/sidebar" %>
-
-      <div id="main-content" class="overflow-y-auto relative w-full h-full bg-gray-50 dark:bg-gray-900">
-        <%= render(flowbite(:breadcrumbs)) { yield :breadcrumbs } %>
-        <%= yield %>
-      </div>
+  <body>
+    <div class="antialiased bg-gray-50 dark:bg-gray-900">
+      <%= render "navbars/navbar" %>
+      <%= render "sidebars/sidebar" %>
+      <%= render "layouts/main" %>
     </div>
-
-    <%= render "layouts/footer" %>
-
-    <script type="text/javascript">
-      window.TailwindDefaults = <%= tailwind_defaults.to_json.html_safe %>;
-    </script>
   </body>
 </html>