trmnl_preview 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d511eb133cb9ee46d6d343f9ed1bef3c11c3e581ae193310d2d6f50d900c4a4
-  data.tar.gz: ed60374a348285201cd0f49396cd2995c5b87301866aec421cd3c21131c6fe98
+  metadata.gz: 3a39d955b3dbcc869cde5e0210671a94dfa7af0ea1403fb71c883534d85b6eac
+  data.tar.gz: f0159db40a383ce3149071fd4826bdb9035abab379d442e8a93012a35f6cce30
 SHA512:
-  metadata.gz: 063e9d97310fdc7c20609e83573006e18df1a081455d8d60d1694fbbc21a43c82c99290395b54e0b815d498884ebf69f984f4d153c3d50131c34b090c6752749
-  data.tar.gz: c44116ac437e7636c403481d6b5b773a5f0d0ccf425b6e2181bc987d272056bef407ce43919d967fa86da80b96b032534d423b43dd60ef71d56c96ec22e4b9ab
+  metadata.gz: cccd5ba2af16c057717ae4f0acb6843fad3cd9a7f305109817c5d195f278dd1102c39a20cbf21abbbae0e18395b41ac8e5b314f5c10ae763503cc3e877f1403b
+  data.tar.gz: 19eb007c4d077a3078cde135ca200873f5d050abe167306b878b3f7374e052c282d3cb348e806486ce62fa0d6c0913efb1b4feaf100e213ad16d6e5167426ed9

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0
+
+- Add poll button
+- Add case image overlays
+- Add `trmnlp build` command
+- Add support for `url` pointing to a local JSON data file
+
 ## 0.2.0
 
 - Add "commands" concept to `trmnlp` executable

data/README.md

