Server Side Rendering of Tailwind with Puppeteer

- uses Puppeteer to launch a headless browser  to render the published
  page and extract the JIT tailwind css to be used directly on public
published page
- converts Website::Content to be a polymorphic association so that it
  can be used generally on Website or specific per Page
- adds a separate default_theme webpack so that unneeded application js
  is not included on website pages
-

Author: jonsgreen

Gemfile

@@ -54,6 +54,7 @@ gem 'redcarpet', '~> 3.5'
 gem 'simple_form'
 gem 'tinymce-rails'
 gem 'image_processing', '~> 1.2'
+gem 'puppeteer-ruby'
 gem 'react-rails'
 gem 'webpacker'
 

Gemfile.lock

@@ -362,6 +362,10 @@ GEM
       nio4r (~> 2.0)
     pundit (2.1.1)
       activesupport (>= 3.0.0)
+    puppeteer-ruby (0.40.7)
+      concurrent-ruby (~> 1.1.0)
+      mime-types (>= 3.0)
+      websocket-driver (>= 0.6.0)
     racc (1.6.0)
     rack (2.2.3.1)
     rack-mini-profiler (2.3.3)
@@ -579,6 +583,7 @@ DEPENDENCIES
   pry-rescue
   puma
   pundit
+  puppeteer-ruby
   rack-mini-profiler
   rack-timeout (~> 0.5)
   rails (~> 6.1.4)

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,27 @@ def set_page
             end
   end
 
+  def save_tailwind_page_content
+    Puppeteer.launch(
+      headless: true,
+      args: ['--no-sandbox', '--disable-setuid-sandbox']
+    ) do |browser|
+      page = browser.pages.first || browser.new_page
+      page.goto(root_url)
+      cookies.each do |name, value|
+        page.set_cookie(name: name, value: value)
+      end
+      page.goto(event_staff_page_url(current_event, @page), wait_until: 'domcontentloaded')
+      css = page.query_selector_all('style').map do |style|
+        style.evaluate('(el) => el.textContent')
+      end.detect { |text| text.match("tailwindcss") }
+      html = "<style>#{css}</style>"
+
+      content = @page.contents.find_or_initialize_by(name: Page::TAILWIND)
+      content.update!(placement: Website::Content::HEAD, html: html)
+    end
+  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

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