From 06bc36762d0172a5e11537563744f8949a146e7c Mon Sep 17 00:00:00 2001
From: George <31376482+george-gca@users.noreply.github.com>
Date: Sun, 28 Jan 2024 19:10:42 -0300
Subject: [PATCH] Move libs versions to config (#2139)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moved libs versions and hashes to `_config.yml`.

Fixes #2067.

Deferring everything possible to keep pages loads fast.

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _config.yml                           | 48 ++++++++++++++++++
 _includes/head.liquid                 | 52 +++++++++++++------
 _includes/metadata.liquid             | 10 ++--
 _includes/scripts/chartjs.liquid      |  2 +-
 _includes/scripts/codeDiff.liquid     | 26 ----------
 _includes/scripts/diff2html.liquid    | 31 ++++++++++++
 _includes/scripts/echarts.liquid      | 52 ++++++++++---------
 _includes/scripts/imageLayouts.liquid |  7 +--
 _includes/scripts/leaflet.liquid      | 44 ++++++++--------
 _includes/scripts/masonry.liquid      |  7 ++-
 _includes/scripts/mermaid.liquid      | 72 +++++++++++++++------------
 _includes/scripts/tikzjax.liquid      |  3 ++
 _includes/scripts/vega.liquid         | 47 +++++++++--------
 _layouts/default.liquid               |  3 +-
 _posts/2023-07-04-jupyter-notebook.md | 15 ++++--
 15 files changed, 269 insertions(+), 150 deletions(-)
 delete mode 100644 _includes/scripts/codeDiff.liquid
 create mode 100644 _includes/scripts/diff2html.liquid
 create mode 100644 _includes/scripts/tikzjax.liquid

diff --git a/_config.yml b/_config.yml
index 10c8f11..6c3f3ce 100644
--- a/_config.yml
+++ b/_config.yml
@@ -380,9 +380,40 @@ enable_progressbar: true # enables a horizontal progress bar linked to the verti
 
 bootstrap-table:
   version: "1.22.1"
+chartjs:
+  version: "4.4.1"
+d3:
+  version: "7.8.5"
+  integrity: "sha256-1rA678n2xEx7x4cTZ5x4wpUCj6kUMZEZ5cxLSVSFWxw="
+diff2html:
+  version: "3.4.47"
+  integrity:
+    css: "sha256-IMBK4VNZp0ivwefSn51bswdsrhk0HoMTLc2GqFHFBXg="
+    js: "sha256-eU2TVHX633T1o/bTQp6iIJByYJEtZThhF9bKz/DcbbY="
+echarts:
+  version: "5.4.3"
+  integrity:
+    library: "sha256-EVZCmhajjLhgTcxlGMGUBtQiYULZCPjt0uNTFEPFTRk="
+    dark_theme: "sha256-UmFIP/4VvOqBDIl2QWl1HBuAJ1XWs/iFZxT5yJRZOKo="
+highlightjs:
+  version: "11.9.0"
+  integrity:
+    css:
+      light: "sha256-Oppd74ucMR5a5Dq96FxjEzGF7tTw2fZ/6ksAqDCM8GY="
+      dark: "sha256-nyCNAiECsdDHrr/s2OQsp5l9XeY2ZJ0rMepjCT2AkBk="
+imagesloaded:
+  version: "5.0.0"
+  integrity: "sha256-htrLFfZJ6v5udOG+3kNLINIKh2gvoKqwEhHYfTTMICc="
+img-comparison-slider:
+  version: "8.0.6"
 jquery:
   version: "3.6.0"
   integrity: "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+leaflet:
+  version: "1.9.4"
+  integrity:
+    css: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    js: "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
 mathjax:
   version: "3.2.0"
 masonry:
@@ -396,6 +427,23 @@ mdb:
 medium_zoom:
   version: "1.1.0"
   integrity: "sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc="
+mermaid:
+  version: "10.7.0"
+  integrity: "sha256-TtLOdUA8mstPoO6sGvHIGx2ceXrrX4KgIItO06XOn8A="
+swiper:
+  version: "11.0.5"
+  integrity:
+    css: "sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="
+    js: "sha256-BPrwikijIybg9OQC5SYFFqhBjERYOn97tCureFgYH1E="
+vega:
+  version: "5.27.0"
+  integrity: "sha256-Yot/cfgMMMpFwkp/5azR20Tfkt24PFqQ6IQS+80HIZs="
+vega-embed:
+  version: "6.24.0"
+  integrity: "sha256-FPCJ9JYCC9AZSpvC/t/wHBX7ybueZhIqOMjpWqfl3DU="
+vega-lite:
+  version: "5.16.3"
+  integrity: "sha256-TvBvIS5jUN4BSy009usRjNzjI1qRrHPYv7xVLJyjUyw="
 
 # -----------------------------------------------------------------------------
 # Get external JSON data
diff --git a/_includes/head.liquid b/_includes/head.liquid
index 1035e72..b8c27ab 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -17,8 +17,9 @@
 {% endif %}
 
 <!-- Fonts & Icons -->
-<link rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
+<link defer rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
 <link
+  defer
   rel="stylesheet"
   type="text/css"
   href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons"
@@ -26,6 +27,7 @@
 
 <!-- Code Syntax Highlighting -->
 <link
+  defer
   rel="stylesheet"
   href="{{ '/assets/css/jekyll-pygments-themes-github.css' | relative_url | bust_file_cache }}"
   media=""
@@ -34,11 +36,7 @@
 
 {% if page.toc and page.toc.sidebar %}
   <!-- Sidebar Table of Contents -->
-  <link href="{{ '/assets/css/bootstrap-toc.min.css' | relative_url | bust_file_cache }}" rel="stylesheet">
-{% endif %}
-{% if page.tikzjax %}
-  <link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
-  <script defer src="https://tikzjax.com/v1/tikzjax.js"></script>
+  <link defer href="{{ '/assets/css/bootstrap-toc.min.css' | relative_url | bust_file_cache }}" rel="stylesheet">
 {% endif %}
 
 <!-- Styles -->
@@ -56,6 +54,7 @@
 <!-- Dark Mode -->
 {% if site.enable_darkmode %}
   <link
+    defer
     rel="stylesheet"
     href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}"
     media="none"
