@pushword/js-helper 0.0.44 → 0.0.49

package/package.json

@@ -1,12 +1,36 @@
 {
     "name": "@pushword/js-helper",
-    "version": "0.0.44",
+    "version": "0.0.49",
     "description": "Pushword front end helpers. ",
     "author": "Robin@PiedWeb <contact@piedweb.com>",
     "license": "MIT",
     "scripts": {
         "prettier": "prettier ./src/*.{js,scss} --write"
     },
+    "dependencies": {
+        "140.css": "^1.0.1",
+        "@symfony/webpack-encore": "^1.7",
+        "@tailwindcss/aspect-ratio": "^0.2",
+        "@tailwindcss/forms": "^0.4",
+        "@tailwindcss/typography": "^0.5",
+        "ace-builds": "^1.4.12",
+        "autoprefixer": "^10.1.0",
+        "babel-preset-stage-2": "^6.24.1",
+        "codemirror": "^5.59.0",
+        "core-js": "^3.8.1",
+        "easymde": "^2.13.0",
+        "fslightbox": "^3.2.2",
+        "file-loader": "^6.0",
+        "node-sass": "^5.0.0",
+        "postcss": "^8.2.1",
+        "postcss-import": "^14.0.0",
+        "postcss-loader": "^4.1",
+        "sass-loader": "^10.1.0",
+        "simple-jekyll-search": "^1.9.1",
+        "tailwindcss": "^3",
+        "tailwindcss-hero-patterns": "^0.0.1",
+        "webpack-watch-files-plugin": "^1.1.0"
+    },
     "repository": {
         "type": "git",
         "url": "git+https://github.com/Pushword/js-helper.git"

package/src/clickable.js

@@ -1,24 +1,25 @@
+import { uncloakLinks } from "./helpers";
+
 /**
  * transform an element containing a link (a href) in a clickable element
  *
  * @param {Object}  element
  */
-export function clickable(element) {
-  if (!element.querySelector('a')) return false;
-  var link = element.querySelectorAll('a')[0];
-  if (
-    window.location.pathname.replace(/^\//, '') ==
-      link.pathname.replace(/^\//, '') &&
-    window.location.hostname == link.hostname
-  ) {
-    if (typeof smoothScroll === 'function') {
-      smoothScroll(link);
+export async function clickable(element) {
+    if (!element.querySelector("a") && !element.querySelector("span[data-rot]")) return false;
+    if (element.querySelector("span[data-rot]")) await uncloakLinks("data-rot", "now");
+    var link = element.querySelectorAll("a")[0];
+    if (
+        window.location.pathname.replace(/^\//, "") == link.pathname.replace(/^\//, "") &&
+        window.location.hostname == link.hostname
+    ) {
+        if (typeof smoothScroll === "function") {
+            smoothScroll(link);
+        }
+        return false;
     }
+    window.location = link.getAttribute("href") === null ? "" : link.getAttribute("href");
     return false;
-  }
-  window.location =
-    link.getAttribute('href') === null ? '' : link.getAttribute('href');
-  return false;
 }
 
 /**
@@ -27,11 +28,11 @@ export function clickable(element) {
  * @param {string}  selector
  */
 export function allClickable(selector) {
-  document.querySelectorAll(selector).forEach(function (item) {
-    item.addEventListener('click', function () {
-      clickable(item);
+    document.querySelectorAll(selector).forEach(function (item) {
+        item.addEventListener("click", function () {
+            clickable(item);
+        });
     });
-  });
 }
 
 /**
@@ -41,23 +42,20 @@ export function allClickable(selector) {
  * @param {Object}  link
  */
 export function smoothScroll(link, event = null) {
-  if (
-    location.pathname.replace(/^\//, '') == link.pathname.replace(/^\//, '') &&
-    location.hostname == link.hostname &&
-    link.hash != ''
-  ) {
-    var target = document.querySelector(link.hash);
-    target =
-      target !== null
-        ? target
-        : document.querySelector('[name=' + link.hash.slice(1) + ']');
-    if (target !== null) {
-      if (event !== null) event.preventDefault();
-      window.scrollTo({
-        behavior: 'smooth',
-        left: 0,
-        top: target.offsetTop,
-      });
+    if (
+        location.pathname.replace(/^\//, "") == link.pathname.replace(/^\//, "") &&
+        location.hostname == link.hostname &&
+        link.hash != ""
+    ) {
+        var target = document.querySelector(link.hash);
+        target = target !== null ? target : document.querySelector("[name=" + link.hash.slice(1) + "]");
+        if (target !== null) {
+            if (event !== null) event.preventDefault();
+            window.scrollTo({
+                behavior: "smooth",
+                left: 0,
+                top: target.offsetTop,
+            });
+        }
     }
-  }
 }

package/src/helpers.js

@@ -1,5 +1,5 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
+import "core-js/stable";
+import "regenerator-runtime/runtime";
 /**
  * List of all functions
  *
@@ -21,139 +21,129 @@ import 'regenerator-runtime/runtime';
  *
  * @param {string} attribute
  */
-export function liveBlock(
-  liveBlockAttribute = 'data-live',
-  liveFormSelector = '.live-form'
-) {
-  var btnToBlock = function (event, btn) {
-    btn.setAttribute(
-      liveBlockAttribute,
-      btn.getAttribute('src-' + liveBlockAttribute)
-    );
-    getLiveBlock(btn);
-  };
+export function liveBlock(liveBlockAttribute = "data-live", liveFormSelector = ".live-form") {
+    var btnToBlock = function (event, btn) {
+        btn.setAttribute(liveBlockAttribute, btn.getAttribute("src-" + liveBlockAttribute));
+        getLiveBlock(btn);
+    };
 
-  var getLiveBlock = function (item) {
-    fetch(item.getAttribute(liveBlockAttribute), {
-      //headers: { "Content-Type": "application/json", Accept: "text/plain" },
-      method: 'POST',
-      credentials: 'include',
-    })
-      .then(function (response) {
-        return response.text();
-      })
-      .then(function (body) {
-        item.removeAttribute(liveBlockAttribute);
-        item.outerHTML = body;
-      })
-      .then(function () {
-        document.dispatchEvent(new Event('DOMChanged'));
-      });
-  };
+    var getLiveBlock = function (item) {
+        fetch(item.getAttribute(liveBlockAttribute), {
+            //headers: { "Content-Type": "application/json", Accept: "text/plain" },
+            method: "POST",
+            credentials: "include",
+        })
+            .then(function (response) {
+                return response.text();
+            })
+            .then(function (body) {
+                item.removeAttribute(liveBlockAttribute);
+                item.outerHTML = body;
+            })
+            .then(function () {
+                document.dispatchEvent(new Event("DOMChanged"));
+            });
+    };
 
-  var htmlLoader =
-    '<div style="width:1em;height:1em;border: 2px solid #222;border-top-color: #fff;border-radius: 50%;  animation: 1s spin linear infinite;"></div><style>@keyframes spin {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>';
+    var htmlLoader =
+        '<div style="width:1em;height:1em;border: 2px solid #222;border-top-color: #fff;border-radius: 50%;  animation: 1s spin linear infinite;"></div><style>@keyframes spin {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>';
 
-  var setLoader = function (form) {
-    var $submitButton = getSubmitButton(form);
-    if ($submitButton !== undefined) {
-      var initialButton = $submitButton.outerHTML;
-      $submitButton.innerHTML = '';
-      $submitButton.outerHTML = htmlLoader;
-    }
-  };
+    var setLoader = function (form) {
+        var $submitButton = getSubmitButton(form);
+        if ($submitButton !== undefined) {
+            var initialButton = $submitButton.outerHTML;
+            $submitButton.innerHTML = "";
+            $submitButton.outerHTML = htmlLoader;
+        }
+    };
 
-  var sendForm = function (form, liveFormBlock) {
-    setLoader(form);
+    var sendForm = function (form, liveFormBlock) {
+        setLoader(form);
 
-    var formData = new FormData(form.srcElement);
-    fetch(form.srcElement.action, {
-      method: 'POST',
-      body: formData,
-      credentials: 'include',
-    })
-      .then(function (response) {
-        return response.text();
-      })
-      .then(function (body) {
-        liveFormBlock.outerHTML = body;
-      })
-      .then(function () {
-        document.dispatchEvent(new Event('DOMChanged'));
-      });
-  };
+        var formData = new FormData(form.srcElement);
+        fetch(form.srcElement.action, {
+            method: "POST",
+            body: formData,
+            credentials: "include",
+        })
+            .then(function (response) {
+                return response.text();
+            })
+            .then(function (body) {
+                liveFormBlock.outerHTML = body;
+            })
+            .then(function () {
+                document.dispatchEvent(new Event("DOMChanged"));
+            });
+    };
 
-  var getSubmitButton = function (form) {
-    if (form.srcElement.querySelector('[type=submit]') !== null) {
-      return form.srcElement.querySelector('[type=submit]');
-    }
-    if (form.srcElement.getElementsByTagName('button') !== null) {
-      return form.srcElement.getElementsByTagName('button')[0];
-    }
-    return null;
-  };
+    var getSubmitButton = function (form) {
+        if (form.srcElement.querySelector("[type=submit]") !== null) {
+            return form.srcElement.querySelector("[type=submit]");
+        }
+        if (form.srcElement.getElementsByTagName("button") !== null) {
+            return form.srcElement.getElementsByTagName("button")[0];
+        }
+        return null;
+    };
 
-  // Listen data-live
-  document.querySelectorAll('[' + liveBlockAttribute + ']').forEach((item) => {
-    getLiveBlock(item);
-  });
+    // Listen data-live
+    document.querySelectorAll("[" + liveBlockAttribute + "]").forEach((item) => {
+        getLiveBlock(item);
+    });
 
-  // Listen button src-data-live
-  document
-    .querySelectorAll('[src-' + liveBlockAttribute + ']')
-    .forEach((item) => {
-      item.addEventListener('click', (event) => {
-        btnToBlock(event, item);
-      });
+    // Listen button src-data-live
+    document.querySelectorAll("[src-" + liveBlockAttribute + "]").forEach((item) => {
+        item.addEventListener("click", (event) => {
+            btnToBlock(event, item);
+        });
     });
 
-  // Listen live-form
-  document.querySelectorAll(liveFormSelector).forEach((item) => {
-    if (item.querySelector('form') !== null) {
-      item.querySelector('form').addEventListener('submit', (e) => {
-        e.preventDefault();
-        sendForm(e, item);
-      });
-    }
-  });
+    // Listen live-form
+    document.querySelectorAll(liveFormSelector).forEach((item) => {
+        if (item.querySelector("form") !== null) {
+            item.querySelector("form").addEventListener("submit", (e) => {
+                e.preventDefault();
+                sendForm(e, item);
+            });
+        }
+    });
 }
 
 /**
  * Block to replace Watcher
  * On $event on element find via $attribute, set attribute's content in element.innerHTML
  */
-export function replaceOn(attribute = 'replaceBy', eventName = 'click') {
-  var loadVideo = function (element) {
-    var content = element.getAttribute(attribute);
-    if (
-      element.classList.contains('hero-banner-overlay-lg') &&
-      element.querySelector('picture') &&
-      window.innerWidth < 992
-    ) {
-      element.querySelector('picture').outerHTML = content;
-      element.querySelector('.btn-play').outerHTML = ' ';
-    } else {
-      element.innerHTML = content;
-    }
-    if (element.classList.contains('hero-banner-overlay-lg')) {
-      element.style.zIndex = '2000';
-    }
-    element.removeAttribute(attribute);
-    document.dispatchEvent(new Event('DOMChanged'));
-  };
+export function replaceOn(attribute = "replaceBy", eventName = "click") {
+    var loadVideo = function (element) {
+        var content = element.getAttribute(attribute);
+        if (
+            element.classList.contains("hero-banner-overlay-lg") &&
+            element.querySelector("picture") &&
+            window.innerWidth < 992
+        ) {
+            element.querySelector("picture").outerHTML = content;
+            element.querySelector(".btn-play").outerHTML = " ";
+        } else {
+            element.innerHTML = content;
+        }
+        if (element.classList.contains("hero-banner-overlay-lg")) {
+            element.style.zIndex = "2000";
+        }
+        element.removeAttribute(attribute);
+        document.dispatchEvent(new Event("DOMChanged"));
+    };
 
-  document
-    .querySelectorAll('[' + attribute + ']:not([listen])')
-    .forEach(function (element) {
-      element.setAttribute('listen', '');
-      element.addEventListener(
-        eventName,
-        function (event) {
-          loadVideo(event.currentTarget); //event.currentTarget;
-          element.removeAttribute('listen');
-        },
-        { once: true }
-      );
+    document.querySelectorAll("[" + attribute + "]:not([listen])").forEach(function (element) {
+        element.setAttribute("listen", "");
+        element.addEventListener(
+            eventName,
+            function (event) {
+                loadVideo(event.currentTarget); //event.currentTarget;
+                element.removeAttribute("listen");
+            },
+            { once: true }
+        );
     });
 }
 
@@ -162,18 +152,16 @@ export function replaceOn(attribute = 'replaceBy', eventName = 'click') {
  *
  */
 export function seasonedBackground() {
-  document.querySelectorAll('[x-hash]').forEach(function (element) {
-    if (window.location.hash) {
-      if (element.getAttribute('x-hash') == window.location.hash.substring(1)) {
-        element.parentNode.parentNode
-          .querySelectorAll('img')
-          .forEach(function (img) {
-            img.style = 'display:none';
-          });
-        element.style = 'display:block';
-      }
-    }
-  });
+    document.querySelectorAll("[x-hash]").forEach(function (element) {
+        if (window.location.hash) {
+            if (element.getAttribute("x-hash") == window.location.hash.substring(1)) {
+                element.parentNode.parentNode.querySelectorAll("img").forEach(function (img) {
+                    img.style = "display:none";
+                });
+                element.style = "display:block";
+            }
+        }
+    });
 }
 
 /**
@@ -182,21 +170,21 @@ export function seasonedBackground() {
  * @param {string} src
  */
 export function responsiveImage(src) {
-  var screenWidth = window.innerWidth;
-  if (screenWidth <= 576) {
-    src = src.replace('/default/', '/xs/');
-  } else if (screenWidth <= 768) {
-    src = src.replace('/default/', '/sm/');
-  } else if (screenWidth <= 992) {
-    src = src.replace('/default/', '/md/');
-  } else if (screenWidth <= 1200) {
-    src = src.replace('/default/', '/lg/');
-  } else {
-    // 1200+
-    src = src.replace('/default/', '/xl/');
-  }
+    var screenWidth = window.innerWidth;
+    if (screenWidth <= 576) {
+        src = src.replace("/default/", "/xs/");
+    } else if (screenWidth <= 768) {
+        src = src.replace("/default/", "/sm/");
+    } else if (screenWidth <= 992) {
+        src = src.replace("/default/", "/md/");
+    } else if (screenWidth <= 1200) {
+        src = src.replace("/default/", "/lg/");
+    } else {
+        // 1200+
+        src = src.replace("/default/", "/xl/");
+    }
 
-  return src;
+    return src;
 }
 
 /**
@@ -205,84 +193,74 @@ export function responsiveImage(src) {
  *
  * @param {string}  attribute
  */
-export async function uncloakLinks(attribute = 'data-rot') {
-  var convertLink = function (element) {
-    // fix "bug" with img
-    if (element.getAttribute(attribute) === null) {
-      var element = element.closest('[' + attribute + ']');
-    }
-    if (element.getAttribute(attribute) === null) return;
-    var link = document.createElement('a');
-    var href = element.getAttribute(attribute);
-    element.removeAttribute(attribute);
-    for (var i = 0, n = element.attributes.length; i < n; i++) {
-      link.setAttribute(
-        element.attributes[i].nodeName,
-        element.attributes[i].nodeValue
-      );
-    }
-    link.innerHTML = element.innerHTML;
-    link.setAttribute(
-      'href',
-      responsiveImage(convertShortchutForLink(rot13ToText(href)))
-    );
-    element.parentNode.replaceChild(link, element);
-    return link;
-  };
+export async function uncloakLinks(attribute = "data-rot", when = "onEvent") {
+    var convertLink = function (element) {
+        // fix "bug" with img
+        if (element.getAttribute(attribute) === null) {
+            var element = element.closest("[" + attribute + "]");
+        }
+        if (element.getAttribute(attribute) === null) return;
+        var link = document.createElement("a");
+        var href = element.getAttribute(attribute);
+        element.removeAttribute(attribute);
+        for (var i = 0, n = element.attributes.length; i < n; i++) {
+            link.setAttribute(element.attributes[i].nodeName, element.attributes[i].nodeValue);
+        }
+        link.innerHTML = element.innerHTML;
+        link.setAttribute("href", responsiveImage(convertShortchutForLink(rot13ToText(href))));
+        element.parentNode.replaceChild(link, element);
+        return link;
+    };
 
-  var convertThemAll = function (attribute) {
-    [].forEach.call(
-      document.querySelectorAll('[' + attribute + ']'),
-      function (element) {
-        convertLink(element);
-      }
-    );
-  };
+    var convertThemAll = function (attribute) {
+        [].forEach.call(document.querySelectorAll("[" + attribute + "]"), function (element) {
+            convertLink(element);
+        });
+    };
 
-  var fireEventLinksBuilt = async function (element, event) {
-    await document.dispatchEvent(new Event('DOMChanged'));
+    var fireEventLinksBuilt = async function (element, event) {
+        await document.dispatchEvent(new Event("DOMChanged"));
 
-    var clickEvent = new Event(event.type);
-    element.dispatchEvent(clickEvent);
-  };
+        var clickEvent = new Event(event.type);
+        element.dispatchEvent(clickEvent);
+    };
 
-  var convertLinkOnEvent = async function (event) {
-    // convert them all if it's an image (thanks this bug), permit to use gallery (baguetteBox)
-    if (event.target.tagName == 'IMG') {
-      await convertThemAll(attribute);
-      var element = event.target;
-    } else {
-      var element = convertLink(event.target);
-    }
-    fireEventLinksBuilt(element, event);
-  };
+    var convertLinkOnEvent = async function (event) {
+        // convert them all if it's an image (thanks this bug), permit to use gallery (baguetteBox)
+        if (event.target.tagName == "IMG") {
+            await convertThemAll(attribute);
+            var element = event.target;
+        } else {
+            var element = convertLink(event.target);
+        }
+        fireEventLinksBuilt(element, event);
+    };
 
-  [].forEach.call(
-    document.querySelectorAll('[' + attribute + ']'),
-    function (element) {
-      element.addEventListener(
-        'touchstart',
-        function (e) {
-          convertLinkOnEvent(e);
-        },
-        { once: true, passive: true }
-      );
-      element.addEventListener(
-        'click',
-        function (e) {
-          convertLinkOnEvent(e);
-        },
-        { once: true }
-      );
-      element.addEventListener(
-        'mouseover',
-        function (e) {
-          convertLinkOnEvent(e);
-        },
-        { once: true }
-      );
-    }
-  );
+    if (when == "onEvent") {
+        [].forEach.call(document.querySelectorAll("[" + attribute + "]"), function (element) {
+            element.addEventListener(
+                "touchstart",
+                function (e) {
+                    convertLinkOnEvent(e);
+                },
+                { once: true, passive: true }
+            );
+            element.addEventListener(
+                "click",
+                function (e) {
+                    convertLinkOnEvent(e);
+                },
+                { once: true }
+            );
+            element.addEventListener(
+                "mouseover",
+                function (e) {
+                    convertLinkOnEvent(e);
+                },
+                { once: true }
+            );
+        });
+    } else convertThemAll(attribute);
 }
 
 /**
@@ -290,31 +268,25 @@ export async function uncloakLinks(attribute = 'data-rot') {
  *
  * @param {string}  attribute
  */
-export function convertFormFromRot13(attribute = 'data-frot') {
-  [].forEach.call(
-    document.querySelectorAll('[' + attribute + ']'),
-    function (element) {
-      var action = element.getAttribute(attribute);
-      element.removeAttribute(attribute);
-      element.setAttribute(
-        'action',
-        convertShortchutForLink(rot13ToText(action))
-      );
-    }
-  );
+export function convertFormFromRot13(attribute = "data-frot") {
+    [].forEach.call(document.querySelectorAll("[" + attribute + "]"), function (element) {
+        var action = element.getAttribute(attribute);
+        element.removeAttribute(attribute);
+        element.setAttribute("action", convertShortchutForLink(rot13ToText(action)));
+    });
 }
 
 export function convertShortchutForLink(str) {
-  if (str.charAt(0) == '-') {
-    return str.replace('-', 'http://');
-  }
-  if (str.charAt(0) == '_') {
-    return str.replace('_', 'https://');
-  }
-  if (str.charAt(0) == '@') {
-    return str.replace('@', 'mailto:');
-  }
-  return str;
+    if (str.charAt(0) == "-") {
+        return str.replace("-", "http://");
+    }
+    if (str.charAt(0) == "_") {
+        return str.replace("_", "https://");
+    }
+    if (str.charAt(0) == "@") {
+        return str.replace("@", "mailto:");
+    }
+    return str;
 }
 
 /**
@@ -323,14 +295,14 @@ export function convertShortchutForLink(str) {
  * @param {string}  text
  */
 export function readableEmail(selector) {
-  document.querySelectorAll(selector).forEach(function (item) {
-    var mail = rot13ToText(item.textContent);
-    item.classList.remove('hidden');
-    item.innerHTML = '<a href="mailto:' + mail + '">' + mail + '</a>';
-    if (selector.charAt(0) == '.') {
-      item.classList.remove(selector.substring(1));
-    }
-  });
+    document.querySelectorAll(selector).forEach(function (item) {
+        var mail = rot13ToText(item.textContent);
+        item.classList.remove("hidden");
+        item.innerHTML = '<a href="mailto:' + mail + '">' + mail + "</a>";
+        if (selector.charAt(0) == ".") {
+            item.classList.remove(selector.substring(1));
+        }
+    });
 }
 
 /**
@@ -339,36 +311,34 @@ export function readableEmail(selector) {
  * @param {string}  str
  */
 export function rot13ToText(str) {
-  return str.replace(/[a-zA-Z]/g, function (c) {
-    return String.fromCharCode(
-      (c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26
-    );
-  });
+    return str.replace(/[a-zA-Z]/g, function (c) {
+        return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
+    });
 }
 
 export function testWebPSupport() {
-  var elem = document.createElement('canvas');
+    var elem = document.createElement("canvas");
 
-  if (elem.getContext && elem.getContext('2d')) {
-    return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
-  }
+    if (elem.getContext && elem.getContext("2d")) {
+        return elem.toDataURL("image/webp").indexOf("data:image/webp") == 0;
+    }
 
-  return false;
+    return false;
 }
 
 /**
  * Used in ThemeComponent
  */
 export function convertImageLinkToWebPLink() {
-  var switchToWebP = function () {
-    [].forEach.call(document.querySelectorAll('a[dwl]'), function (element) {
-      var href = responsiveImage(element.getAttribute('dwl'));
-      element.setAttribute('href', href);
-      element.removeAttribute('dwl');
-    });
-  };
+    var switchToWebP = function () {
+        [].forEach.call(document.querySelectorAll("a[dwl]"), function (element) {
+            var href = responsiveImage(element.getAttribute("dwl"));
+            element.setAttribute("href", href);
+            element.removeAttribute("dwl");
+        });
+    };
 
-  if (testWebPSupport()) switchToWebP();
+    if (testWebPSupport()) switchToWebP();
 }
 
 /**
@@ -387,27 +357,18 @@ export function convertImageLinkToWebPLink() {
  *
  * still used in piedvert. To remove ?!
  */
-export function imgLazyLoad(attribute = 'data-img') {
-  [].forEach.call(
-    document.querySelectorAll('[' + attribute + ']'),
-    function (img) {
-      var newDomImg = document.createElement('img');
-      var src = img.getAttribute(attribute);
-      img.removeAttribute(attribute);
-      for (var i = 0, n = img.attributes.length; i < n; i++) {
-        newDomImg.setAttribute(
-          img.attributes[i].nodeName,
-          img.attributes[i].nodeValue
-        );
-      }
-      if (newDomImg.getAttribute('alt') === null && img.textContent != '') {
-        newDomImg.setAttribute('alt', img.textContent);
-      }
-      newDomImg.setAttribute(
-        'src',
-        typeof responsiveImage === 'function' ? responsiveImage(src) : src
-      );
-      img.outerHTML = newDomImg.outerHTML;
-    }
-  );
+export function imgLazyLoad(attribute = "data-img") {
+    [].forEach.call(document.querySelectorAll("[" + attribute + "]"), function (img) {
+        var newDomImg = document.createElement("img");
+        var src = img.getAttribute(attribute);
+        img.removeAttribute(attribute);
+        for (var i = 0, n = img.attributes.length; i < n; i++) {
+            newDomImg.setAttribute(img.attributes[i].nodeName, img.attributes[i].nodeValue);
+        }
+        if (newDomImg.getAttribute("alt") === null && img.textContent != "") {
+            newDomImg.setAttribute("alt", img.textContent);
+        }
+        newDomImg.setAttribute("src", typeof responsiveImage === "function" ? responsiveImage(src) : src);
+        img.outerHTML = newDomImg.outerHTML;
+    });
 }

package/src/tailwind.prose.scss

@@ -1,3 +1,11 @@
+/**
+ * Override tailwind prose
+ */
+.prose {
+    width: 100%;
+    margin: 0 auto;
+}
+
 /**
  * Relative to link
  */
@@ -20,9 +28,9 @@
     border-radius: 3px;
     border: 1px solid transparent;
     cursor: pointer;
-    color: #fff;
-    background-color: #3c8dbc;
-    border-color: #367fa9;
+    color: #fff !important;
+    background-color: var(--primary);
+    border-color: var(--primary);
     outline: none;
     text-decoration: none !important;
     font-size: 120%;
@@ -45,19 +53,14 @@ html {
  * Pure css hamburger menu
  */
 
-.show-hide-input:checked ~ div {
-    display: block !important;
+.show-hide-input:checked ~ div,
+.show-hide-input:checked ~ ul,
+.show-hide-input:checked ~ nav {
+    max-height: 100vh;
+    padding-top: 1rem;
 }
 
-/**
- * Special full-width from everywhere
- */
-
-.w-full-vw {
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-}
+/*
+ * Special full-width from everywhere alias .w-full-vw:
+w-screen relative left-[49%]  ml-[-50vw] my-6
+*/