From d5cd0101c8e78f3e9f3995b0f4b8b37cef6fd4ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Vantomme?= Date: Wed, 26 Jan 2022 18:46:43 +0100 Subject: [PATCH] feat(footer): customize using custom views & locales --- .gitignore | 7 ++ app/controllers/application_controller.rb | 5 ++ app/custom_views/.keep | 0 app/views/layouts/_footer.html.haml | 14 ++-- .../mailers/notifications_layout.html.erb | 2 +- app/views/root/_footer.html.haml | 39 +++++---- app/views/users/_general_footer_row.html.haml | 18 +++-- config/application.rb | 1 + config/custom_locales/.keep | 0 config/env.example.optional | 10 --- config/initializers/02_urls.rb | 1 - config/initializers/provider.rb | 10 --- config/locales/links.en.yml | 81 +++++++++++++++++++ config/locales/links.fr.yml | 81 +++++++++++++++++++ doc/customization.md | 35 ++++++++ 15 files changed, 247 insertions(+), 57 deletions(-) create mode 100644 app/custom_views/.keep create mode 100644 config/custom_locales/.keep delete mode 100644 config/initializers/provider.rb create mode 100644 config/locales/links.en.yml create mode 100644 config/locales/links.fr.yml create mode 100644 doc/customization.md diff --git a/.gitignore b/.gitignore index bb7e7bf92..5275e05fd 100644 --- a/.gitignore +++ b/.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 diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index a257b8f0c..310cbd25b 100644 --- a/app/controllers/application_controller.rb +++ b/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 diff --git a/app/custom_views/.keep b/app/custom_views/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml index ee65d5c93..4b36a2aad 100644 --- a/app/views/layouts/_footer.html.haml +++ b/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' diff --git a/app/views/layouts/mailers/notifications_layout.html.erb b/app/views/layouts/mailers/notifications_layout.html.erb index e05bdafbc..6766b744d 100644 --- a/app/views/layouts/mailers/notifications_layout.html.erb +++ b/app/views/layouts/mailers/notifications_layout.html.erb @@ -145,7 +145,7 @@
- <%= "#{APPLICATION_NAME}" %> est un service fourni par <%= PROVIDED_BY %> + <%= "#{APPLICATION_NAME}" %> est un service fourni par <%= t("links.provider.provided_by") %>
diff --git a/app/views/root/_footer.html.haml b/app/views/root/_footer.html.haml index 3da49bb49..50e603d6d 100644 --- a/app/views/root/_footer.html.haml +++ b/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 - %span.footer-logo{ role: 'img', 'aria-label': PROVIDER_LOGO_ALT } - = image_tag PROVIDER_LOGO_SRC, alt: PROVIDER_LOGO_ALT, width: PROVIDER_LOGO_WIDTH, height: PROVIDER_LOGO_HEIGHT, loading: 'lazy' - = link_to "https://beta.gouv.fr", title: "le site de Beta.gouv.fr", 'aria-label': 'beta.gouv.fr' do - %span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': 'Logo beta.gouv.fr' } + = 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': t("links.provider.logo.alt") } + = 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 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 #{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 "Nouveautés", "https://github.com/betagouv/demarches-simplifiees.fr/releases", :class => "footer-link", :title => "Nos nouveautés" - -# haml-lint:enable ApplicationNameLinter + = link_to t("links.footer.releases.label"), t("links.footer.releases.url"), title: t("links.footer.releases.title"), class: "footer-link" %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 - Accessibilité : non conforme + = 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" %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" diff --git a/app/views/users/_general_footer_row.html.haml b/app/views/users/_general_footer_row.html.haml index f3cd28017..e5b249785 100644 --- a/app/views/users/_general_footer_row.html.haml +++ b/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 - Accessibilité : non conforme - %li.footer-link-cgu>= link_to "CGU", CGU_URL, 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-doc>= link_to 'Documentation', DOC_URL, target: "_blank", rel: "noopener noreferrer" - %li.footer-link-contact>= contact_link "Contact technique", dossier_id: dossier&.id - %li.footer-link-aide>= link_to 'Aide', FAQ_URL, target: "_blank", rel: "noopener noreferrer" + = 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" + %li.footer-link-cgu> + = 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 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-doc> + = 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" diff --git a/config/application.rb b/config/application.rb index b75d4ae9b..e24e39038 100644 --- a/config/application.rb +++ b/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] diff --git a/config/custom_locales/.keep b/config/custom_locales/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/config/env.example.optional b/config/env.example.optional index 2a73be67e..615162f9e 100644 --- a/config/env.example.optional +++ b/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" diff --git a/config/initializers/02_urls.rb b/config/initializers/02_urls.rb index fd257f272..c1dc8b0b6 100644 --- a/config/initializers/02_urls.rb +++ b/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 diff --git a/config/initializers/provider.rb b/config/initializers/provider.rb deleted file mode 100644 index 679fcf193..000000000 --- a/config/initializers/provider.rb +++ /dev/null @@ -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") diff --git a/config/locales/links.en.yml b/config/locales/links.en.yml new file mode 100644 index 000000000..aa4eb0b86 --- /dev/null +++ b/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" diff --git a/config/locales/links.fr.yml b/config/locales/links.fr.yml new file mode 100644 index 000000000..aeb962996 --- /dev/null +++ b/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" diff --git a/doc/customization.md b/doc/customization.md new file mode 100644 index 000000000..339662dd6 --- /dev/null +++ b/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.