@@ -67,9 +66,10 @@
 <!-- GeoJSON support via Leaflet -->
 {% if page.map %}
   <link
+    defer
     rel="stylesheet"
-    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    href="https://unpkg.com/leaflet@{{ site.leaflet.version }}/dist/leaflet.css"
+    integrity="{{ site.leaflet.integrity.css }}"
     crossorigin=""
   >
 {% endif %}
@@ -77,29 +77,51 @@
 <!-- diff2html -->
 {% if page.code_diff %}
   <link
+    defer
     rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
+    href="https://cdn.jsdelivr.net/npm/highlight.js@{{ site.highlightjs.version }}/styles/github.min.css"
+    integrity="{{ site.highlightjs.integrity.css.light }}"
+    crossorigin="anonymous"
     media="screen and (prefers-color-scheme: light)"
   >
   <link
+    defer
     rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
+    href="https://cdn.jsdelivr.net/npm/highlight.js@{{ site.highlightjs.version }}/styles/github-dark.min.css"
+    integrity="{{ site.highlightjs.integrity.css.dark }}"
+    crossorigin="anonymous"
     media="screen and (prefers-color-scheme: dark)"
   >
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
+  <link
+    defer
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/diff2html@{{ site.diff2html.version }}/bundles/css/diff2html.min.css"
+    integrity="{{ site.diff2html.integrity.css }}"
+    crossorigin="anonymous"
+  >
 {% endif %}
 
-<!-- Image comparison slider -->
 {% if page.images %}
+  <!-- Image comparison slider -->
   {% if page.images.compare %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/styles.min.css">
+    <link
+      defer
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/img-comparison-slider@{{ site.img-comparison-slider.version }}/dist/styles.min.css"
+    >
   {% endif %}
+  <!-- Image slider -->
   {% if page.images.slider %}
     <link
+      defer
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css"
-      integrity="sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="
+      href="https://cdn.jsdelivr.net/npm/swiper@{{ site.swiper.version }}/swiper-bundle.min.css"
+      integrity="{{ site.swiper.integrity.css }}"
       crossorigin="anonymous"
     >
   {% endif %}
 {% endif %}
+
+{% if page.tikzjax %}
+  <link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
+{% endif %}
diff --git a/_includes/metadata.liquid b/_includes/metadata.liquid
index b1c7ccb..b737370 100644
--- a/_includes/metadata.liquid
+++ b/_includes/metadata.liquid
@@ -14,13 +14,15 @@
   <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
 {% endif %}
 
+{% capture author_name %}{{ site.first_name }}{% if site.middle_name %} {{ site.middle_name }}{% endif %} {{ site.last_name }}{% endcapture %}
+
 <!-- Standard metadata -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>
   {% if site.title == 'blank' %}
-    {% capture title %}{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}{% endcapture %}
+    {% capture title %}{{ author_name }}{% endcapture %}
   {% else %}
     {% capture title %}{{ site.title }}{% endcapture %}
   {% endif %}
@@ -36,7 +38,7 @@
     {{ title }}
   {% endif %}
 </title>
-<meta name="author" content="{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}">
+<meta name="author" content="{{ author_name }}">
 <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
 {% if page.keywords or site.keywords %}
   <meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}{{ site.keywords }}{% endif %}">
