feat(footer): customize using custom views & locales

.gitignore

@@ -35,3 +35,10 @@ yarn-debug.log*
 # Local Netlify folder
 .netlify
 
+# Custom locales
+/config/custom_locales/*
+!/config/custom_locales/.keep
+
+# Custom views
+/app/custom_views/*
+!/app/custom_views/.keep

app/controllers/application_controller.rb

@@ -17,6 +17,7 @@ class ApplicationController < ActionController::Base
   before_action :set_active_storage_host
   before_action :setup_javascript_settings
   before_action :setup_tracking
+  before_action :set_customizable_view_path
 
   around_action :switch_locale
 
@@ -359,4 +360,8 @@ class ApplicationController < ActionController::Base
       http_accept_language.compatible_language_from(I18n.available_locales)
     end
   end
+
+  def set_customizable_view_path
+    prepend_view_path "app/custom_views"
+  end
 end

app/views/layouts/_footer.html.haml

@@ -1,16 +1,16 @@
 #footer
   %p{ class: "copyright col-md-push-#{12-main_container_size} col-md-#{main_container_size} col-lg-push-#{12-main_container_size} col-lg-#{main_container_size} text-muted small" }
-    = link_to PROVIDER_NAME, PROVIDER_URL
+    = link_to t("links.provider.name"), t("links.provider.url")
     = Time.zone.now.year
     \-
-    = link_to 'Nouveautés', DOC_NOUVEAUTES_URL, target: '_blank'
+    = link_to t("links.footer.doc_nouveautes.label"), t("links.footer.doc_nouveautes.url"), title: t("links.footer.doc_nouveautes.title"), target: '_blank'
     \-
-    = link_to 'Statistiques', stats_path
+    = link_to t("links.footer.stats.label"), stats_path
     \-
-    = link_to 'CGU / Mentions légales', CGU_URL, target: '_blank'
+    = link_to "#{t("links.footer.cgu.label")} / #{t("links.footer.mentions_legales.label")}", t("links.footer.cgu.url"), title: t("links.footer.cgu.title"), target: '_blank'
     \-
-    = link_to 'Documentation', DOC_URL, target: '_blank'
+    = link_to t("links.footer.doc.label"), t("links.footer.doc.url"), title: t("links.footer.doc.title"), target: '_blank'
     \-
-    = link_to 'FAQ', FAQ_ADMIN_URL, target: '_blank'
+    = link_to t("links.footer.faq_admin.label"), t("links.footer.faq_admin.url"), title: t("links.footer.faq_admin.title"), target: '_blank'
     \-
-    = link_to 'Inscription ateliers en ligne', WEBINAIRE_URL, target: '_blank'
+    = link_to t("links.footer.webinaire.label"), t("links.footer.webinaire.url"), title: t("links.footer.webinaire.title"), target: '_blank'

app/views/layouts/mailers/notifications_layout.html.erb

@@ -145,7 +145,7 @@
                       <tr>
                         <td style="word-wrap:break-word;font-size:0px;padding:0px 20px 0px 20px;padding-top:0px;padding-bottom:0px;" align="center">
                           <div class="" style="cursor:auto;color:#55575d;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
-                            <%= "#{APPLICATION_NAME}" %> est un service fourni par <%= PROVIDED_BY %>
+                            <%= "#{APPLICATION_NAME}" %> est un service fourni par <%= t("links.provider.provided_by") %>
                           </div>
                         </td>
                       </tr>

app/views/root/_footer.html.haml

@@ -6,44 +6,41 @@
         %ul.footer-logos
           %li.footer-text
             Un service fourni par
-            = link_to PROVIDED_BY, PROVIDER_URL, title: PROVIDER_TITLE
+            = link_to t("links.provider.provided_by"), t("links.provider.url"), title: t("links.provider.title")
             %br
           %li
-            = link_to PROVIDER_URL, title: PROVIDER_NAME, 'aria-label': PROVIDER_NAME do
+            = link_to t("links.provider.url"), title: t("links.provider.name"), 'aria-label': t("links.provider.name") do
-              %span.footer-logo{ role: 'img', 'aria-label': PROVIDER_LOGO_ALT }
+              %span.footer-logo{ role: 'img', 'aria-label': t("links.provider.logo.alt") }
-                = image_tag PROVIDER_LOGO_SRC, alt: PROVIDER_LOGO_ALT, width: PROVIDER_LOGO_WIDTH, height: PROVIDER_LOGO_HEIGHT, loading: 'lazy'
+                = image_tag t("links.provider.logo.src"), alt: t("links.provider.logo.alt"), width: t("links.provider.logo.width"), height: t("links.provider.logo.height"), loading: 'lazy'
-            = link_to "https://beta.gouv.fr", title: "le site de Beta.gouv.fr", 'aria-label': 'beta.gouv.fr' do
+            = link_to t("links.footer.betagouv.url"), title: t("links.footer.betagouv.title"), 'aria-label': t("links.footer.betagouv.label") do
-              %span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': 'Logo beta.gouv.fr' }
+              %span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': "Logo #{t('links.footer.betagouv.label')}" }
 
       %li.footer-column
         %ul.footer-links
           %li.footer-link
-            = link_to "Newsletter", "https://my.sendinblue.com/users/subscribe/js_id/3s2q1/id/1", :title => "Notre newsletter", :class => "footer-link", :target => "_blank", rel: "noopener"
+            = link_to t("links.footer.newsletter.label"), t("links.footer.newsletter.url"), title: t("links.footer.newsletter.title"), class: "footer-link", target: "_blank", rel: "noopener"
           %li.footer-link
-            -# haml-lint:disable ApplicationNameLinter
+            = link_to t("links.footer.releases.label"), t("links.footer.releases.url"), title: t("links.footer.releases.title"), class: "footer-link"
-            = link_to "Nouveautés", "https://github.com/betagouv/demarches-simplifiees.fr/releases", :class => "footer-link", :title => "Nos nouveautés"
-            -# haml-lint:enable ApplicationNameLinter
           %li.footer-link
-            = link_to "Statistiques", stats_path, :class => "footer-link"
+            = link_to t("links.footer.stats.label"), stats_path, title: t("links.footer.stats.title"), class: "footer-link"
           %li.footer-link
-            = link_to "CGU", CGU_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.cgu.label"), t("links.footer.cgu.url"), title: t("links.footer.cgu.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
           %li.footer-link
-            = link_to "Mentions légales", MENTIONS_LEGALES_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
           %li.footer-link
-            = link_to "Suivi d’audience et vie privée", suivi_path, :class => "footer-link"
+            = link_to t("links.footer.suivi.label"), suivi_path, title: t("links.footer.suivi.title"), class: "footer-link"
 
       %li.footer-column
         %ul.footer-links
           %li.footer-link
-            = contact_link "Contact", class: "footer-link"
+            = contact_link t("links.footer.contact.label"), title: t("links.footer.contact.title"), class: "footer-link"
           %li.footer-link
-            = link_to "Documentation", DOC_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.doc.label"), t("links.footer.doc.url"), title: t("links.footer.doc.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
           %li.footer-link
-            = link_to "Documentation de l'API", API_DOC_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.api_doc.label"), t("links.footer.api_doc.url"), title: t("links.footer.api_doc.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
           %li.footer-link
-            = link_to "FAQ", FAQ_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.faq.label"), t("links.footer.faq.url"), title: t("links.footer.faq.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
           %li.footer-link
-            = link_to ACCESSIBILITE_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer" do
+            = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-              Accessibilité : non conforme
           %li.footer-link
-            = link_to "Disponibilité", STATUS_PAGE_URL, :class => "footer-link", :target => "_blank", rel: "noopener noreferrer"
+            = link_to t("links.footer.status_page.label"), t("links.footer.status_page.url"), title: t("links.footer.status_page.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"

app/views/users/_general_footer_row.html.haml

@@ -1,9 +1,13 @@
 %ul.footer-row.footer-bottom-line.footer-site-links
   %li.footer-link-accessibilite>
-    = link_to ACCESSIBILITE_URL, target: "_blank", rel: "noopener noreferrer" do
+    = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-      Accessibilité : non conforme
+  %li.footer-link-cgu>
-  %li.footer-link-cgu>= link_to "CGU", CGU_URL, target: "_blank", rel: "noopener noreferrer"
+    = link_to t("links.footer.cgu.label"), t("links.footer.cgu.url"), title: t("links.footer.cgu.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-  %li.footer-link-mentions-legales>= link_to "Mentions légales", MENTIONS_LEGALES_URL, target: "_blank", rel: "noopener noreferrer"
+  %li.footer-link-mentions-legales>
-  %li.footer-link-doc>= link_to 'Documentation', DOC_URL, target: "_blank", rel: "noopener noreferrer"
+    = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-  %li.footer-link-contact>= contact_link "Contact technique", dossier_id: dossier&.id
+  %li.footer-link-doc>
-  %li.footer-link-aide>= link_to 'Aide', FAQ_URL, target: "_blank", rel: "noopener noreferrer"
+    = link_to t("links.footer.doc.label"), t("links.footer.doc.url"), title: t("links.footer.doc.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
+  %li.footer-link-contact>
+    = contact_link t("links.footer.contact_technique.label"), dossier_id: dossier&.id, title: t("links.footer.contact_technique.title"), class: "footer-link"
+  %li.footer-link-aide>
+    = link_to t("links.footer.aide.label"), t("links.footer.aide.url"), title: t("links.footer.aide.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"

config/application.rb

@@ -31,6 +31,7 @@ module TPS
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
     config.i18n.default_locale = :fr
     config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
+    config.i18n.load_path += Dir[Rails.root.join('config', 'custom_locales', '**', '*.{rb,yml}')]
     config.i18n.available_locales = [:fr, :en]
     config.i18n.fallbacks = [:fr]
 

config/env.example.optional

@@ -96,16 +96,6 @@ MATOMO_IFRAME_URL="https://matomo.example.org/index.php?module=CoreAdminHome&act
 # An URI used to report requests breaking the Content Security Policy
 # CSP_REPORT_URI="https://myappname.report-uri.com/r/d/csp/reportOnly"
 
-# Instance provider
-# PROVIDED_BY="la DINUM"
-# PROVIDER_NAME="DINUM"
-# PROVIDER_TITLE="Direction Interministérielle au Numérique"
-# PROVIDER_URL="https://numerique.gouv.fr/"
-# PROVIDER_LOGO_SRC="footer/logo-dinum.png"
-# PROVIDER_LOGO_ALT="Logo DINUM"
-# PROVIDER_LOGO_HEIGHT="161"
-# PROVIDER_LOGO_WIDTH="138"
-
 # Landing page sections
 # LANDING_TESTIMONIALS_ENABLED="enabled"
 # LANDING_USERS_ENABLED="enabled"

config/initializers/02_urls.rb

@@ -48,5 +48,4 @@ STATUS_PAGE_URL = ENV.fetch("STATUS_PAGE_URL", "https://status.demarches-simplif
 DEMANDE_INSCRIPTION_ADMIN_PAGE_URL = ENV.fetch("DEMANDE_INSCRIPTION_ADMIN_PAGE_URL", "https://www.demarches-simplifiees.fr/commencer/demande-d-inscription-a-demarches-simplifiees")
 MATOMO_IFRAME_URL = ENV.fetch("MATOMO_IFRAME_URL", "https://#{ENV.fetch('MATOMO_HOST', 'stats.data.gouv.fr')}/index.php?module=CoreAdminHome&action=optOut&language=fr&&fontColor=333333&fontSize=16px&fontFamily=Muli")
 CSP_REPORT_URI = ENV.fetch("CSP_REPORT_URI", "")
-
 # rubocop:enable DS/ApplicationName

config/initializers/provider.rb

@@ -1,10 +0,0 @@
-# Instance provider
-PROVIDED_BY = ENV.fetch("PROVIDED_BY", "la DINUM")
-PROVIDER_NAME = ENV.fetch("PROVIDER_NAME", "DINUM")
-PROVIDER_TITLE = ENV.fetch("PROVIDER_TITLE", "Direction Interministérielle au Numérique")
-PROVIDER_URL = ENV.fetch("PROVIDER_URL", "https://numerique.gouv.fr/")
-
-PROVIDER_LOGO_SRC = ENV.fetch("PROVIDER_LOGO_SRC", "footer/logo-dinum.png")
-PROVIDER_LOGO_ALT = ENV.fetch("PROVIDER_LOGO_ALT", "Logo DINUM")
-PROVIDER_LOGO_HEIGHT = ENV.fetch("PROVIDER_LOGO_HEIGHT", "161")
-PROVIDER_LOGO_WIDTH = ENV.fetch("PROVIDER_LOGO_WIDTH", "138")

config/locales/links.en.yml

@@ -0,0 +1,81 @@
+en:
+  links:
+    provider:
+      logo:
+        src: "footer/logo-dinum.png"
+        alt: "Logo DINUM"
+        height: 161
+        width: 138
+      name: "DINUM"
+      provided_by: "la DINUM"
+      title: "Direction Interministérielle au Numérique"
+      url: "https://numerique.gouv.fr"
+    footer:
+      accessibilite:
+        label: "Accessibility: not compliant"
+        title: "Accessibility: not compliant"
+        url: "https://doc.demarches-simplifiees.fr/declaration-daccessibilite"
+      aide:
+        label: "Help"
+        title: "Frequently Asked Questions"
+        url: "https://faq.demarches-simplifiees.fr"
+      api_doc:
+        label: "API Documentation"
+        title: "API Documentation"
+        url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/graphql"
+      betagouv:
+        label: "Beta.gouv.fr"
+        title: "The Beta.gouv.fr website"
+        url: "https://beta.gouv.fr"
+      cgu:
+        label: "ToS"
+        title: "Terms of Service"
+        url: "https://doc.demarches-simplifiees.fr/cgu"
+      contact:
+        label: "Contact"
+        title: "Contact"
+      contact_technique:
+        label: "Technical contact"
+        title: "Technical contact"
+      doc:
+        label: "Documentation"
+        title: "Documentation"
+        url: "https://doc.demarches-simplifiees.fr"
+      doc_nouveautes:
+        label: "News"
+        title: "News"
+        url: "https://doc.demarches-simplifiees.fr/nouveautes"
+      faq:
+        label: "FAQ"
+        title: "Frequently Asked Questions"
+        url: "https://faq.demarches-simplifiees.fr"
+      faq_admin:
+        label: "FAQ"
+        title: "Frequently Asked Questions"
+        url: "https:///faq.demarches-simplifiees.fr/collection/1-administrateur-creation-dun-formulaire"
+      mentions_legales:
+        label: "Legal notices"
+        title: "Legal notices"
+        url: "https//doc.demarches-simplifiees.fr/mentions-legales"
+      newsletter:
+        label: "Newsletter"
+        title: "Notre newsletter"
+        url: "https://my.sendinblue.com/users/subscribe/js_id/3s2q1/id/1"
+      releases:
+        label: "Releases"
+        title: "Releases"
+        url: "https://github.com/betagouv/demarches-simplifiees.fr/releases"
+      stats:
+        label: "Statistics"
+        title: "Statistics"
+      status_page:
+        label: "Disponibility"
+        title: "Disponibility"
+        url: "https://status.demarches-simplifiees.fr"
+      suivi:
+        label: "Audience tracking and privacy"
+        title: "Audience tracking and privacy"
+      webinaire:
+        label: "Online workshop registration"
+        title: "Online workshop registration"
+        url: "https://app.livestorm.co/demarches-simplifiees"

config/locales/links.fr.yml

@@ -0,0 +1,81 @@
+fr:
+  links:
+    provider:
+      logo:
+        src: "footer/logo-dinum.png"
+        alt: "Logo DINUM"
+        height: 161
+        width: 138
+      name: "DINUM"
+      provided_by: "la DINUM"
+      title: "Direction Interministérielle au Numérique"
+      url: "https://numerique.gouv.fr"
+    footer:
+      accessibilite:
+        label: "Accessibilité : non conforme"
+        title: "Accessibilité : non conforme"
+        url: "https://doc.demarches-simplifiees.fr/declaration-daccessibilite"
+      aide:
+        label: "Aide"
+        title: "Foire aux Questions"
+        url: "https://faq.demarches-simplifiees.fr"
+      api_doc:
+        label: "Documentation de l'API"
+        title: "Documentation de l'API"
+        url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/graphql"
+      betagouv:
+        label: "Beta.gouv.fr"
+        title: "Le site de Beta.gouv.fr"
+        url: "https://beta.gouv.fr"
+      cgu:
+        label: "CGU"
+        title: "Conditions Générales d'Utilisation"
+        url: "https://doc.demarches-simplifiees.fr/cgu"
+      contact:
+        label: "Contact"
+        title: "Contact"
+      contact_technique:
+        label: "Contact technique"
+        title: "Contact technique"
+      doc:
+        label: "Documentation"
+        title: "Documentation"
+        url: "https://doc.demarches-simplifiees.fr"
+      doc_nouveautes:
+        label: "Nouveautés"
+        title: "Nouveautés"
+        url: "https://doc.demarches-simplifiees.fr/nouveautes"
+      faq:
+        label: "FAQ"
+        title: "Foire aux Questions"
+        url: "https://faq.demarches-simplifiees.fr"
+      faq_admin:
+        label: "FAQ"
+        title: "Foire aux Questions"
+        url: "https:///faq.demarches-simplifiees.fr/collection/1-administrateur-creation-dun-formulaire"
+      mentions_legales:
+        label: "Mentions légales"
+        title: "Mentions légales"
+        url: "https//doc.demarches-simplifiees.fr/mentions-legales"
+      newsletter:
+        label: "Newsletter"
+        title: "Notre newsletter"
+        url: "https://my.sendinblue.com/users/subscribe/js_id/3s2q1/id/1"
+      releases:
+        label: "Nouveautés"
+        title: "Nos nouveautés"
+        url: "https://github.com/betagouv/demarches-simplifiees.fr/releases"
+      stats:
+        label: "Statistiques"
+        title: "Statistiques"
+      status_page:
+        label: "Disponibilité"
+        title: "Disponibilité"
+        url: "https://status.demarches-simplifiees.fr"
+      suivi:
+        label: "Suivi d'audience et vie privée"
+        title: "Suivi d'audience et vie privée"
+      webinaire:
+        label: "Inscription ateliers en ligne"
+        title: "Inscription ateliers en ligne"
+        url: "https://app.livestorm.co/demarches-simplifiees"

doc/customization.md

@@ -0,0 +1,35 @@
+# Front end customization
+
+Do you want to customize your instance ? Here is a step by step guide.
+
+## Step 1. Understanding
+
+For your information, you can overide any view in our app by replicating the
+view structure from `app/views` to `app/custom_views/`.
+
+You can also overide locales by replicating the locales structure from
+`config/locales` to `config/custom_locales`.
+
+## Step 2. Customize the views
+
+So let's imagine you want to customize the `app/views/root/_footer.html.haml`.
+Here is how to do:
+
+```
+$ mkdir app/custom_views/root
+$ cp app/views/root/_footer.html.haml app/custom_views/root
+```
+
+And _voila!_ You can edit your own template. No need for env var, no need to
+worry about conflicts.
+
+## Step 3. Customize the locales
+
+Now let's imagine you want to customize the `config/locales/links.fr.yml`.
+Here is how to do:
+
+```
+$ cp config/locales/links.fr.yml config/custom_locales
+```
+
+And _voila!_ You can now edit your own locales.