From b2b7096b3b8b6a46771fd8792eaf4f7137c7bd89 Mon Sep 17 00:00:00 2001
From: Bastien Gatellier <contact@bgatellier.fr>
Date: Wed, 31 Jan 2024 15:22:41 +0100
Subject: [PATCH] Fix: badge paragraph on the result page (#318)

* fix: human-readable date according to the current locale

* docs: fix badge parapgraph

* refactor: use the shortcode instead of the html

* docs: improved wording
---
 assets/js/components/SiteAnalysisResult.js | 20 ++++++++++++++------
 assets/js/index.js                         |  9 ++++++---
 content/en/result/_40_badge.md             |  2 +-
 content/fr/result/_40_badge.md             |  3 +--
 layouts/shortcodes/result-date.html        |  2 +-
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/assets/js/components/SiteAnalysisResult.js b/assets/js/components/SiteAnalysisResult.js
index af66a8f0..10cb151c 100644
--- a/assets/js/components/SiteAnalysisResult.js
+++ b/assets/js/components/SiteAnalysisResult.js
@@ -19,14 +19,15 @@ class SiteAnalysisResult {
 	/**
 	 * Create a site analysis result page with updated dom from api data
 	 * @param {Element} el
+	 * @param {string} currentLocale
 	 */
-	constructor(el) {
+	constructor(el, currentLocale) {
 		this.el = el;
 
 		/** @type {ResultRelativeTextData} */
 		this.resultRelativeTextData = resultRelativeTextData;
 
-		this._init();
+		this._init(currentLocale);
 	}
 
 	/**
@@ -34,9 +35,10 @@ class SiteAnalysisResult {
 	 *
 	 * Checks if an analysis results object exists. If yes, use it.
 	 * Otherwise, fetches data from server.
-	 *
+	 * 
+	 * @param {string} currentLocale
 	 */
-	async _init() {
+	async _init(currentLocale) {
 		const urlParams = new URLSearchParams(window.location.search);
 		const langSwitchersElements = document.querySelectorAll(".language-switcher a.lang")
 		const screenshotImgElement = document.querySelector(".result-screenshot")
@@ -86,10 +88,16 @@ class SiteAnalysisResult {
 		// update page size from ko to mo
 		pageResultData.size = Math.round(pageResultData.size) / 1000;
 
-		// set page result title
+		// set page result title and message
 		pageResultData.grade_title = this.resultRelativeTextData.verdictTitles[pageResultData.grade];
-
 		pageResultData.grade_message = this.resultRelativeTextData.verdictMessages[pageResultData.grade];
+		
+		// convert the date from an UTC string in to a human-readable string according to the current locale
+		const date = new Date(pageResultData.date)
+		pageResultData.date = Intl.DateTimeFormat(currentLocale, {
+			dateStyle: "full",
+			timeStyle: "medium",
+		}).format(date)
 
 		// set page result params binary scores (0/1 : good/bad)
 		pageResultData = {
diff --git a/assets/js/index.js b/assets/js/index.js
index 224eb157..ca17b037 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -7,9 +7,11 @@ import SiteAnalysisResult from "./components/SiteAnalysisResult";
 // ------------------------------------------------------------------------- INIT APP
 
 function initApp() {
+	// pick the current locale from the DOM once the application starts: aavoid several picking in the different components
+	const currentLocale = document.getElementsByTagName("html")[0].getAttribute("lang")
 	initMenu();
 	initCollapses();
-	initPageResult();
+	initPageResult(currentLocale);
 	initSubmitUrlForm();
 	initButtonRemakeAnalysis();
 	initButtonShareURL();
@@ -47,11 +49,12 @@ function initCollapses() {
 
 /**
  * Init page result interactive data from api or url params
+ * @param {string} currentLocale 
  */
-function initPageResult() {
+function initPageResult(currentLocale) {
 	const resultPageContentEl = document.querySelector(".js-result-container");
 	if (!resultPageContentEl) return;
-	new SiteAnalysisResult(resultPageContentEl);
+	new SiteAnalysisResult(resultPageContentEl, currentLocale);
 }
 
 /**
diff --git a/content/en/result/_40_badge.md b/content/en/result/_40_badge.md
index b5933263..ee5a0362 100644
--- a/content/en/result/_40_badge.md
+++ b/content/en/result/_40_badge.md
@@ -15,4 +15,4 @@ regular page checks.
 [//]: # "texte du badge"
 
 The environmental footprint of this page is lower than average.
-Calculation made with www.ecoindex.fr on [date of calculation] [download the badge](download)
+Calculation made with www.ecoindex.fr on {{< result-date >}}. Highlight your score on the webpage by adding the ecoIndex badge; see how [on the project page](https://github.com/cnumr/ecoindex_badge).
diff --git a/content/fr/result/_40_badge.md b/content/fr/result/_40_badge.md
index 6c0b52b8..fceb8296 100644
--- a/content/fr/result/_40_badge.md
+++ b/content/fr/result/_40_badge.md
@@ -14,5 +14,4 @@ un contrôle régulier.
 
 [//]: # "texte du badge"
 
-L’empreinte environnementale de cette page est plus faible que la moyenne. Calcul réalisé sur www.ecoindex.fr le [date
-du calcul] [télécharger le badge](download)
+L’empreinte environnementale de cette page est plus faible que la moyenne. Calcul réalisé sur www.ecoindex.fr le {{< result-date >}}. Mettez votre score en évidence sur la page web en ajoutant le badge ecoIndex; voir comment sur [la page du projet](https://github.com/cnumr/ecoindex_badge).
diff --git a/layouts/shortcodes/result-date.html b/layouts/shortcodes/result-date.html
index 36733c8f..95066c1b 100644
--- a/layouts/shortcodes/result-date.html
+++ b/layouts/shortcodes/result-date.html
@@ -1 +1 @@
-<span class="result-date" data-int="date"></span>
+<span class="result-date" data-int="date"></span>
\ No newline at end of file