silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move libs versions to config (#2139) 

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>
This commit is contained in:
George 2024-01-28 19:10:42 -03:00 committed by GitHub
parent ef847825fd
commit 06bc36762d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 269 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
_config.yml
View File

@ -380,9 +380,40 @@ enable_progressbar: true # enables a horizontal progress bar linked to the verti
bootstrap-table: bootstrap-table:
version: "1.22.1" 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: jquery:
version: "3.6.0" version: "3.6.0"
integrity: "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" integrity: "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
leaflet:
version: "1.9.4"
integrity:
css: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
js: "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
mathjax: mathjax:
version: "3.2.0" version: "3.2.0"
masonry: masonry:
@ -396,6 +427,23 @@ mdb:
medium_zoom: medium_zoom:
version: "1.1.0" version: "1.1.0"
integrity: "sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" 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 # Get external JSON data

52
_includes/head.liquid
View File

@ -17,8 +17,9 @@
{% endif %} {% endif %}
<!-- Fonts & Icons --> <!-- 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 <link
defer
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons" 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 --> <!-- Code Syntax Highlighting -->
<link <link
defer
rel="stylesheet" rel="stylesheet"
href="{{ '/assets/css/jekyll-pygments-themes-github.css' | relative_url | bust_file_cache }}" href="{{ '/assets/css/jekyll-pygments-themes-github.css' | relative_url | bust_file_cache }}"
media="" media=""
@ -34,11 +36,7 @@
{% if page.toc and page.toc.sidebar %} {% if page.toc and page.toc.sidebar %}
<!-- Sidebar Table of Contents --> <!-- Sidebar Table of Contents -->
<link href="{{ '/assets/css/bootstrap-toc.min.css' | relative_url | bust_file_cache }}" rel="stylesheet"> <link defer 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>
{% endif %} {% endif %}
<!-- Styles --> <!-- Styles -->
@ -56,6 +54,7 @@
<!-- Dark Mode --> <!-- Dark Mode -->
{% if site.enable_darkmode %} {% if site.enable_darkmode %}
<link <link
defer
rel="stylesheet" rel="stylesheet"
href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}" href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}"
media="none" media="none"
@ -67,9 +66,10 @@
<!-- GeoJSON support via Leaflet --> <!-- GeoJSON support via Leaflet -->
{% if page.map %} {% if page.map %}
<link <link
defer
rel="stylesheet" rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" href="https://unpkg.com/leaflet@{{ site.leaflet.version }}/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" integrity="{{ site.leaflet.integrity.css }}"
crossorigin="" crossorigin=""
> >
{% endif %} {% endif %}
@ -77,29 +77,51 @@
<!-- diff2html --> <!-- diff2html -->
{% if page.code_diff %} {% if page.code_diff %}
<link <link
defer
rel="stylesheet" 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)" media="screen and (prefers-color-scheme: light)"
> >
<link <link
defer
rel="stylesheet" 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)" 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 %} {% endif %}
<!-- Image comparison slider -->
{% if page.images %} {% if page.images %}
<!-- Image comparison slider -->
{% if page.images.compare %} {% 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 %} {% endif %}
<!-- Image slider -->
{% if page.images.slider %} {% if page.images.slider %}
<link <link
defer
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css" href="https://cdn.jsdelivr.net/npm/swiper@{{ site.swiper.version }}/swiper-bundle.min.css"
integrity="sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E=" integrity="{{ site.swiper.integrity.css }}"
crossorigin="anonymous" crossorigin="anonymous"
> >
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if page.tikzjax %}
<link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
{% endif %}

10
_includes/metadata.liquid
View File

