Move libs versions to config

_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

_includes/head.liquid

@@ -17,15 +17,17 @@
 {% 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"
 >
 
 <!-- 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,39 +66,62 @@
 <!-- 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 %}
 
 <!-- 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 %}

_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>

_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,

_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 %}

_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 %}

_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 %}