add a vim-like command line under :

template/_tree.hbs

@@ -28,6 +28,7 @@
     {{/if}}
 
     <th-emoji-tooltips></th-emoji-tooltips>
+    <th-command-line></th-command-line>
 </body>
 
 </html>

template/components/_head.hbs

@@ -19,28 +19,32 @@ clever to do while browser vendors figure that out, we'll just have to do a cach
 
 {{#if dev}}
 <script type="module">
-    import "treehouse/live-reload.js";
+    import "treehouse/dev/live-reload.js";
+    import "treehouse/dev/picture-upload.js";
 </script>
+<link rel="stylesheet" href="{{ asset 'css/dev.css' }}">
 {{/if}}
 
 <script>
+    const TREEHOUSE_DEV = {{ dev }};
     const TREEHOUSE_SITE = `{{ config.site }}`;
 
     {{!-- Yeah, this should probably be solved in a better way somehow.
-    For now this is used to allow literate-programming.js to refer to syntax files with the ?cache attribute,
+    For now this is used to allow literate-programming.js to refer to syntax files with the ?v attribute,
     so that they don't need to be redownloaded every single time. --}}
     const TREEHOUSE_SYNTAX_URLS = {
         javascript: `{{{ asset 'syntax/javascript.json' }}}`,
         haku: `{{{ asset 'syntax/haku.json' }}}`,
     };
 </script>
-<script type="module">
+<script type="module" async>
     import "treehouse/spells.js";
     import "treehouse/ulid.js";
     import "treehouse/usability.js";
     import "treehouse/settings.js";
     import "treehouse/tree.js";
     import "treehouse/emoji.js";
+    import "treehouse/command-line.js";
 </script>
 
 <meta property="og:site_name" content="{{ config.user.title }}">