@ -14,13 +14,15 @@
<meta http-equiv="Permissions-Policy" content="interest-cohort=()"> <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
{% endif %} {% endif %}
{% capture author_name %}{{ site.first_name }}{% if site.middle_name %} {{ site.middle_name }}{% endif %} {{ site.last_name }}{% endcapture %}
<!-- Standard metadata --> <!-- Standard metadata -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> <title>
{% if site.title == 'blank' %} {% if site.title == 'blank' %}
{% capture title %}{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}{% endcapture %} {% capture title %}{{ author_name }}{% endcapture %}
{% else %} {% else %}
{% capture title %}{{ site.title }}{% endcapture %} {% capture title %}{{ site.title }}{% endcapture %}
{% endif %} {% endif %}
@ -36,7 +38,7 @@
{{ title }} {{ title }}
{% endif %} {% endif %}
</title> </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 %}"> <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
{% if page.keywords or site.keywords %} {% if page.keywords or site.keywords %}
<meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}{{ site.keywords }}{% endif %}"> <meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}{{ site.keywords }}{% endif %}">
@ -223,7 +225,7 @@
"author": "author":
{ {
"@type": "Person", "@type": "Person",
"name": "{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}" "name": "{{ author_name }}"
}, },
"url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}", "url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}",
"@type": "{% if is_blog_post %}BlogPosting{% else %}WebSite{% endif %}", "@type": "{% if is_blog_post %}BlogPosting{% else %}WebSite{% endif %}",
@ -232,7 +234,7 @@
{% if sameaslinks != blank %} {% if sameaslinks != blank %}
"sameAs": {{ sameaslinks }}, "sameAs": {{ sameaslinks }},
{% endif %} {% endif %}
"name": "{{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}", "name": "{{ author_name }}",
"@context": "https://schema.org" "@context": "https://schema.org"
} }
</script> </script>

2
_includes/scripts/chartjs.liquid
View File

