trmnl_preview 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a39d955b3dbcc869cde5e0210671a94dfa7af0ea1403fb71c883534d85b6eac
-  data.tar.gz: f0159db40a383ce3149071fd4826bdb9035abab379d442e8a93012a35f6cce30
+  metadata.gz: e965687c88e23b15e8727f9b871b6a2529bc28c388fa2e8733fb5034915ec405
+  data.tar.gz: c1299d3ce7b27a13be79d0018535c8f1b64171f7154d9dd1f425eeacbcbc0129
 SHA512:
-  metadata.gz: cccd5ba2af16c057717ae4f0acb6843fad3cd9a7f305109817c5d195f278dd1102c39a20cbf21abbbae0e18395b41ac8e5b314f5c10ae763503cc3e877f1403b
-  data.tar.gz: 19eb007c4d077a3078cde135ca200873f5d050abe167306b878b3f7374e052c282d3cb348e806486ce62fa0d6c0913efb1b4feaf100e213ad16d6e5167426ed9
+  metadata.gz: d507258ba8a315daae87b83dc5609f2aa99c9d1c674f7067cd2b67b84382a4746c8f299c7c3d0e3e9cc4f378846ca3f5696f4aa8f1dcb65c6eec8b6e44f46d74
+  data.tar.gz: 02231d9584b0b24a4b7b2749c85cbf14af2c3b6d5321c63dc03bf6e8bb7655b03ee37d86ba69b7ac16ebb3acb367cad2bf54ec437e405a1a842eb1f9263090f3

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.2
+
+- Add bitmap rendering
+- Add TRMNL's [custom plugin filters](https://help.usetrmnl.com/en/articles/10347358-custom-plugin-filters)
+- Add support for user-supplied custom filters
+
+## 0.3.1
+
+- Add live render
+
 ## 0.3.0
 
 - Add poll button

data/README.md

