trmnl_preview 0.7.2 → 0.8.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 +192 -0
- data/LICENSE.txt +21 -0
- data/README.md +319 -0
- data/bin/rake +27 -0
- data/bin/trmnlp +13 -14
- data/db/data/form_fields.yml +24 -0
- data/db/data/framework_versions.yml +72 -0
- data/lib/trmnlp/api_client.rb +99 -0
- data/lib/trmnlp/app.rb +132 -0
- data/lib/trmnlp/browser_pool.rb +82 -0
- data/lib/trmnlp/cli.rb +81 -0
- data/lib/trmnlp/commands/base.rb +63 -0
- data/lib/trmnlp/commands/build.rb +26 -0
- data/lib/trmnlp/commands/clone.rb +35 -0
- data/lib/trmnlp/commands/init.rb +59 -0
- data/lib/trmnlp/commands/lint.rb +42 -0
- data/lib/trmnlp/commands/list.rb +40 -0
- data/lib/trmnlp/commands/login.rb +42 -0
- data/lib/trmnlp/commands/pull.rb +51 -0
- data/lib/trmnlp/commands/push.rb +77 -0
- data/lib/trmnlp/commands/serve.rb +54 -0
- data/lib/trmnlp/commands.rb +3 -0
- data/lib/trmnlp/config/app.rb +50 -0
- data/lib/trmnlp/config/plugin.rb +117 -0
- data/lib/trmnlp/config/project.rb +106 -0
- data/lib/trmnlp/config.rb +17 -0
- data/lib/trmnlp/context.rb +35 -0
- data/lib/trmnlp/errors.rb +15 -0
- data/lib/trmnlp/form_field.rb +42 -0
- data/lib/trmnlp/framework_version.rb +69 -0
- data/lib/trmnlp/image_quantizer.rb +58 -0
- data/lib/trmnlp/lint/check.rb +31 -0
- data/lib/trmnlp/lint/checks/custom_fields_used.rb +32 -0
- data/lib/trmnlp/lint/checks/form_fields_valid.rb +20 -0
- data/lib/trmnlp/lint/checks/highcharts_animations_disabled.rb +23 -0
- data/lib/trmnlp/lint/checks/highcharts_elements_unique.rb +24 -0
- data/lib/trmnlp/lint/checks/image_links_reachable.rb +53 -0
- data/lib/trmnlp/lint/checks/layouts_have_content.rb +24 -0
- data/lib/trmnlp/lint/checks/limited_inline_styles.rb +26 -0
- data/lib/trmnlp/lint/checks/no_async_functions.rb +18 -0
- data/lib/trmnlp/lint/checks/no_opacity.rb +19 -0
- data/lib/trmnlp/lint/checks/no_size_classes.rb +19 -0
- data/lib/trmnlp/lint/checks/title_casing.rb +20 -0
- data/lib/trmnlp/lint/checks/title_length.rb +18 -0
- data/lib/trmnlp/lint/checks/waits_for_dom_load.rb +23 -0
- data/lib/trmnlp/lint/source.rb +42 -0
- data/lib/trmnlp/lint.rb +39 -0
- data/lib/trmnlp/paths.rb +78 -0
- data/lib/trmnlp/poller.rb +105 -0
- data/lib/trmnlp/renderer.rb +87 -0
- data/lib/trmnlp/reporter.rb +28 -0
- data/lib/trmnlp/screen.rb +16 -0
- data/lib/trmnlp/screen_generator.rb +34 -0
- data/lib/trmnlp/screenshot.rb +96 -0
- data/lib/trmnlp/transform_backend/http.rb +107 -0
- data/lib/trmnlp/transform_backend/subprocess.rb +130 -0
- data/lib/trmnlp/transform_backend/wrapper.rb +113 -0
- data/lib/trmnlp/transform_client.rb +47 -0
- data/lib/trmnlp/transform_pipeline.rb +65 -0
- data/lib/trmnlp/user_data_assembler.rb +96 -0
- data/lib/trmnlp/version.rb +5 -0
- data/lib/trmnlp/watcher.rb +60 -0
- data/lib/trmnlp.rb +10 -0
- data/templates/init/.trmnlp.yml +14 -0
- data/templates/init/bin/trmnlp +44 -0
- data/templates/init/src/full.liquid +1 -0
- data/templates/init/src/half_horizontal.liquid +1 -0
- data/templates/init/src/half_vertical.liquid +1 -0
- data/templates/init/src/quadrant.liquid +1 -0
- data/templates/init/src/settings.yml +16 -0
- data/templates/init/src/shared.liquid +1 -0
- data/templates/init/src/transform.py.example +14 -0
- data/trmnl_preview.gemspec +68 -0
- data/web/public/highlight/highlight.min.js +315 -0
- data/web/public/highlight/styles/atom-one-dark.min.css +1 -0
- data/web/public/index.css +119 -0
- data/web/public/index.js +96 -0
- data/web/public/trmnl-picker.js +656 -0
- data/web/views/index.erb +73 -0
- data/web/views/render_html.erb +25 -0
- metadata +324 -15
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
Highlight.js v11.11.1 (git: 08cb242e7d)
|
|
3
|
+
(c) 2006-2025 Josh Goebel <hello@joshgoebel.com> and other contributors
|
|
4
|
+
License: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
var hljs=function(){"use strict";function e(t){
|
|
7
|
+
return t instanceof Map?t.clear=t.delete=t.set=()=>{
|
|
8
|
+
throw Error("map is read-only")}:t instanceof Set&&(t.add=t.clear=t.delete=()=>{
|
|
9
|
+
throw Error("set is read-only")
|
|
10
|
+
}),Object.freeze(t),Object.getOwnPropertyNames(t).forEach((n=>{
|
|
11
|
+
const i=t[n],s=typeof i;"object"!==s&&"function"!==s||Object.isFrozen(i)||e(i)
|
|
12
|
+
})),t}class t{constructor(e){
|
|
13
|
+
void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
|
|
14
|
+
ignoreMatch(){this.isMatchIgnored=!0}}function n(e){
|
|
15
|
+
return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")
|
|
16
|
+
}function i(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
|
|
17
|
+
;return t.forEach((e=>{for(const t in e)n[t]=e[t]})),n}const s=e=>!!e.scope
|
|
18
|
+
;class r{constructor(e,t){
|
|
19
|
+
this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){
|
|
20
|
+
this.buffer+=n(e)}openNode(e){if(!s(e))return;const t=((e,{prefix:t})=>{
|
|
21
|
+
if(e.startsWith("language:"))return e.replace("language:","language-")
|
|
22
|
+
;if(e.includes(".")){const n=e.split(".")
|
|
23
|
+
;return[`${t}${n.shift()}`,...n.map(((e,t)=>`${e}${"_".repeat(t+1)}`))].join(" ")
|
|
24
|
+
}return`${t}${e}`})(e.scope,{prefix:this.classPrefix});this.span(t)}
|
|
25
|
+
closeNode(e){s(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
|
|
26
|
+
this.buffer+=`<span class="${e}">`}}const o=(e={})=>{const t={children:[]}
|
|
27
|
+
;return Object.assign(t,e),t};class a{constructor(){
|
|
28
|
+
this.rootNode=o(),this.stack=[this.rootNode]}get top(){
|
|
29
|
+
return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
|
|
30
|
+
this.top.children.push(e)}openNode(e){const t=o({scope:e})
|
|
31
|
+
;this.add(t),this.stack.push(t)}closeNode(){
|
|
32
|
+
if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
|
|
33
|
+
for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
|
|
34
|
+
walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){
|
|
35
|
+
return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),
|
|
36
|
+
t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){
|
|
37
|
+
"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
|
|
38
|
+
a._collapse(e)})))}}class c extends a{constructor(e){super(),this.options=e}
|
|
39
|
+
addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
|
|
40
|
+
this.closeNode()}__addSublanguage(e,t){const n=e.root
|
|
41
|
+
;t&&(n.scope="language:"+t),this.add(n)}toHTML(){
|
|
42
|
+
return new r(this,this.options).value()}finalize(){
|
|
43
|
+
return this.closeAllNodes(),!0}}function l(e){
|
|
44
|
+
return e?"string"==typeof e?e:e.source:null}function g(e){return h("(?=",e,")")}
|
|
45
|
+
function u(e){return h("(?:",e,")*")}function d(e){return h("(?:",e,")?")}
|
|
46
|
+
function h(...e){return e.map((e=>l(e))).join("")}function f(...e){const t=(e=>{
|
|
47
|
+
const t=e[e.length-1]
|
|
48
|
+
;return"object"==typeof t&&t.constructor===Object?(e.splice(e.length-1,1),t):{}
|
|
49
|
+
})(e);return"("+(t.capture?"":"?:")+e.map((e=>l(e))).join("|")+")"}
|
|
50
|
+
function p(e){return RegExp(e.toString()+"|").exec("").length-1}
|
|
51
|
+
const b=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
|
|
52
|
+
;function m(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
|
|
53
|
+
;let i=l(e),s="";for(;i.length>0;){const e=b.exec(i);if(!e){s+=i;break}
|
|
54
|
+
s+=i.substring(0,e.index),
|
|
55
|
+
i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?s+="\\"+(Number(e[1])+t):(s+=e[0],
|
|
56
|
+
"("===e[0]&&n++)}return s})).map((e=>`(${e})`)).join(t)}
|
|
57
|
+
const E="[a-zA-Z]\\w*",x="[a-zA-Z_]\\w*",y="\\b\\d+(\\.\\d+)?",_="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",w="\\b(0b[01]+)",O={
|
|
58
|
+
begin:"\\\\[\\s\\S]",relevance:0},v={scope:"string",begin:"'",end:"'",
|
|
59
|
+
illegal:"\\n",contains:[O]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
|
|
60
|
+
contains:[O]},N=(e,t,n={})=>{const s=i({scope:"comment",begin:e,end:t,
|
|
61
|
+
contains:[]},n);s.contains.push({scope:"doctag",
|
|
62
|
+
begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
|
|
63
|
+
end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
|
|
64
|
+
;const r=f("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
|
|
65
|
+
;return s.contains.push({begin:h(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),s
|
|
66
|
+
},S=N("//","$"),M=N("/\\*","\\*/"),R=N("#","$");var j=Object.freeze({
|
|
67
|
+
__proto__:null,APOS_STRING_MODE:v,BACKSLASH_ESCAPE:O,BINARY_NUMBER_MODE:{
|
|
68
|
+
scope:"number",begin:w,relevance:0},BINARY_NUMBER_RE:w,COMMENT:N,
|
|
69
|
+
C_BLOCK_COMMENT_MODE:M,C_LINE_COMMENT_MODE:S,C_NUMBER_MODE:{scope:"number",
|
|
70
|
+
begin:_,relevance:0},C_NUMBER_RE:_,END_SAME_AS_BEGIN:e=>Object.assign(e,{
|
|
71
|
+
"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{
|
|
72
|
+
t.data._beginMatch!==e[1]&&t.ignoreMatch()}}),HASH_COMMENT_MODE:R,IDENT_RE:E,
|
|
73
|
+
MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+x,relevance:0},
|
|
74
|
+
NUMBER_MODE:{scope:"number",begin:y,relevance:0},NUMBER_RE:y,
|
|
75
|
+
PHRASAL_WORDS_MODE:{
|
|
76
|
+
begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
|
|
77
|
+
},QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
|
|
78
|
+
end:/\/[gimuy]*/,contains:[O,{begin:/\[/,end:/\]/,relevance:0,contains:[O]}]},
|
|
79
|
+
RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
|
|
80
|
+
SHEBANG:(e={})=>{const t=/^#![ ]*\//
|
|
81
|
+
;return e.binary&&(e.begin=h(t,/.*\b/,e.binary,/\b.*/)),i({scope:"meta",begin:t,
|
|
82
|
+
end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},
|
|
83
|
+
TITLE_MODE:{scope:"title",begin:E,relevance:0},UNDERSCORE_IDENT_RE:x,
|
|
84
|
+
UNDERSCORE_TITLE_MODE:{scope:"title",begin:x,relevance:0}});function A(e,t){
|
|
85
|
+
"."===e.input[e.index-1]&&t.ignoreMatch()}function I(e,t){
|
|
86
|
+
void 0!==e.className&&(e.scope=e.className,delete e.className)}function T(e,t){
|
|
87
|
+
t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
|
|
88
|
+
e.__beforeBegin=A,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
|
|
89
|
+
void 0===e.relevance&&(e.relevance=0))}function L(e,t){
|
|
90
|
+
Array.isArray(e.illegal)&&(e.illegal=f(...e.illegal))}function B(e,t){
|
|
91
|
+
if(e.match){
|
|
92
|
+
if(e.begin||e.end)throw Error("begin & end are not supported with match")
|
|
93
|
+
;e.begin=e.match,delete e.match}}function P(e,t){
|
|
94
|
+
void 0===e.relevance&&(e.relevance=1)}const D=(e,t)=>{if(!e.beforeMatch)return
|
|
95
|
+
;if(e.starts)throw Error("beforeMatch cannot be used with starts")
|
|
96
|
+
;const n=Object.assign({},e);Object.keys(e).forEach((t=>{delete e[t]
|
|
97
|
+
})),e.keywords=n.keywords,e.begin=h(n.beforeMatch,g(n.begin)),e.starts={
|
|
98
|
+
relevance:0,contains:[Object.assign(n,{endsParent:!0})]
|
|
99
|
+
},e.relevance=0,delete n.beforeMatch
|
|
100
|
+
},H=["of","and","for","in","not","or","if","then","parent","list","value"]
|
|
101
|
+
;function C(e,t,n="keyword"){const i=Object.create(null)
|
|
102
|
+
;return"string"==typeof e?s(n,e.split(" ")):Array.isArray(e)?s(n,e):Object.keys(e).forEach((n=>{
|
|
103
|
+
Object.assign(i,C(e[n],t,n))})),i;function s(e,n){
|
|
104
|
+
t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((t=>{const n=t.split("|")
|
|
105
|
+
;i[n[0]]=[e,$(n[0],n[1])]}))}}function $(e,t){
|
|
106
|
+
return t?Number(t):(e=>H.includes(e.toLowerCase()))(e)?0:1}const U={},z=e=>{
|
|
107
|
+
console.error(e)},W=(e,...t)=>{console.log("WARN: "+e,...t)},X=(e,t)=>{
|
|
108
|
+
U[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),U[`${e}/${t}`]=!0)
|
|
109
|
+
},G=Error();function K(e,t,{key:n}){let i=0;const s=e[n],r={},o={}
|
|
110
|
+
;for(let e=1;e<=t.length;e++)o[e+i]=s[e],r[e+i]=!0,i+=p(t[e-1])
|
|
111
|
+
;e[n]=o,e[n]._emit=r,e[n]._multi=!0}function F(e){(e=>{
|
|
112
|
+
e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
|
|
113
|
+
delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
|
|
114
|
+
_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
|
|
115
|
+
}),(e=>{if(Array.isArray(e.begin)){
|
|
116
|
+
if(e.skip||e.excludeBegin||e.returnBegin)throw z("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
|
|
117
|
+
G
|
|
118
|
+
;if("object"!=typeof e.beginScope||null===e.beginScope)throw z("beginScope must be object"),
|
|
119
|
+
G;K(e,e.begin,{key:"beginScope"}),e.begin=m(e.begin,{joinWith:""})}})(e),(e=>{
|
|
120
|
+
if(Array.isArray(e.end)){
|
|
121
|
+
if(e.skip||e.excludeEnd||e.returnEnd)throw z("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
|
|
122
|
+
G
|
|
123
|
+
;if("object"!=typeof e.endScope||null===e.endScope)throw z("endScope must be object"),
|
|
124
|
+
G;K(e,e.end,{key:"endScope"}),e.end=m(e.end,{joinWith:""})}})(e)}function Z(e){
|
|
125
|
+
function t(t,n){
|
|
126
|
+
return RegExp(l(t),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(n?"g":""))
|
|
127
|
+
}class n{constructor(){
|
|
128
|
+
this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
|
|
129
|
+
addRule(e,t){
|
|
130
|
+
t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),
|
|
131
|
+
this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
|
|
132
|
+
;const e=this.regexes.map((e=>e[1]));this.matcherRe=t(m(e,{joinWith:"|"
|
|
133
|
+
}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
|
|
134
|
+
;const t=this.matcherRe.exec(e);if(!t)return null
|
|
135
|
+
;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),i=this.matchIndexes[n]
|
|
136
|
+
;return t.splice(0,n),Object.assign(t,i)}}class s{constructor(){
|
|
137
|
+
this.rules=[],this.multiRegexes=[],
|
|
138
|
+
this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
|
|
139
|
+
if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n
|
|
140
|
+
;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),
|
|
141
|
+
t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){
|
|
142
|
+
return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){
|
|
143
|
+
this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){
|
|
144
|
+
const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex
|
|
145
|
+
;let n=t.exec(e)
|
|
146
|
+
;if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{
|
|
147
|
+
const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}
|
|
148
|
+
return n&&(this.regexIndex+=n.position+1,
|
|
149
|
+
this.regexIndex===this.count&&this.considerAll()),n}}
|
|
150
|
+
if(e.compilerExtensions||(e.compilerExtensions=[]),
|
|
151
|
+
e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language. See documentation.")
|
|
152
|
+
;return e.classNameAliases=i(e.classNameAliases||{}),function n(r,o){const a=r
|
|
153
|
+
;if(r.isCompiled)return a
|
|
154
|
+
;[I,B,F,D].forEach((e=>e(r,o))),e.compilerExtensions.forEach((e=>e(r,o))),
|
|
155
|
+
r.__beforeBegin=null,[T,L,P].forEach((e=>e(r,o))),r.isCompiled=!0;let c=null
|
|
156
|
+
;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
|
|
157
|
+
c=r.keywords.$pattern,
|
|
158
|
+
delete r.keywords.$pattern),c=c||/\w+/,r.keywords&&(r.keywords=C(r.keywords,e.case_insensitive)),
|
|
159
|
+
a.keywordPatternRe=t(c,!0),
|
|
160
|
+
o&&(r.begin||(r.begin=/\B|\b/),a.beginRe=t(a.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
|
|
161
|
+
r.end&&(a.endRe=t(a.end)),
|
|
162
|
+
a.terminatorEnd=l(a.end)||"",r.endsWithParent&&o.terminatorEnd&&(a.terminatorEnd+=(r.end?"|":"")+o.terminatorEnd)),
|
|
163
|
+
r.illegal&&(a.illegalRe=t(r.illegal)),
|
|
164
|
+
r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((t=>i(e,{
|
|
165
|
+
variants:null},t)))),e.cachedVariants?e.cachedVariants:V(e)?i(e,{
|
|
166
|
+
starts:e.starts?i(e.starts):null
|
|
167
|
+
}):Object.isFrozen(e)?i(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{n(e,a)
|
|
168
|
+
})),r.starts&&n(r.starts,o),a.matcher=(e=>{const t=new s
|
|
169
|
+
;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"
|
|
170
|
+
}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"
|
|
171
|
+
}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t})(a),a}(e)}function V(e){
|
|
172
|
+
return!!e&&(e.endsWithParent||V(e.starts))}class q extends Error{
|
|
173
|
+
constructor(e,t){super(e),this.name="HTMLInjectionError",this.html=t}}
|
|
174
|
+
const J=n,Y=i,Q=Symbol("nomatch"),ee=n=>{
|
|
175
|
+
const i=Object.create(null),s=Object.create(null),r=[];let o=!0
|
|
176
|
+
;const a="Could not find the language '{}', did you forget to load/include a language module?",l={
|
|
177
|
+
disableAutodetect:!0,name:"Plain text",contains:[]};let p={
|
|
178
|
+
ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
|
|
179
|
+
languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
|
|
180
|
+
cssSelector:"pre code",languages:null,__emitter:c};function b(e){
|
|
181
|
+
return p.noHighlightRe.test(e)}function m(e,t,n){let i="",s=""
|
|
182
|
+
;"object"==typeof t?(i=e,
|
|
183
|
+
n=t.ignoreIllegals,s=t.language):(X("10.7.0","highlight(lang, code, ...args) has been deprecated."),
|
|
184
|
+
X("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
|
|
185
|
+
s=e,i=t),void 0===n&&(n=!0);const r={code:i,language:s};N("before:highlight",r)
|
|
186
|
+
;const o=r.result?r.result:E(r.language,r.code,n)
|
|
187
|
+
;return o.code=r.code,N("after:highlight",o),o}function E(e,n,s,r){
|
|
188
|
+
const c=Object.create(null);function l(){if(!N.keywords)return void M.addText(R)
|
|
189
|
+
;let e=0;N.keywordPatternRe.lastIndex=0;let t=N.keywordPatternRe.exec(R),n=""
|
|
190
|
+
;for(;t;){n+=R.substring(e,t.index)
|
|
191
|
+
;const s=w.case_insensitive?t[0].toLowerCase():t[0],r=(i=s,N.keywords[i]);if(r){
|
|
192
|
+
const[e,i]=r
|
|
193
|
+
;if(M.addText(n),n="",c[s]=(c[s]||0)+1,c[s]<=7&&(j+=i),e.startsWith("_"))n+=t[0];else{
|
|
194
|
+
const n=w.classNameAliases[e]||e;u(t[0],n)}}else n+=t[0]
|
|
195
|
+
;e=N.keywordPatternRe.lastIndex,t=N.keywordPatternRe.exec(R)}var i
|
|
196
|
+
;n+=R.substring(e),M.addText(n)}function g(){null!=N.subLanguage?(()=>{
|
|
197
|
+
if(""===R)return;let e=null;if("string"==typeof N.subLanguage){
|
|
198
|
+
if(!i[N.subLanguage])return void M.addText(R)
|
|
199
|
+
;e=E(N.subLanguage,R,!0,S[N.subLanguage]),S[N.subLanguage]=e._top
|
|
200
|
+
}else e=x(R,N.subLanguage.length?N.subLanguage:null)
|
|
201
|
+
;N.relevance>0&&(j+=e.relevance),M.__addSublanguage(e._emitter,e.language)
|
|
202
|
+
})():l(),R=""}function u(e,t){
|
|
203
|
+
""!==e&&(M.startScope(t),M.addText(e),M.endScope())}function d(e,t){let n=1
|
|
204
|
+
;const i=t.length-1;for(;n<=i;){if(!e._emit[n]){n++;continue}
|
|
205
|
+
const i=w.classNameAliases[e[n]]||e[n],s=t[n];i?u(s,i):(R=s,l(),R=""),n++}}
|
|
206
|
+
function h(e,t){
|
|
207
|
+
return e.scope&&"string"==typeof e.scope&&M.openNode(w.classNameAliases[e.scope]||e.scope),
|
|
208
|
+
e.beginScope&&(e.beginScope._wrap?(u(R,w.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
|
|
209
|
+
R=""):e.beginScope._multi&&(d(e.beginScope,t),R="")),N=Object.create(e,{parent:{
|
|
210
|
+
value:N}}),N}function f(e,n,i){let s=((e,t)=>{const n=e&&e.exec(t)
|
|
211
|
+
;return n&&0===n.index})(e.endRe,i);if(s){if(e["on:end"]){const i=new t(e)
|
|
212
|
+
;e["on:end"](n,i),i.isMatchIgnored&&(s=!1)}if(s){
|
|
213
|
+
for(;e.endsParent&&e.parent;)e=e.parent;return e}}
|
|
214
|
+
if(e.endsWithParent)return f(e.parent,n,i)}function b(e){
|
|
215
|
+
return 0===N.matcher.regexIndex?(R+=e[0],1):(T=!0,0)}function m(e){
|
|
216
|
+
const t=e[0],i=n.substring(e.index),s=f(N,e,i);if(!s)return Q;const r=N
|
|
217
|
+
;N.endScope&&N.endScope._wrap?(g(),
|
|
218
|
+
u(t,N.endScope._wrap)):N.endScope&&N.endScope._multi?(g(),
|
|
219
|
+
d(N.endScope,e)):r.skip?R+=t:(r.returnEnd||r.excludeEnd||(R+=t),
|
|
220
|
+
g(),r.excludeEnd&&(R=t));do{
|
|
221
|
+
N.scope&&M.closeNode(),N.skip||N.subLanguage||(j+=N.relevance),N=N.parent
|
|
222
|
+
}while(N!==s.parent);return s.starts&&h(s.starts,e),r.returnEnd?0:t.length}
|
|
223
|
+
let y={};function _(i,r){const a=r&&r[0];if(R+=i,null==a)return g(),0
|
|
224
|
+
;if("begin"===y.type&&"end"===r.type&&y.index===r.index&&""===a){
|
|
225
|
+
if(R+=n.slice(r.index,r.index+1),!o){const t=Error(`0 width match regex (${e})`)
|
|
226
|
+
;throw t.languageName=e,t.badRule=y.rule,t}return 1}
|
|
227
|
+
if(y=r,"begin"===r.type)return(e=>{
|
|
228
|
+
const n=e[0],i=e.rule,s=new t(i),r=[i.__beforeBegin,i["on:begin"]]
|
|
229
|
+
;for(const t of r)if(t&&(t(e,s),s.isMatchIgnored))return b(n)
|
|
230
|
+
;return i.skip?R+=n:(i.excludeBegin&&(R+=n),
|
|
231
|
+
g(),i.returnBegin||i.excludeBegin||(R=n)),h(i,e),i.returnBegin?0:n.length})(r)
|
|
232
|
+
;if("illegal"===r.type&&!s){
|
|
233
|
+
const e=Error('Illegal lexeme "'+a+'" for mode "'+(N.scope||"<unnamed>")+'"')
|
|
234
|
+
;throw e.mode=N,e}if("end"===r.type){const e=m(r);if(e!==Q)return e}
|
|
235
|
+
if("illegal"===r.type&&""===a)return R+="\n",1
|
|
236
|
+
;if(I>1e5&&I>3*r.index)throw Error("potential infinite loop, way more iterations than matches")
|
|
237
|
+
;return R+=a,a.length}const w=O(e)
|
|
238
|
+
;if(!w)throw z(a.replace("{}",e)),Error('Unknown language: "'+e+'"')
|
|
239
|
+
;const v=Z(w);let k="",N=r||v;const S={},M=new p.__emitter(p);(()=>{const e=[]
|
|
240
|
+
;for(let t=N;t!==w;t=t.parent)t.scope&&e.unshift(t.scope)
|
|
241
|
+
;e.forEach((e=>M.openNode(e)))})();let R="",j=0,A=0,I=0,T=!1;try{
|
|
242
|
+
if(w.__emitTokens)w.__emitTokens(n,M);else{for(N.matcher.considerAll();;){
|
|
243
|
+
I++,T?T=!1:N.matcher.considerAll(),N.matcher.lastIndex=A
|
|
244
|
+
;const e=N.matcher.exec(n);if(!e)break;const t=_(n.substring(A,e.index),e)
|
|
245
|
+
;A=e.index+t}_(n.substring(A))}return M.finalize(),k=M.toHTML(),{language:e,
|
|
246
|
+
value:k,relevance:j,illegal:!1,_emitter:M,_top:N}}catch(t){
|
|
247
|
+
if(t.message&&t.message.includes("Illegal"))return{language:e,value:J(n),
|
|
248
|
+
illegal:!0,relevance:0,_illegalBy:{message:t.message,index:A,
|
|
249
|
+
context:n.slice(A-100,A+100),mode:t.mode,resultSoFar:k},_emitter:M};if(o)return{
|
|
250
|
+
language:e,value:J(n),illegal:!1,relevance:0,errorRaised:t,_emitter:M,_top:N}
|
|
251
|
+
;throw t}}function x(e,t){t=t||p.languages||Object.keys(i);const n=(e=>{
|
|
252
|
+
const t={value:J(e),illegal:!1,relevance:0,_top:l,_emitter:new p.__emitter(p)}
|
|
253
|
+
;return t._emitter.addText(e),t})(e),s=t.filter(O).filter(k).map((t=>E(t,e,!1)))
|
|
254
|
+
;s.unshift(n);const r=s.sort(((e,t)=>{
|
|
255
|
+
if(e.relevance!==t.relevance)return t.relevance-e.relevance
|
|
256
|
+
;if(e.language&&t.language){if(O(e.language).supersetOf===t.language)return 1
|
|
257
|
+
;if(O(t.language).supersetOf===e.language)return-1}return 0})),[o,a]=r,c=o
|
|
258
|
+
;return c.secondBest=a,c}function y(e){let t=null;const n=(e=>{
|
|
259
|
+
let t=e.className+" ";t+=e.parentNode?e.parentNode.className:""
|
|
260
|
+
;const n=p.languageDetectRe.exec(t);if(n){const t=O(n[1])
|
|
261
|
+
;return t||(W(a.replace("{}",n[1])),
|
|
262
|
+
W("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}
|
|
263
|
+
return t.split(/\s+/).find((e=>b(e)||O(e)))})(e);if(b(n))return
|
|
264
|
+
;if(N("before:highlightElement",{el:e,language:n
|
|
265
|
+
}),e.dataset.highlighted)return void console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",e)
|
|
266
|
+
;if(e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
|
|
267
|
+
console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
|
|
268
|
+
console.warn("The element with unescaped HTML:"),
|
|
269
|
+
console.warn(e)),p.throwUnescapedHTML))throw new q("One of your code blocks includes unescaped HTML.",e.innerHTML)
|
|
270
|
+
;t=e;const i=t.textContent,r=n?m(i,{language:n,ignoreIllegals:!0}):x(i)
|
|
271
|
+
;e.innerHTML=r.value,e.dataset.highlighted="yes",((e,t,n)=>{const i=t&&s[t]||n
|
|
272
|
+
;e.classList.add("hljs"),e.classList.add("language-"+i)
|
|
273
|
+
})(e,n,r.language),e.result={language:r.language,re:r.relevance,
|
|
274
|
+
relevance:r.relevance},r.secondBest&&(e.secondBest={
|
|
275
|
+
language:r.secondBest.language,relevance:r.secondBest.relevance
|
|
276
|
+
}),N("after:highlightElement",{el:e,result:r,text:i})}let _=!1;function w(){
|
|
277
|
+
if("loading"===document.readyState)return _||window.addEventListener("DOMContentLoaded",(()=>{
|
|
278
|
+
w()}),!1),void(_=!0);document.querySelectorAll(p.cssSelector).forEach(y)}
|
|
279
|
+
function O(e){return e=(e||"").toLowerCase(),i[e]||i[s[e]]}
|
|
280
|
+
function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
|
|
281
|
+
s[e.toLowerCase()]=t}))}function k(e){const t=O(e)
|
|
282
|
+
;return t&&!t.disableAutodetect}function N(e,t){const n=e;r.forEach((e=>{
|
|
283
|
+
e[n]&&e[n](t)}))}Object.assign(n,{highlight:m,highlightAuto:x,highlightAll:w,
|
|
284
|
+
highlightElement:y,
|
|
285
|
+
highlightBlock:e=>(X("10.7.0","highlightBlock will be removed entirely in v12.0"),
|
|
286
|
+
X("10.7.0","Please use highlightElement now."),y(e)),configure:e=>{p=Y(p,e)},
|
|
287
|
+
initHighlighting:()=>{
|
|
288
|
+
w(),X("10.6.0","initHighlighting() deprecated. Use highlightAll() now.")},
|
|
289
|
+
initHighlightingOnLoad:()=>{
|
|
290
|
+
w(),X("10.6.0","initHighlightingOnLoad() deprecated. Use highlightAll() now.")
|
|
291
|
+
},registerLanguage:(e,t)=>{let s=null;try{s=t(n)}catch(t){
|
|
292
|
+
if(z("Language definition for '{}' could not be registered.".replace("{}",e)),
|
|
293
|
+
!o)throw t;z(t),s=l}
|
|
294
|
+
s.name||(s.name=e),i[e]=s,s.rawDefinition=t.bind(null,n),s.aliases&&v(s.aliases,{
|
|
295
|
+
languageName:e})},unregisterLanguage:e=>{delete i[e]
|
|
296
|
+
;for(const t of Object.keys(s))s[t]===e&&delete s[t]},
|
|
297
|
+
listLanguages:()=>Object.keys(i),getLanguage:O,registerAliases:v,
|
|
298
|
+
autoDetection:k,inherit:Y,addPlugin:e=>{(e=>{
|
|
299
|
+
e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{
|
|
300
|
+
e["before:highlightBlock"](Object.assign({block:t.el},t))
|
|
301
|
+
}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{
|
|
302
|
+
e["after:highlightBlock"](Object.assign({block:t.el},t))})})(e),r.push(e)},
|
|
303
|
+
removePlugin:e=>{const t=r.indexOf(e);-1!==t&&r.splice(t,1)}}),n.debugMode=()=>{
|
|
304
|
+
o=!1},n.safeMode=()=>{o=!0},n.versionString="11.11.1",n.regex={concat:h,
|
|
305
|
+
lookahead:g,either:f,optional:d,anyNumberOfTimes:u}
|
|
306
|
+
;for(const t in j)"object"==typeof j[t]&&e(j[t]);return Object.assign(n,j),n
|
|
307
|
+
},te=ee({});return te.newInstance=()=>ee({}),te}()
|
|
308
|
+
;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);/*! `json` grammar compiled for Highlight.js 11.11.1 */
|
|
309
|
+
(()=>{var e=(()=>{"use strict";return e=>{const a=["true","false","null"],s={
|
|
310
|
+
scope:"literal",beginKeywords:a.join(" ")};return{name:"JSON",aliases:["jsonc"],
|
|
311
|
+
keywords:{literal:a},contains:[{className:"attr",
|
|
312
|
+
begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,relevance:1.01},{match:/[{}[\],:]/,
|
|
313
|
+
className:"punctuation",relevance:0
|
|
314
|
+
},e.QUOTE_STRING_MODE,s,e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],
|
|
315
|
+
illegal:"\\S"}}})();hljs.registerLanguage("json",e)})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/* define var for bg color */
|
|
2
|
+
:root {
|
|
3
|
+
--bg-color: #eaebef;
|
|
4
|
+
--text-color: #000000;
|
|
5
|
+
--border-color: #c7cbd5;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
body {
|
|
9
|
+
font-family: sans-serif;
|
|
10
|
+
margin: 10px;
|
|
11
|
+
background-color: var(--bg-color);
|
|
12
|
+
color: var(--text-color);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
main {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
width: fit-content;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
menu {
|
|
22
|
+
padding: 0;
|
|
23
|
+
margin: 0 0 1em 0;
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
max-width: 950px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tabs {
|
|
30
|
+
display: flex;
|
|
31
|
+
gap: 0.5em;
|
|
32
|
+
border-bottom: 1px solid var(--border-color);
|
|
33
|
+
margin-bottom: 1em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.tabs > .tab {
|
|
37
|
+
padding: 0.5em 1em;
|
|
38
|
+
background: var(--bg-color);
|
|
39
|
+
border-radius: 0.5em 0.5em 0 0;
|
|
40
|
+
border: 1px solid var(--border-color);
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
color: inherit;
|
|
45
|
+
font: inherit;
|
|
46
|
+
position: relative;
|
|
47
|
+
top: 1px;
|
|
48
|
+
transition: filter 0.1s ease-in-out;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.tabs > .tab:hover {
|
|
52
|
+
filter: brightness(95%);
|
|
53
|
+
}
|
|
54
|
+
.tabs > .tab.active {
|
|
55
|
+
border-bottom: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.btn {
|
|
59
|
+
appearance: none;
|
|
60
|
+
border: 1px solid var(--border-color);
|
|
61
|
+
background-color: var(--bg-color);
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
padding: 0.5em 1em;
|
|
64
|
+
border-radius: 0.5em;
|
|
65
|
+
display: inline-block;
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
color: inherit;
|
|
68
|
+
font: inherit;
|
|
69
|
+
transition: filter 0.1s ease-in-out;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.btn:hover {
|
|
73
|
+
filter: brightness(95%);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.btn:disabled, .btn:disabled:hover {
|
|
77
|
+
cursor: not-allowed;
|
|
78
|
+
filter: brightness(100%);
|
|
79
|
+
opacity: 0.5;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
pre > code {
|
|
83
|
+
max-width: 950px;
|
|
84
|
+
overflow-x: scroll;
|
|
85
|
+
border-radius: 0.5em;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.spinner {
|
|
89
|
+
width: 16px;
|
|
90
|
+
height: 16px;
|
|
91
|
+
margin: 4px;
|
|
92
|
+
border: 5px solid #f3f3f3; /* Light gray */
|
|
93
|
+
border-top: 5px solid #3498db; /* Blue */
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
animation: spin 1s linear infinite;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes spin {
|
|
99
|
+
0% {
|
|
100
|
+
transform: rotate(0deg);
|
|
101
|
+
}
|
|
102
|
+
100% {
|
|
103
|
+
transform: rotate(360deg);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.payload-size {
|
|
108
|
+
font-size: 0.85em;
|
|
109
|
+
opacity: 0.6;
|
|
110
|
+
margin: 0.5em 0 0.2em;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-color-scheme: dark) {
|
|
114
|
+
:root {
|
|
115
|
+
--bg-color: #191b21;
|
|
116
|
+
--text-color: #eeeeee;
|
|
117
|
+
--border-color: #3a3e47;
|
|
118
|
+
}
|
|
119
|
+
}
|
data/web/public/index.js
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
const trmnlp = {};
|
|
2
|
+
|
|
3
|
+
trmnlp.connectLiveRender = function () {
|
|
4
|
+
// EventSource reconnects automatically, so no manual retry loop is needed.
|
|
5
|
+
const source = new EventSource("/live_reload");
|
|
6
|
+
|
|
7
|
+
source.onopen = function () {
|
|
8
|
+
console.log("Connected to live reload stream");
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
source.onmessage = function (event) {
|
|
12
|
+
const payload = JSON.parse(event.data);
|
|
13
|
+
|
|
14
|
+
if (payload.type === "reload") {
|
|
15
|
+
trmnlp.fetchPreview();
|
|
16
|
+
trmnlp.userData.textContent = JSON.stringify(payload.user_data, null, 2);
|
|
17
|
+
hljs.highlightAll();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
trmnlp.fetchPreview = function (pickerState) {
|
|
24
|
+
const state = pickerState || trmnlp.picker?.state;
|
|
25
|
+
const screenClasses = (state?.screenClasses || []).join(" ");
|
|
26
|
+
const encodedScreenClasses = encodeURIComponent(screenClasses);
|
|
27
|
+
let src = `/render/${trmnlp.view}.${trmnlp.formatSelect.value}?screen_classes=${encodedScreenClasses}`;
|
|
28
|
+
|
|
29
|
+
// Pass dimensions for both HTML and PNG renders so trmnl.device.{width,height}
|
|
30
|
+
// in the Liquid context tracks the picker model selection.
|
|
31
|
+
if (state) {
|
|
32
|
+
const width = encodeURIComponent(state.width);
|
|
33
|
+
const height = encodeURIComponent(state.height);
|
|
34
|
+
src += `&width=${width}&height=${height}`;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// PNG-only: dark mode + color depth from palette
|
|
38
|
+
if (trmnlp.formatSelect.value === 'png' && state) {
|
|
39
|
+
const isDarkMode = state.isDarkMode ? 1 : 0;
|
|
40
|
+
const grays = state.palette.grays || 2;
|
|
41
|
+
const colorDepth = Math.ceil(Math.log2(grays));
|
|
42
|
+
src += `&color_depth=${colorDepth}`;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
trmnlp.spinner.style.display = "inline-block";
|
|
46
|
+
trmnlp.iframe.src = src;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
trmnlp.refreshUserData = async function (state) {
|
|
50
|
+
if (!state) return;
|
|
51
|
+
const params = new URLSearchParams({ width: state.width, height: state.height });
|
|
52
|
+
try {
|
|
53
|
+
const response = await fetch(`/data?${params}`);
|
|
54
|
+
if (!response.ok) return;
|
|
55
|
+
trmnlp.userData.textContent = await response.text();
|
|
56
|
+
hljs.highlightAll();
|
|
57
|
+
} catch (e) {
|
|
58
|
+
console.warn("Failed to refresh user-data:", e);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
document.addEventListener("DOMContentLoaded", async function () {
|
|
63
|
+
trmnlp.view = document.querySelector("meta[name='trmnl-view']").content;
|
|
64
|
+
trmnlp.iframe = document.querySelector("iframe");
|
|
65
|
+
trmnlp.formatSelect = document.querySelector(".select-format");
|
|
66
|
+
trmnlp.userData = document.getElementById("user-data");
|
|
67
|
+
trmnlp.spinner = document.querySelector(".spinner");
|
|
68
|
+
trmnlp.isLiveReloadEnabled =
|
|
69
|
+
document.querySelector("meta[name='live-reload']").content === "true";
|
|
70
|
+
|
|
71
|
+
if (trmnlp.isLiveReloadEnabled) {
|
|
72
|
+
trmnlp.connectLiveRender();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const formatValue = localStorage.getItem("trmnlp-format") || "html";
|
|
76
|
+
|
|
77
|
+
trmnlp.formatSelect.value = formatValue;
|
|
78
|
+
trmnlp.formatSelect.addEventListener("change", () => {
|
|
79
|
+
localStorage.setItem("trmnlp-format", trmnlp.formatSelect.value);
|
|
80
|
+
trmnlp.fetchPreview();
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
trmnlp.iframe.addEventListener("load", () => {
|
|
84
|
+
trmnlp.spinner.style.display = "none";
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
document.getElementById('picker-form').addEventListener('trmnl:change', (event) => {
|
|
88
|
+
trmnlp.iframe.style.width = `${event.detail.width}px`;
|
|
89
|
+
trmnlp.iframe.style.height = `${event.detail.height}px`;
|
|
90
|
+
|
|
91
|
+
trmnlp.fetchPreview(event.detail);
|
|
92
|
+
trmnlp.refreshUserData(event.detail);
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
trmnlp.picker = await TRMNLPicker.create('picker-form', { localStorageKey: 'trmnlp-picker' });
|
|
96
|
+
});
|