Skip to content

Commit fe7afa3

Browse files
cotes2020cotes2020
authored
perf: replace jQuery with Vanilla JS (#1681)
Also replaced `magnific-popup` with `GLightbox`
1 parent c85e9e2 commit fe7afa3

File tree

22 files changed

+273
-304
lines changed

22 files changed

+273
-304
lines changed

‎_data/origin/basic.yml‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css
44

55
# Libraries
66

7-
jquery:
8-
js: /assets/lib/jquery/jquery.min.js
9-
107
bootstrap:
118
css: /assets/lib/bootstrap/bootstrap.min.css
129
js: /assets/lib/bootstrap/bootstrap.bundle.min.js
@@ -31,9 +28,9 @@ dayjs:
3128
relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
3229
localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
3330

34-
magnific-popup:
35-
css: /assets/lib/magnific-popup/magnific-popup.css
36-
js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
31+
glightbox:
32+
css: /assets/lib/glightbox/glightbox.min.css
33+
js: /assets/lib/glightbox/glightbox.min.js
3734

3835
lazy-polyfill:
3936
css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css

‎_data/origin/cors.yml‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
1717

1818
# Libraries
1919

20-
jquery:
21-
js: https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
22-
2320
bootstrap:
2421
css: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
2522
js: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
@@ -44,9 +41,9 @@ dayjs:
4441
relativeTime: https://cdn.jsdelivr.net/npm/[email protected]/plugin/relativeTime.min.js
4542
localizedFormat: https://cdn.jsdelivr.net/npm/[email protected]/plugin/localizedFormat.min.js
4643

47-
magnific-popup:
48-
css: https://cdn.jsdelivr.net/npm/[email protected].0/dist/magnific-popup.min.css
49-
js: https://cdn.jsdelivr.net/npm/[email protected].0/dist/jquery.magnific-popup.min.js
44+
glightbox:
45+
css: https://cdn.jsdelivr.net/npm/[email protected].0/dist/css/glightbox.min.css
46+
js: https://cdn.jsdelivr.net/npm/[email protected].0/dist/js/glightbox.min.js
5047

5148
lazy-polyfill:
5249
css: https://cdn.jsdelivr.net/npm/[email protected]/dist/loading-attribute-polyfill.min.css

‎_includes/comments/disqus.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
{ threshold: [0] }
2929
);
3030

31-
disqus_observer.observe(document.querySelector('#disqus_thread'));
31+
disqus_observer.observe(document.getElementById('disqus_thread'));
3232

3333
/* Auto switch theme */
3434
function reloadDisqus() {
@@ -44,7 +44,7 @@
4444
}
4545
}
4646

47-
if (document.querySelector('.mode-toggle')) {
47+
if (document.getElementById('mode-toggle')) {
4848
window.addEventListener('message', reloadDisqus);
4949
}
5050
</script>

‎_includes/comments/giscus.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<script type="text/javascript">
33
(function () {
44
const origin = 'https://giscus.app';
5-
const iframe = 'iframe.giscus-frame';
65
const lightTheme = 'light';
76
const darkTheme = 'dark_dimmed';
87

@@ -58,7 +57,7 @@
5857
}
5958
};
6059

61-
const giscus = document.querySelector(iframe).contentWindow;
60+
const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
6261
giscus.postMessage({ giscus: message }, origin);
6362
}
6463
});

‎_includes/comments/utterances.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<script type="text/javascript">
1111
(function () {
1212
const origin = 'https://utteranc.es';
13-
const iframe = 'iframe.utterances-frame';
1413
const lightTheme = 'github-light';
1514
const darkTheme = 'github-dark';
1615
let initTheme = lightTheme;
@@ -43,7 +42,7 @@
4342
theme: theme
4443
};
4544

46-
const utterances = document.querySelector(iframe).contentWindow;
45+
const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
4746
utterances.postMessage(message, origin);
4847
});
4948
})();

‎_includes/head.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@
9797
{% endif %}
9898

