trmnl_preview 0.5.3 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c67d7a534ea6adba08ab5b46d40f60ec8e505123136916ba98e43991c6877f58
-  data.tar.gz: 5a22288cb32a76b2b8cb8d8163a38c964736e6fd7c067da6f76f9fe8c7401ec1
+  metadata.gz: dd5804f039fe8932f996c097798d5a4c9211725fad19f71c230ac3d99c9c8875
+  data.tar.gz: d13908a4314d5a397667e59ed4576ab1cb9a396b47bf2962df12bc80f53e9d14
 SHA512:
-  metadata.gz: 9df016907e67d1cdc0b771299162b769c83b2bb2c7d9ab4b0e5bd77cf8db3f6a8f15db93ad4a00810e0fd224cb2e3dbee1876c9fe416854f26f239704a28537a
-  data.tar.gz: bc4e3d5c46fc64d25a3791c77c0e43af5a84875c2ad2853742e3ba31cf7a5bbdef5a548d92a4bab4b27b048e089eae4e712cd99eec43ad1ee0902f27e39a364c
+  metadata.gz: e51b14f3cc1320a96a948c5c1b44622dc13a53eeb348f7b9f6ca4e928628dbccec6fd4de54598408c7d778f1891d82577ebc3853b884a122432b89d74dd11d56
+  data.tar.gz: 7962920070178a0701251b5f847b1b35630d6643323b1d87cb8c11c0f91f8478e842d88722f1d04743a28c69f25c78c394538daa9aa3e4777beb8647b3b53f9b

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.5.4
+
+- Added `shared.liquid` file to template (@mariovisic)
+- Stringified custom field values to match production (@mariovisic)
+- Optimized image generation (@sd416)
+- Fixed preview from growing when JSON data becomes too wide (@stephenyeargin)
+
+## 0.5.3
+
+- Added support for [reusable markup](https://docs.usetrmnl.com/go/reusing-markup) in `shared.liquid`
+- Replaced custom case images with [\<trmnl-frame\> component](https://github.com/usetrmnl/trmnl-component)
+- Updated custom Liquid filters
+- Added API key validation during `trmnlp login`
+
 ## 0.5.2
 
 - Added `time_zone` project config option, which is injected into `trmnl.user` variables

data/README.md

@@ -2,7 +2,7 @@
 
 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 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).
+[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 PNG 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.
 
@@ -57,7 +57,7 @@ trmnlp push                  # upload
 Prerequisites:
 
 - Ruby 3.x
-- For BMP rendering (optional):
+- For PNG rendering (optional):
   - Firefox
   - ImageMagick
 
@@ -114,6 +114,15 @@ The `settings.yml` file is part of the plugin definition.
 
 See [TRMNL documentation](https://help.usetrmnl.com/en/articles/10542599-importing-and-exporting-private-plugins#h_581fb988f0) for details on this file's contents.
 
+
+## Tests
+
+To test, run:
+
+```sh
+bin/rake
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/usetrmnl/trmnlp.

data/bin/rake

@@ -0,0 +1,27 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'rake' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
+
+bundle_binstub = File.expand_path("bundle", __dir__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300).include?("This file was generated by Bundler")
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("rake", "rake")

data/lib/trmnlp/app.rb

@@ -86,12 +86,16 @@ module TRMNLP
         end
       end
 
-      get "/render/#{view}.bmp" do
+      get "/render/#{view}.png" 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'
+        temp_image = generator.process
+        
+        send_file temp_image.path, type: 'image/png', disposition: 'inline'
+
+        temp_image.close
+        temp_image.unlink
       end
     end
   end

data/lib/trmnlp/config/project.rb

@@ -26,7 +26,7 @@ module TRMNLP
         (@config['watch'] || []).map { |watch_path| paths.expand(watch_path) }.uniq
       end
 
-      def custom_fields = @config['custom_fields'] || {}
+      def custom_fields = @config.fetch('custom_fields', {}).transform_values(&:to_s)
 
       def user_data_overrides = @config['variables'] || {}
 
@@ -46,4 +46,4 @@ module TRMNLP
       end
     end
   end
-end
+end

data/lib/trmnlp/screen_generator.rb

@@ -1,11 +1,105 @@
-require 'ferrum'
 require 'mini_magick'
 require 'puppeteer-ruby'
 require 'base64'
+require 'thread'
 
 module TRMNLP
   class ScreenGenerator
-
+    # Browser pool management for efficient resource usage
+    class BrowserPool
+      def initialize(max_size: 2)
+        @browsers = []
+        @available = Queue.new
+        @mutex = Mutex.new
+        @max_size = max_size
+        @shutdown = false
+        
+        # Register cleanup on exit
+        at_exit { shutdown }
+      end
+      
+      def with_page
+        browser = nil
+        page = nil
+        
+        begin
+          browser = checkout_browser
+          page = browser.new_page
+          yield page
+        ensure
+          # Clean up page but keep browser alive
+          page&.close rescue nil
+          checkin_browser(browser) if browser
+        end
+      end
+      
+      def shutdown
+        @mutex.synchronize do
+          return if @shutdown
+          @shutdown = true
+          
+          # Close all browsers
+          @browsers.each do |browser|
+            browser.close rescue nil
+          end
+          @browsers.clear
+        end
+      end
+      
+      private
+      
+      def checkout_browser
+        # Try to get an available browser
+        browser = @available.pop(true) rescue nil
+        
+        # If no browser available and we haven't reached max size, create a new one
+        if browser.nil?
+          @mutex.synchronize do
+            if @browsers.size < @max_size
+              browser = create_browser
+              @browsers << browser
+            end
+          end
+        end
+        
+        # If still no browser, wait for one to become available
+        browser ||= @available.pop
+        
+        # Verify browser is still alive
+        begin
+          browser.targets # Simple check to see if browser responds
+          browser
+        rescue
+          # Browser is dead, create a new one
+          @mutex.synchronize do
+            @browsers.delete(browser)
+            browser = create_browser
+            @browsers << browser
+          end
+          browser
+        end
+      end
+      
+      def checkin_browser(browser)
+        return if @shutdown
+        @available.push(browser)
+      end
+      
+      def create_browser
+        Puppeteer.launch(
+          product: 'firefox',
+          headless: true,
+          args: [
+            "--window-size=800,480",
+            "--disable-web-security"
+          ]
+        )
+      end
+    end
+    
+    # Class-level browser pool shared across all instances
+    @@browser_pool = BrowserPool.new
+    
     def initialize(html, opts = {})
       self.input = html
       self.image = !!opts[:image]
@@ -16,115 +110,80 @@ module TRMNLP
     def process
       convert_to_image
       image ? mono_image(output) : mono(output)
-      output.path
-      # IO.copy_stream(output, img_path)
+      output
     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}"
+        @@browser_pool.with_page do |page|
+          # Configure page
+          page.viewport = Puppeteer::Viewport.new(width: width, height: height)
+          
+          # Set content with appropriate wait strategy
+          page.set_content(input, timeout: 10000)
+          
+          # Hide scrollbars
+          page.evaluate(<<~JAVASCRIPT)
+            () => {
+              document.getElementsByTagName('html')[0].style.overflow = "hidden";
+              document.getElementsByTagName('body')[0].style.overflow = "hidden";
+            }
+          JAVASCRIPT
+          
+          # Take screenshot
+          self.output = Tempfile.new(['screenshot', '.png'])
+          page.screenshot(path: output.path, type: 'png')
+        end
+      rescue Puppeteer::TimeoutError, Puppeteer::FrameManager::NavigationError => e
+        retry_count += 1
+        if retry_count <= 1
+          retry
+        else
+          puts "ERROR -> ScreenGenerator#convert_to_image -> #{e.message}"
+          raise
+        end
       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)
+        m << 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.
+      # Convert to monochrome bitmap with proper dithering
+      # This implementation works with both ImageMagick 6.x and 7.x
       MiniMagick::Tool::Convert.new do |m|
         m << img.path
+        
+        # First convert to grayscale to ensure proper channel handling
+        m.colorspace << 'Gray'
+        
+        # Apply Floyd-Steinberg dithering for better quality
         m.dither << 'FloydSteinberg'
+        
+        # Remap to a 50% gray pattern for better dithering
         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|
+        
+        # Set the image type to bilevel (1-bit black and white)
+        m.type << 'Bilevel'
+        
+        # Set color depth to 1 bit
+        m.depth << color_depth
+        
+        # Remove any metadata to reduce file size
+        m.strip
+        
         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
 
@@ -134,4 +193,4 @@ module TRMNLP
 
     def color_depth = 1
   end
-end
+end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = "0.5.3".freeze
+  VERSION = "0.5.4".freeze
 end

data/templates/init/src/shared.liquid

@@ -0,0 +1 @@
+

data/trmnl_preview.gemspec

@@ -47,8 +47,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "activesupport", "~> 8.0"
   spec.add_dependency "actionview", "~> 8.0"
 
-  # BMP rendering
-  spec.add_dependency "ferrum", "~> 0.16"
+  # PNG rendering
   spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'
   spec.add_dependency 'mini_magick', '~> 4.12.0'
 

data/web/public/index.css

@@ -14,6 +14,7 @@ menu {
   margin: 0;
   display: flex;
   justify-content: space-between;
+  max-width: 950px;
 }
 
 menu a {
@@ -34,6 +35,11 @@ menu a.active {
   color: white;
 }
 
+pre {
+  max-width: 950px;
+  overflow-x: scroll;
+}
+
 .spinner {
   width: 22px;
   height: 22px;

data/web/views/index.erb

@@ -24,7 +24,7 @@
             <div style="display: flex; gap: 0.3em; align-items: center;">
                 <div class="spinner" style="display: none;"></div>
                 <select class="select-format">
-                    <option value="bmp">BMP</option>
+                    <option value="png">PNG</option>
                     <option value="html" selected>HTML</option>
                 </select>
                 <select class="select-case">

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.4
 platform: ruby
 authors:
 - Rockwell Schrock
 bindir: bin
 cert_chain: []
-date: 2025-05-22 00:00:00.000000000 Z
+date: 2025-06-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -107,20 +107,6 @@ dependencies:
     - - "~>"
       - !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
@@ -272,6 +258,7 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
+- bin/rake
 - bin/trmnlp
 - lib/markup/custom_liquid_filters.rb
 - lib/markup/inline_templates_file_system.rb
@@ -305,13 +292,11 @@ files:
 - templates/init/src/half_vertical.liquid
 - templates/init/src/quadrant.liquid
 - templates/init/src/settings.yml
+- templates/init/src/shared.liquid
 - trmnl_preview.gemspec
-- web/public/black-case.jpg
-- web/public/clear-case.jpg
 - web/public/index.css
 - web/public/index.js
 - web/public/trmnl-component.js
-- web/public/white-case.jpg
 - web/views/index.erb
 - web/views/render_html.erb
 homepage: https://github.com/usetrmnl/trmnlp