trmnl_preview 0.5.2 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff4e3150ccec1606d5368198055556d8650b129a682ae398fa7ff29e30e42009
-  data.tar.gz: d65492ec3e770e5203bbfd736651e56b052aa726dd1ead38bff93eccb2cbf023
+  metadata.gz: dd5804f039fe8932f996c097798d5a4c9211725fad19f71c230ac3d99c9c8875
+  data.tar.gz: d13908a4314d5a397667e59ed4576ab1cb9a396b47bf2962df12bc80f53e9d14
 SHA512:
-  metadata.gz: b7157fc2656c9228482b11b4806280a29b9ce6ae3017af3f57a79e70b3f8f00ee125671476542808fc8411a8381e0569a4cfd19e6057ed4c7fd6a21a8ebee016
-  data.tar.gz: c03598652d732f5922fbe7ea9b5b24c5d09e22ac2b1f793c511d59ca0739648fced9ee6c8579794298541669ffb42c5f6a37338ba523ad8b1dd193aac721a5ba
+  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.
 
@@ -22,6 +22,7 @@ This is the structure of a plugin project:
     ├── half_horizontal.liquid
     ├── half_vertical.liquid
     ├── quadrant.liquid
+    ├── shared.liquid
     └── settings.yml
 ```
 
@@ -56,7 +57,7 @@ trmnlp push                  # upload
 Prerequisites:
 
 - Ruby 3.x
-- For BMP rendering (optional):
+- For PNG rendering (optional):
   - Firefox
   - ImageMagick
 
@@ -113,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/markup/custom_liquid_filters.rb

@@ -0,0 +1,36 @@
+require 'action_view'
+require 'singleton'
+
+module Markup
+  module CustomLiquidFilters
+    class ActionViewHelpers
+      include Singleton
+      include ActionView::Helpers
+    end
+
+    def number_with_delimiter(number, delimiter = ',', separator = ',')
+      ActionViewHelpers.instance.number_with_delimiter(number, delimiter:, separator:)
+    end
+
+    def number_to_currency(number, unit = '$', delimiter = ',', separator = '.')
+      ActionViewHelpers.instance.number_to_currency(number, unit: unit, delimiter:, separator:)
+    end
+
+    def l_word(word, locale)
+      I18n.t("custom_plugins.#{word}", locale: locale)
+    end
+
+    def l_date(date, format, locale = 'en')
+      format = format.to_sym unless format.include?('%')
+      I18n.l(date.to_datetime, :format => format, locale: locale)
+    end
+
+    def pluralize(singular, count)
+      ActionViewHelpers.instance.pluralize(count, singular)
+    end
+
+    def json(obj)
+      JSON.generate(obj)
+    end
+  end
+end

data/lib/markup/inline_templates_file_system.rb

@@ -0,0 +1,19 @@
+module Markup
+  # This in-memory "file system" is the backing storage for custom templates defined {% template [name] %} tags.
+  class InlineTemplatesFileSystem < Liquid::BlankFileSystem
+    def initialize
+      super
+      @templates = {}
+    end
+
+    # called by Markup::LiquidTemplateTag to save users' custom shared templates via our custom {% template %} tag
+    def register(name, body)
+      @templates[name] = body
+    end
+
+    # called by Liquid::Template for {% render 'foo' %} when rendering screen markup
+    def read_template_file(name)
+      @templates[name] || raise(Liquid::FileSystemError, "Template not found: #{name}")
+    end
+  end
+end

data/lib/markup/template.rb

@@ -0,0 +1,17 @@
+# get all files in the current directory as this file
+Pathname.new(__dir__).glob('*.rb').each { |file| require file }
+
+module Markup
+  # A very thin wrapper around Liquid::Template with TRMNL-specific functionality.
+  class Template < Liquid::Template
+    def self.parse(*)
+      template = super
+
+      # set up a temporary in-memory file system for custom user templates, via the magic :file_system register
+      # which will override the default file system
+      template.registers[:file_system] = InlineTemplatesFileSystem.new
+
+      template
+    end
+  end
+end

data/lib/markup/template_tag.rb

@@ -0,0 +1,31 @@
+module Markup
+  # The {% template [name] %} tag block is used in conjunction with InlineTemplatesFileSystem to allow users to define
+  # custom templates within the context of the current Liquid template. Generally speaking, they will define their own
+  # templates in the "shared" markup content, which is prepended to the individual screen templates before rendering.
+  class TemplateTag < Liquid::Block
+    NAME_REGEX = %r{\A[a-zA-Z0-9_/]+\z}
+
+    def initialize(tag_name, markup, options)
+      super
+      @name = markup.strip
+    end
+
+    def parse(tokens)
+      @body = ""
+      while (token = tokens.shift)
+        break if token.strip == "{% endtemplate %}"
+
+        @body << token
+      end
+    end
+
+    def render(context)
+      unless @name =~ NAME_REGEX
+        return "Liquid error: invalid template name #{@name.inspect} - template names must contain only letters, numbers, underscores, and slashes"
+      end
+
+      context.registers[:file_system].register(@name, @body.strip)
+      ''
+    end
+  end
+end

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/commands/login.rb

@@ -13,6 +13,7 @@ module TRMNLP
         
         api_key = prompt("API Key: ")
         raise Error, "API key cannot be empty" if api_key.empty?
+        raise Error, "Invalid API key; did you copy it from the right place?" unless api_key.start_with?("user_")
         
         config.app.api_key = api_key
         config.app.save

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/context.rb

@@ -6,8 +6,8 @@ require 'json'
 require 'liquid'
 
 require_relative 'config'
-require_relative 'custom_filters'
 require_relative 'paths'
+require_relative '../markup/template'
 
 module TRMNLP
   class Context
@@ -122,7 +122,14 @@ module TRMNLP
       template_path = paths.template(view)
       return "Missing template: #{template_path}" unless template_path.exist?
 
-      user_template = Liquid::Template.parse(template_path.read, environment: liquid_environment)
+      shared_template_path = paths.shared_template
+      if shared_template_path.exist?
+        full_markup = shared_template_path.read + template_path.read
+      else
+        full_markup = template_path.read
+      end
+
+      user_template = Markup::Template.parse(full_markup, environment: liquid_environment)
       user_template.render(user_data)
     rescue StandardError => e
       e.message
@@ -200,7 +207,8 @@ module TRMNLP
 
     def liquid_environment
       @liquid_environment ||= Liquid::Environment.build do |env|
-        env.register_filter(CustomFilters)
+        env.register_filter(Markup::CustomLiquidFilters)
+        env.register_tag('template', Markup::TemplateTag)
 
         config.project.user_filters.each do |module_name, relative_path|
           require paths.root_dir.join(relative_path)

data/lib/trmnlp/paths.rb

@@ -36,6 +36,8 @@ module TRMNLP
     def plugin_config = src_dir.join('settings.yml')
       
     def template(view) = src_dir.join("#{view}.liquid")
+
+    def shared_template = template('shared')
       
     def app_config = app_config_dir.join('config.yml')
 

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.2".freeze
+  VERSION = "0.5.4".freeze
 end

data/templates/init/src/shared.liquid

@@ -0,0 +1 @@
+

data/trmnl_preview.gemspec

@@ -45,9 +45,9 @@ Gem::Specification.new do |spec|
   # HTML rendering
   spec.add_dependency "liquid", "~> 5.6"
   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'
 
@@ -59,6 +59,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "rubyzip", "~> 2.3.0"
   spec.add_dependency "thor", "~> 1.3"
   spec.add_dependency "oj", "~> 3.16.9"
+  spec.add_dependency "tzinfo-data", "~> 1.2025"
 
   # 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

@@ -14,6 +14,7 @@ menu {
   margin: 0;
   display: flex;
   justify-content: space-between;
+  max-width: 950px;
 }
 
 menu a {
@@ -34,49 +35,9 @@ menu a.active {
   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;
+pre {
+  max-width: 950px;
+  overflow-x: scroll;
 }
 
 .spinner {