9999
{% if page.layout == 'page' or page.layout == 'post' %}
100-
<!-- Manific Popup -->
101-
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
100+
<!-- Image Popup -->
101+
<link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
102102
{% endif %}
103103

104104
<!-- JavaScript -->

‎_includes/js-selector.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22

33
<!-- commons -->
44

5-
{% assign urls = site.data.origin[type].jquery.js
6-
| append: ','
7-
| append: site.data.origin[type].bootstrap.js
8-
| append: ','
9-
| append: site.data.origin[type].search.js
10-
%}
5+
{%- capture urls -%}
6+
{{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
7+
{%- endcapture -%}
118

129
<!-- layout specified -->
1310

@@ -20,7 +17,7 @@
2017
<!-- image lazy-loading & popup & clipboard -->
2118
{% assign urls = urls
2219
| append: ','
23-
| append: site.data.origin[type]['magnific-popup'].js
20+
| append: site.data.origin[type].glightbox.js
2421
| append: ','
2522
| append: site.data.origin[type].clipboard.js
2623
%}

‎_includes/mermaid.html‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
<!-- mermaid-js loader -->
22
<script type="text/javascript">
3-
(function () {
4-
function updateMermaid(event) {
5-
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
6-
const mode = event.data.message;
7-
8-
if (typeof mermaid === 'undefined') {
9-
return;
10-
}
11-
12-
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
13-
let config = { theme: expectedTheme };
14-
15-
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
16-
$('.mermaid').each(function () {
17-
let svgCode = $(this).prev().children().html();
18-
$(this).removeAttr('data-processed');
19-
$(this).html(svgCode);
20-
});
21-
22-
mermaid.initialize(config);
23-
mermaid.init(undefined, '.mermaid');
3+
function updateMermaid(event) {
4+
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
5+
const mode = event.data.message;
6+
7+
if (typeof mermaid === 'undefined') {
8+
return;
249
}
10+
11+
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
12+
let config = { theme: expectedTheme };
13+
14+
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
15+
const mermaidList = document.getElementsByClassName('mermaid');
16+
17+
[...mermaidList].forEach((elem) => {
18+
const svgCode = elem.previousSibling.children.item(0).innerHTML;
19+
elem.innerHTML = svgCode;
20+
elem.removeAttribute('data-processed');
21+
});
22+
23+
mermaid.initialize(config);
24+
mermaid.init(undefined, '.mermaid');
2525
}
26+
}
2627

28+
(function () {
2729
let initTheme = 'default';
2830
const html = document.documentElement;
2931

@@ -35,11 +37,12 @@
3537
}
3638

3739
let mermaidConf = {
38-
theme: initTheme /* <default|dark|forest|neutral> */
40+
theme: initTheme /* <default | dark | forest | neutral> */
3941
};
4042

4143
/* Create mermaid tag */
42-
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
44+
const basicList = document.getElementsByClassName('language-mermaid');
45+
[...basicList].forEach((elem) => {
4346
const svgCode = elem.textContent;
4447
const backup = elem.parentElement;
4548
backup.classList.add('unloaded');
@@ -52,7 +55,6 @@
5255
});
5356

5457
mermaid.initialize(mermaidConf);
55-
5658
window.addEventListener('message', updateMermaid);
5759
})();
5860
</script>

‎_includes/sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1 class="site-title">
4444

4545
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
4646
{% unless site.theme_mode %}
47-
<button type="button" class="mode-toggle btn" aria-label="Switch Mode">
47+
<button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
4848
<i class="fas fa-adjust"></i>
4949
</button>
5050

‎_includes/topbar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<i class="fas fa-search fa-fw"></i>
6060
</button>
6161

62-
<search class="align-items-center ms-3 ms-lg-0">
62+
<search id="search" class="align-items-center ms-3 ms-lg-0">
6363
<i class="fas fa-search fa-fw"></i>
6464
<input
6565
class="form-control"

0 commit comments

Comments
 (0)