aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
committerhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
commit73b3fffdbe730c33480682c40e7e8271e75ddf59 (patch)
tree94c60464d43c6d39150802e8110cf51be2c326ee
parentb54d7d8aa172f85d53f44b601e4e81660d148342 (diff)
downloadincommon-map-73b3fffdbe730c33480682c40e7e8271e75ddf59.tar.gz
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...
-rw-r--r--app/assets/stylesheets/application.scss21
-rw-r--r--app/assets/stylesheets/taxonomies/filter.scss3
-rw-r--r--app/helpers/application_helper.rb6
-rw-r--r--app/javascript/packs/application.js8
-rw-r--r--app/javascript/scss/_agents.scss (renamed from app/assets/stylesheets/agents.scss)0
-rw-r--r--app/javascript/scss/_categories.scss (renamed from app/assets/stylesheets/categories.scss)0
-rw-r--r--app/javascript/scss/_resources.scss (renamed from app/assets/stylesheets/resources.scss)0
-rw-r--r--app/javascript/scss/_sections.scss (renamed from app/assets/stylesheets/sections.scss)0
-rw-r--r--app/javascript/scss/_taxonomies.scss44
-rw-r--r--app/javascript/scss/_users.scss (renamed from app/assets/stylesheets/users.scss)0
-rw-r--r--app/javascript/scss/_welcome.scss (renamed from app/assets/stylesheets/welcome.scss)0
-rw-r--r--app/javascript/scss/application.scss35
-rw-r--r--app/javascript/scss/components/_body.scss (renamed from app/assets/stylesheets/application/_body.scss)0
-rw-r--r--app/javascript/scss/components/_debug.scss (renamed from app/assets/stylesheets/application/_debug.scss)0
-rw-r--r--app/javascript/scss/components/_flash.scss (renamed from app/assets/stylesheets/application/_flash.scss)0
-rw-r--r--app/javascript/scss/components/_fonts.scss (renamed from app/assets/stylesheets/application/_fonts.scss)2
-rw-r--r--app/javascript/scss/components/_footer.scss (renamed from app/assets/stylesheets/application/_footer.scss)0
-rw-r--r--app/javascript/scss/components/_header.scss (renamed from app/assets/stylesheets/application/_header.scss)0
-rw-r--r--app/javascript/scss/components/_index.scss8
-rw-r--r--app/javascript/scss/components/_map.scss (renamed from app/assets/stylesheets/application/_map.scss)0
-rw-r--r--app/javascript/scss/components/_user_info.scss (renamed from app/assets/stylesheets/application/_user_info.scss)0
-rw-r--r--app/javascript/scss/taxonomies/_dewey.scss (renamed from app/assets/stylesheets/taxonomies.scss)48
-rw-r--r--app/views/application/_version.html.erb3
-rw-r--r--app/views/layouts/application.html.erb4
-rw-r--r--config/webpack/development.js3
-rw-r--r--config/webpacker.yml9
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