@@ -223,7 +225,7 @@
         "author":
         {
             "@type": "Person",
-            "name": "{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}"
+            "name": "{{ author_name }}"
         },
         "url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}",
         "@type": "{% if is_blog_post %}BlogPosting{% else %}WebSite{% endif %}",
@@ -232,7 +234,7 @@
         {% if sameaslinks != blank %}
         "sameAs": {{ sameaslinks }},
         {% endif %}
-        "name": "{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}",
+        "name": "{{ author_name }}",
         "@context": "https://schema.org"
     }
   </script>
diff --git a/_includes/scripts/chartjs.liquid b/_includes/scripts/chartjs.liquid
index 4f43933..8574f74 100644
--- a/_includes/scripts/chartjs.liquid
+++ b/_includes/scripts/chartjs.liquid
@@ -1,5 +1,5 @@
 {% if page.chart and page.chart.chartjs %}
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/chart.js@{{ site.chartjs.version }}/dist/chart.umd.min.js"></script>
   <script>
     $(document).ready(function () {
       var $canvas = null,
diff --git a/_includes/scripts/codeDiff.liquid b/_includes/scripts/codeDiff.liquid
deleted file mode 100644
index fb8a854..0000000
--- a/_includes/scripts/codeDiff.liquid
+++ /dev/null
@@ -1,26 +0,0 @@
-{% if page.code_diff %}
-  <!-- diff2html doesn't go well with Bootstrap Table -->
-  <script
-    src="https://cdn.jsdelivr.net/npm/diff2html@3.4.47/bundles/js/diff2html-ui.min.js"
-    integrity="sha256-eU2TVHX633T1o/bTQp6iIJByYJEtZThhF9bKz/DcbbY="
-    crossorigin="anonymous"
-  ></script>
-  <script>
-    let theme = localStorage.getItem('theme');
-
-    /* Create echarts chart as another node and hide the code block, appending the echarts node after it
-       this is done to enable retrieving the code again when changing theme between light/dark */
-    document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
-      const textData = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create diff node */
-      let diffElement = document.createElement('div');
-      diffElement.classList.add('diff2html');
-      backup.after(diffElement);
-      const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: 'lines' };
-      const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
-      diff2htmlUi.draw();
-    });
-  </script>
-{% endif %}
diff --git a/_includes/scripts/diff2html.liquid b/_includes/scripts/diff2html.liquid
new file mode 100644
index 0000000..e3add88
--- /dev/null
+++ b/_includes/scripts/diff2html.liquid
@@ -0,0 +1,31 @@
+{% if page.code_diff %}
+  <!-- diff2html doesn't go well with Bootstrap Table -->
+  <script
+    defer
+    src="https://cdn.jsdelivr.net/npm/diff2html@{{ site.diff2html.version }}/bundles/js/diff2html-ui.min.js"
+    integrity="{{ site.diff2html.integrity.js }}"
+    crossorigin="anonymous"
+  ></script>
+  <script>
+    let theme = localStorage.getItem('theme');
+
+    /* Create echarts chart as another node and hide the code block, appending the echarts node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
+          const textData = elem.textContent;
+          const backup = elem.parentElement;
+          backup.classList.add('unloaded');
+          /* create diff node */
+          let diffElement = document.createElement('div');
+          diffElement.classList.add('diff2html');
+          backup.after(diffElement);
+          const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: 'lines' };
+          const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
+          diff2htmlUi.draw();
+        });
+      }
+    };
+  </script>
+{% endif %}
diff --git a/_includes/scripts/echarts.liquid b/_includes/scripts/echarts.liquid
index cbac2be..8b61abd 100644
--- a/_includes/scripts/echarts.liquid
+++ b/_includes/scripts/echarts.liquid
@@ -1,13 +1,15 @@
 {% if page.chart and page.chart.echarts %}
   <script
