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

@@ -19,24 +19,26 @@ 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);
 	}
 
 	/**
 	 * Init
 	 *
 	 * 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 = {

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);
 }
 
 /**

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).

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).

layouts/shortcodes/result-date.html

@@ -1 +1 @@
-<span class="result-date" data-int="date"></span>
+<span class="result-date" data-int="date"></span>