Skip to content

Commit 9d97120

Browse files
cotes2020cotes2020
committed
perf(assets): reduce HTTP requests to CDN
1 parent 016a9ba commit 9d97120

File tree

9 files changed

+163
-135
lines changed

9 files changed

+163
-135
lines changed

‎_includes/comments/giscus.html‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,54 @@
11
<!-- https://giscus.app/ -->
22
<script type="text/javascript">
3-
$(function () {
4-
const origin = "https://giscus.app";
5-
const iframe = "iframe.giscus-frame";
6-
const lightTheme = "light";
7-
const darkTheme = "dark_dimmed";
3+
(function () {
4+
const origin = 'https://giscus.app';
5+
const iframe = 'iframe.giscus-frame';
6+
const lightTheme = 'light';
7+
const darkTheme = 'dark_dimmed';
8+
89
let initTheme = lightTheme;
10+
const html = document.documentElement;
911

10-
if ($("html[data-mode=dark]").length > 0
11-
|| ($("html[data-mode]").length == 0
12-
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
12+
if (
13+
(html.hasAttribute('data-mode') &&
14+
html.getAttribute('data-mode') === 'dark') ||
15+
(!html.hasAttribute('data-mode') &&
16+
window.matchMedia('(prefers-color-scheme: dark)').matches)
17+
) {
1318
initTheme = darkTheme;
1419
}
1520

1621
let giscusAttributes = {
17-
"src": "https://giscus.app/client.js",
18-
"data-repo": "{{ site.comments.giscus.repo}}",
19-
"data-repo-id": "{{ site.comments.giscus.repo_id }}",
20-
"data-category": "{{ site.comments.giscus.category }}",
21-
"data-category-id": "{{ site.comments.giscus.category_id }}",
22-
"data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
23-
"data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
24-
"data-emit-metadata": "0",
25-
"data-theme": initTheme,
26-
"data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
27-
"data-lang": "{{ site.comments.giscus.lang | default: lang }}",
28-
"crossorigin": "anonymous",
29-
"async": ""
22+
src: 'https://giscus.app/client.js',
23+
'data-repo': '{{ site.comments.giscus.repo}}',
24+
'data-repo-id': '{{ site.comments.giscus.repo_id }}',
25+
'data-category': '{{ site.comments.giscus.category }}',
26+
'data-category-id': '{{ site.comments.giscus.category_id }}',
27+
'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
28+
'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
29+
'data-emit-metadata': '0',
30+
'data-theme': initTheme,
31+
'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
32+
'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
33+
crossorigin: 'anonymous',
34+
async: ''
3035
};
3136

32-
let giscusScript = document.createElement("script");
33-
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
34-
document.getElementById("tail-wrapper").appendChild(giscusScript);
37+
let giscusScript = document.createElement('script');
38+
Object.entries(giscusAttributes).forEach(([key, value]) =>
39+
giscusScript.setAttribute(key, value)
40+
);
41+
document.getElementById('tail-wrapper').appendChild(giscusScript);
3542

36-
addEventListener("message", (event) => {
37-
if (event.source === window && event.data &&
38-
event.data.direction === ModeToggle.ID) {
43+
addEventListener('message', (event) => {
44+
if (
45+
event.source === window &&
46+
event.data &&
47+
event.data.direction === ModeToggle.ID
48+
) {
3949
/* global theme mode changed */
4050
const mode = event.data.message;
41-
const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
51+
const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
4252

4353
const message = {
4454
setConfig: {
@@ -49,8 +59,6 @@
4959
const giscus = document.querySelector(iframe).contentWindow;
5060
giscus.postMessage({ giscus: message }, origin);
5161
}
52-
5362
});
54-
55-
});
63+
})();
5664
</script>

‎_includes/head.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,6 @@
108108

109109
<!-- JavaScript -->
110110

111-
<script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
112-
113111
{% unless site.theme_mode %}
114112
{% include mode-toggle.html %}
115113
{% endunless %}

‎_includes/js-selector.html‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,35 @@
11
<!-- JS selector for site. -->
22

3+
<!-- commons -->
4+
5+
{% assign urls = site.data.assets[origin].jquery.js
6+
| append: ','
7+
| append: site.data.assets[origin].bootstrap.js
8+
| append: ','
9+
| append: site.data.assets[origin].search.js
10+
%}
11+
312
<!-- layout specified -->
413

514
{% if page.layout == 'post' %}
615
{% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
716
<!-- pv-report needs countup.js -->
8-
<script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
17+
{% assign urls = urls | append: ',' | append: site.data.assets[origin].countup.js %}
918
{% endif %}
1019
{% endif %}
1120

1221
{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
13-
{% assign _urls = site.data.assets[origin].lazysizes.js %}
22+
{% assign urls = urls | append: ',' | append: site.data.assets[origin].lazysizes.js %}
1423

1524
{% unless page.layout == 'home' %}
16-
{% assign _urls = _urls
25+
<!-- image lazy-loading & popup & clipboard -->
26+
{% assign urls = urls
1727
| append: ','
1828
| append: site.data.assets[origin]['magnific-popup'].js
1929
| append: ','
2030
| append: site.data.assets[origin].clipboard.js
2131
%}
2232
{% endunless %}
23-
24-
{% include jsdelivr-combine.html urls=_urls %}
2533
{% endif %}
2634

2735
{% if page.layout == 'home'
@@ -32,7 +40,9 @@
3240
%}
3341
{% assign locale = site.lang | split: '-' | first %}
3442

35-
{% assign _urls = site.data.assets[origin].dayjs.js.common
43+
{% assign urls = urls
44+
| append: ','
45+
| append: site.data.assets[origin].dayjs.js.common
3646
| append: ','
3747
| append: site.data.assets[origin].dayjs.js.locale
3848
| replace: ':LOCALE', locale
@@ -41,10 +51,18 @@
4151
| append: ','
4252
| append: site.data.assets[origin].dayjs.js.localizedFormat
4353
%}
54+
{% endif %}
4455

45-
{% include jsdelivr-combine.html urls=_urls %}
56+
{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
57+
{% assign urls = urls | append: ',' | append: site.data.assets[origin].toc.js %}
4658
{% endif %}
4759

60+
{% if page.mermaid %}
61+
{% assign urls = urls | append: ',' | append: site.data.assets[origin].mermaid.js %}
62+
{% endif %}
63+
64+
{% include jsdelivr-combine.html urls=urls %}
65+
4866
{% case page.layout %}
4967
{% when 'home', 'categories', 'post', 'page' %}
5068
{% assign type = page.layout %}
@@ -80,10 +98,6 @@
8098
<script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
8199
{% endif %}
82100

83-
<!-- commons -->
84-
85-
<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
86-
87101
{% if jekyll.environment == 'production' %}
88102
<!-- PWA -->
89103
{% if site.pwa.enabled %}

‎_includes/jsdelivr-combine.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
{% assign domain = 'https://cdn.jsdelivr.net/' %}
66

77
{% for url in urls %}
8-
98
{% if url contains domain %}
109
{% assign url_snippet = url | slice: domain.size, url.size %}
1110

@@ -16,15 +15,10 @@
1615
{% endif %}
1716

1817
{% elsif url contains '//' %}
19-
2018
<script src="{{ url }}"></script>
21-
2219
{% else %}
23-
2420
<script src="{{ url | relative_url }}"></script>
25-
2621
{% endif %}
27-
2822
{% endfor %}
2923

3024
{% if combined_urls %}

‎_includes/mermaid.html‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,58 @@
1-
<!--
2-
mermaid-js loader
3-
-->
4-
5-
<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
6-
7-
<script>
1+
<!-- mermaid-js loader -->
2+
<script type="text/javascript">
83
(function () {
9-
104
function updateMermaid(event) {
11-
if (event.source === window && event.data &&
12-
event.data.direction === ModeToggle.ID) {
13-
5+
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
146
const mode = event.data.message;
157

16-
if (typeof mermaid === "undefined") {
8+
if (typeof mermaid === 'undefined') {
179
return;
1810
}
1911

20-
let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
21-
let config = {theme: expectedTheme};
12+
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
13+
let config = { theme: expectedTheme };
2214

2315
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
24-
$(".mermaid").each(function () {
16+
$('.mermaid').each(function () {
2517
let svgCode = $(this).prev().children().html();
26-
$(this).removeAttr("data-processed");
18+
$(this).removeAttr('data-processed');
2719
$(this).html(svgCode);
2820
});
2921

3022
mermaid.initialize(config);
31-
mermaid.init(undefined, ".mermaid");
23+
mermaid.init(undefined, '.mermaid');
3224
}
3325
}
3426

35-
let initTheme = "default";
27+
let initTheme = 'default';
28+
const html = document.documentElement;
3629

37-
if ($("html[data-mode=dark]").length > 0
38-
|| ($("html[data-mode]").length == 0
39-
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
40-
initTheme = "dark";
30+
if (
31+
(html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
32+
(!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
33+
) {
34+
initTheme = 'dark';
4135
}
4236

4337
let mermaidConf = {
44-
theme: initTheme /* <default|dark|forest|neutral> */
38+
theme: initTheme /* <default|dark|forest|neutral> */
4539
};
4640

4741
/* Create mermaid tag */
48-
$("pre").has("code.language-mermaid").each(function () {
49-
let svgCode = $(this).children().html();
50-
$(this).addClass("unloaded");
51-
$(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
42+
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
43+
const svgCode = elem.textContent;
44+
const backup = elem.parentElement;
45+
backup.classList.add('unloaded');
46+
/* create mermaid node */
47+
let mermaid = document.createElement('pre');
48+
mermaid.classList.add('mermaid');
49+
const text = document.createTextNode(svgCode);
50+
mermaid.appendChild(text);
51+
backup.after(mermaid);
5252
});
5353

5454
mermaid.initialize(mermaidConf);
5555

56-
window.addEventListener("message", updateMermaid);
56+
window.addEventListener('message', updateMermaid);
5757
})();
58-
5958
</script>

0 commit comments

Comments
 (0)