-    src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
-    integrity="sha256-EVZCmhajjLhgTcxlGMGUBtQiYULZCPjt0uNTFEPFTRk="
+    defer
+    src="https://cdn.jsdelivr.net/npm/echarts@{{ site.echarts.version }}/dist/echarts.min.js"
+    integrity="{{ site.echarts.integrity.library }}"
     crossorigin="anonymous"
   ></script>
   {% if site.enable_darkmode %}
     <script
-      src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/theme/dark-fresh-cut.js"
-      integrity="sha256-UmFIP/4VvOqBDIl2QWl1HBuAJ1XWs/iFZxT5yJRZOKo="
+      defer
+      src="https://cdn.jsdelivr.net/npm/echarts@{{ site.echarts.version }}/theme/dark-fresh-cut.js"
+      integrity="{{ site.echarts.integrity.dark_theme }}"
       crossorigin="anonymous"
     ></script>
   {% endif %}
@@ -16,26 +18,30 @@
 
     /* Create echarts chart as another node and hide the code block, appending the echarts node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
-      const jsonData = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create echarts node */
-      let chartElement = document.createElement('div');
-      chartElement.classList.add('echarts');
-      backup.after(chartElement);
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
+          const jsonData = elem.textContent;
+          const backup = elem.parentElement;
+          backup.classList.add('unloaded');
+          /* create echarts node */
+          let chartElement = document.createElement('div');
+          chartElement.classList.add('echarts');
+          backup.after(chartElement);
 
-      /* create echarts */
-      if (theme === 'dark') {
-        var chart = echarts.init(chartElement, 'dark-fresh-cut');
-      } else {
-        var chart = echarts.init(chartElement);
+          /* create echarts */
+          if (theme === 'dark') {
+            var chart = echarts.init(chartElement, 'dark-fresh-cut');
+          } else {
+            var chart = echarts.init(chartElement);
+          }
+
+          chart.setOption(JSON.parse(jsonData));
+          window.addEventListener('resize', function () {
+            chart.resize();
+          });
+        });
       }
-
-      chart.setOption(JSON.parse(jsonData));
-      window.addEventListener('resize', function () {
-        chart.resize();
-      });
-    });
+    };
   </script>
 {% endif %}
diff --git a/_includes/scripts/imageLayouts.liquid b/_includes/scripts/imageLayouts.liquid
index 131fcbc..bb8c5a2 100644
--- a/_includes/scripts/imageLayouts.liquid
+++ b/_includes/scripts/imageLayouts.liquid
@@ -1,11 +1,12 @@
 {% if page.images %}
   {% if page.images.compare %}
-    <script src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/index.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@{{ site.img-comparison-slider.version }}/dist/index.min.js"></script>
   {% endif %}
   {% if page.images.slider %}
     <script
-      src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-element-bundle.min.js"
-      integrity="sha256-BPrwikijIybg9OQC5SYFFqhBjERYOn97tCureFgYH1E="
+      defer
+      src="https://cdn.jsdelivr.net/npm/swiper@{{ site.swiper.version }}/swiper-element-bundle.min.js"
+      integrity="{{ site.swiper.integrity.js }}"
       crossorigin="anonymous"
     ></script>
   {% endif %}
diff --git a/_includes/scripts/leaflet.liquid b/_includes/scripts/leaflet.liquid
index 516f239..13b2bda 100644
--- a/_includes/scripts/leaflet.liquid
+++ b/_includes/scripts/leaflet.liquid
@@ -1,28 +1,32 @@
 {% if page.map %}
   <script
-    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    defer
+    src="https://unpkg.com/leaflet@{{ site.leaflet.version }}/dist/leaflet.js"
+    integrity="{{ site.leaflet.integrity.js }}"
     crossorigin=""
   ></script>
   <script>
-    /* Create leaflet map as another node and hide the code block, appending the leaflet node after it
-    this is done to enable retrieving the code again when changing theme between light/dark */
-    document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
-      const jsonData = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create leaflet node */
-      let mapElement = document.createElement('div');
-      mapElement.classList.add('map');
-      backup.after(mapElement);
+    /* Create leaflet map as another node and hide the code block, appending the leaflet node after it */
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
+          const jsonData = elem.textContent;
+          const backup = elem.parentElement;
+          backup.classList.add('unloaded');
+          /* create leaflet node */
+          let mapElement = document.createElement('div');
+          mapElement.classList.add('map');
+          backup.after(mapElement);
 
