Move CSS to Webpack

Using both the asset pipeline and webpack is confusing
and leads to unpredictable results in production.

This commit moves all (S)CSS to Webpack under `app/javascript/scss`
so that we can test whether the development interface results
in a consistent production deployment.

In order to load the ForkAwesome fonts we used a long path:
`$fa-font-path: "../../../node_modules/fork-awesome/fonts";`
Not sure whether this works...

26 files changed, 107 insertions, 87 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
deleted file mode 100644
index 94d00ec..0000000
--- a/app/assets/stylesheets/application.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require normalize.css/normalize.css
- *= require_self
- *= require leaflet
- *= require leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css
- *= require leaflet.markercluster/dist/MarkerCluster.css
- *= require leaflet.markercluster/dist/MarkerCluster.Default.css
- *= require_tree .
- *
- */
diff --git a/app/assets/stylesheets/taxonomies/filter.scss b/app/assets/stylesheets/taxonomies/filter.scss
deleted file mode 100644
index 7506632..0000000
--- a/app/assets/stylesheets/taxonomies/filter.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the taxonomies/filter controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 89b3b6d..72ba3cf 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -23,15 +23,15 @@ module ApplicationHelper
       ).to_html.html_safe, class: 'markdown')
   end
 
-  # Display current application version
-  def version_string
+  # Link to current application version
+  def version_link
     version = begin
                 IO.read('.app-version')&.strip
               rescue
                 'HEAD'
               end
 
-    tag.div(link_to(version, INCOMMON.repo_url(version), title: 'Read source code'), class: 'app-version')
+    link_to(version, INCOMMON.repo_url(version), title: 'Read source code')
   end
 
   private
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 721b8c1..0ddfdb5 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -7,7 +7,6 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()
 
-
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
@@ -15,11 +14,12 @@ require("@rails/activestorage").start()
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
+import "../scss/application"
+
 //= require leaflet
 //= require leaflet-defaulticon-compatibility
 //= require leaflet.markercluster
 
 import "controllers"