@@ -1,8 +1,8 @@
-# trmnl_preview
+# trmnlp
 
 A basic self-hosted web server to ease the development and sharing of [TRMNL](https://usetrmnl.com/) plugins.
 
-[Liquid](https://shopify.github.io/liquid/) templates are rendered locally as HTML, leveraging the [TRMNL Design System](https://usetrmnl.com/framework). This server does NOT generate a rendered BMP file. Hence, this is just a _preview_ of the final rendered dashboard.
+[Liquid](https://shopify.github.io/liquid/) templates are rendered leveraging the [TRMNL Design System](https://usetrmnl.com/framework). They may be generated as HTML (faster, and a good approximation of the final result) or as BMP images (slower, but more accurate).
 
 The server watches the filesystem for changes to the Liquid templates, seamlessly updating the preview without the need to refresh.
 
@@ -36,17 +36,22 @@ docker run \
 
 ## Running the Server (Local Ruby)
 
-Ruby 3.x is required. In the plugin repository:
+Prerequisites:
+
+- Ruby 3.x
+- For BMP rendering (optional):
+  - Firefox
+  - ImageMagick
+
+In the plugin repository:
 
 ```sh
-bundle add trmnl_preview    # Creates Gemfile and Gemfile.lock
+gem install trmnl_preview
 trmnlp serve                # Starts the server
 ```
 
 ## Usage Notes
 
-Simply refresh the page to re-render.
-
 When the strategy is "polling", the specified URL will be fetched once, when the server starts.
 
 When the strategy is "webhook", payloads can be POSTed to the `/webhook` endpoint. They are saved to `tmp/data.json` for future renders.

data/exe/trmnlp

@@ -7,6 +7,8 @@ when 'serve'
   require_relative '../lib/trmnl_preview/cmd/serve'
 when 'build'
   require_relative '../lib/trmnl_preview/cmd/build'
+when 'version'
+  require_relative '../lib/trmnl_preview/cmd/version'
 else
   require_relative '../lib/trmnl_preview/cmd/usage'
 end

data/lib/trmnl_preview/app.rb

@@ -4,6 +4,7 @@ require 'sinatra'
 require 'sinatra/base'
 
 require_relative 'context'
+require_relative 'screen_generator'
 
 module TRMNLPreview
   class App < Sinatra::Base
@@ -23,10 +24,10 @@ module TRMNLPreview
 
       @context.poll_data if @context.strategy == 'polling'
 
-      @live_render_clients = VIEWS.each_with_object({}) { |view, hash| hash[view] = [] }
+      @live_reload_clients = []
       @context.on_view_change do |view|
-        @live_render_clients[view].each do |ws|
-          ws.send(@context.render_template(view))
+        @live_reload_clients.each do |ws|
+          ws.send('reload')
         end
       end
     end
@@ -40,16 +41,15 @@ module TRMNLPreview
       redirect '/full'
     end
 
-    get '/live_render/:view' do
+    get '/live_reload' do
       ws = Faye::WebSocket.new(request.env)
-      view = params['view']
 
       ws.on(:open) do |event|
-        @live_render_clients[view] << ws
+        @live_reload_clients << ws
       end
   
       ws.on(:close) do |event|
-        @live_render_clients[view].delete(ws)
+        @live_reload_clients.delete(ws)
       end
   
       ws.rack_response
@@ -63,16 +63,24 @@ module TRMNLPreview
     VIEWS.each do |view|
       get "/#{view}" do
         @view = view
+        @live_reload = @context.live_render
         erb :index
       end
 
-      get "/render/#{view}" do
+      get "/render/#{view}.html" do
         @view = view
-        @live_render = @context.live_render
-        erb :render_view do
+        erb :render_html do
           @context.render_template(view)
         end
       end
+
+      get "/render/#{view}.bmp" do
+        @view = view
+        html = @context.render_full_page(view)
+        generator = ScreenGenerator.new(html, image: true)
+        img_path = generator.process
+        send_file img_path, type: 'image/png', disposition: 'inline'
+      end
     end
   end
 end

data/lib/trmnl_preview/cmd/usage.rb

@@ -5,6 +5,7 @@ Usage:
 
 Commands (-h for command-specific help):
 
-  serve     Start the TRMNL Preview server
   build     Generate static HTML files
+  serve     Start the TRMNL Preview server
+  version   Print the version number
 USAGE

data/lib/trmnl_preview/cmd/version.rb

@@ -0,0 +1 @@
+puts TRMNLPreview::VERSION

data/lib/trmnl_preview/context.rb

@@ -6,21 +6,17 @@ require 'liquid'
 require 'open-uri'
 require 'toml-rb'
 
-require_relative 'liquid_filters'
+require_relative 'custom_filters'
 
 module TRMNLPreview
   class Context
     attr_reader :strategy, :temp_dir, :live_render
     
-    def initialize(root)
+    def initialize(root, opts = {})
       config_path = File.join(root, 'config.toml')
       @user_views_dir = File.join(root, 'views')
       @temp_dir = File.join(root, 'tmp')
       @data_json_path = File.join(@temp_dir, 'data.json')
-    
-      @liquid_environment = Liquid::Environment.build do |env|
-        env.register_filter(LiquidFilters)
-      end
 
       unless File.exist?(config_path)
         raise "No config.toml found in #{root}"
@@ -35,13 +31,23 @@ module TRMNLPreview
       @url = config['url']
       @polling_headers = config['polling_headers'] || {}
       @live_render = config['live_render'] != false
+      @user_filters = config['custom_filters'] || []
 
       unless ['polling', 'webhook'].include?(@strategy)
         raise "Invalid strategy: #{strategy} (must be 'polling' or 'webhook')"
       end
-
+      
       FileUtils.mkdir_p(@temp_dir)
 
+      @liquid_environment = Liquid::Environment.build do |env|
+        env.register_filter(CustomFilters)
+
+        @user_filters.each do |module_name, relative_path|
+          require File.join(root, relative_path)
+          env.register_filter(Object.const_get(module_name))
+        end
+      end
+
       start_filewatcher_thread if @live_render
     end
 
@@ -112,7 +118,7 @@ module TRMNLPreview
     end
 
     def render_full_page(view)
-      page_erb_template = File.read(File.join(__dir__, '..', '..', 'web', 'views', 'render_view.erb'))
+      page_erb_template = File.read(File.join(__dir__, '..', '..', 'web', 'views', 'render_html.erb'))
       
       ERB.new(page_erb_template).result(ERBBinding.new(view).get_binding do
         render_template(view)

data/lib/trmnl_preview/custom_filters.rb

@@ -0,0 +1,13 @@
+require 'active_support'
+
+module TRMNLPreview
+  module CustomFilters
+    def number_with_delimiter(*args)
+      ActiveSupport::NumberHelper.number_to_delimited(*args)
+    end
+
+    def number_to_currency(*args)
+      ActiveSupport::NumberHelper.number_to_currency(*args)
+    end
+  end
+end

data/lib/trmnl_preview/screen_generator.rb

@@ -0,0 +1,137 @@
+require 'ferrum'
+require 'mini_magick'
+require 'puppeteer-ruby'
+require 'base64'
+
+module TRMNLPreview
+  class ScreenGenerator
+
+    def initialize(html, opts = {})
+      self.input = html
+      self.image = !!opts[:image]
+    end
+
+    attr_accessor :input, :output, :image, :processor, :img_path
+
+    def process
+      convert_to_image
+      image ? mono_image(output) : mono(output)
+      output.path
+      # IO.copy_stream(output, img_path)
+    end
+
+    private
+
+    # def img_path
+    #   "#{Dir.pwd}/public/images/generated/#{SecureRandom.hex(3)}.bmp"
+    # end
+
+    # Constructs the command and passes the input to the vendor/puppeteer.js
+    # script for processing. Returns a base64 encoded string
+    def convert_to_image
+      retry_count = 0
+      begin
+        # context = browser_instance.create_incognito_browser_context
+        page = firefox_browser.new_page
+        page.viewport = Puppeteer::Viewport.new(width: width, height: height)
+        # NOTE: Use below for chromium
+        # page.set_content(input, wait_until: ['networkidle0', 'domcontentloaded'])
+        # Note: Use below for firefox
+        page.set_content(input, timeout: 10000)
+        page.evaluate(<<~JAVASCRIPT)
+          () => {
+            document.getElementsByTagName('html')[0].style.overflow = "hidden";
+            document.getElementsByTagName('body')[0].style.overflow = "hidden";
+          }
+        JAVASCRIPT
+        self.output = Tempfile.new
+        page.screenshot(path: output.path, type: 'png')
+        firefox_browser.close
+      end
+    rescue Puppeteer::TimeoutError, Puppeteer::FrameManager::NavigationError => e
+      retry_count += 1
+      firefox_browser.close
+      if retry_count <= 1
+        @browser = nil
+        retry
+      else
+        puts "ERROR -> Converter::Html#convert_to_image_by_firefox -> #{e.message}"
+      end
+    end
+
+    # Refer this PR where the author reused the browser instance https://github.com/YusukeIwaki/puppeteer-ruby/pull/100/files
+    # This will increase the throughput of our image rendering process by 60-70%, saving about ~1.5 second per image generation.
+    # On local it takes < 1 second now to generate the subsequent image.
+    def firefox_browser
+      @browser ||= Puppeteer.launch(
+        product: 'firefox',
+        headless: true,
+        args: [
+          "--window-size=#{width},#{height}",
+          "--disable-web-security"
+          # "--hide-scrollbars" #works only on chrome, using page.evaluate for firefox
+        ]
+      )
+    end
+
+    def Ferrum.cached_browser
+      return nil unless $cached_browser
+
+      $cached_browser
+    end
+
+    def Ferrum.cached_browser=(value)
+      $cached_browser = value
+    end
+
+    # Overall at max wait for 2.5 seconds
+    def wait_for_stop_loading(page)
+      count = 0
+      while page.frames.first.state != :stopped_loading && count < 20
+        count += 1
+        sleep 0.1
+      end
+      sleep 0.5 # wait_until: DomContentLoaded event is not available in ferrum
+    end
+
+    def mono(img)
+      MiniMagick::Tool::Convert.new do |m|
+        m << img.path
+        m.monochrome # Use built-in smart monochrome dithering (but it's not working as expected)
+        m.depth(color_depth) # Should be set to 1 for 1-bit output
+        m.strip # Remove any additional metadata
+        m << ('bmp3:' << img.path)
+      end
+    end
+
+    def mono_image(img)
+      # Changelog:
+      # ImageMagick 6.XX used to convert the png to bitmap with dithering while maintaining the channel to 1
+      # The same seems to be broken with imagemagick 7.XX
+      # So in order to reduce the channel from 8 to 1, I just rerun the command, and it's working
+      # TODO for future, find a better way to generate image screens.
+      MiniMagick::Tool::Convert.new do |m|
+        m << img.path
+        m.dither << 'FloydSteinberg'
+        m.remap << 'pattern:gray50'
+        m.depth(color_depth) # Should be set to 1 for 1-bit output
+        m.strip # Remove any additional metadata
+        m << ('bmp3:' << img.path) # Converts to Bitmap.
+      end
+      MiniMagick::Tool::Convert.new do |m|
+        m << img.path
+        m.dither << 'FloydSteinberg'
+        m.remap << 'pattern:gray50'
+        m.depth(color_depth) # Should be set to 1 for 1-bit output
+        m.strip # Remove any additional metadata
+        m << ('bmp3:' << img.path) # Converts to Bitmap.
+      end
+    end
+
+    def width = 800
+
+    def height = 480
+
+    def color_depth = 1
+  end
+end

data/lib/trmnl_preview/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLPreview
-  VERSION = "0.3.1"
+  VERSION = "0.3.2"
 end

data/trmnl_preview.gemspec

@@ -31,14 +31,25 @@ Gem::Specification.new do |spec|
   spec.executables = ["trmnlp"]
   spec.require_paths = ["lib"]
 
-  # Uncomment to register a new dependency of your gem
+
+  # Web server
   spec.add_dependency "sinatra", "~> 4.1"
   spec.add_dependency "rackup", "~> 2.2"
   spec.add_dependency "puma", "~> 6.5"
+  spec.add_dependency "faye-websocket", "~> 0.11.3"
+
+  # HTML rendering
   spec.add_dependency "liquid", "~> 5.6"
+  spec.add_dependency "activesupport", "~> 8.0"
+  
+  # BMP rendering
+  spec.add_dependency "ferrum", "~> 0.16"
+  spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'
+  spec.add_dependency 'mini_magick', '~> 4.12.0'
+
+  # Utilities
   spec.add_dependency "toml-rb", "~> 3.0"
   spec.add_dependency "filewatcher", "~> 2.1"
-  spec.add_dependency "faye-websocket", "~> 0.11.3"
 
   # For more information and examples about making a new gem, check out our
   # guide at: https://bundler.io/guides/creating_gem.html

data/web/public/index.css

@@ -0,0 +1,98 @@
+body {
+  font-family: sans-serif;
+  margin: 10px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+menu {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+menu a {
+  padding: 0.5em 1em;
+  background: #ddd;
+  border-radius: 0.5em;
+  display: inline-block;
+  text-decoration: none;
+  color: black;
+}
+
+menu a:hover {
+  background: #ccc;
+}
+
+menu a.active {
+  background: #333;
+  color: white;
+}
+
+.case {
+  width: 1000px;
+  height: 680px;
+  position: relative;
+}
+
+iframe {
+  position: absolute;
+  border: none;
+  left: 98px;
+  top: 65px;
+  filter: grayscale(100%);
+}
+
+.case .case-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+
+.case--none .case-overlay {
+  background: none;
+}
+
+.case--white .case-overlay {
+  background-image: url("white-case.jpg");
+}
+
+.case--black .case-overlay {
+  background-image: url("black-case.jpg");
+}
+
+.case--clear .case-overlay {
+  background-image: url("clear-case.jpg");
+}
+
+.case--none iframe {
+  border: 1px solid black;
+}
+
+.spinner {
+  width: 22px;
+  height: 22px;
+  border: 5px solid #f3f3f3; /* Light gray */
+  border-top: 5px solid #3498db; /* Blue */
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

data/web/public/index.js

@@ -0,0 +1,71 @@
+const trmnlp = {};
+
+trmnlp.connectLiveRender = function () {
+  const ws = new WebSocket("/live_reload");
+
+  ws.onopen = function () {
+    console.log("Connected to live reload socket");
+  };
+
+  ws.onmessage = function (msg) {
+    if (msg.data === "reload") {
+      trmnlp.setIframeSrc(trmnlp.iframe.src);
+    }
+  };
+
+  ws.onclose = function () {
+    console.log("Reconnecting to live reload socket...");
+    setTimeout(trmnlp.connectLiveRender, 1000);
+  };
+};
+
+trmnlp.setCaseImage = function () {
+  const value = trmnlp.caseSelect.value;
+  document.querySelector(".case").className = `case case--${value}`;
+  localStorage.setItem("trmnlp-case", value);
+};
+
+trmnlp.setPreviewFormat = function () {
+  const value = trmnlp.formatSelect.value;
+  localStorage.setItem("trmnlp-format", value);
+
+  trmnlp.setIframeSrc(`/render/${trmnlp.view}.${value}`);
+};
+
+trmnlp.setIframeSrc = function (src) {
+  document.querySelector(".spinner").style.display = "inline-block";
+  trmnlp.iframe.src = src;
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+  trmnlp.view = document.querySelector("meta[name='trmnl-view']").content;
+  trmnlp.iframe = document.querySelector("iframe");
+  trmnlp.caseSelect = document.querySelector(".select-case");
+  trmnlp.formatSelect = document.querySelector(".select-format");
+  trmnlp.isLiveReloadEnabled =
+    document.querySelector("meta[name='live-reload']").content === "true";
+
+  if (trmnlp.isLiveReloadEnabled) {
+    trmnlp.connectLiveRender();
+  }
+
+  const caseValue = localStorage.getItem("trmnlp-case") || "black";
+  const formatValue = localStorage.getItem("trmnlp-format") || "html";
+
+  trmnlp.caseSelect.value = caseValue;
+  trmnlp.caseSelect.addEventListener("change", () => {
+    trmnlp.setCaseImage();
+  });
+
+  trmnlp.formatSelect.value = formatValue;
+  trmnlp.formatSelect.addEventListener("change", () => {
+    trmnlp.setPreviewFormat();
+  });
+
+  trmnlp.iframe.addEventListener("load", () => {
+    document.querySelector(".spinner").style.display = "none";
+  });
+
+  trmnlp.setCaseImage();
+  trmnlp.setPreviewFormat();
+});

data/web/views/index.erb

@@ -3,85 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="trmnl-view" content="<%= @view %>">
+    <meta name="live-reload" content="<%= @live_reload %>">
+    
     <title>TRMNL Preview</title>
-    <style>
-        body {
-            font-family: sans-serif;
-            margin: 10px;
-        }
-        main {
-            display: flex;
-            flex-direction: column;
-            width: fit-content;
-        }
-        menu {
-            padding: 0;
-            margin: 0;
-            display: flex;
-            justify-content: space-between;
-        }
-        menu a {
-            padding: 0.5em 1em;
-            background: #ddd;
-            border-radius: 0.5em;
-            display: inline-block;
-            text-decoration: none;
-            color: black;
-        }
-        menu a:hover {
-            background: #ccc;
-        }
-        menu a.active {
-            background: #333;
-            color: white;
-        }
-        .case {
-            width: 1000px;
-            height: 680px;
-            position: relative;
-        }
-        iframe {
-            position: absolute;
-            border: none;
-            left: 98px;
-            top: 65px;
-            filter: grayscale(100%);
-        }
-        .case .case-overlay {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            background-size: cover;
-            mix-blend-mode: multiply;
-            pointer-events: none;
-        }
-        .case--none .case-overlay { background: none; }
-        .case--white .case-overlay { background-image: url('white-case.jpg') }
-        .case--black .case-overlay { background-image: url('black-case.jpg') }
-        .case--clear .case-overlay { background-image: url('clear-case.jpg') }
-        .case--none iframe {
-            border: 1px solid black;
-        }
-    </style>
-    <script>
-        function updateCase() {
-            const value = document.querySelector('.select-case').value;
-            document.querySelector('.case').className = `case case--${value}`;
-            localStorage.setItem('trmnlp-case', value);
-        }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            const caseValue = localStorage.getItem('trmnlp-case') || 'black';
-
-            const select = document.querySelector('.select-case');
-            select.value = caseValue;
-            select.addEventListener('change', () => { updateCase() });
-            
-            updateCase();
-        });
-    </script>
+    
+    <link rel="stylesheet" href="/index.css">
+    <script src="/index.js"></script>
 </head>
 <body>
     <main>
@@ -92,7 +20,12 @@
                 <a class="<%= 'active' if @view == 'half_vertical' %>" href="/half_vertical">Half Vertical</a>
                 <a class="<%= 'active' if @view == 'quadrant' %>" href="/quadrant">Quadrant</a>
             </div>
-            <div>
+            <div style="display: flex; gap: 0.3em;">
+                <div class="spinner" style="display: none;"></div>
+                <select class="select-format">
+                    <option value="bmp">BMP</option>
+                    <option value="html" selected>HTML</option>
+                </select>
                 <select class="select-case">
                     <option value="none">None</option>
                     <option value="white">White</option>
@@ -105,7 +38,7 @@
         </menu>
 
         <div class="case case--black">
-            <iframe src="/render/<%= @view %>" width="800" height="480"></iframe>
+            <iframe width="800" height="480"></iframe>
             <div class="case-overlay"></div>
         </div>
     </main>

data/web/views/{render_view.erb → render_html.erb}

@@ -9,11 +9,6 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <!-- End Inter font -->
-
-    <% if @live_render %>
-      <meta name="trmnl-view" content="<%= @view %>">
-      <script src="/live-render.js"></script>
-    <% end %>
   </head>
   <body class="environment trmnl">
     <div class="screen">

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Rockwell Schrock
 bindir: exe
 cert_chain: []
-date: 2025-01-06 00:00:00.000000000 Z
+date: 2025-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -51,6 +51,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '6.5'
+- !ruby/object:Gem::Dependency
+  name: faye-websocket
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.11.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.11.3
 - !ruby/object:Gem::Dependency
   name: liquid
   requirement: !ruby/object:Gem::Requirement
@@ -66,47 +80,89 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '5.6'
 - !ruby/object:Gem::Dependency
-  name: toml-rb
+  name: activesupport
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '8.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '8.0'
 - !ruby/object:Gem::Dependency
-  name: filewatcher
+  name: ferrum
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '0.16'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '0.16'
 - !ruby/object:Gem::Dependency
-  name: faye-websocket
+  name: puppeteer-ruby
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.11.3
+        version: 0.45.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.11.3
+        version: 0.45.6
+- !ruby/object:Gem::Dependency
+  name: mini_magick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.12.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.12.0
+- !ruby/object:Gem::Dependency
+  name: toml-rb
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: filewatcher
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
 description: Automatically rebuild and preview TRNML plugins in multiple views
 email:
 - rockwell@schrock.me
@@ -127,16 +183,19 @@ files:
 - lib/trmnl_preview/cmd/build.rb
 - lib/trmnl_preview/cmd/serve.rb
 - lib/trmnl_preview/cmd/usage.rb
+- lib/trmnl_preview/cmd/version.rb
 - lib/trmnl_preview/context.rb
-- lib/trmnl_preview/liquid_filters.rb
+- lib/trmnl_preview/custom_filters.rb
+- lib/trmnl_preview/screen_generator.rb
 - lib/trmnl_preview/version.rb
 - trmnl_preview.gemspec
 - web/public/black-case.jpg
 - web/public/clear-case.jpg
-- web/public/live-render.js
+- web/public/index.css
+- web/public/index.js
 - web/public/white-case.jpg
 - web/views/index.erb
-- web/views/render_view.erb
+- web/views/render_html.erb
 homepage: https://github.com/schrockwell/trmnl_preview
 licenses:
 - MIT

data/lib/trmnl_preview/liquid_filters.rb

@@ -1,8 +0,0 @@
-module TRMNLPreview
-  module LiquidFilters
-    def number_with_delimiter(number)
-      # TODO: Replace with ActiveSupport's number_with_delimiter
-      number.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
-    end
-  end
-end

data/web/public/live-render.js

@@ -1,23 +0,0 @@
-live_render = {};
-
-live_render.connect = function () {
-  const view = document.querySelector("meta[name='trmnl-view']").content;
-  const ws = new WebSocket("/live_render/" + view);
-
-  ws.onopen = function () {
-    console.log("Connected to live push server");
-  };
-
-  ws.onmessage = function (msg) {
-    document.querySelector(".view").innerHTML = msg.data;
-  };
-
-  ws.onclose = function () {
-    console.log("Reconnecting to live push server...");
-    setTimeout(live_render.connect, 1000);
-  };
-};
-
-document.addEventListener("DOMContentLoaded", function () {
-  live_render.connect();
-});