From d01b5aa9f84afcb22daebe579080793d5cb5042d Mon Sep 17 00:00:00 2001
From: ljf <ljf+git@grimaud.me>
Date: Thu, 15 Sep 2022 23:59:05 +0200
Subject: [PATCH] [fix] Images page and strange bug
 https://stackoverflow.com/questions/42365539/symfony-dom-crawler-missing-closing-tag-in-template

---
 .../10.install/05.images/images.ar.md         | 24 +++++++-------
 .../10.install/05.images/images.de.md         | 30 +++++++++---------
 .../10.install/05.images/images.es.md         | 25 +++++++--------
 .../10.install/05.images/images.fr.md         | 22 ++++++-------
 .../10.install/05.images/images.md            | 31 +++++++++----------
 5 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/pages/02.administer/10.install/05.images/images.ar.md b/pages/02.administer/10.install/05.images/images.ar.md
index 9ef16d52..ec4d1c36 100644
--- a/pages/02.administer/10.install/05.images/images.ar.md
+++ b/pages/02.administer/10.install/05.images/images.ar.md
@@ -11,14 +11,13 @@ routes:
 <div id="cards-list">
 </div>
 </div>
-
-<script type="text/template" id="image-template">
-<div id="{id}" class="card panel panel-default">
+<template id="image-template">
+    <div id="{id}" class="card panel panel-default">
         <div class="panel-body text-center">
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/user/images/{image}" height=100 style="vertical-align:middle">
+                <img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
         <div class="annotations flex-container">
@@ -26,10 +25,10 @@ routes:
             <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
-            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> تنزيل <small>{version}</small></a>
+            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
         </div>
-</div>
-</script>
+    </div>
+</template>
 
 
 <script>