-import "fork-awesome/scss/fork-awesome"
-import "fork-awesome/fonts/forkawesome-webfont"
-import "stylesheets/application"
+
+
diff --git a/app/assets/stylesheets/agents.scss b/app/javascript/scss/_agents.scss
index ec9285d..ec9285d 100644
--- a/app/assets/stylesheets/agents.scss
+++ b/app/javascript/scss/_agents.scss
diff --git a/app/assets/stylesheets/categories.scss b/app/javascript/scss/_categories.scss
index 6e6299f..6e6299f 100644
--- a/app/assets/stylesheets/categories.scss
+++ b/app/javascript/scss/_categories.scss
diff --git a/app/assets/stylesheets/resources.scss b/app/javascript/scss/_resources.scss
index eb7411b..eb7411b 100644
--- a/app/assets/stylesheets/resources.scss
+++ b/app/javascript/scss/_resources.scss
diff --git a/app/assets/stylesheets/sections.scss b/app/javascript/scss/_sections.scss
index d540c09..d540c09 100644
--- a/app/assets/stylesheets/sections.scss
+++ b/app/javascript/scss/_sections.scss
diff --git a/app/javascript/scss/_taxonomies.scss b/app/javascript/scss/_taxonomies.scss
new file mode 100644
index 0000000..5bf19e1
--- /dev/null
+++ b/app/javascript/scss/_taxonomies.scss
@@ -0,0 +1,44 @@
+@import "taxonomies/dewey";
+
+[data-controller="taxonomy"] {
+    height: 100%;
+    overflow: hidden auto;
+    scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+    scrollbar-width: thin;
+
+    nav {
+        position: relative;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+        height: calc(100% - 7.5rem);
+        padding-top: 32px;
+        max-width: 35rem;
+        width: 89vw;
+
+        display: none;
+    }
+    &.on {
+        nav {
+            display: block;
+        }
+    }
+}
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+    z-index: 1002;
+
+    &.on {
+        background-image: var(--icon-menu-on);
+    }
+}
+
diff --git a/app/assets/stylesheets/users.scss b/app/javascript/scss/_users.scss
index 38fcd72..38fcd72 100644
--- a/app/assets/stylesheets/users.scss
+++ b/app/javascript/scss/_users.scss
diff --git a/app/assets/stylesheets/welcome.scss b/app/javascript/scss/_welcome.scss
index 5854dd0..5854dd0 100644
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/javascript/scss/_welcome.scss
diff --git a/app/javascript/scss/application.scss b/app/javascript/scss/application.scss
new file mode 100644
index 0000000..3bf6259
--- /dev/null
+++ b/app/javascript/scss/application.scss
@@ -0,0 +1,35 @@
+/*
+ *= require normalize.css/normalize.css
+ *= require_self
+ *= require_tree .
+ *= require leaflet
+ *= require leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css
+ *= require leaflet.markercluster/dist/MarkerCluster.css
+ *= require leaflet.markercluster/dist/MarkerCluster.Default.css
+ *= require fork-awesome/scss/fork-awesome.scss
+ *= require fork-awesome/fonts/forkawesome-webfont
+ *
+ */
+
+/* Start with resetting the Stylesheet for all browsers */
+@import "normalize.css/normalize.css";
+
+/* UI */
+@import "components";
+
+/* Controllers */
+
+@import "agents";
+@import "taxonomies", "categories", "sections";
+@import "resources";
+@import "users";
+@import "welcome";
+
+/* Vendors */
+
+@import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
+@import "leaflet.markercluster/dist/MarkerCluster.css";
+@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+$fa-font-path: "../../../node_modules/fork-awesome/fonts";
+@import "fork-awesome/scss/fork-awesome.scss";
diff --git a/app/assets/stylesheets/application/_body.scss b/app/javascript/scss/components/_body.scss
index 72d90df..72d90df 100644
--- a/app/assets/stylesheets/application/_body.scss
+++ b/app/javascript/scss/components/_body.scss
diff --git a/app/assets/stylesheets/application/_debug.scss b/app/javascript/scss/components/_debug.scss
index 0e3aaa7..0e3aaa7 100644
--- a/app/assets/stylesheets/application/_debug.scss
+++ b/app/javascript/scss/components/_debug.scss
diff --git a/app/assets/stylesheets/application/_flash.scss b/app/javascript/scss/components/_flash.scss
index f168e68..f168e68 100644
--- a/app/assets/stylesheets/application/_flash.scss
+++ b/app/javascript/scss/components/_flash.scss
diff --git a/app/assets/stylesheets/application/_fonts.scss b/app/javascript/scss/components/_fonts.scss
index 5bb13f1..2a921dc 100644
--- a/app/assets/stylesheets/application/_fonts.scss
+++ b/app/javascript/scss/components/_fonts.scss
@@ -1,5 +1,5 @@
 /* Override ForkAwesome font path to match Webpack's */
