basic tailwind styling

evdevdev · Sep 13, 2024 · d599065 · d599065
1 parent aec29cf
commit d599065
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,7 @@
 /test/dummy/db/*.sqlite3-*
 /test/dummy/log/*.log
 /test/dummy/storage/
-/test/dummy/tmp/
+/test/dummy/tmp/
+
+# Custom to this project
+todo.md
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,5 +10,5 @@
     "editor.semanticHighlighting.enabled": true,
     "editor.formatOnType": true,
     "editor.wordSeparators": "`~@#$%^&*()-=+[{]}\\|;:'\",.<>/"
-  }
+  },
 }
diff --git a/Gemfile b/Gemfile
@@ -14,3 +14,4 @@ gem "rubocop-rails-omakase", require: false
 
 # Start debugger with binding.b [https://github.com/ruby/debug]
 gem "debug"
+gem "erb_lint"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -79,6 +79,13 @@ GEM
       tzinfo (~> 2.0, >= 2.0.5)
     ast (2.4.2)
     base64 (0.2.0)
+    better_html (2.1.1)
+      actionview (>= 6.0)
+      activesupport (>= 6.0)
+      ast (~> 2.0)
+      erubi (~> 1.4)
+      parser (>= 2.4)
+      smart_properties
     bigdecimal (3.1.8)
     builder (3.3.0)
     concurrent-ruby (1.3.4)
@@ -89,6 +96,13 @@ GEM
       irb (~> 1.10)
       reline (>= 0.3.8)
     drb (2.2.1)
+    erb_lint (0.6.0)
+      activesupport
+      better_html (>= 2.0.1)
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop (>= 1)
+      smart_properties
     erubi (1.13.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -220,6 +234,7 @@ GEM
       rubocop-rails
     ruby-progressbar (1.13.0)
     securerandom (0.3.1)
+    smart_properties (1.17.0)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -270,6 +285,7 @@ PLATFORMS
 DEPENDENCIES
   action_prompt!
   debug
+  erb_lint
   puma
   rubocop-rails-omakase
   sprockets-rails

diff --git a/app/controllers/action_prompt/previews_controller.rb b/app/controllers/action_prompt/previews_controller.rb
@@ -1,6 +1,11 @@
-class ActionPrompt::PreviewsController < Rails::ApplicationController
+class ActionPrompt::PreviewsController < ActionController::Base
   prepend_view_path ActionPrompt::Engine.root.join("app", "views")
-  before_action :require_local!
+  layout "application"
+  # Ideally, we'd like to inhert from Rails::ApplicationController, but that
+  # would prevent us from using a Tailwind CDN. So instead, we're using ActionController::Base.
+  #
+  # If we are able to use Rails::ApplicationController, then re-enable this line
+  # before_action :require_local!
 
   def index
     @page_title = "Action Prompt Previews"

diff --git a/app/views/action_prompt/previews/index.html.erb b/app/views/action_prompt/previews/index.html.erb
@@ -1,13 +1,20 @@
-<h1>Action Prompt Previews</h1>
-
-<% if @previews.any? %>
-  <% @previews.each do |preview| %>
-    <h3><%= preview.preview_name.titleize %></h3>
-    <% preview.prompts.each do |prompt| %>
-      <p><%= link_to prompt.name, "/action_prompt/previews/#{prompt.slug}" %></p>
-    <% end %>
+<h1 class="text-xl font-semibold">Action Prompt Previews</h1>
+<div class="py-4">
+  <% if @previews.blank? %>
+    <p>You have not defined any Action Prompt Previews.</p>
+    <!-- TODO: Add a link to the Action Prompt documentation here -->
+  <% else %>
+    <div class="space-y-4">
+      <% @previews.each do |preview| %>
+        <div>
+          <h2 class="text-lg font-semibold"><%= preview.preview_name.titleize %></h2>
+          <ul>
+            <% preview.prompts.each do |prompt| %>
+              <li><%= link_to prompt.name, "/action_prompt/previews/#{prompt.slug}", class: "cursor-pointer text-blue-500 underline hover:text-blue-600" %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
   <% end %>
-<% else %>
-  <p>You have not defined any Action Prompt Previews.</p>
-  <!-- TODO: Add a link to the Action Prompt documentation here -->
-<% end %>
+</div>
diff --git a/app/views/action_prompt/previews/show.html.erb b/app/views/action_prompt/previews/show.html.erb
@@ -1,8 +1,12 @@
-<h1>Action Prompt Preview</h1>
-<div>
-    <%= @preview_class.name %>
-</div>
-<div>
+<div>Prompt</div>
+<h1 class="text-xl font-semibold">
+  <%= @preview_class.name %>: <%= params[:prompt_name] %>
+</h1>
+<div class="py-4">
+  <div>
+    Output
+  </div>
+  <div class="bg-gray-100 p-2 rounded-md border shadow-sm">
     <%= @prompt_output %>
-</div>
-
+  </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= @page_title %></title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-yellow-100 pt-2">
+
+<div class="mx-auto w-2/3 bg-white rounded-lg p-8 shadow-lg">
+<%= yield %>
+</div>
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@ gem "rubocop-rails-omakase", require: false

		# Start debugger with binding.b [https://github.com/ruby/debug]
		gem "debug"
		gem "erb_lint"