Merge pull request #36 from dxw/56-pt2-compile-js-w-esbuild

(56) part2 Add map to new design
dxw · Oct 9, 2024 · 880407c · 880407c
2 parents eedde00 + b203b1d
commit 880407c
Show file tree

Hide file tree

Showing 14 changed files with 263 additions and 16 deletions.
diff --git a/Gemfile b/Gemfile
@@ -17,7 +17,8 @@ gem "puma", "~> 6.4"
 gem "rollbar"
 gem "rails", "~> 7.2"
 gem "sass-rails", "~> 6.0"
-gem "turbolinks", "~> 5"
+gem "turbolinks", "~> 5" # we'll remove this once we've migrated to ESbuilt assets
+gem "turbo-rails"
 gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby]
 gem "terser"
 gem "govuk-components"
@@ -57,3 +58,5 @@ group :test do
 end
 
 gem "cssbundling-rails", "~> 1.4"
+
+gem "jsbundling-rails", "~> 1.3"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -173,6 +173,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.7.2)
     kramdown (2.4.0)
       rexml
@@ -407,6 +409,9 @@ GEM
     thor (1.3.2)
     tilt (2.3.0)
     timeout (0.4.1)
+    turbo-rails (2.0.10)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
@@ -465,6 +470,7 @@ DEPENDENCIES
   httparty
   jbuilder (~> 2.11)
   jquery-rails
+  jsbundling-rails (~> 1.3)
   launchy
   listen (>= 3.0.5, < 3.10)
   lograge (~> 0.12)
@@ -485,6 +491,7 @@ DEPENDENCIES
   spring-commands-rspec
   standard
   terser
+  turbo-rails
   turbolinks (~> 5)
   tzinfo-data
   web-console (>= 3.3.0)

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,2 +1,3 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
 css: yarn build:css --watch
+js: yarn build --watch
diff --git a/app/assets/javascripts/application.js → ...sets/javascripts/sprockets_application.js b/app/assets/javascripts/application.js → ...sets/javascripts/sprockets_application.js
diff --git a/...sets/stylesheets/application.tailwind.css → ...stylesheets/application.tailwind.css.scss b/...sets/stylesheets/application.tailwind.css → ...stylesheets/application.tailwind.css.scss
@@ -1,3 +1,5 @@
+@import "leaflet/dist/leaflet.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -0,0 +1,2 @@
+// Entry point for the build script in your package.json
+import "@hotwired/turbo-rails";
diff --git a/app/javascript/maps.js b/app/javascript/maps.js
@@ -0,0 +1,59 @@
+import L from "leaflet";
+
+document.addEventListener("turbo:load", function () {
+  const mapEle = document.querySelector("#map");
+
+  if (mapEle) {
+    console.log("map is on the page");
+
+    const bigBenLatLng = [51.510357, -0.116773];
+
+    const osmBaseUrl = "https://ows.mundialis.de/services/service?";
+    const airTextBaseUrl = "https://airtext.info/geoserver/wms?";
+
+    const airTextOptions = {
+      layers: "london:Total",
+      time: "2024-10-09",
+      format: "image/png",
+      transparency: true, // term used by CERC
+    };
+
+    const mergeAirTextOptions = (options) => {
+      return Object.assign({}, airTextOptions, options);
+    };
+
+    const discreteAir = L.tileLayer.wms(
+      airTextBaseUrl,
+      mergeAirTextOptions({ styles: "daqiTotal" })
+    );
+
+    const linearAir = L.tileLayer.wms(
+      airTextBaseUrl,
+      mergeAirTextOptions({ styles: "daqiTotal_linear" })
+    );
+
+    const osm = L.tileLayer.wms(osmBaseUrl, {
+      layers: "OSM-Overlay-WMS",
+      format: "image/png",
+      transparent: true, // standard term (?) used by Leaflet and OSM
+    });
+
+    const baseMaps = {
+      Discrete: discreteAir,
+      Linear: linearAir,
+    };
+    const overlayMaps = {
+      OSM: osm,
+    };
+
+    const map = L.map("map", {
+      center: bigBenLatLng,
+      zoom: 10,
+      layers: [discreteAir, osm],
+    });
+
+    baseMaps.Discrete.addTo(map);
+    overlayMaps.OSM.addTo(map);
+    L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);
+  }
+});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
     <meta content="<%= content_for?(:description) ? yield(:description) : I18n.t("app.name") %>" name="description"/>
     <%= favicon_link_tag asset_path('favicon-32x32.png'), :rel => 'icon', :type =>  'image/png' %>
     <%= stylesheet_link_tag "govuk_application", media: 'all', "data-turbolinks-track" => "reload" %>
-    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
+    <%= javascript_include_tag "sprockets_application", "data-turbolinks-track" => "reload" %>
     <%= csrf_meta_tags %>
   </head>
   <body>

diff --git a/app/views/layouts/tailwind_layout.html.erb b/app/views/layouts/tailwind_layout.html.erb
@@ -9,6 +9,8 @@
     <%= favicon_link_tag asset_path('favicon-32x32.png'), :rel => 'icon', :type =>  'image/png' %>
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag "application", media: 'all', "data-turbolinks-track" => "reload" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+    <%= javascript_include_tag "maps", "data-turbo-track": "reload", type: "module" %>
   </head>
   <body class="">
     <div class="container mx-auto max-w-6xl">

diff --git a/app/views/styled_forecasts/_forecast_tabs.html.erb b/app/views/styled_forecasts/_forecast_tabs.html.erb
@@ -4,7 +4,7 @@
   </header>
   <%= render partial: "styled_forecasts/tabs" %>
   <%= render partial: "map_selector" %>
-  <div class="map w-full bg-green-200 h-80">
+  <div id="map" class="map w-full bg-green-200 h-80">
     map
   </div>
 </div>
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
@@ -12,7 +12,10 @@
   policy.img_src :self, :https, :data
   policy.object_src :none
   policy.script_src :self, :https
-  policy.style_src :self, :https
+
+  # allow styling for the Turbo progress bar
+  policy.style_src("'sha256-WAyOw4V+FqDc35lQPyRADLBWbuNK8ahvYEaQIYF1+Ps='", :self, :https)
+
   # If you are using webpack-dev-server then specify webpack-dev-server host
   # policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -13,7 +13,7 @@ const compat = new FlatCompat({
 });
 
 export default [{
-    ignores: ["log/", "tmp/", "vendor/", "public/assets", "coverage", "**/leaflet.js"],
+    ignores: ["log/", "tmp/", "vendor/", "public/assets", "app/assets/builds", "coverage", "**/leaflet.js"],
 }, ...compat.extends("eslint:recommended", "prettier"), {
     languageOptions: {
         globals: {

diff --git a/package.json b/package.json
@@ -8,14 +8,17 @@
     "lint:format:fix": "prettier --write '**/*'",
     "lint:js": "eslint .",
     "lint:js:fix": "yarn run lint:js --fix",
-    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css.scss -o ./app/assets/builds/application.css --minify",
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --loader:.png=file --outdir=app/assets/builds --public-path=/assets"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.11.1",
+    "esbuild": "^0.24.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.0.0",
     "globals": "^15.9.0",
+    "leaflet": "^1.9.4",
     "prettier": "^3.0.0",
     "stylelint": "^16.0.0",
     "stylelint-config-standard": "^36.0.1",
@@ -26,6 +29,7 @@
     "yarn": "1.22.22"
   },
   "dependencies": {
+    "@hotwired/turbo-rails": "^8.0.10",
     "autoprefixer": "^10.4.20",
     "govuk-frontend": "^5.6.0",
     "postcss": "^8.4.47",