lato 0.2.1 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0022ea0879d81f9d92624508b04419c1949b4528264c0af286852bb1fd2a683e
-  data.tar.gz: 18676f46ef4c681dac7568843db624d4723a5303c3fa97e82838a6ea9b16b3cf
+  metadata.gz: 288d8c5087ad55acbc2bd7e40a3a4dbbea45592d89b1bab4ca04fcbb367876eb
+  data.tar.gz: b64204ee59d0ff500f26bd37605a0d903f713dba4e4c9fb9aa6ff25395733f43
 SHA512:
-  metadata.gz: d97683db01c97cdd4b8b043488ba26b73aa667720b22184acedcdd837a90735cae3832d75adb94b72df0aee17569a61b353e5e3091739bfacefecf1c710f00c2
-  data.tar.gz: fbdf84e72347070544d30ce16083f778b3dc27cc2d89eeb2db8bebe061ef78e02c0a42602fdf9769a6b225865d5d657d4bb7eccd1977e07bcf9052e9a6c97cc4
+  metadata.gz: b12c8cdbd45308fd565669c44b160f99fcbdf02dab34f554b9bc6b278e000d674111b67ea6d802627cef73d341a8fbd44937e0babdd29f985f1f1b35e40975c5
+  data.tar.gz: 453e2ec441176eddaa105606ddf68aed5ae116cbd8b0cfb162bf6029f1eca5fbdd1cc6a29e1349ca6b42dd8b3d9da5a7feea49a9fdb4c4bfc499442e0b78687f

data/README.md

@@ -9,7 +9,7 @@ Add required dependencies to your application's Gemfile:
 gem "importmap-rails" # NOTE: Probably already installed in default rails 7 project
 
 # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
-gem "turbo-rails"
+gem "turbo-rails" # NOTE: Probably already installed in default rails 7 project
 
 # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
 gem "stimulus-rails" # NOTE: Probably already installed in default rails 7 project
