asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

perf(assets): reduce HTTP requests to CDN

Browse source
This commit is contained in:
Cotes Chung 2023-03-23 01:29:17 +08:00
parent 016a9baddd
commit 9d97120197
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
9 changed files with 167 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
_includes/comments/giscus.html
View file

@ -1,44 +1,54 @@
<!-- https://giscus.app/ -->
<script type="text/javascript">
$(function () {
const origin = "https://giscus.app";
const iframe = "iframe.giscus-frame";
const lightTheme = "light";
const darkTheme = "dark_dimmed";
let initTheme = lightTheme;
(function () {
const origin = 'https://giscus.app';
const iframe = 'iframe.giscus-frame';
const lightTheme = 'light';
const darkTheme = 'dark_dimmed';
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
let initTheme = lightTheme;
const html = document.documentElement;
if (
(html.hasAttribute('data-mode') &&
html.getAttribute('data-mode') === 'dark') ||
(!html.hasAttribute('data-mode') &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
initTheme = darkTheme;
}
let giscusAttributes = {
"src": "https://giscus.app/client.js",
"data-repo": "{{ site.comments.giscus.repo}}",
"data-repo-id": "{{ site.comments.giscus.repo_id }}",
"data-category": "{{ site.comments.giscus.category }}",
"data-category-id": "{{ site.comments.giscus.category_id }}",
"data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
"data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
"data-emit-metadata": "0",
"data-theme": initTheme,
"data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
"data-lang": "{{ site.comments.giscus.lang | default: lang }}",
"crossorigin": "anonymous",
"async": ""
src: 'https://giscus.app/client.js',
'data-repo': '{{ site.comments.giscus.repo}}',
'data-repo-id': '{{ site.comments.giscus.repo_id }}',
'data-category': '{{ site.comments.giscus.category }}',
'data-category-id': '{{ site.comments.giscus.category_id }}',
'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
'data-emit-metadata': '0',
'data-theme': initTheme,
'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
crossorigin: 'anonymous',
async: ''
};
let giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
document.getElementById("tail-wrapper").appendChild(giscusScript);
let giscusScript = document.createElement('script');
Object.entries(giscusAttributes).forEach(([key, value]) =>
giscusScript.setAttribute(key, value)
);
document.getElementById('tail-wrapper').appendChild(giscusScript);
addEventListener("message", (event) => {
if (event.source === window && event.data &&
event.data.direction === ModeToggle.ID) {
addEventListener('message', (event) => {
if (
event.source === window &&
event.data &&
event.data.direction === ModeToggle.ID
) {
/* global theme mode changed */
const mode = event.data.message;
const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
const message = {
setConfig: {
@ -49,8 +59,6 @@
const giscus = document.querySelector(iframe).contentWindow;
giscus.postMessage({ giscus: message }, origin);
}
});
});
})();
</script>

2
_includes/head.html
View file

@ -108,8 +108,6 @@
<!-- JavaScript -->
<script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
{% unless site.theme_mode %}
{% include mode-toggle.html %}
{% endunless %}

38
_includes/js-selector.html
View file

@ -1,27 +1,35 @@
<!-- JS selector for site. -->
<!-- commons -->
{% assign urls = site.data.assets[origin].jquery.js
| append: ','
| append: site.data.assets[origin].bootstrap.js
| append: ','
| append: site.data.assets[origin].search.js
%}
<!-- layout specified -->
{% if page.layout == 'post' %}
{% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
<!-- pv-report needs countup.js -->
<script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
{% assign urls = urls | append: ',' | append: site.data.assets[origin].countup.js %}
{% endif %}
{% endif %}
{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
{% assign _urls = site.data.assets[origin].lazysizes.js %}
{% assign urls = urls | append: ',' | append: site.data.assets[origin].lazysizes.js %}
{% unless page.layout == 'home' %}
{% assign _urls = _urls
<!-- image lazy-loading & popup & clipboard -->
{% assign urls = urls
| append: ','
| append: site.data.assets[origin]['magnific-popup'].js
| append: ','
| append: site.data.assets[origin].clipboard.js
%}
{% endunless %}
{% include jsdelivr-combine.html urls=_urls %}
{% endif %}
{% if page.layout == 'home'
@ -32,7 +40,9 @@
%}
{% assign locale = site.lang | split: '-' | first %}
{% assign _urls = site.data.assets[origin].dayjs.js.common
{% assign urls = urls
| append: ','
| append: site.data.assets[origin].dayjs.js.common
| append: ','
| append: site.data.assets[origin].dayjs.js.locale
| replace: ':LOCALE', locale
@ -41,10 +51,18 @@
| append: ','
| append: site.data.assets[origin].dayjs.js.localizedFormat
%}
{% include jsdelivr-combine.html urls=_urls %}
{% endif %}
{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
{% assign urls = urls | append: ',' | append: site.data.assets[origin].toc.js %}
{% endif %}
{% if page.mermaid %}
{% assign urls = urls | append: ',' | append: site.data.assets[origin].mermaid.js %}
{% endif %}
{% include jsdelivr-combine.html urls=urls %}
{% case page.layout %}
{% when 'home', 'categories', 'post', 'page' %}
{% assign type = page.layout %}
@ -80,10 +98,6 @@
<script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
{% endif %}
<!-- commons -->
<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
{% if jekyll.environment == 'production' %}
<!-- PWA -->
{% if site.pwa.enabled %}

6
_includes/jsdelivr-combine.html
View file

@ -5,7 +5,6 @@
{% assign domain = 'https://cdn.jsdelivr.net/' %}
{% for url in urls %}
{% if url contains domain %}
{% assign url_snippet = url | slice: domain.size, url.size %}
@ -16,15 +15,10 @@
{% endif %}
{% elsif url contains '//' %}
<script src="{{ url }}"></script>
{% else %}
<script src="{{ url | relative_url }}"></script>
{% endif %}
{% endfor %}
{% if combined_urls %}

55
_includes/mermaid.html
View file

@ -1,43 +1,37 @@
<!--
mermaid-js loader
-->
<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
<script>
<!-- mermaid-js loader -->
<script type="text/javascript">
(function () {
function updateMermaid(event) {
if (event.source === window && event.data &&
event.data.direction === ModeToggle.ID) {
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
const mode = event.data.message;
if (typeof mermaid === "undefined") {
if (typeof mermaid === 'undefined') {
return;
}
let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
let config = {theme: expectedTheme};
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
let config = { theme: expectedTheme };
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
$(".mermaid").each(function () {
$('.mermaid').each(function () {
let svgCode = $(this).prev().children().html();
$(this).removeAttr("data-processed");
$(this).removeAttr('data-processed');
$(this).html(svgCode);
});
mermaid.initialize(config);
mermaid.init(undefined, ".mermaid");
mermaid.init(undefined, '.mermaid');
}
}
let initTheme = "default";
let initTheme = 'default';
const html = document.documentElement;
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
initTheme = "dark";
if (
(html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
(!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
initTheme = 'dark';
}
let mermaidConf = {
@ -45,15 +39,20 @@
};
/* Create mermaid tag */
$("pre").has("code.language-mermaid").each(function () {
let svgCode = $(this).children().html();
$(this).addClass("unloaded");
$(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
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(mermaidConf);
window.addEventListener("message", updateMermaid);
window.addEventListener('message', updateMermaid);
})();
</script>

61
_includes/mode-toggle.html
View file

@ -1,14 +1,22 @@
<!--
Switch the mode between dark and light.
-->
<!-- Switch the mode between dark and light. -->
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() { return "mode"; }
static get MODE_ATTR() { return "data-mode"; }
static get DARK_MODE() { return "dark"; }
static get LIGHT_MODE() { return "light"; }
static get ID() { return "mode-toggle"; }
static get MODE_KEY() {
return 'mode';
}
static get MODE_ATTR() {
return 'data-mode';
}
static get DARK_MODE() {
return 'dark';
}
static get LIGHT_MODE() {
return 'light';
}
static get ID() {
return 'mode-toggle';
}
constructor() {
if (this.hasMode) {
@ -45,17 +53,29 @@
});
} /* constructor() */
get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
get sysDarkPrefers() {
return window.matchMedia('(prefers-color-scheme: dark)');
}
get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
get isSysDarkPrefer() {
return this.sysDarkPrefers.matches;
}
get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
get isDarkMode() {
return this.mode === ModeToggle.DARK_MODE;
}
get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
get isLightMode() {
return this.mode === ModeToggle.LIGHT_MODE;
}
get hasMode() { return this.mode != null; }
get hasMode() {
return this.mode != null;
}
get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
/* get the current mode on screen */
get modeStatus() {
@ -67,26 +87,29 @@
}
setDark() {
$('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
}
setLight() {
$('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
}
clearMode() {
$('html').removeAttr(ModeToggle.MODE_ATTR);
document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
/* Notify another plugins that the theme mode has changed */
notify() {
window.postMessage({
window.postMessage(
{
direction: ModeToggle.ID,
message: this.modeStatus
}, "*");
},
'*'
);
}
flipMode() {

9
_includes/search-loader.html
View file

@ -16,11 +16,9 @@
{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
<script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
<script>
SimpleJekyllSearch({
/* Note: dependent library will be loaded in `js-selector.html` */
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '{{ '/assets/js/data/search.json' | relative_url }}',
@ -43,6 +41,5 @@ SimpleJekyllSearch({
}
}
}
});
});
</script>

3
_includes/toc.html
View file

@ -10,7 +10,4 @@
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
<nav id="toc"></nav>
</div>
<!-- toc.js will be loaded at medium priority -->
<script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
{% endif %}

14
_layouts/default.html
View file

@ -21,7 +21,6 @@ layout: compress
<body data-topbar-visible="true">
{% include sidebar.html lang=lang %}
{% include topbar.html lang=lang %}
<div id="main-wrapper" class="d-flex justify-content-center">
@ -31,14 +30,9 @@ layout: compress
{% include search-results.html lang=lang %}
</div>
<!-- #main-wrapper -->
{% include footer.html lang=lang %}
{% if page.mermaid %}
{% include mermaid.html %}
{% endif %}
<div id="mask"></div>
<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
@ -72,8 +66,12 @@ layout: compress
</div>
{% endif %}
{% include search-loader.html %}
{% include js-selector.html %}
{% if page.mermaid %}
{% include mermaid.html %}
{% endif %}
{% include search-loader.html %}
</body>
</html>