-      var map = L.map(mapElement);
-      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }).addTo(map);
-      let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
-      map.fitBounds(geoJSON.getBounds());
-    });
+          var map = L.map(mapElement);
+          L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }).addTo(map);
+          let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
+          map.fitBounds(geoJSON.getBounds());
+        });
+      }
+    };
   </script>
 {% endif %}
diff --git a/_includes/scripts/masonry.liquid b/_includes/scripts/masonry.liquid
index c82f774..cbc3c9a 100644
--- a/_includes/scripts/masonry.liquid
+++ b/_includes/scripts/masonry.liquid
@@ -6,6 +6,11 @@
     integrity="{{ site.masonry.integrity }}"
     crossorigin="anonymous"
   ></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
+  <script
+    defer
+    src="https://cdn.jsdelivr.net/npm/imagesloaded@{{ site.imagesloaded.version }}/imagesloaded.pkgd.min.js"
+    integrity="{{ site.imagesloaded.integrity }}"
+    crossorigin="anonymous"
+  ></script>
   <script defer src="{{ '/assets/js/masonry.js' | relative_url }}" type="text/javascript"></script>
 {% endif %}
diff --git a/_includes/scripts/mermaid.liquid b/_includes/scripts/mermaid.liquid
index ebfd577..e4f1839 100644
--- a/_includes/scripts/mermaid.liquid
+++ b/_includes/scripts/mermaid.liquid
@@ -1,45 +1,55 @@
 {% if page.mermaid and page.mermaid.enabled %}
   <script
-    src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"
-    integrity="sha256-TtLOdUA8mstPoO6sGvHIGx2ceXrrX4KgIItO06XOn8A="
+    defer
+    src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"
+    integrity="{{ site.mermaid.integrity }}"
     crossorigin="anonymous"
   ></script>
   {% if page.mermaid.zoomable %}
-    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/d3@{{ site.d3.version }}/dist/d3.min.js"
+      integrity="{{ site.d3.integrity }}"
+      crossorigin="anonymous"
+    ></script>
   {% endif %}
   <script>
     let theme = localStorage.getItem('theme');
 
     /* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
-      const svgCode = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create mermaid node */
-      let mermaid = document.createElement('pre');
-      mermaid.classList.add('mermaid');
-      const text = document.createTextNode(svgCode);
-      mermaid.appendChild(text);
-      backup.after(mermaid);
-    });
-
-    mermaid.initialize({ theme: theme });
-
-    /* Zoomable mermaid diagrams */
-    if (typeof d3 !== 'undefined') {
-      window.addEventListener('load', function () {
-        var svgs = d3.selectAll('.mermaid svg');
-        svgs.each(function () {
-          var svg = d3.select(this);
-          svg.html('<g>' + svg.html() + '</g>');
-          var inner = svg.select('g');
-          var zoom = d3.zoom().on('zoom', function (event) {
-            inner.attr('transform', event.transform);
-          });
-          svg.call(zoom);
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+          const svgCode = elem.textContent;
+          const backup = elem.parentElement;
+          backup.classList.add('unloaded');
+          /* create mermaid node */
+          let mermaid = document.createElement('pre');
+          mermaid.classList.add('mermaid');
+          const text = document.createTextNode(svgCode);
+          mermaid.appendChild(text);
+          backup.after(mermaid);
         });
-      });
-    }
+
+        mermaid.initialize({ theme: theme });
+
+        /* Zoomable mermaid diagrams */
+        if (typeof d3 !== 'undefined') {
+          window.addEventListener('load', function () {
+            var svgs = d3.selectAll('.mermaid svg');
+            svgs.each(function () {
+              var svg = d3.select(this);
+              svg.html('<g>' + svg.html() + '</g>');
+              var inner = svg.select('g');
+              var zoom = d3.zoom().on('zoom', function (event) {
+                inner.attr('transform', event.transform);
+              });
+              svg.call(zoom);
+            });
+          });
+        }
+      }
+    };
   </script>
 {% endif %}
diff --git a/_includes/scripts/tikzjax.liquid b/_includes/scripts/tikzjax.liquid
new file mode 100644
index 0000000..aa2a3c1
--- /dev/null
+++ b/_includes/scripts/tikzjax.liquid
@@ -0,0 +1,3 @@
+{% if page.tikzjax %}
+  <script defer src="https://tikzjax.com/v1/tikzjax.js"></script>
+{% endif %}
diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid
index 1e8c397..c870cf3 100644
--- a/_includes/scripts/vega.liquid
+++ b/_includes/scripts/vega.liquid
@@ -1,17 +1,20 @@
 {% if page.chart and page.chart.vega_lite %}
   <script
