@platformos/pos-cli
Version:
Manage your platformOS application
84 lines (74 loc) • 7.1 kB
HTML
<html lang="en">
<head>
<title>pOS Liquid Evaluator</title>
<!-- Skeleton.css without grid -->
<style>.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:Raleway,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:#fff;background-color:#33c3f0;border-color:#33c3f0}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:#fff;background-color:#1eaedb;border-color:#1eaedb}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #d1d1d1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid #33c3f0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}</style>
<!-- Custom styles -->
<style>textarea { width: 100%; min-height: 250px; } pre { white-space: break-spaces; word-break: break-all; padding: 1em; border: 1px solid #ccc; background-color: #fefefe;} pre.error{ color: red; }</style>
<style>#status-bar { font-family: monospace; padding: 1rem 0; font-size: 1.3rem; border-bottom: 1px solid #ccc; margin-bottom: 1em; } </style>
<style>h6 { padding: 1em; border: 1px solid #e63946; color: #e63946 }
.links { list-style-type: none; }
.links li { display: inline-block; margin-right: 1em;}
textarea { padding: 1em; }
</style>
</head>
<body>
<div class="container">
<div id="status-bar"></div>
<ul class="links">
<li><a href="https://documentation.platformos.com/api-reference/liquid/introduction" target="_blank">Liquid Markup Intro</a></li>
<li><a href="https://documentation.platformos.com/api-reference/liquid/filters" target="_blank">Liquid Filters</a></li>
<li><a href="https://documentation.platformos.com/api-reference/liquid/platformos-filters" target="_blank">platformOS Filters</a></li>
<li><a href="https://documentation.platformos.com/api-reference/liquid/platformos-tags" target="_blank">platformOS Tags</a></li>
</ul>
<h6>Warning: Use with caution! <br/>Code executed in here executes on connected instance. This means you operate on live data from that instance.</h6>
<h4>Input</h4>
<form action="/api/liquid">
<textarea name="content" autofocus>{{ 'hello world' | upcase }}</textarea>
<br>
<input type="submit" value="Execute"><span> (Crtl+Enter)</span>
</form>
<hr>
<h4>Output</h4>
<pre class="output"></pre>
<h4>Error</h4>
<pre class="error"></pre>
</div>
<!-- Custom scripts -->
<script>
var f = document.querySelector('form'),
t = f.querySelector('textarea'),
o = document.querySelector('pre.output'),
e = document.querySelector('pre.error'),
env = document.querySelector('h3');
var executeLiquid = function() {
fetch('/api/liquid', {
method: 'POST',
body: JSON.stringify({ "content": t.value }),
headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then((data) => {
o.innerHTML = data.result;
e.innerHTML = data.error;
});
}
t.addEventListener('keypress', function(e) {
if (e.which === 13 && e.ctrlKey) { executeLiquid(); }
});
f.addEventListener('submit', function(e) {
e.preventDefault();
executeLiquid();
});
let printConnectionInfo = env => {
document.querySelector("#status-bar")
.textContent = `Connected to ${env.MPKIT_URL}`;
};
fetch("/info")
.then(response => response.json())
.then(printConnectionInfo)
.catch(console.error);
</script>
</body>
</html>