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

admin/bando/Djenterator.svelte

@@ -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 {
+  textarea.editor {
-    display: flex;
+    height: 15em;
-    flex-direction: row;
+    background-color: var(--value0);
-    width: 100%;
+    color: var(--value9);
-  }
-
-  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;
   }
 </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>
+      <textarea class="editor" bind:value={ variable_json }></textarea>
-      <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>
-
       {#if notice}
-            <notice in:fade on:click={ () => notice = "" }>
+        <callout class="error">{notice}</callout>
-              <b>{ notice }</b>
-            </notice>
       {/if}
-        </pre>
+
-      </right>
+      {#if results}
-    </content>
+        <Code on:copy={ send_toast("Copied to clipboard!") } content={ results } language={ language } />
-    <template-editor>
+      {/if}
+
+    </block>
+  </blockstart>
+  <Toasts bind:send_toast fade_after={ 10000 } orientation="bottom right" />
 </Layout>

api/devtools/djenterator.js

@@ -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");

commands/api.js

@@ -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) => {

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "learnjsthehardway.com",
+  "name": "bandolier-template",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "learnjsthehardway.com",
+      "name": "bandolier-template",
-      "version": "0.5.0",
+      "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",

package.json

@@ -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",