-$fa-font-path: '/packs/media/fonts';
+$fa-font-path: '../media/fonts/';
 
 /* Align font icon with the marker's head */
 .extra-marker-svg i.fa {
diff --git a/app/assets/stylesheets/application/_footer.scss b/app/javascript/scss/components/_footer.scss
index 4ab34a2..4ab34a2 100644
--- a/app/assets/stylesheets/application/_footer.scss
+++ b/app/javascript/scss/components/_footer.scss
diff --git a/app/assets/stylesheets/application/_header.scss b/app/javascript/scss/components/_header.scss
index 3c7d460..3c7d460 100644
--- a/app/assets/stylesheets/application/_header.scss
+++ b/app/javascript/scss/components/_header.scss
diff --git a/app/javascript/scss/components/_index.scss b/app/javascript/scss/components/_index.scss
new file mode 100644
index 0000000..3730d5e
--- /dev/null
+++ b/app/javascript/scss/components/_index.scss
@@ -0,0 +1,8 @@
+@import "body";
+@import "debug";
+@import "flash";
+@import "fonts";
+@import "footer";
+@import "header";
+@import "map";
+@import "user_info";
diff --git a/app/assets/stylesheets/application/_map.scss b/app/javascript/scss/components/_map.scss
index ba86dd4..ba86dd4 100644
--- a/app/assets/stylesheets/application/_map.scss
+++ b/app/javascript/scss/components/_map.scss
diff --git a/app/assets/stylesheets/application/_user_info.scss b/app/javascript/scss/components/_user_info.scss
index 765be0a..765be0a 100644
--- a/app/assets/stylesheets/application/_user_info.scss
+++ b/app/javascript/scss/components/_user_info.scss
diff --git a/app/assets/stylesheets/taxonomies.scss b/app/javascript/scss/taxonomies/_dewey.scss
index 1f3d6ea..a26bc24 100644
--- a/app/assets/stylesheets/taxonomies.scss
+++ b/app/javascript/scss/taxonomies/_dewey.scss
@@ -1,51 +1,3 @@
-/*
- * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
- *
- * SPDX-License-Identifier: LAL-1.3
- */
-
-[data-controller="taxonomy"] {
-    height: 100%;
-    overflow: hidden auto;
-    scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
-    scrollbar-width: thin;
-
-    nav {
-        position: relative;
-        bottom: 0;
-        margin: 0;
-        padding: 0;
-        height: calc(100% - 7.5rem);
-        padding-top: 32px;
-        max-width: 35rem;
-        width: 89vw;
-
-        display: none;
-    }
-    &.on {
-        nav {
-            display: block;
-        }
-    }
-}
-
-button[data-action="taxonomy#toggle"] {
-    position: absolute;
-    left: 0.7rem;
-    display: block;
-    cursor: pointer;
-    padding: 16px;
-    color: transparent;
-    background: transparent var(--icon-menu-off) top left/32px no-repeat;
-    border: none;
-    text-align: center;
-    z-index: 1002;
-
-    &.on {
-        background-image: var(--icon-menu-on);
-    }
-}
-
 /* Dewey Taxonomy */
 #taxonomy-2519915f-d19c-4281-b758-f5ddb889d7fa {
     ol {
diff --git a/app/views/application/_version.html.erb b/app/views/application/_version.html.erb
new file mode 100644
index 0000000..616cb82
--- /dev/null
+++ b/app/views/application/_version.html.erb
@@ -0,0 +1,3 @@
+<div class="app-version" title="This is free software: you can access and acquire the source code">
+    version <span><%= version_link %></span>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index bc02585..bfdf530 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
         <%= csp_meta_tag %>
         <%= display_meta_tags site: 'IN COMMON Map' %>
 
-        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+        <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
         <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
         <%= yield :head %>
     </head>
@@ -28,6 +28,8 @@
             <%= yield :aside %>
         </aside>
         <footer>
+            <hr>
+            <%= render partial: "application/version" %>
             <%= yield :footer %>
         </footer>
         <%= render partial: 'debug' %>
diff --git a/config/webpack/development.js b/config/webpack/development.js
index c5edff9..7c82317 100644
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@@ -2,4 +2,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
 const environment = require('./environment')
 
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+environment.plugins.append('BundleAnalyzerPlugin', new BundleAnalyzerPlugin())
+
 module.exports = environment.toWebpackConfig()
diff --git a/config/webpacker.yml b/config/webpacker.yml
index 41a533a..a4b9a7a 100644
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -6,18 +6,18 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: true
+  check_yarn_integrity: false
   webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: ['app/assets']
+  # resolved_paths: ['app/assets']
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
   # Extract and emit a css file
-  extract_css: false
+  extract_css: true
 
   static_assets_extensions:
     - .jpg
@@ -94,6 +94,3 @@ production:
 
   # Cache manifest.json for performance
   cache_manifest: true
-
-  # Do not break the app please!
-  check_yarn_integrity: false