@ -1,5 +1,5 @@
{% if page.chart and page.chart.chartjs %} {% 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> <script>
$(document).ready(function () { $(document).ready(function () {
var $canvas = null, var $canvas = null,

26
_includes/scripts/codeDiff.liquid
View File

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

31
_includes/scripts/diff2html.liquid Normal file
View File

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

52
_includes/scripts/echarts.liquid
View File

@ -1,13 +1,15 @@
{% if page.chart and page.chart.echarts %} {% if page.chart and page.chart.echarts %}
<script <script
src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js" defer
integrity="sha256-EVZCmhajjLhgTcxlGMGUBtQiYULZCPjt0uNTFEPFTRk=" src="https://cdn.jsdelivr.net/npm/echarts@{{ site.echarts.version }}/dist/echarts.min.js"
integrity="{{ site.echarts.integrity.library }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
{% if site.enable_darkmode %} {% if site.enable_darkmode %}
<script <script
src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/theme/dark-fresh-cut.js" defer
integrity="sha256-UmFIP/4VvOqBDIl2QWl1HBuAJ1XWs/iFZxT5yJRZOKo=" src="https://cdn.jsdelivr.net/npm/echarts@{{ site.echarts.version }}/theme/dark-fresh-cut.js"
integrity="{{ site.echarts.integrity.dark_theme }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
{% endif %} {% endif %}
@ -16,26 +18,30 @@
/* Create echarts chart as another node and hide the code block, appending the echarts node after it /* 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 */ this is done to enable retrieving the code again when changing theme between light/dark */
document.querySelectorAll('pre>code.language-echarts').forEach((elem) => { document.onreadystatechange = () => {
const jsonData = elem.textContent; if (document.readyState === 'complete') {
const backup = elem.parentElement; document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
backup.classList.add('unloaded'); const jsonData = elem.textContent;
/* create echarts node */ const backup = elem.parentElement;
let chartElement = document.createElement('div'); backup.classList.add('unloaded');
chartElement.classList.add('echarts'); /* create echarts node */
backup.after(chartElement); let chartElement = document.createElement('div');
chartElement.classList.add('echarts');
backup.after(chartElement);
/* create echarts */ /* create echarts */
if (theme === 'dark') { if (theme === 'dark') {
var chart = echarts.init(chartElement, 'dark-fresh-cut'); var chart = echarts.init(chartElement, 'dark-fresh-cut');
} else { } else {
var chart = echarts.init(chartElement); 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> </script>
{% endif %} {% endif %}

7
_includes/scripts/imageLayouts.liquid
View File

@ -1,11 +1,12 @@
{% if page.images %} {% if page.images %}
{% if page.images.compare %} {% 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 %} {% endif %}
{% if page.images.slider %} {% if page.images.slider %}
<script <script
src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-element-bundle.min.js" defer
integrity="sha256-BPrwikijIybg9OQC5SYFFqhBjERYOn97tCureFgYH1E=" src="https://cdn.jsdelivr.net/npm/swiper@{{ site.swiper.version }}/swiper-element-bundle.min.js"
integrity="{{ site.swiper.integrity.js }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
{% endif %} {% endif %}

44
_includes/scripts/leaflet.liquid
View File

@ -1,28 +1,32 @@
{% if page.map %} {% if page.map %}
<script <script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" src="https://unpkg.com/leaflet@{{ site.leaflet.version }}/dist/leaflet.js"
integrity="{{ site.leaflet.integrity.js }}"
crossorigin="" crossorigin=""
></script> ></script>
<script> <script>
/* Create leaflet map as another node and hide the code block, appending the leaflet node after it /* 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.onreadystatechange = () => {
document.querySelectorAll('pre>code.language-geojson').forEach((elem) => { if (document.readyState === 'complete') {
const jsonData = elem.textContent; document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
const backup = elem.parentElement; const jsonData = elem.textContent;
backup.classList.add('unloaded'); const backup = elem.parentElement;
/* create leaflet node */ backup.classList.add('unloaded');
let mapElement = document.createElement('div'); /* create leaflet node */
mapElement.classList.add('map'); let mapElement = document.createElement('div');
backup.after(mapElement); mapElement.classList.add('map');
backup.after(mapElement);
var map = L.map(mapElement); var map = L.map(mapElement);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map); }).addTo(map);
let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map); let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
map.fitBounds(geoJSON.getBounds()); map.fitBounds(geoJSON.getBounds());
}); });
}
};
</script> </script>
{% endif %} {% endif %}

7
_includes/scripts/masonry.liquid
View File

@ -6,6 +6,11 @@
integrity="{{ site.masonry.integrity }}" integrity="{{ site.masonry.integrity }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></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> <script defer src="{{ '/assets/js/masonry.js' | relative_url }}" type="text/javascript"></script>
{% endif %} {% endif %}

72
_includes/scripts/mermaid.liquid
View File

@ -1,45 +1,55 @@
{% if page.mermaid and page.mermaid.enabled %} {% if page.mermaid and page.mermaid.enabled %}
<script <script
src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js" defer
integrity="sha256-TtLOdUA8mstPoO6sGvHIGx2ceXrrX4KgIItO06XOn8A=" src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"
integrity="{{ site.mermaid.integrity }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
{% if page.mermaid.zoomable %} {% 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 %} {% endif %}
<script> <script>
let theme = localStorage.getItem('theme'); let theme = localStorage.getItem('theme');
/* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it /* 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 */ this is done to enable retrieving the code again when changing theme between light/dark */
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => { document.onreadystatechange = () => {
const svgCode = elem.textContent; if (document.readyState === 'complete') {
const backup = elem.parentElement; document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
backup.classList.add('unloaded'); const svgCode = elem.textContent;
/* create mermaid node */ const backup = elem.parentElement;
let mermaid = document.createElement('pre'); backup.classList.add('unloaded');
mermaid.classList.add('mermaid'); /* create mermaid node */
const text = document.createTextNode(svgCode); let mermaid = document.createElement('pre');
mermaid.appendChild(text); mermaid.classList.add('mermaid');
backup.after(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);
}); });
});
} 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> </script>
{% endif %} {% endif %}

3
_includes/scripts/tikzjax.liquid Normal file
View File

@ -0,0 +1,3 @@
{% if page.tikzjax %}
<script defer src="https://tikzjax.com/v1/tikzjax.js"></script>
{% endif %}

47
_includes/scripts/vega.liquid
View File

