Server Side Rendering of Tailwind

app/controllers/staff/pages_controller.rb

@@ -11,6 +11,7 @@ def index
 
   def show
     @body = params[:preview] || @page.unpublished_body || ""
+    @include_tailwind = true
     render template: 'pages/show', layout: "themes/#{current_website.theme}"
   end
 
@@ -39,6 +40,8 @@ def update
   def preview; end
 
   def publish
+    save_tailwind_page_content
+
     @page.update(published_body: @page.unpublished_body,
                  body_published_at: Time.current)
     flash[:success] = "#{@page.name} Page was successfully published."
@@ -67,6 +70,31 @@ def set_page
             end
   end
 
+  def save_tailwind_page_content
+    @body = @page.unpublished_body
+    content = render_to_string(template: 'pages/show', layout: "themes/#{current_website.theme}")
+    command = ["yarn run tailwindcss --minify"]
+    page_file = Tempfile.new(['page_content', '.html'], 'tmp')
+    page_file.write(content)
+    page_file.close
+    command.push("--content", page_file.path)
+    if tailwind_config = current_website.tailwind_config
+      config_file = Tempfile.new(['config_file', '.js'], 'tmp')
+      config_file.write(tailwind_config)
+      config_file.close
+      command.push("--config", config_file.path)
+    end
+    output = `#{command.join(' ')}`
+    css = output.match(/(\/\*! tailwindcss .*)/m)
+    html = "<style>#{css}</style>"
+
+    content = @page.contents.find_or_initialize_by(name: Page::TAILWIND)
+    content.update!(placement: Website::Content::HEAD, html: html)
+  ensure
+    page_file&.unlink
+    config_file&.unlink
+  end
+
   def build_page
     if template = params[:page] && page_params[:template].presence
       Page.from_template(

app/helpers/page_helper.rb

@@ -36,4 +36,10 @@ def background_style
   def logo_image(args)
     resize_image_tag(current_website.logo, **args)
   end
+
+  def tailwind_content
+    return false if @include_tailwind
+
+    @page&.tailwind_css&.html_safe
+  end
 end

app/javascript/packs/default_theme.js

@@ -0,0 +1 @@
+import "controllers"

app/models/page.rb

@@ -4,9 +4,13 @@ class Page < ApplicationRecord
     'home' => { },
   }
 
+  TAILWIND = 'tailwind'.freeze
+
   belongs_to :website
   after_save_commit :purge_website_cache
 
+  has_many :contents, class_name: 'Website::Content', as: :contentable, dependent: :destroy
+
   scope :published, -> { where.not(published_body: nil).where(hide_page: false) }
   scope :in_footer, -> { published.where.not(footer_category: [nil, ""]) }
 
@@ -39,6 +43,10 @@ def unpublished_changes?
     published_body != unpublished_body
   end
 
+  def tailwind_css
+    contents.where(name: TAILWIND).pluck(:html).first
+  end
+
   private
 
   def purge_website_cache

app/models/website.rb

@@ -4,7 +4,7 @@ class Website < ApplicationRecord
   belongs_to :event
   has_many :pages, dependent: :destroy
   has_many :fonts, class_name: 'Website::Font', dependent: :destroy
-  has_many :contents, class_name: 'Website::Content', dependent: :destroy
+  has_many :contents, class_name: 'Website::Content', as: :contentable, dependent: :destroy
   has_one :meta_data, class_name: 'Website::MetaData', dependent: :destroy
 
   has_many :session_formats, through: :event
@@ -29,6 +29,16 @@ def self.domain_match(domain)
     where(arel_table[:domains].matches("%#{domain}%"))
   end
 
+  def tailwind_config
+    config = contents
+      .where(Content.arel_table[:html]
+      .matches("%tailwind.config%"))
+      .first
+    if config
+      config.html.gsub(%r{<script>|</script>}, "").gsub("tailwind.config", "module.exports")
+    end
+  end
+
   def manual_purge
     purge_cache { save }
   end

app/models/website/content.rb

@@ -4,9 +4,10 @@ class Website::Content < ApplicationRecord
     FOOTER = "footer",
   ].freeze
 
-  belongs_to :website
+  belongs_to :contentable, polymorphic: true
 
   scope :for, -> (placement) { where(placement: placement) }
+  scope :for_page, -> (slug) { where(name: slug) }
 end
 
 # == Schema Information

app/views/layouts/themes/default.html.haml

