trmnl_preview 0.3.0 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3944c7a74517407dbb4ee683c628111668149c622be67a4ba3d69a2655d8b48e
-  data.tar.gz: e6c9d4f7472e4b56d818884ba6ca33307706891da62c40121398036507568fcd
+  metadata.gz: e965687c88e23b15e8727f9b871b6a2529bc28c388fa2e8733fb5034915ec405
+  data.tar.gz: c1299d3ce7b27a13be79d0018535c8f1b64171f7154d9dd1f425eeacbcbc0129
 SHA512:
-  metadata.gz: 1fd0a512a23f1439cc4030543f92272682917d1024ae8ef6eed7449f51d7677add6a0974ed4783b56ad088729ac53a7343e0c00d9026c83d762fb9f825406eb2
-  data.tar.gz: 70c1ba02c0df2d7e427fc079f0bee439fdeea0c120f348d562f734e10f10b210c11db34fbc99c76894afa5622714445efb1fee17fa44029080ba22c216462b1d
+  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,10 @@
-# 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.
 
 ![Screenshot](docs/preview.png)
 
@@ -34,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.
@@ -53,6 +60,7 @@ When the strategy is "webhook", payloads can be POSTed to the `/webhook` endpoin
 
 - `strategy` - Either "polling" or "webhook"
 - `url` - The URL from which to fetch JSON data (polling strategy only)
+- `live_render` - Set to `false` to disable automatic rendering when Liquid templates change (default `true`)
 - `[polling_headers]` - A section of headers to append to the HTTP poll request (polling strategy only)
 
 ## Contributing

data/config.example.toml

@@ -5,6 +5,9 @@ strategy = "polling"
 # Poll URL (required for polling strategy)
 url = "https://example.com/data.json"
 
+# Automatically re-render the view when Liquid templates change (default: true)
+live_render = true
+
 # Polling headers (optional, for polling strategy)
 [polling_headers]
 authorization = "bearer 123"

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

@@ -1,8 +1,10 @@
 
+require 'faye/websocket'
 require 'sinatra'
 require 'sinatra/base'
 
 require_relative 'context'
+require_relative 'screen_generator'
 
 module TRMNLPreview
   class App < Sinatra::Base
@@ -21,6 +23,13 @@ module TRMNLPreview
       end
 
       @context.poll_data if @context.strategy == 'polling'
+
+      @live_reload_clients = []
+      @context.on_view_change do |view|
+        @live_reload_clients.each do |ws|
+          ws.send('reload')
+        end
+      end
     end
 
     post '/webhook' do
@@ -32,6 +41,20 @@ module TRMNLPreview
       redirect '/full'
     end
 
+    get '/live_reload' do
+      ws = Faye::WebSocket.new(request.env)
+
+      ws.on(:open) do |event|
+        @live_reload_clients << ws
+      end
+  
+      ws.on(:close) do |event|
+        @live_reload_clients.delete(ws)
+      end
+  
+      ws.rack_response
+    end
+
     get '/poll' do
       @context.poll_data
       redirect back
@@ -40,15 +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
-        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

@@ -1,25 +1,22 @@
 require 'erb'
 require 'fileutils'
+require 'filewatcher'
 require 'json'
 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
+    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}"
@@ -33,12 +30,46 @@ module TRMNLPreview
       @strategy = config['strategy']
       @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
+
+    def start_filewatcher_thread
+      Thread.new do
+        loop do
+          begin
+            Filewatcher.new(@user_views_dir).watch do |changes|
+              views = changes.map { |path, _change| File.basename(path, '.liquid') }
+              views.each do |view|
+                @view_change_callback.call(view) if @view_change_callback
+              end
+            end
+          rescue => e
+            puts "Error during live render: #{e}"
+          end
+        end
+      end
+    end
+
+    def on_view_change(&block)
+      @view_change_callback = block
     end
 
     def user_data
@@ -75,17 +106,19 @@ module TRMNLPreview
     end
 
     def render_template(view)
-      path = view_path(view)
-      unless File.exist?(path)
-        return "Missing plugin template: views/#{view}.liquid"
-      end
-
-      user_template = Liquid::Template.parse(File.read(path), environment: @liquid_environment)
-      user_template.render(user_data)
+        path = view_path(view)
+        unless File.exist?(path)
+          return "Missing plugin template: views/#{view}.liquid"
+        end
+
+        user_template = Liquid::Template.parse(File.read(path), environment: @liquid_environment)
+        user_template.render(user_data)
+    rescue StandardError => e
+      e.message
     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.0"
+  VERSION = "0.3.2"
 end

data/trmnl_preview.gemspec

@@ -31,12 +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"
 
   # 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>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  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
@@ -65,6 +79,62 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.6'
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '8.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '8.0'
+- !ruby/object:Gem::Dependency
+  name: ferrum
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.16'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.16'
+- !ruby/object:Gem::Dependency
+  name: puppeteer-ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.45.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        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
@@ -79,6 +149,20 @@ dependencies:
     - - "~>"
       - !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
@@ -99,15 +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/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