-    src="https://cdn.jsdelivr.net/npm/vega@5.27/build/vega.min.js"
-    integrity="sha256-Yot/cfgMMMpFwkp/5azR20Tfkt24PFqQ6IQS+80HIZs="
+    defer
+    src="https://cdn.jsdelivr.net/npm/vega@{{ site.vega.version }}/build/vega.min.js"
+    integrity="{{ site.vega.integrity }}"
     crossorigin="anonymous"
   ></script>
   <script
-    src="https://cdn.jsdelivr.net/npm/vega-lite@5.16/build/vega-lite.min.js"
-    integrity="sha256-TvBvIS5jUN4BSy009usRjNzjI1qRrHPYv7xVLJyjUyw="
+    defer
+    src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.vega-lite.version }}/build/vega-lite.min.js"
+    integrity="{{ site.vega-lite.integrity }}"
     crossorigin="anonymous"
   ></script>
   <script
-    src="https://cdn.jsdelivr.net/npm/vega-embed@6.24/build/vega-embed.min.js"
-    integrity="sha256-FPCJ9JYCC9AZSpvC/t/wHBX7ybueZhIqOMjpWqfl3DU="
+    defer
+    src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.vega-embed.version }}/build/vega-embed.min.js"
+    integrity="{{ site.vega-embed.integrity }}"
     crossorigin="anonymous"
   ></script>
 
@@ -20,21 +23,25 @@
 
     /* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
-      const jsonData = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create vega lite node */
-      let chartElement = document.createElement('div');
-      chartElement.classList.add('vega-lite');
-      backup.after(chartElement);
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
+          const jsonData = elem.textContent;
+          const backup = elem.parentElement;
+          backup.classList.add('unloaded');
+          /* create vega lite node */
+          let chartElement = document.createElement('div');
+          chartElement.classList.add('vega-lite');
+          backup.after(chartElement);
 
-      /* Embed the visualization in the container */
-      if (theme === 'dark') {
-        vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
-      } else {
-        vegaEmbed(chartElement, JSON.parse(jsonData));
+          /* Embed the visualization in the container */
+          if (theme === 'dark') {
+            vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
+          } else {
+            vegaEmbed(chartElement, JSON.parse(jsonData));
+          }
+        });
       }
-    });
+    };
   </script>
 {% endif %}
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index c5a7fab..6809a73 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -48,11 +48,12 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
-    {% include scripts/codeDiff.liquid %}
+    {% include scripts/diff2html.liquid %}
     {% include scripts/leaflet.liquid %}
     {% include scripts/chartjs.liquid %}
     {% include scripts/echarts.liquid %}
     {% include scripts/vega.liquid %}
+    {% include scripts/tikzjax.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}
diff --git a/_posts/2023-07-04-jupyter-notebook.md b/_posts/2023-07-04-jupyter-notebook.md
index 80fce4b..8c1a1fc 100644
--- a/_posts/2023-07-04-jupyter-notebook.md
+++ b/_posts/2023-07-04-jupyter-notebook.md
@@ -13,11 +13,16 @@ To include a jupyter notebook in a post, you can use the following code:
 
 {% raw %}
 
-```html
-{::nomarkdown} {% assign jupyter_path = "assets/jupyter/blog.ipynb" | relative_url %} {% capture notebook_exists %}{% file_exists
-assets/jupyter/blog.ipynb %}{% endcapture %} {% if notebook_exists == "true" %} {% jupyter_notebook jupyter_path %} {% else %}
-<p>Sorry, the notebook you are looking for does not exist.</p>
-{% endif %} {:/nomarkdown}
+```liquid
+{::nomarkdown}
+{% assign jupyter_path = 'assets/jupyter/blog.ipynb' | relative_url %}
+{% capture notebook_exists %}{% file_exists assets/jupyter/blog.ipynb %}{% endcapture %}
+{% if notebook_exists == 'true' %}
+  {% jupyter_notebook jupyter_path %}
+{% else %}
+  <p>Sorry, the notebook you are looking for does not exist.</p>
+{% endif %}
+{:/nomarkdown}
 ```
 
 {% endraw %}