Polish up Parcel build output

.gitignore

@@ -1,8 +1,9 @@
 # The directory Mix will write compiled artifacts to.
 /_build/
 
-# Parcel cache
+# Parcel caches
 /.cache/
+/assets/.cache
 
 # If you run "mix test --cover", coverage assets end up here.
 /cover/

assets/package.json

@@ -2,8 +2,9 @@
   "repository": {},
   "license": "MIT",
   "scripts": {
-    "build": "parcel build ./js/app.js ./css/app.scss ./css/app-live-deck.scss ./css/app-crimson-command.scss --out-dir ../priv/static --public-url ./",
-    "watch": "parcel watch ./js/app.js ./css/app.scss ./css/app-live-deck.scss ./css/app-crimson-command.scss --out-dir ../priv/static --public-url ./",
+
+    "build": "cp -R ./static/* ../priv/static && parcel build ./js/app.js ./css/app.scss ./css/app-live-deck.scss ./css/app-crimson-command.scss --out-dir ../priv/static --public-url ./",
+    "watch": "cp -R ./static/* ../priv/static && parcel watch ./js/app.js ./css/app.scss ./css/app-live-deck.scss ./css/app-crimson-command.scss --out-dir ../priv/static --public-url ./",
     "eslint": "eslint js/**"
   },
   "dependencies": {
@@ -26,7 +27,6 @@
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "parcel-bundler": "^1.12.4",
-    "parcel-plugin-static-files-copy": "^2.4.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.1.3",

config/dev.exs

@@ -23,17 +23,10 @@ config :live_deck, LiveDeckWeb.Endpoint,
   code_reloader: true,
   check_origin: false,
   watchers: [
-    node: [
-      "./assets/node_modules/parcel-bundler/bin/cli.js",
+    npm: [
+      "run",
       "watch",
-      "./assets/js/app.js",
-      "./assets/css/app.scss",
-      "./assets/css/app-live-deck.scss",
-      "./assets/css/app-crimson-command.scss",
-      "--out-dir",
-      "priv/static",
-      "--public-url",
-      "./"
+      cd: Path.expand("../assets", __DIR__)
     ]
   ]
 

lib/live_deck_web/templates/control/index.html.leex

@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="remote__logo">
-        <img src="<%= Routes.static_path(LiveDeckWeb.Endpoint, "/js/images/dill-blue-haired.svg") %>" alt="Dill the Monster" />
+        <img src="<%= Routes.static_path(LiveDeckWeb.Endpoint, "/images/dill-blue-haired.svg") %>" alt="Dill the Monster" />
       </div>
       <div class="remote__title">
         <h1>Deck Remote</h1>

lib/live_deck_web/templates/error/404_page.html.eex

@@ -24,7 +24,7 @@
     <div class="error-page__content">
       <div class="error-page__illustration">
         <h4 class="error-page__header">Doh!</h4>
-        <img src="/js/images/error-monster.svg" alt="error-monster"/>
+        <img src="/images/error-monster.svg" alt="error-monster"/>
       </div>
       <h4>Whoops, that page is gone!</h4>
       <p class="u-push-top--xs">Let's head back to where you came from.</p>

lib/live_deck_web/templates/error/500_page.html.eex

@@ -24,7 +24,7 @@
     <div class="error-page__content">
       <div class="error-page__illustration">
         <h4 class="error-page__header">Doh!</h4>
-        <img src="/js/images/error-monster.svg" alt="error-monster"/>
+        <img src="/images/error-monster.svg" alt="error-monster"/>
       </div>
       <h4>Whoops, something went wrong!</h4>
       <p class="u-push-top--xs">Let's head back to where you came from.</p>

lib/live_deck_web/templates/slide/template_2_col.html.eex

@@ -4,6 +4,6 @@
     <p>Set your presentation theme, the order of your slides, and configure slide titles, backgrounds, and notes in the presentation config file.</p>
   </div>
   <div>
-    <img src="/js/images/deck-config.jpg" alt="team gaslight"/>
+    <img src="/images/deck-config.jpg" alt="team gaslight"/>
   </div>
 </section>

lib/live_deck_web/templates/slide/template_full_image.html.eex

@@ -1,5 +1,5 @@
 <section class="slide__content template--full-image">
-  <img src="/js/images/teamgaslight.jpg" alt="sneaky-ryan"/>
+  <img src="/images/teamgaslight.jpg" alt="sneaky-ryan"/>
 
   <div class="template__content">
     <h3>Originally Created by #teamgaslight </h3>

lib/live_deck_web/templates/slide/template_left_aside.html.eex

@@ -2,7 +2,7 @@
   <aside>
     <div class="aside_content">
     <div class="u-padded">
-      <img src="/js/images/remote.png" alt="LiveDeck Remote" style="border-radius:5px;" />
+      <img src="/images/remote.png" alt="LiveDeck Remote" style="border-radius:5px;" />
     </div>
     </div>
   </aside>

lib/live_deck_web/templates/slide/template_quote.html.eex

@@ -1,6 +1,6 @@
 <section class="slide__content template--quote">
   <div class="blockquote__image">
-    <img src="/js/images/rocket-dog.jpg" alt="josie" />
+    <img src="/images/rocket-dog.jpg" alt="josie" />
   </div>
   <blockquote>
     "Forget Power Point, Keynote, and Google Slides. The world needs a new shiny slide deck tool!"

lib/live_deck_web/templates/slide/template_quote_alt.html.eex

@@ -1,7 +1,7 @@
 <section class="slide__content template--quote-alt">
   <div class="blockquote__top">
     <div class="blockquote__image">
-      <img src="/js/images/josie.jpg" alt="josie" />
+      <img src="/josie.jpg" alt="josie" />
     </div>
   </div>
   <blockquote>

lib/live_deck_web/templates/slide/template_right_aside.html.eex

@@ -5,7 +5,7 @@
   <aside>
     <div class="aside_content">
     <div class="u-padded">
-      <img src="/js/images/dill-orange-haired.svg" alt="Live Deck Dill" />
+      <img src="/images/dill-orange-haired.svg" alt="Live Deck Dill" />
     </div>
     <p>github.com<br />/gaslight/<br />live_deck</p>
     </div>

lib/live_deck_web/templates/slide/template_side_image.html.eex

@@ -4,6 +4,6 @@
     <p>As a web-based app,the presentation deck and the deck remote can be shared on any device.</p>
   </div>
   <div class="image--right image--fill">
-    <img src="/js/images/live-deck-on-mobile.jpg" alt="gaslight" />
+    <img src="/images/live-deck-on-mobile.jpg" alt="gaslight" />
   </div>
 </section>