Djentorator is back in a basic UI that will work but isn't very optimal.

main
Zed A. Shaw 2 years ago
parent fb24826fd3
commit 1df0c38e05
  1. 175
      admin/bando/Djenterator.svelte
  2. 2
      api/devtools/djenterator.js
  3. 2
      commands/api.js
  4. 16
      package-lock.json
  5. 1
      package.json

@ -1,7 +1,8 @@
<script>
import template from "lodash/template";
import { fade } from "svelte/transition";
import Icon from "$/client/components/Icon.svelte";
import Toasts from "$/client/components/Toasts.svelte";
import Code from "$/client/components/Code.svelte";
import { log } from "$/client/logging.js";
import Layout from "../Layout.svelte";
import api from '$/client/api.js';
@ -19,6 +20,15 @@
let renderer = () => source;
let notice = "";
let last_good = "";
let send_toast;
let language = "javascript";
const language_list = {
"html": "html",
"svelte": "javascript",
"sh": "shell",
"js": "javascript"
}
const list_generators = async () => {
let [status, data] = await api.get('/api/devtools/djenterator');
@ -43,6 +53,7 @@
return true;
} catch(err) {
log.error(err);
notice = err.message;
results = last_good;
return false;
@ -60,12 +71,19 @@
}
}
const detect_language = (name) => {
const ext = name.split(".")[1];
language = language_list[ext];
}
const load_template = async (template_name) => {
let res = await fetch(`/djenterator/${template_name}`);
if(res.status == 200) {
source = await res.text();
last_good = source;
detect_language(template_name);
try {
renderer = template(source);
// tag this template renderer so that we don't try to render it against the wrong one
@ -81,16 +99,6 @@
}
}
const toggle_template = () => {
if(showing_rendered) {
render_template();
} else {
results = renderer.toString();
}
showing_rendered = !showing_rendered;
}
const copy_code = () => {
navigator.clipboard.writeText(results).then(() => {
notice = "Code copied to clipboard.";
@ -99,9 +107,6 @@
});
}
const canary = '3a025dba-1a62-4169-ae9f-f7cd4104c4f4';
log.debug("Canary is compiled into build as", canary);
$: if(variable_json) render_template();
// this reload the templates when you click on a new one
@ -116,142 +121,32 @@
</script>
<style>
content {
display: flex;
flex-direction: row;
width: 100%;
}
template-editor {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
pre {
position: relative;
height: 90vh;
max-height: 90vh;
overflow-y: auto;
}
right pre {
display: flex;
font-size: 1em;
flex-basis: 100%;
margin: 0;
padding: 0;
}
right pre code {
padding-top: 2rem;
display: flex;
flex-basis: 100%;
border-radius: 0px 4px 4px 0px;
line-height: unset;
margin: 0;
}
left {
display: flex;
flex-grow: 1;
flex-basis: 70ch;
}
left textarea {
border-radius: 4px 0px 0px 4px;
margin: 0;
background-color: var(--color-secondary);
color: var(--color-bg);
height: 90vh;
max-height: 90vh;
}
right {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 100ch;
align-items: stretch;
}
status {
position: absolute;
z-index: 100;
top: 0;
padding-right: 1rem;
padding-left: 1rem;
padding-top: 0.1rem;
width: 90%;
color: var(--color-bg);
display: flex;
box-sizing: border-box;
background-color: var(--color-secondary);
border-radius: 0px 4px 0px 0px;
justify-content: space-evenly;
}
status file {
flex-basis: 90%;
text-align: right;
}
status buttons {
display: flex;
justify-content: space-around;
flex-basis: 10%;
padding-top: 0.5rem;
}
pre notice {
position: absolute;
bottom: 0;
left: 0.3rem;
right: 0.3rem;
text-align: right;
padding: 0.5rem;
font-size: 1rem;
background-color: var(--color-bg-tertiary);
border-radius: 4px 4px 0px 0px;
textarea.editor {
height: 15em;
background-color: var(--value0);
color: var(--value9);
}
</style>
<Layout fullscreen={ true } header={ false } testid="page-bando-djenterator">
<template-editor>
<blockstart style="width: 100%">
<block style="--w: 100%">
<select bind:value={ selected_template }>
{#each generators as template}
<option value={ template }>{ template }</option>
{/each}
</select>
<content>
<left>
<textarea class="editor" bind:value={ variable_json } rows="15"></textarea>
</left>
<right>
<status>
<buttons>
<span on:click={ copy_code }><Icon name="copy" size="24" color="var(--color-bg)" /></span>
<span on:click={ toggle_template }><Icon name="code" size="24" color="var(--color-bg)" /></span>
</buttons>
<file>static/djenterator/{ selected_template }</file>
</status>
<pre>
<code>
{results}
</code>
<textarea class="editor" bind:value={ variable_json }></textarea>
{#if notice}
<notice in:fade on:click={ () => notice = "" }>
<b>{ notice }</b>
</notice>
<callout class="error">{notice}</callout>
{/if}
</pre>
</right>
</content>
<template-editor>
{#if results}
<Code on:copy={ send_toast("Copied to clipboard!") } content={ results } language={ language } />
{/if}
</block>
</blockstart>
<Toasts bind:send_toast fade_after={ 10000 } orientation="bottom right" />
</Layout>

@ -10,7 +10,7 @@ export const get = async (req, res) => {
const api = new API(req, res);
if(process.env.DANGER_ADMIN) {
const files = glob.sync("./static/djenterator/**/!(*.vars)");
const files = glob.sync("./static/djenterator/!(*.vars|*.swp)");
return api.reply(200, files.map(f => path.basename(f)));
} else {
return api.error(404, "Not Found");

@ -220,7 +220,7 @@ export const main = async (opts) => {
if(opts.DANGER_ADMIN) {
log.warn("!!!!!! Exposing client/bando/demos to the network because you set DANGER_ADMIN.");
app.use("/bando/demos/", express.static("client/bando/demos"));
app.use("/bando/demos/", express.static("admin/bando/demos"));
}
await dynamic_load("./api/**/[A-Za-z]*.js", (file_name, route, func_name) => {

16
package-lock.json generated

@ -1,12 +1,12 @@
{
"name": "learnjsthehardway.com",
"version": "0.5.0",
"name": "bandolier-template",
"version": "0.6.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "learnjsthehardway.com",
"version": "0.5.0",
"name": "bandolier-template",
"version": "0.6.0",
"dependencies": {
"@cloudfour/simple-svg-placeholder": "^1.0.2",
"@jamcart/7ty": "^0.1.6",
@ -88,6 +88,7 @@
"istanbul-lib-coverage": "^3.0.2",
"istanbul-lib-report": "^3.0.0",
"istanbul-reports": "^3.0.5",
"lodash": "^4.17.21",
"neat-csv": "^7.0.0",
"normalize-path": "^3.0.0",
"npm-run-all": "^4.1.5",
@ -8274,7 +8275,8 @@
},
"node_modules/lodash": {
"version": "4.17.21",
"license": "MIT"
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.clonedeep": {
"version": "4.5.0",
@ -21002,7 +21004,9 @@
}
},
"lodash": {
"version": "4.17.21"
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.clonedeep": {
"version": "4.5.0",

@ -43,6 +43,7 @@
"istanbul-lib-coverage": "^3.0.2",
"istanbul-lib-report": "^3.0.0",
"istanbul-reports": "^3.0.5",
"lodash": "^4.17.21",
"neat-csv": "^7.0.0",
"normalize-path": "^3.0.0",
"npm-run-all": "^4.1.5",

Loading…
Cancel
Save