@@ -69,9 +69,19 @@ end
 
 ```
 
-## Development
+### Extra tasks
+Lato integrates by default a basic PWAs manifest and service worker. To re-generate them with all required assets follow these steps:
+
+1. Complete the configuration of lato on a custom initializer (see [configuration](https://github.com/lato-gam/lato/blob/main/lib/lato/config.rb) options for more details)
+2. Add an icon.png file on **public/icon.png** with minimum size of 512x512px
+3. Run the following commands:
+
+```bash
+$ rails lato:generate:favicon
+$ rails lato:generate:pwa
+```
 
-Be sure to have Redis locally installed and running.
+## Development
 
 Clone repository, install dependencies, run migrations and start:
 

data/app/assets/javascripts/lato/application.js

@@ -5,6 +5,20 @@ import "bootstrap"
 // Import controllers (stimulus rails)
 import "controllers"
 
+/**
+ * Include service worker
+ */
+
+if (navigator.serviceWorker) {
+  navigator.serviceWorker.register("/service-worker.js", { scope: "/" })
+  .then(() => navigator.serviceWorker.ready)
+  .then((registration) => {
+    const event = new CustomEvent("service-worker:ready", { detail: registration })
+    document.dispatchEvent(event)
+  })
+  .then(() => console.log("[App]", "Service worker registered! -> listen to 'service-worker:ready' document event to get the registration object"))
+}
+
 /**
  * Fix form inside turbo-frame tag with redirect
  * https://github.com/hotwired/turbo-rails/issues/440
@@ -22,15 +36,11 @@ document.addEventListener("turbo:frame-missing", event => {
 const PAGE_TRANSITION_TIME = 50
 
 document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOMContentLoaded')
-
   // add is-loaded class
   document.body.classList.add('is-loaded')
 })
 
 document.addEventListener('turbo:load', () => {
-  console.log('turbo:load')
-
   setTimeout(() => {
     // add is-loaded class
     document.body.classList.add('is-loaded')

data/app/assets/javascripts/lato/controllers/lato_network_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    'online',
+    'offline'
+  ]
+
+  /**
+   * Stimulus
+   */
+
+  connect() {
+    window.addEventListener('online', this.onNetworkOnline.bind(this))
+    window.addEventListener('offline', this.onNetworkOffline.bind(this))
+
+    if (!navigator.onLine) {
+      this.onNetworkOffline()
+    }
+  }
+
+  disconnect() {
+    window.removeEventListener('online', this.onNetworkOnline.bind(this))
+    window.removeEventListener('offline', this.onNetworkOffline.bind(this))
+    if (this.timeout) clearTimeout(this.timeout)
+  }
+
+  /**
+   * Events
+   */
+
+  onNetworkOnline() {
+    this.element.classList.remove('d-none')
+    this.onlineTarget.classList.remove('d-none')
+    this.offlineTarget.classList.add('d-none')
+
+    if (this.timeout) clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.element.classList.add('d-none')
+    }, 5000)
+  }
+
+  onNetworkOffline() {
+    this.element.classList.remove('d-none')
+    this.onlineTarget.classList.add('d-none')
+    this.offlineTarget.classList.remove('d-none')
+
+    if (this.timeout) clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.element.classList.add('d-none')
+    }, 5000)
+  }
+}

data/app/views/layouts/lato/_head_content.html.erb

@@ -1 +1,13 @@
+<meta name="application-name" content="<%= Lato.config.application_title %>">
+<meta name="theme-color" content="<%= Lato.config.application_brand_color %>">
+<meta name="full-screen" content="yes">
+<meta name="browsermode" content="application">
+<meta name="screen-orientation" content="portrait">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="<%= Lato.config.application_title %>">
+
+<link rel="icon" href="/favicon.ico">
+<link rel="manifest" href="/manifest.json">
+
 <!-- Free for head tags -->

data/app/views/layouts/lato/_network.html.erb

@@ -0,0 +1,4 @@
+<div class="fixed-bottom p-3 d-none" data-controller="lato-network">
+  <span class="badge rounded-pill text-bg-danger fs-6 d-none" data-lato-network-target="offline">You are offline</span>
+  <span class="badge rounded-pill text-bg-success fs-6 d-none" data-lato-network-target="online">You are online</span>
+</div>

data/app/views/layouts/lato/application.html.erb

@@ -7,7 +7,7 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
-  <!-- TEMPORARY FIX: Popper js not working using bootstrap-gem -->
+  <% # TEMPORARY FIX: Popper js not working using bootstrap-gem %>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 
   <%= render 'layouts/lato/head_content' %>
@@ -36,8 +36,6 @@
     </main>
   </div>
 
-  
-
   <footer>
     <%= render 'layouts/lato/footer' %>
   </footer>
@@ -45,8 +43,10 @@
   <% if @layout_sidebar %>
     <%= render 'layouts/lato/aside-opener' %>
   <% end %>
+  
   <%= render 'layouts/lato/feedbacks' %>
   <%= render 'layouts/lato/action' %>
+  <%= render 'layouts/lato/network' %>
 
   <%= render 'layouts/lato/foot_content' %>
 </body>

data/config/locales/it.yml

@@ -57,7 +57,7 @@ it:
         first_name: Nome
         last_name: Cognome
         password_confirmation: Conferma password
-        email: Indirizzo email
+        email: Email
         accepted_privacy_policy_version: Privacy policy
         accepted_terms_and_conditions_version: Termini e condizioni
     errors:

data/lib/lato/config.rb

@@ -4,7 +4,7 @@ module Lato
   ##
   class Config
     # Applicaction configs
-    attr_accessor :application_title, :application_version, :application_company_name, :application_company_url
+    attr_accessor :application_title, :application_version, :application_company_name, :application_company_url, :application_brand_color
 
     # Session configs
     attr_accessor :session_lifetime, :session_root_path
@@ -26,6 +26,7 @@ module Lato
       @application_version = '1.0.0'
       @application_company_name = 'Lato Team'
       @application_company_url = 'https://github.com/Lato-GAM'
+      @application_brand_color = '#03256c'
 
       @auth_disable_signup = false
       @auth_disable_recover_password = false

data/lib/lato/version.rb

@@ -1,3 +1,3 @@
 module Lato
-  VERSION = "0.2.1"
+  VERSION = "0.3.1"
 end

data/lib/tasks/lato_tasks.rake

@@ -1,4 +1,5 @@
 require 'fileutils'
+require 'json'
 
 namespace :lato do
   namespace :install do
@@ -33,6 +34,145 @@ namespace :lato do
       gem_concern_path = Lato::Engine.root.join('app', 'models', 'concerns', 'lato_user_application.rb').to_s
       app_concern_path = Rails.root.join('app', 'models', 'concerns', 'lato_user_application.rb').to_s
       FileUtils.copy(gem_concern_path, app_concern_path) unless File.exist? app_concern_path
+
+      # Generate sample manifest.json file in public folder
+      ##
+
+      manifest_path = Rails.root.join('public', 'manifest.json')
+      unless File.exist? manifest_path
+        manifest = {
+          name: "Application",
+          short_name: "Application",
+          start_url: "/",
+          scope: "/",
+          display: "standalone",
+          orientation: "portrait",
+          theme_color: "#000000",
+          background_color: "#000000",
+          icons: []
+        }
+        File.open(manifest_path, 'w') { |f| f.write(JSON.pretty_generate(manifest)) }
+      end
+
+      # Generate sample service-worker.js file in public folder
+      ##
+
+      service_worker_path = Rails.root.join('public', 'service-worker.js')
+      unless File.exist? service_worker_path
+        service_worker = <<-JS
+function onInstall(event) {
+  console.log('[Serviceworker]', "Installing!", event);
+}
+function onActivate(event) {
+  console.log('[Serviceworker]', "Activating!", event);
+}
+function onFetch(event) {
+  console.log('[Serviceworker]', "Fetching!", event);
+}
+self.addEventListener('install', onInstall);
+self.addEventListener('activate', onActivate);
+self.addEventListener('fetch', onFetch);
+        JS
+        File.open(service_worker_path, 'w') { |f| f.write(service_worker) }
+      end
+    end
+  end
+
+  namespace :generate do
+    desc "Generate PWA icons from a single icon.png file (512x512) that should be placed inside 'public' folder"
+    # Usage: rails lato:generate:pwa
+    task :pwa do
+      # check if icon.png exists
+      icon_path = Rails.root.join('public', 'icon.png')
+      unless File.exist? icon_path
+        puts 'ERROR: icon.png file not found inside public folder'
+        return
+      end
+
+      # check MiniMagick is installed
+      begin
+        require 'mini_magick'
+      rescue LoadError
+        puts 'ERROR: mini_magick gem not found, please add it to your Gemfile'
+        return
+      end
+
+      # be sure icon.png is min 512x512
+      image = MiniMagick::Image.open(icon_path)
+      if image.width < 512 || image.height < 512 || image.width != image.height
+        puts 'ERROR: icon.png image size is not valid, it should be square and min 512x512'
+        return
+      end
+
+      # create icons folder if not exists
+      icons_path = Rails.root.join('public', 'icons')
+      FileUtils.mkdir_p(icons_path) unless File.exist? icons_path
+
+      # create icons
+      sizes = [16, 32, 48, 72, 96, 144, 152, 192, 384, 512]
+      sizes.each do |size|
+        file_path = "#{icons_path}/icon_#{size}x#{size}.png"
+        file_image = MiniMagick::Image.open(icon_path)
+        FileUtils.rm(file_path) if File.exist? file_path
+        file_image.resize "#{size}x#{size}"
+        file_image.write file_path
+      end
+
+      # create manifest.json
+      manifest_path = Rails.root.join('public', 'manifest.json')
+      manifest = {
+        name: Lato.config.application_title,
+        short_name: Lato.config.application_title,
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        orientation: 'portrait',
+        theme_color: Lato.config.application_brand_color,
+        background_color: Lato.config.application_brand_color,
+        icons: []
+      }
+      sizes.each do |size|
+        manifest[:icons] << {
+          src: "/icons/icon_#{size}x#{size}.png",
+          sizes: "#{size}x#{size}",
+          type: 'image/png'
+        }
+      end
+      FileUtils.rm(manifest_path) if File.exist? manifest_path
+      File.open(manifest_path, 'w') { |f| f.write(JSON.pretty_generate(manifest)) }
+    end
+
+    desc "Generate favicon.ico from a single icon.png file (512x512) that should be placed inside 'public' folder"
+    # Usage: rails lato:generate:favicon
+    task :favicon do
+      # check if icon.png exists
+      icon_path = Rails.root.join('public', 'icon.png')
+      unless File.exist? icon_path
+        puts 'ERROR: icon.png file not found inside public folder'
+        return
+      end
+
+      # check MiniMagick is installed
+      begin
+        require 'mini_magick'
+      rescue LoadError
+        puts 'ERROR: mini_magick gem not found, please add it to your Gemfile'
+        return
+      end
+
+      # be sure icon.png is min 512x512
+      image = MiniMagick::Image.open(icon_path)
+      if image.width < 512 || image.height < 512 || image.width != image.height
+        puts 'ERROR: icon.png image size is not valid, it should be square and min 512x512'
+        return
+      end
+
+      # create favicon.ico
+      file_path = Rails.root.join('public', 'favicon.ico')
+      file_image = MiniMagick::Image.open(icon_path)
+      FileUtils.rm(file_path) if File.exist? file_path
+      file_image.resize '48x48'
+      file_image.write file_path
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.1
 platform: ruby
 authors:
 - Gregorio Galante
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-15 00:00:00.000000000 Z
+date: 2023-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -118,6 +118,7 @@ files:
 - app/assets/javascripts/lato/controllers/lato_form_controller.js
 - app/assets/javascripts/lato/controllers/lato_hello_controller.js
 - app/assets/javascripts/lato/controllers/lato_input_autocomplete_controller.js
+- app/assets/javascripts/lato/controllers/lato_network_controller.js
 - app/assets/javascripts/lato/controllers/lato_operation_controller.js
 - app/assets/stylesheets/lato/application.scss
 - app/controllers/concerns/lato/componentable.rb
@@ -186,6 +187,7 @@ files:
 - app/views/layouts/lato/_navbar-brand_content.html.erb
 - app/views/layouts/lato/_navbar-nav_content.html.erb
 - app/views/layouts/lato/_navbar.html.erb
+- app/views/layouts/lato/_network.html.erb
 - app/views/layouts/lato/_sidebar-nav_content.html.erb
 - app/views/layouts/lato/_sidebar.html.erb
 - app/views/layouts/lato/application.html.erb