@@ -4,6 +4,8 @@ A basic self-hosted web server to ease the development and sharing of [TRMNL](ht
 
 [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.
 
+The server watches the filesystem for changes to the Liquid templates, seamlessly updating the preview without the need to refresh.
+
 ![Screenshot](docs/preview.png)
 
 ## Creating a Plugin
@@ -53,6 +55,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

@@ -5,6 +5,8 @@ require_relative '../lib/trmnl_preview'
 case ARGV[0].to_s.downcase
 when 'serve'
   require_relative '../lib/trmnl_preview/cmd/serve'
+when 'build'
+  require_relative '../lib/trmnl_preview/cmd/build'
 else
   require_relative '../lib/trmnl_preview/cmd/usage'
 end

data/lib/trmnl_preview/app.rb

@@ -1,97 +1,77 @@
-require 'json'
-require 'liquid'
-require 'open-uri'
+
+require 'faye/websocket'
 require 'sinatra'
 require 'sinatra/base'
-require 'toml-rb'
 
-require_relative 'liquid_filters'
+require_relative 'context'
 
-class TRMNLPreview::App < Sinatra::Base
-  # Constants
-  VIEWS = %w{full half_horizontal half_vertical quadrant}
+module TRMNLPreview
+  class App < Sinatra::Base
+    # Sinatra settings
+    set :views, File.join(File.dirname(__FILE__), '..', '..', 'web', 'views')
+    set :public_folder, File.join(File.dirname(__FILE__), '..', '..', 'web', 'public')
+    
+    def initialize(*args)
+      super
 
-  # Sinatra settings
-  set :views, File.join(File.dirname(__FILE__), '..', '..', 'views')
-  
-  def initialize(*args)
-    super
+      begin
+        @context = Context.new(settings.user_dir)
+      rescue StandardError => e
+        puts e.message
+        exit 1
+      end
 
-    @config_path = File.join(settings.user_dir, 'config.toml')
-    @user_views_dir = File.join(settings.user_dir, 'views')
-    @temp_dir = File.join(settings.user_dir, 'tmp')
-    @data_json_path = File.join(@temp_dir, 'data.json')
+      @context.poll_data if @context.strategy == 'polling'
 
-    unless File.exist?(@config_path)
-      puts "No config.toml found in #{settings.user_dir}"
-      exit 1
+      @live_render_clients = VIEWS.each_with_object({}) { |view, hash| hash[view] = [] }
+      @context.on_view_change do |view|
+        @live_render_clients[view].each do |ws|
+          ws.send(@context.render_template(view))
+        end
+      end
     end
-  
-    unless Dir.exist?(@user_views_dir)
-      puts "No views found at #{@user_views_dir}"
-      exit 1
+
+    post '/webhook' do
+      @context.set_data(request.body.read)
+      "OK"
+    end
+    
+    get '/' do
+      redirect '/full'
     end
 
-    FileUtils.mkdir_p(@temp_dir)
+    get '/live_render/:view' do
+      ws = Faye::WebSocket.new(request.env)
+      view = params['view']
 
-    @config = TomlRB.load_file(@config_path)
-    strategy = @config['strategy']
-  
-    unless ['polling', 'webhook'].include?(strategy)
-      puts "Invalid strategy: #{strategy} (must be 'polling' or 'webhook')"
-      exit 1
-    end
-  
-    url = @config['url']
-    polling_headers = @config['polling_headers'] || {}
-  
-    if strategy == 'polling'
-      if url.nil?
-        puts "URL is required for polling strategy"
-        exit 1
+      ws.on(:open) do |event|
+        @live_render_clients[view] << ws
       end
   
-      print "Fetching #{url}... "
-      payload = URI.open(url, polling_headers).read
-      File.write(@data_json_path, payload)
-      puts "got #{payload.size} bytes"
-    end
+      ws.on(:close) do |event|
+        @live_render_clients[view].delete(ws)
+      end
   
-    @liquid_environment = Liquid::Environment.build do |env|
-      env.register_filter(TRMNLPreview::LiquidFilters)
+      ws.rack_response
     end
-  end
 
-  post '/webhook' do
-    body = request.body.read
-    File.write(@data_json_path, body)
-    "OK"
-  end
-  
-  get '/' do
-    redirect '/full'
-  end
-  
-  VIEWS.each do |view|
-    get "/#{view}" do
-      @view = view
-      erb :index
+    get '/poll' do
+      @context.poll_data
+      redirect back
     end
-
-    get "/render/#{view}" do
-      path = File.join(@user_views_dir, "#{view}.liquid")
-      unless File.exist?(path)
-        halt 404, "Plugin template not found: views/#{view}.liquid"
+    
+    VIEWS.each do |view|
+      get "/#{view}" do
+        @view = view
+        erb :index
       end
 
-      user_template = Liquid::Template.parse(File.read(path), environment: @liquid_environment)
-
-      @view = view
-      erb :render_view do
-        data = JSON.parse(File.read(@data_json_path))
-        data = { data: data } if data.is_a?(Array) # per TRMNL docs, bare array is wrapped in 'data' key
-
-        user_template.render(data)
+      get "/render/#{view}" do
+        @view = view
+        @live_render = @context.live_render
+        erb :render_view do
+          @context.render_template(view)
+        end
       end
     end
   end

data/lib/trmnl_preview/cmd/build.rb

@@ -0,0 +1,25 @@
+require 'optionparser'
+
+require_relative '../context'
+
+OptionParser.new do |opts|
+  opts.banner = "Usage: trmnlp build [directory]"
+end.parse!
+
+root = ARGV[1] || Dir.pwd
+begin
+  context = TRMNLPreview::Context.new(root)
+rescue StandardError => e
+  puts e.message
+  exit 1
+end
+
+context.poll_data
+
+TRMNLPreview::VIEWS.each do |view|
+  output_path = File.join(context.temp_dir, "#{view}.html")
+  puts "Creating #{output_path}..."
+  File.write(output_path, context.render_full_page(view))
+end
+
+puts "Done!"

data/lib/trmnl_preview/cmd/usage.rb

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

data/lib/trmnl_preview/context.rb

@@ -0,0 +1,129 @@
+require 'erb'
+require 'fileutils'
+require 'filewatcher'
+require 'json'
+require 'liquid'
+require 'open-uri'
+require 'toml-rb'
+
+require_relative 'liquid_filters'
+
+module TRMNLPreview
+  class Context
+    attr_reader :strategy, :temp_dir, :live_render
+    
+    def initialize(root)
+      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}"
+      end
+    
+      unless Dir.exist?(@user_views_dir)
+        raise "No views found at #{@user_views_dir}"
+      end
+
+      config = TomlRB.load_file(config_path)
+      @strategy = config['strategy']
+      @url = config['url']
+      @polling_headers = config['polling_headers'] || {}
+      @live_render = config['live_render'] != false
+
+      unless ['polling', 'webhook'].include?(@strategy)
+        raise "Invalid strategy: #{strategy} (must be 'polling' or 'webhook')"
+      end
+
+      FileUtils.mkdir_p(@temp_dir)
+
+      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
+      data = JSON.parse(File.read(@data_json_path))
+      data = { data: data } if data.is_a?(Array) # per TRMNL docs, bare array is wrapped in 'data' key
+      data
+    end
+
+    def poll_data
+      if @url.nil?
+        raise "URL is required for polling strategy"
+      end
+
+      print "Fetching #{@url}... "
+
+      if @url.match?(/^https?:\/\//)
+        payload = URI.open(@url, @polling_headers).read
+      else
+        payload = File.read(@url)
+      end
+
+      File.write(@data_json_path, payload)
+      puts "got #{payload.size} bytes"
+
+      user_data
+    end
+
+    def set_data(payload)
+      File.write(@data_json_path, payload)
+    end
+
+    def view_path(view)
+      File.join(@user_views_dir, "#{view}.liquid")
+    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)
+    rescue StandardError => e
+      e.message
+    end
+
+    def render_full_page(view)
+      page_erb_template = File.read(File.join(__dir__, '..', '..', 'web', 'views', 'render_view.erb'))
+      
+      ERB.new(page_erb_template).result(ERBBinding.new(view).get_binding do
+        render_template(view)
+      end)
+    end
+
+    private 
+
+    class ERBBinding
+      def initialize(view) = @view = view
+      def get_binding = binding
+    end
+  end
+end

data/lib/trmnl_preview/liquid_filters.rb

@@ -1,6 +1,8 @@
-module TRMNLPreview::LiquidFilters
-  def number_with_delimiter(number)
-    # TODO: Replace with ActiveSupport's number_with_delimiter
-    number.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
+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/lib/trmnl_preview/version.rb

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

data/lib/trmnl_preview.rb

@@ -2,10 +2,9 @@
 
 module TRMNLPreview; end
 
-# require_relative "trmnl_preview/app"
+require_relative "trmnl_preview/context"
 require_relative "trmnl_preview/version"
 
 module TRMNLPreview
-  class Error < StandardError; end
-  # Your code goes here...
-end
+  VIEWS = %w{full half_horizontal half_vertical quadrant}
+end

data/trmnl_preview.gemspec

@@ -37,6 +37,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency "puma", "~> 6.5"
   spec.add_dependency "liquid", "~> 5.6"
   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/live-render.js

@@ -0,0 +1,23 @@
+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();
+});

