trmnl_preview 0.5.10 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1284d072dad9c13fd87baa49b1f98c58983413fd498662e958c5b911186db022
-  data.tar.gz: bf31cbce6a209ea388e43893f5a5c2a31eea6ce84543cf9ca4b0aa9bf5292fcf
+  metadata.gz: 6604d364906853dcf54704af9027debbbe82c31e779808a2dc3e2d42f0ffa474
+  data.tar.gz: 15aab9631707afb53b78a92ce8a96301991fdc2f2dad22a90314754f191fa869
 SHA512:
-  metadata.gz: 242011496ca09a5072ee9adbc97904b7eedadc1871ab0c7c195b634d352d6b8436a40a1316a477bc781e258f11a70768211abd7cc109b2429ac0d187ceb31508
-  data.tar.gz: e45fa96ea8020fd09b2710894cb4e3107b86959a2a41ff3c62437ce6ad750c5f8e047bd96e086e398b3108dd5f87e8ae1e8c44ecece3137df271e91e0864979a
+  metadata.gz: 4e43e3e6fb60cd85e6f4cac273df9b8a4a3fe7ff9afa7a592e564af8364423e56236f4f8288b848e0ee21368838dcb57a044b388dc0cfa299eabec450557b802
+  data.tar.gz: 03aa20bb96d303d3f6c3e3fea96d84fde8982061b04cb33a5cd8fd3d933dcfae5e415479665c74a01a66e416715992999f337407d542dadeba9ca406d142db29

data/CHANGELOG.md

@@ -1,5 +1,12 @@
+
 # Changelog
 
+## 0.6.0
+
+- Drop trmnl-component in lieu of plain iframe
+- Add [trmnl-picker](https://github.com/usetrmnl/trmnl-picker) to support new TRMNL and BYOD screens
+- Fix mashup layout previews
+
 ## 0.5.10
 
 - Fix interpolation of multi-line polling URLs with custom fields

data/lib/trmnlp/app.rb

@@ -79,8 +79,17 @@ module TRMNLP
 
       get "/render/#{view}.html" do
         @view = view
-        @screen_classes = @context.screen_classes
+        @screen_classes = @context.screen_classes(params[:screen_classes])
         
+        case view
+        when 'half_horizontal'
+          @mashup_classes = 'mashup mashup--1Tx1B'
+        when 'half_vertical'
+          @mashup_classes = 'mashup mashup--1Lx1R'
+        when 'quadrant'
+          @mashup_classes = 'mashup mashup--2x2'
+        end
+
         erb :render_html do
           @context.render_template(view)
         end

data/lib/trmnlp/context.rb

@@ -1,4 +1,5 @@
 require 'active_support/time'
+require 'active_support/core_ext/hash/conversions'
 require 'erb'
 require 'faraday'
 require 'filewatcher'
@@ -86,7 +87,16 @@ module TRMNLP
 
         puts "received #{response.body.length} bytes (#{response.status} status)"
         if response.status == 200
-          json = wrap_array(JSON.parse(response.body))
+          content_type = response.headers['content-type'].split(';').first.strip if response.headers.include?('content-type')
+          case content_type
+          when 'application/json'
+            json = wrap_array(JSON.parse(response.body))
+          when 'text/xml', 'application/xml', 'application/rss+xml', 'application/atom+xml', 'application/soap+xml'
+            json = wrap_array(Hash.from_xml(response.body))
+          else
+            puts "unknown content type received: #{response.headers['content-type']}"
+            json = {}
+          end
         else
           json = {}
           puts response.body
@@ -142,10 +152,8 @@ module TRMNLP
       end)
     end
 
-    def screen_classes
-      classes = 'screen'
+    def screen_classes(classes = 'screen')
       classes << ' screen--no-bleed' if config.plugin.no_screen_padding == 'yes'
-      classes << ' dark-mode' if config.plugin.dark_mode == 'yes'
       classes
     end
 
@@ -218,4 +226,4 @@ module TRMNLP
       paths.user_data.write(JSON.generate(data))
     end
   end
-end
+end

data/lib/trmnlp/version.rb

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

data/trmnl_preview.gemspec

@@ -60,6 +60,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "oj", "~> 3.16.9"
   spec.add_dependency "tzinfo-data", "~> 1.2025"
   spec.add_dependency "pathname", "~> 0.4"
+  spec.add_dependency "rexml", "~> 3.4"
 
   # 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

