trmnl_preview 0.5.10 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/lib/trmnlp/app.rb +10 -1
- data/lib/trmnlp/context.rb +13 -5
- data/lib/trmnlp/version.rb +1 -1
- data/trmnl_preview.gemspec +1 -0
- data/web/public/index.css +60 -24
- data/web/public/index.js +19 -31
- data/web/public/trmnl-picker.js +656 -0
- data/web/views/index.erb +33 -17
- data/web/views/render_html.erb +3 -0
- metadata +17 -3
- data/web/public/trmnl-component.js +0 -782
data/web/views/index.erb
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<title>TRMNL Preview</title>
|
|
10
10
|
|
|
11
11
|
<link rel="stylesheet" href="/index.css">
|
|
12
|
-
<script src="/trmnl-
|
|
12
|
+
<script src="/trmnl-picker.js"></script>
|
|
13
13
|
<script src="/index.js"></script>
|
|
14
14
|
|
|
15
15
|
<!-- Highlight.js for syntax highlighting -->
|
|
@@ -19,32 +19,48 @@
|
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
21
|
<main>
|
|
22
|
+
<div class="tabs">
|
|
23
|
+
<a class="tab <%= 'active' if @view == 'full' %>" href="/full">Full</a>
|
|
24
|
+
<a class="tab <%= 'active' if @view == 'half_horizontal' %>" href="/half_horizontal">Half Horizontal</a>
|
|
25
|
+
<a class="tab <%= 'active' if @view == 'half_vertical' %>" href="/half_vertical">Half Vertical</a>
|
|
26
|
+
<a class="tab <%= 'active' if @view == 'quadrant' %>" href="/quadrant">Quadrant</a>
|
|
27
|
+
<div style="flex-grow: 1;"></div>
|
|
28
|
+
<div class="spinner" style="display: none;"></div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
22
31
|
<menu>
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
<form id="picker-form">
|
|
33
|
+
<!-- Required: Model selector -->
|
|
34
|
+
<select data-model-select></select>
|
|
35
|
+
|
|
36
|
+
<!-- Required: Palette selector -->
|
|
37
|
+
<select data-palette-select></select>
|
|
38
|
+
|
|
39
|
+
<!-- Optional: Orientation toggle -->
|
|
40
|
+
<button class="btn" type="button" data-orientation-toggle>
|
|
41
|
+
<span data-orientation-text>Landscape</span>
|
|
42
|
+
</button>
|
|
43
|
+
|
|
44
|
+
<!-- Optional: Dark mode toggle -->
|
|
45
|
+
<button class="btn" type="button" data-dark-mode-toggle>
|
|
46
|
+
<span data-dark-mode-text>Light Mode</span>
|
|
47
|
+
</button>
|
|
48
|
+
|
|
49
|
+
<!-- Optional: Reset button -->
|
|
50
|
+
<button class="btn" type="button" data-reset-button>Reset</button>
|
|
51
|
+
</form>
|
|
52
|
+
|
|
29
53
|
<div style="display: flex; gap: 0.3em; align-items: center;">
|
|
30
|
-
<div class="spinner" style="display: none;"></div>
|
|
31
54
|
<select class="select-format">
|
|
32
55
|
<option value="png">PNG</option>
|
|
33
56
|
<option value="html" selected>HTML</option>
|
|
34
57
|
</select>
|
|
35
|
-
<select class="select-case">
|
|
36
|
-
<option value="white">White</option>
|
|
37
|
-
<option value="black">Black</option>
|
|
38
|
-
<option value="mint">Sage</option>
|
|
39
|
-
<option value="gray">Gray</option>
|
|
40
|
-
<option value="wood">Wood</option>
|
|
41
|
-
</select>
|
|
42
58
|
|
|
43
|
-
<a href="/poll">Poll</a>
|
|
59
|
+
<a href="/poll" class="btn">Poll</a>
|
|
44
60
|
</div>
|
|
45
61
|
</menu>
|
|
46
62
|
|
|
47
|
-
<
|
|
63
|
+
<iframe style="width: 800px; height: 480px; border: 1px solid black; background: white;">Rendering…</iframe>
|
|
48
64
|
|
|
49
65
|
<pre id="user-data"><code><%= @user_data %></code></pre>
|
|
50
66
|
</main>
|
data/web/views/render_html.erb
CHANGED
|
@@ -10,11 +10,14 @@
|
|
|
10
10
|
<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">
|
|
11
11
|
<!-- End Inter font -->
|
|
12
12
|
</head>
|
|
13
|
+
|
|
13
14
|
<body class="environment trmnl" style="background: white">
|
|
14
15
|
<div class="<%= @screen_classes %>">
|
|
16
|
+
<% if @mashup_classes %><div class="<%= @mashup_classes %>"><% end %>
|
|
15
17
|
<div class="view view--<%= @view %>">
|
|
16
18
|
<%= yield %>
|
|
17
19
|
</div>
|
|
20
|
+
<% if @mashup_classes %></div><% end %>
|
|
18
21
|
</div>
|
|
19
22
|
</body>
|
|
20
23
|
</html>
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: trmnl_preview
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.6.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rockwell Schrock
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-
|
|
10
|
+
date: 2025-12-30 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: sinatra
|
|
@@ -247,6 +247,20 @@ dependencies:
|
|
|
247
247
|
- - "~>"
|
|
248
248
|
- !ruby/object:Gem::Version
|
|
249
249
|
version: '0.4'
|
|
250
|
+
- !ruby/object:Gem::Dependency
|
|
251
|
+
name: rexml
|
|
252
|
+
requirement: !ruby/object:Gem::Requirement
|
|
253
|
+
requirements:
|
|
254
|
+
- - "~>"
|
|
255
|
+
- !ruby/object:Gem::Version
|
|
256
|
+
version: '3.4'
|
|
257
|
+
type: :runtime
|
|
258
|
+
prerelease: false
|
|
259
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
260
|
+
requirements:
|
|
261
|
+
- - "~>"
|
|
262
|
+
- !ruby/object:Gem::Version
|
|
263
|
+
version: '3.4'
|
|
250
264
|
description: Automatically rebuild and preview TRNML plugins in multiple views
|
|
251
265
|
email:
|
|
252
266
|
- rockwell@schrock.me
|
|
@@ -294,7 +308,7 @@ files:
|
|
|
294
308
|
- web/public/highlight/styles/atom-one-dark.min.css
|
|
295
309
|
- web/public/index.css
|
|
296
310
|
- web/public/index.js
|
|
297
|
-
- web/public/trmnl-
|
|
311
|
+
- web/public/trmnl-picker.js
|
|
298
312
|
- web/views/index.erb
|
|
299
313
|
- web/views/render_html.erb
|
|
300
314
|
homepage: https://github.com/usetrmnl/trmnlp
|