From 3fe6a53fb52bb0a294382c457768fbe675c75524 Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Tue, 24 Sep 2024 15:10:54 +0200
Subject: [PATCH 1/2] minor fixes

---
 koa/renderer.js              |  4 +++-
 markit/plugins/imgFigures.js | 27 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/koa/renderer.js b/koa/renderer.js
index 72b6f17..15c237c 100644
--- a/koa/renderer.js
+++ b/koa/renderer.js
@@ -72,7 +72,7 @@ module.exports = class Renderer {
 
   pack(name, ext) {
     this.readVersions();
-    
+
     let versionName = this.versions[name];
     // e.g style = [ style.js, style.js.map, style.css, style.css.map ]
 
@@ -112,6 +112,8 @@ module.exports = class Renderer {
 
     locals.env = config.env;
 
+    locals.tutorialEdit = config.env.TUTORIAL_EDIT
+
     locals.urlBase = config.urlBase;
     locals.urlBaseProduction = config.urlBaseProduction;
 
diff --git a/markit/plugins/imgFigures.js b/markit/plugins/imgFigures.js
index ce968df..2746b98 100755
--- a/markit/plugins/imgFigures.js
+++ b/markit/plugins/imgFigures.js
@@ -8,6 +8,7 @@
 
 const parseAttrs = require('../utils/parseAttrs');
 const tokenUtils = require('../utils/token');
+const escapeHtml = require('escape-html');
 
 function imgFigures(state) {
 
@@ -75,10 +76,34 @@ module.exports = function(md) {
       </object>`;
     }
 
-    return `<figure><div class="image" style="width:${width}px">
+    let figureAttrs = {
+      style: ''
+    };
+
+    let imageDivAttrs = {
+      style: `width:${width}px;`
+    };
+
+    let code = tokenUtils.attrGet(token, 'code');
+    if (code) {
+      let [codeShiftX, codeShiftY] = code.split(':').map(Number);
+      figureAttrs.style += `position: relative; padding-bottom: calc(${height}px - (22px + ${codeShiftY}em));`;
+      imageDivAttrs.style += `position: absolute; z-index: 1; bottom: calc(-22px + -${codeShiftY}em); left: ${codeShiftX}em;`;
+      // console.log('code', code);
+    }
+
+    return `<figure${renderAttrsObj(figureAttrs)}><div class="image" ${renderAttrsObj(imageDivAttrs)}>
       <div class="image__ratio" style="padding-top:${height / width * 100}%"></div>
       ${img}
       </div></figure>`;
 
   };
 };
+
+function renderAttrsObj(attrs) {
+  let result = '';
+  for (let key in attrs) {
+    result += ' ' + escapeHtml(key) + '="' + escapeHtml(attrs[key]) + '"';
+  }
+  return result;
+}
\ No newline at end of file

From 87da11ebbeab0adafeee724c2d3074b71c1022a4 Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@users.noreply.github.com>
Date: Fri, 4 Oct 2024 01:16:47 +0200
Subject: [PATCH 2/2] minor fixes

---
 markit/plugins/imgFigures.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/markit/plugins/imgFigures.js b/markit/plugins/imgFigures.js
index 2746b98..c092838 100755
--- a/markit/plugins/imgFigures.js
+++ b/markit/plugins/imgFigures.js
@@ -87,8 +87,8 @@ module.exports = function(md) {
     let code = tokenUtils.attrGet(token, 'code');
     if (code) {
       let [codeShiftX, codeShiftY] = code.split(':').map(Number);
-      figureAttrs.style += `position: relative; padding-bottom: calc(${height}px - (22px + ${codeShiftY}em));`;
-      imageDivAttrs.style += `position: absolute; z-index: 1; bottom: calc(-22px + -${codeShiftY}em); left: ${codeShiftX}em;`;
+      figureAttrs.style += `position: relative; padding-bottom: calc(${height}px - (22px + ${codeShiftY*20}px));`;
+      imageDivAttrs.style += `position: absolute; z-index: 1; bottom: calc(-22px + -${codeShiftY*20}px); left: ${codeShiftX}em;`;
       // console.log('code', code);
     }