From 2a98ae7653d74d8ec77fbd3b9d158d4a29d73c95 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Mon, 7 Feb 2022 14:14:36 +0100
Subject: [PATCH] update code render

---
 assets/css/app.scss                 |  5 +++++
 assets/images/window.svg            |  1 +
 assets/js/app/code.js               | 34 ++++++++++++++++++++++++++++-
 templates/page/post/_post.html.twig |  2 +-
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 assets/images/window.svg

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 8ee706a..75dfe10 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -455,6 +455,11 @@ pre[class*="language-"] {
     color: $color-code-title-text;
 }
 
+.code-window {
+    height: 30px;
+    background: $color-code-title-background url('../images/window.svg') no-repeat center right;
+}
+
 .body-content {
     line-height: 30px;
 }
diff --git a/assets/images/window.svg b/assets/images/window.svg
new file mode 100644
index 0000000..6aec1f0
--- /dev/null
+++ b/assets/images/window.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66.858" height="19.249" viewBox="0 0 17.689 5.093"><g stroke="#fff"><path fill="none" stroke-linecap="square" stroke-miterlimit="3.7" stroke-width=".529" d="M6.106 1.505h2.072v2.159H6.106z" color="#000" overflow="visible" paint-order="markers fill stroke"/><path fill="#f9f9f9" fill-rule="evenodd" stroke-width=".529" d="M.217 2.584h3.261"/><g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".344"><path d="M29.585 112.1l1.532 1.532M29.585 113.632l1.532-1.531" transform="matrix(1.50595 0 0 1.5692 -33.57 -174.527)"/></g></g></svg>
\ No newline at end of file
diff --git a/assets/js/app/code.js b/assets/js/app/code.js
index bf1d565..6b6ab7c 100644
--- a/assets/js/app/code.js
+++ b/assets/js/app/code.js
@@ -27,7 +27,7 @@ const Code = function (w) {
 
 Code.prototype.init = function () {
   Prism.highlightAllUnder(document)
-  const elements = this.window.document.querySelectorAll('code[data-title], div[data-title]')
+  let elements = this.window.document.querySelectorAll('code[data-title], div[data-title]')
 
   for (let i = 0, len = elements.length; i < len; i++) {
     const element = elements[i]
@@ -59,6 +59,38 @@ Code.prototype.init = function () {
 
     post.insertBefore(title, pre)
   }
+
+  elements = this.window.document.querySelectorAll('code.window')
+
+  for (let i = 0, len = elements.length; i < len; i++) {
+    const element = elements[i]
+
+    if (element.tagName === 'CODE') {
+      var code = element
+      var pre = code.parentNode
+      var post = pre.parentNode
+    } else {
+      var code = element.querySelector('code')
+
+      if (!code) {
+        continue
+      }
+
+      var pre = code.parentNode
+      var post = pre.parentNode
+    }
+
+    if (!pre || !post) {
+      continue
+    }
+
+    pre.classList.add('with-title')
+    const win = this.window.document.createElement('div')
+    win.classList.add('code-window')
+
+    post.insertBefore(win, pre)
+  }
+
 }
 
 module.exports = Code
diff --git a/templates/page/post/_post.html.twig b/templates/page/post/_post.html.twig
index 9675c8b..4c22fec 100644
--- a/templates/page/post/_post.html.twig
+++ b/templates/page/post/_post.html.twig
@@ -183,7 +183,7 @@
 
                     <div class="field">
                         <input type="checkbox" id="rgpd" required>
-                        <label for="rgpd">En validant ce formulaire, vous acceptez que les données saisies seront publiées sur cette page à l'exception de votre e-mail. Votre e-mail sera utilisé pour afficher votre avatar via <a href="https://www.libravatar.org/" target="_blank">Libravatar</a> et pour les notifications.</label>
+                        <label for="rgpd">En validant ce formulaire, vous acceptez que les données saisies seront publiées sur cette page à l'exception de votre e-mail. Votre e-mail sera utilisé pour afficher votre avatar (<a href="https://www.libravatar.org/" target="_blank">via Libravatar</a>) et pour les notifications.</label>
                     </div>
 
                     <div class="field">