@@ -48,14 +47,13 @@ $(document).ready(function () {
              .replace('{id}', infos.id)
              .replace('{name}', infos.name)
              .replace('{comment}', infos.comment || "&nbsp;")
+             .replace('%7Bimage%7D', infos.image)
              .replace('{image}', infos.image)
              .replace('{version}', infos.version);
- 
-            if (infos.file.startsWith("http"))
-                html = html.replace(/{file}/g, infos.file);
-            else
-                html = html.replace(/{file}/g, "https://build.yunohost.org/"+infos.file);
-   
+            if (!infos.file.startsWith("http"))
+                infos.file="https://build.yunohost.org/"+infos.file;
+            html = html.replace(/%7Bfile%7D/g, infos.file).replace(/{file}/g, infos.file);
+
             if ((typeof(infos.has_sig_and_sums) !== 'undefined') && infos.has_sig_and_sums == false)
             {
                 var $html = $(html);
diff --git a/pages/02.administer/10.install/05.images/images.de.md b/pages/02.administer/10.install/05.images/images.de.md
index 7da3a80a..4a568873 100644
--- a/pages/02.administer/10.install/05.images/images.de.md
+++ b/pages/02.administer/10.install/05.images/images.de.md
@@ -20,13 +20,13 @@ N B : Auch wenn das Image nicht der neuesten Version von YunoHost entspricht, k
 </div>
 </div>
 
-<script type="text/template" id="image-template">
-<div id="{id}" class="card panel panel-default">
+<template id="image-template">
+    <div id="{id}" class="card panel panel-default">
         <div class="panel-body text-center">
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/user/images/{image}" height=100 style="vertical-align:middle">
+                <img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
         <div class="annotations flex-container">
@@ -34,22 +34,20 @@ N B : Auch wenn das Image nicht der neuesten Version von YunoHost entspricht, k
             <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
-            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12">[fa=download] Download <small>{version}</small></a>
+            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
         </div>
-</div>
-</script>
+    </div>
+</template>
+
 
 <script>
 /*
 ###############################################################################
-  Script that loads the infos from JavaScript and creates the corresponding
+  Script that loads the infos from javascript and creates the corresponding
   cards
 ###############################################################################
 */
 $(document).ready(function () {
-
-    $(".javascriptDisclaimer").hide();
-
     console.log("in load");
     $.getJSON('https://build.yunohost.org/images.json', function (images) {
         $.each(images, function(k, infos) {
@@ -58,22 +56,22 @@ $(document).ready(function () {
              .replace('{id}', infos.id)
              .replace('{name}', infos.name)
              .replace('{comment}', infos.comment || "&nbsp;")
+             .replace('%7Bimage%7D', infos.image)
              .replace('{image}', infos.image)
              .replace('{version}', infos.version);
-
-            if (infos.file.startsWith("http"))
-                html = html.replace(/{file}/g, infos.file);
-            else
-                html = html.replace(/{file}/g, "https://build.yunohost.org/"+infos.file);
+            if (!infos.file.startsWith("http"))
+                infos.file="https://build.yunohost.org/"+infos.file;
+            html = html.replace(/%7Bfile%7D/g, infos.file).replace(/{file}/g, infos.file);
 
             if ((typeof(infos.has_sig_and_sums) !== 'undefined') && infos.has_sig_and_sums == false)
             {
                 var $html = $(html);
                 $html.find(".annotations").html("&nbsp;");
                 html = $html[0];
-            }
+            } 
             $('#cards-list').append(html);
         });
     });
 });
 </script>
+
diff --git a/pages/02.administer/10.install/05.images/images.es.md b/pages/02.administer/10.install/05.images/images.es.md
index e2a89e32..408610d9 100644
--- a/pages/02.administer/10.install/05.images/images.es.md
+++ b/pages/02.administer/10.install/05.images/images.es.md
@@ -19,14 +19,13 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
 <div id="cards-list">
 </div>
 </div>
-
-<script type="text/template" id="image-template">
-<div id="{id}" class="card panel panel-default">
+<template id="image-template">
+    <div id="{id}" class="card panel panel-default">
         <div class="panel-body text-center">
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/user/images/{image}" height=100 style="vertical-align:middle">
+                <img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
         <div class="annotations flex-container">
@@ -34,10 +33,10 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
             <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
-            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
+            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
         </div>
-</div>
-</script>
+    </div>
+</template>
 
 
 <script>
@@ -56,14 +55,13 @@ $(document).ready(function () {
              .replace('{id}', infos.id)
              .replace('{name}', infos.name)
              .replace('{comment}', infos.comment || "&nbsp;")
+             .replace('%7Bimage%7D', infos.image)
              .replace('{image}', infos.image)
              .replace('{version}', infos.version);
- 
-            if (infos.file.startsWith("http"))
-                html = html.replace(/{file}/g, infos.file);
-            else
-                html = html.replace(/{file}/g, "https://build.yunohost.org/"+infos.file);
-   
+            if (!infos.file.startsWith("http"))
+                infos.file="https://build.yunohost.org/"+infos.file;
+            html = html.replace(/%7Bfile%7D/g, infos.file).replace(/{file}/g, infos.file);
+
             if ((typeof(infos.has_sig_and_sums) !== 'undefined') && infos.has_sig_and_sums == false)
             {
                 var $html = $(html);
@@ -76,3 +74,4 @@ $(document).ready(function () {
 });
 </script>
 
+
diff --git a/pages/02.administer/10.install/05.images/images.fr.md b/pages/02.administer/10.install/05.images/images.fr.md
index c43ca95a..63cc47e4 100644
--- a/pages/02.administer/10.install/05.images/images.fr.md
+++ b/pages/02.administer/10.install/05.images/images.fr.md
@@ -25,14 +25,13 @@ Cette page requiert que Javascript soit activé pour s'afficher correctement :s.
 <div id="cards-list">
 </div>
 </div>
-
-<script type="text/template" id="image-template">
-<div id="{id}" class="card panel panel-default">
+<template id="image-template">
+    <div id="{id}" class="card panel panel-default">
         <div class="panel-body text-center">
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/user/images/{image}" height=100 style="vertical-align:middle">
+                <img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
         <div class="annotations flex-container">
@@ -42,8 +41,8 @@ Cette page requiert que Javascript soit activé pour s'afficher correctement :s.
         <div class="btn-group" role="group">
             <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
         </div>
-</div>
-</script>
+    </div>
+</template>
 
 
 <script>
@@ -62,14 +61,13 @@ $(document).ready(function () {
              .replace('{id}', infos.id)
              .replace('{name}', infos.name)
              .replace('{comment}', infos.comment || "&nbsp;")
+             .replace('%7Bimage%7D', infos.image)
              .replace('{image}', infos.image)
              .replace('{version}', infos.version);
- 
-            if (infos.file.startsWith("http"))
-                html = html.replace(/{file}/g, infos.file);
-            else
-                html = html.replace(/{file}/g, "https://build.yunohost.org/"+infos.file);
-   
+            if (!infos.file.startsWith("http"))
+                infos.file="https://build.yunohost.org/"+infos.file;
+            html = html.replace(/%7Bfile%7D/g, infos.file).replace(/{file}/g, infos.file);
+
             if ((typeof(infos.has_sig_and_sums) !== 'undefined') && infos.has_sig_and_sums == false)
             {
                 var $html = $(html);
diff --git a/pages/02.administer/10.install/05.images/images.md b/pages/02.administer/10.install/05.images/images.md
index 8568bd51..4c4fb1d2 100644
--- a/pages/02.administer/10.install/05.images/images.md
+++ b/pages/02.administer/10.install/05.images/images.md
@@ -25,14 +25,13 @@ This page requires Javascript enabled to display properly :s.
 <div id="cards-list">
 </div>
 </div>
-
-<script type="text/template" id="image-template">
-<div id="{id}" class="card panel panel-default">
+<template id="image-template">
+    <div id="{id}" class="card panel panel-default">
         <div class="panel-body text-center">
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/user/images/{image}" height=100 style="vertical-align:middle">
+                <img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
         <div class="annotations flex-container">
@@ -40,22 +39,20 @@ This page requires Javascript enabled to display properly :s.
             <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
-            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12">[fa=download] Download <small>{version}</small></a>
+            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
         </div>
-</div>
-</script>
+    </div>
+</template>
+
 
 <script>
 /*
 ###############################################################################
-  Script that loads the infos from JavaScript and creates the corresponding
+  Script that loads the infos from javascript and creates the corresponding
   cards
 ###############################################################################
 */
 $(document).ready(function () {
-
-    $(".javascriptDisclaimer").hide();
-
     console.log("in load");
     $.getJSON('https://build.yunohost.org/images.json', function (images) {
         $.each(images, function(k, infos) {
@@ -64,14 +61,13 @@ $(document).ready(function () {
              .replace('{id}', infos.id)
              .replace('{name}', infos.name)
              .replace('{comment}', infos.comment || "&nbsp;")
+             .replace('%7Bimage%7D', infos.image)
              .replace('{image}', infos.image)
              .replace('{version}', infos.version);
- 
-            if (infos.file.startsWith("http"))
-                html = html.replace(/{file}/g, infos.file);
-            else
-                html = html.replace(/{file}/g, "https://build.yunohost.org/"+infos.file);
-   
+            if (!infos.file.startsWith("http"))
+                infos.file="https://build.yunohost.org/"+infos.file;
+            html = html.replace(/%7Bfile%7D/g, infos.file).replace(/{file}/g, infos.file);
+
             if ((typeof(infos.has_sig_and_sums) !== 'undefined') && infos.has_sig_and_sums == false)
             {
                 var $html = $(html);
@@ -83,3 +79,4 @@ $(document).ready(function () {
     });
 });
 </script>
+