data/web/views/index.erb

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+</head>
+<body>
+    <main>
+        <menu>
+            <div>
+                <a class="<%= 'active' if @view == 'full' %>" href="/full">Full</a>
+                <a class="<%= 'active' if @view == 'half_horizontal' %>" href="/half_horizontal">Half Horizontal</a>
+                <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>
+                <select class="select-case">
+                    <option value="none">None</option>
+                    <option value="white">White</option>
+                    <option value="black" selected>Black</option>
+                    <option value="clear">Clear</option>
+                </select>
+
+                <a href="/poll">Poll</a>
+            </div>
+        </menu>
+
+        <div class="case case--black">
+            <iframe src="/render/<%= @view %>" width="800" height="480"></iframe>
+            <div class="case-overlay"></div>
+        </div>
+    </main>
+</body>
+</html>

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

@@ -9,6 +9,11 @@
     <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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -79,6 +79,34 @@ 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'
+- !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
 description: Automatically rebuild and preview TRNML plugins in multiple views
 email:
 - rockwell@schrock.me
@@ -96,13 +124,19 @@ files:
 - exe/trmnlp
 - lib/trmnl_preview.rb
 - lib/trmnl_preview/app.rb
+- lib/trmnl_preview/cmd/build.rb
 - lib/trmnl_preview/cmd/serve.rb
 - lib/trmnl_preview/cmd/usage.rb
+- lib/trmnl_preview/context.rb
 - lib/trmnl_preview/liquid_filters.rb
 - lib/trmnl_preview/version.rb
 - trmnl_preview.gemspec
-- views/index.erb
-- views/render_view.erb
+- web/public/black-case.jpg
+- web/public/clear-case.jpg
+- web/public/live-render.js
+- web/public/white-case.jpg
+- web/views/index.erb
+- web/views/render_view.erb
 homepage: https://github.com/schrockwell/trmnl_preview
 licenses:
 - MIT

data/views/index.erb

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TRMNL Preview</title>
-    <style>
-        body {
-            font-family: sans-serif;
-            background: #eee;
-        }
-        .menu {
-            margin-bottom: 1em;
-        }
-        .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;
-        }
-    </style>
-</head>
-<body>
-    <div class="menu">
-        <a class="<%= 'active' if @view == 'full' %>" href="/full">Full</a>
-        <a class="<%= 'active' if @view == 'half_horizontal' %>" href="/half_horizontal">Half Horizontal</a>
-        <a class="<%= 'active' if @view == 'half_vertical' %>" href="/half_vertical">Half Vertical</a>
-        <a class="<%= 'active' if @view == 'quadrant' %>" href="/quadrant">Quadrant</a>
-    </div>
-
-    <iframe src="/render/<%= @view %>" width="800" height="480"></iframe>
-</body>
-</html>