@@ -21,11 +21,11 @@
     %meta{property: "twitter:image", content: current_website.meta_image_url}
 
     = stylesheet_link_tag current_website.theme, media: 'all'
-    = javascript_pack_tag "application"
+    = javascript_pack_tag "default_theme"
     :css
       #{current_website.font_faces_css}
       #{current_website.font_root_css}
-    = javascript_pack_tag "tailwind"
+    = tailwind_content || javascript_pack_tag("tailwind")
     = current_website.head_content
 
   %body
@@ -58,4 +58,4 @@
         })
     = current_website.footer_content
 
-    = yield :javascript
+    = yield :javascript

db/migrate/20220609140626_convert_website_contents_to_polymorphic.rb

@@ -0,0 +1,10 @@
+class ConvertWebsiteContentsToPolymorphic < ActiveRecord::Migration[6.1]
+  def change
+    change_table :website_contents, bulk: true do |t|
+      t.rename :website_id, :contentable_id
+      t.string :contentable_type, default: 'Website', null: false
+      t.index [:contentable_id, :contentable_type]
+      t.remove_index :contentable_id
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_05_23_185412) do
+ActiveRecord::Schema.define(version: 2022_06_09_140626) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -344,10 +344,11 @@
     t.text "html"
     t.string "placement", default: "head", null: false
     t.string "name"
-    t.bigint "website_id"
+    t.bigint "contentable_id"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
-    t.index ["website_id"], name: "index_website_contents_on_website_id"
+    t.string "contentable_type", default: "Website", null: false
+    t.index ["contentable_id", "contentable_type"], name: "index_website_contents_on_contentable_id_and_contentable_type"
   end
 
   create_table "website_fonts", force: :cascade do |t|

package.json

@@ -14,7 +14,8 @@
     "react-dom": "^16.8.6",
     "react_ujs": "^2.5.0",
     "regenerator-runtime": "^0.13.7",
-    "stimulus": "^3.0.1"
+    "stimulus": "^3.0.1",
+    "tailwindcss": "3.1.4"
   },
   "devDependencies": {
     "webpack-dev-server": "^3.3.1"

spec/features/website/configuration_spec.rb

@@ -71,7 +71,7 @@
     website = create(:website, event: event)
     home_page = create(:page, website: website)
 
-    login_as(organizer)
+    signin_as(organizer)
     visit edit_event_staff_website_path(event)
     click_on("Add Content")
     fill_in_codemirror(<<~HTML
@@ -111,7 +111,7 @@
     visit page_path(event, home_page)
     expect(response_headers["Cache-Control"]).to eq("max-age=0, private, s-maxage=0")
 
-    login_as(organizer)
+    signin_as(organizer)
     visit edit_event_staff_website_path(event)
 
     select("automatic", from: "Caching")
@@ -126,7 +126,6 @@
     expect(response_headers["Last-Modified"]).to eq(last_modified)
 
     RSpec::Mocks.space.proxy_for(fastly_service).reset
-    sleep 1
     visit event_staff_pages_path(event)
     click_on("Publish")
     expect(fastly_service).to have_received(:purge_by_key).with(event.slug)
@@ -145,7 +144,6 @@
     last_modified = response_headers["Last-Modified"]
 
     RSpec::Mocks.space.proxy_for(fastly_service).reset
-    sleep 1
     visit event_staff_pages_path(event)
     click_on("Publish")
     expect(fastly_service).not_to have_received(:purge_by_key).with(event.slug)

spec/features/website/page_management_spec.rb

@@ -60,7 +60,7 @@
 
   scenario "Organizer publishes a website page", :js do
     home_page = create(:page, unpublished_body: 'Home Content', published_body: nil)
-    login_as(organizer)
+    signin_as(organizer)
 
     visit page_path(slug: event.slug, page: home_page.slug)
     expect(page).to have_content("Page Not Found")
@@ -91,7 +91,7 @@
   end
 
   scenario "Organizer creates and publishes a splash page from a template", :js do
-    login_as(organizer)
+    signin_as(organizer)
     visit new_event_staff_page_path(event)
     select("splash", from: "template")
 

spec/rails_helper.rb

@@ -93,3 +93,4 @@ def save_timestamped_screenshot(page)
 
   page.save_screenshot(screenshot_path)
 end
+Capybara.default_max_wait_time = 3.seconds

spec/support/helpers/session_helpers.rb

@@ -22,5 +22,8 @@ def forgot_password(email)
       click_button 'Send me reset password instructions'
     end
 
+    def signin_as(user)
+      signin(user.email, user.password)
+    end
   end
 end