@@ -1,7 +1,15 @@
+/* define var for bg color */
+:root {
+  --bg-color: #eaebef;
+  --text-color: #000000;
+  --border-color: #c7cbd5;
+}
+
 body {
   font-family: sans-serif;
   margin: 10px;
-  background-color: #eaebef;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 main {
@@ -12,28 +20,63 @@ main {
 
 menu {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   display: flex;
   justify-content: space-between;
   max-width: 950px;
 }
 
-menu a {
+.tabs {
+  display: flex;
+  gap: 0.5em;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 1em;
+}
+
+.tabs > .tab {
+  padding: 0.5em 1em;
+  background: var(--bg-color);
+  border-radius: 0.5em 0.5em 0 0;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  display: inline-block;
+  text-decoration: none;
+  color: inherit;
+  font: inherit;
+  position: relative;
+  top: 1px;
+  transition: filter 0.1s ease-in-out;
+}
+
+.tabs > .tab:hover {
+  filter: brightness(95%);
+}
+.tabs > .tab.active {
+  border-bottom: none;
+}
+
+.btn {
+  appearance: none;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+  cursor: pointer;
   padding: 0.5em 1em;
-  background: #c7cbd5;
   border-radius: 0.5em;
   display: inline-block;
   text-decoration: none;
-  color: black;
+  color: inherit;
+  font: inherit;
+  transition: filter 0.1s ease-in-out;
 }
 
-menu a:hover {
-  background: #ccc;
+.btn:hover {
+  filter: brightness(95%);
 }
 
-menu a.active {
-  background: #333;
-  color: white;
+.btn:disabled, .btn:disabled:hover {
+  cursor: not-allowed;
+  filter: brightness(100%);
+  opacity: 0.5;
 }
 
 pre > code {
@@ -43,8 +86,9 @@ pre > code {
 }
 
 .spinner {
-  width: 22px;
-  height: 22px;
+  width: 16px;
+  height: 16px;
+  margin: 4px;
   border: 5px solid #f3f3f3; /* Light gray */
   border-top: 5px solid #3498db; /* Blue */
   border-radius: 50%;
@@ -61,17 +105,9 @@ pre > code {
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
-    background-color: #191b21;
-    color: #ffffff;
-  }
-
-  menu a {
-    background-color: #262932;
-    color: #b1b6c4;
-  }
-
-  menu a:hover {
-    background-color: #2f333e;
+  :root {
+    --bg-color: #191b21;
+    --text-color: #eeeeee;
+    --border-color: #3a3e47;
   }
 }

data/web/public/index.js

@@ -11,8 +11,9 @@ trmnlp.connectLiveRender = function () {
     const payload = JSON.parse(msg.data);
 
     if (payload.type === "reload") {
-      trmnlp.setFrameSrc(trmnlp.frame._src);
+      trmnlp.fetchPreview();
       trmnlp.userData.textContent = JSON.stringify(payload.user_data, null, 2);
+      hljs.highlightAll();
     }
   };
 
@@ -22,28 +23,19 @@ trmnlp.connectLiveRender = function () {
   };
 };
 
-trmnlp.setFrameColor = function () {
-  const value = trmnlp.caseSelect.value;
-  trmnlp.frame.setAttribute("color", value);
-  localStorage.setItem("trmnlp-case", value);
-};
-
-trmnlp.setPreviewFormat = function () {
-  const value = trmnlp.formatSelect.value;
-  localStorage.setItem("trmnlp-format", value);
 
-  trmnlp.setFrameSrc(`/render/${trmnlp.view}.${value}`);
-};
+trmnlp.fetchPreview = function (pickerState) {
+  const screenClasses = (pickerState?.screenClasses || trmnlp.picker.state.screenClasses).join(" ");
+  const encodedScreenClasses = encodeURIComponent(screenClasses);
+  const src = `/render/${trmnlp.view}.${trmnlp.formatSelect.value}?screen_classes=${encodedScreenClasses}`;
 
-trmnlp.setFrameSrc = function (src) {
   trmnlp.spinner.style.display = "inline-block";
-  trmnlp.frame.setSrc(src);
+  trmnlp.iframe.src = src;
 };
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", async function () {
   trmnlp.view = document.querySelector("meta[name='trmnl-view']").content;
-  trmnlp.frame = document.querySelector("trmnl-frame");
-  trmnlp.caseSelect = document.querySelector(".select-case");
+  trmnlp.iframe = document.querySelector("iframe");
   trmnlp.formatSelect = document.querySelector(".select-format");
   trmnlp.userData = document.getElementById("user-data");
   trmnlp.spinner = document.querySelector(".spinner");
@@ -54,28 +46,24 @@ document.addEventListener("DOMContentLoaded", function () {
     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.setFrameColor();
-  });
-
   trmnlp.formatSelect.value = formatValue;
   trmnlp.formatSelect.addEventListener("change", () => {
-    trmnlp.setPreviewFormat();
+    localStorage.setItem("trmnlp-format", trmnlp.formatSelect.value);
+    trmnlp.fetchPreview();
   });
 
-  trmnlp.frame._iframe.addEventListener("load", () => {
+  trmnlp.iframe.addEventListener("load", () => {
     trmnlp.spinner.style.display = "none";
+  });
 
-    // On page load, trmnl-frame loads "about:blank", so wait for that to load
-    // before updating the src to the preview.
-    if (trmnlp.frame._src === null) {
-      trmnlp.setPreviewFormat();
-    }
+  document.getElementById('picker-form').addEventListener('trmnl:change', (event) => {
+    trmnlp.iframe.style.width = `${event.detail.width}px`;
+    trmnlp.iframe.style.height = `${event.detail.height}px`;
+
+    trmnlp.fetchPreview(event.detail);
   });
 
-  trmnlp.setFrameColor();
+  trmnlp.picker = await TRMNLPicker.create('picker-form', { localStorageKey: 'trmnlp-picker' });
 });