@ -1,17 +1,20 @@
{% if page.chart and page.chart.vega_lite %} {% if page.chart and page.chart.vega_lite %}
<script <script
src="https://cdn.jsdelivr.net/npm/vega@5.27/build/vega.min.js" defer
integrity="sha256-Yot/cfgMMMpFwkp/5azR20Tfkt24PFqQ6IQS+80HIZs=" src="https://cdn.jsdelivr.net/npm/vega@{{ site.vega.version }}/build/vega.min.js"
integrity="{{ site.vega.integrity }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script <script
src="https://cdn.jsdelivr.net/npm/vega-lite@5.16/build/vega-lite.min.js" defer
integrity="sha256-TvBvIS5jUN4BSy009usRjNzjI1qRrHPYv7xVLJyjUyw=" src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.vega-lite.version }}/build/vega-lite.min.js"
integrity="{{ site.vega-lite.integrity }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script <script
src="https://cdn.jsdelivr.net/npm/vega-embed@6.24/build/vega-embed.min.js" defer
integrity="sha256-FPCJ9JYCC9AZSpvC/t/wHBX7ybueZhIqOMjpWqfl3DU=" src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.vega-embed.version }}/build/vega-embed.min.js"
integrity="{{ site.vega-embed.integrity }}"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
@ -20,21 +23,25 @@
/* Create vega lite chart as another node and hide the code block, appending the vega lite node after it /* 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 */ this is done to enable retrieving the code again when changing theme between light/dark */
document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => { document.onreadystatechange = () => {
const jsonData = elem.textContent; if (document.readyState === 'complete') {
const backup = elem.parentElement; document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
backup.classList.add('unloaded'); const jsonData = elem.textContent;
/* create vega lite node */ const backup = elem.parentElement;
let chartElement = document.createElement('div'); backup.classList.add('unloaded');
chartElement.classList.add('vega-lite'); /* create vega lite node */
backup.after(chartElement); let chartElement = document.createElement('div');
chartElement.classList.add('vega-lite');
backup.after(chartElement);
/* Embed the visualization in the container */ /* Embed the visualization in the container */
if (theme === 'dark') { if (theme === 'dark') {
vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' }); vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
} else { } else {
vegaEmbed(chartElement, JSON.parse(jsonData)); vegaEmbed(chartElement, JSON.parse(jsonData));
}
});
} }
}); };
</script> </script>
{% endif %} {% endif %}

3
_layouts/default.liquid
View File

@ -48,11 +48,12 @@
{% include scripts/bootstrap.liquid %} {% include scripts/bootstrap.liquid %}
{% include scripts/masonry.liquid %} {% include scripts/masonry.liquid %}
{% include scripts/mermaid.liquid %} {% include scripts/mermaid.liquid %}
{% include scripts/codeDiff.liquid %} {% include scripts/diff2html.liquid %}
{% include scripts/leaflet.liquid %} {% include scripts/leaflet.liquid %}
{% include scripts/chartjs.liquid %} {% include scripts/chartjs.liquid %}
{% include scripts/echarts.liquid %} {% include scripts/echarts.liquid %}
{% include scripts/vega.liquid %} {% include scripts/vega.liquid %}
{% include scripts/tikzjax.liquid %}
{% include scripts/misc.liquid %} {% include scripts/misc.liquid %}
{% include scripts/badges.liquid %} {% include scripts/badges.liquid %}
{% include scripts/mathjax.liquid %} {% include scripts/mathjax.liquid %}

15
_posts/2023-07-04-jupyter-notebook.md
View File

@ -13,11 +13,16 @@ To include a jupyter notebook in a post, you can use the following code:
{% raw %} {% raw %}
```html ```liquid
{::nomarkdown} {% assign jupyter_path = "assets/jupyter/blog.ipynb" | relative_url %} {% capture notebook_exists %}{% file_exists {::nomarkdown}
assets/jupyter/blog.ipynb %}{% endcapture %} {% if notebook_exists == "true" %} {% jupyter_notebook jupyter_path %} {% else %} {% assign jupyter_path = 'assets/jupyter/blog.ipynb' | relative_url %}
<p>Sorry, the notebook you are looking for does not exist.</p> {% capture notebook_exists %}{% file_exists assets/jupyter/blog.ipynb %}{% endcapture %}
{% endif %} {:/nomarkdown} {% if notebook_exists == 'true' %}
{% jupyter_notebook jupyter_path %}
{% else %}
<p>Sorry, the notebook you are looking for does not exist.</p>
{% endif %}
{:/nomarkdown}
``` ```
{% endraw %} {% endraw %}