implement section helpers. to hoist link tags and defer script

This commit is contained in:
Jelle van Snik 2022-11-07 15:39:30 +01:00
parent 866666c739
commit b10ab1a299
17 changed files with 206 additions and 134 deletions

View File

@ -138,6 +138,12 @@ app.engine('handlebars', handlebars({
},
slug(string) {
return string.toLowerCase().replaceAll(/ /g, '-');
},
section(name, options) {
if (!this._sections) this._sections = {};
if (!this._sections[name]) this._sections[name] = [];
this._sections[name].push(options.fn(this));
return null;
}
}
}));

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/account.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/account.css" />
{{/section}}
{{> header}}
@ -205,4 +207,6 @@
</div>
</div>
<script src="/assets/js/account.js"></script>
{{#section 'foot'}}
<script src="/assets/js/account.js"></script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/login.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/login.css" />
{{/section}}
{{> header}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/miieditor.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/miieditor.css" />
{{/section}}
<div class="miieditor-wrapper">
<svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet">
@ -567,7 +569,9 @@
</div>
</div>
<script id="encodedUserMiiData" type="text/plain">
{{encodedUserMiiData}}
</script>
<script src="/assets/js/miieditor.bundled.js"></script>
{{#section 'foot'}}
<script id="encodedUserMiiData" type="text/plain">
{{encodedUserMiiData}}
</script>
<script src="/assets/js/miieditor.bundled.js"></script>
{{/section}}

View File

@ -1,5 +1,7 @@
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<link rel="stylesheet" href="/assets/css/login.css" />
{{#section 'head'}}
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<link rel="stylesheet" href="/assets/css/login.css" />
{{/section}}
{{> header}}

View File

@ -1,4 +1,7 @@
<link rel="stylesheet" href="/assets/css/upgrade.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/upgrade.css" />
{{/section}}
<div class="wrapper">
<a href="/account" class="back-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
@ -97,14 +100,16 @@
</div>
</div>
<script>
/* this jank is needed to have data mixed in with a localized string */
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${totd}', '{{donationCache.total_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${goald}', '{{donationCache.goal_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${perc}', '{{donationCache.completed_real}}');
</script>
{{#section 'foot'}}
<script>
/* this jank is needed to have data mixed in with a localized string */
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${totd}', '{{donationCache.total_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${goald}', '{{donationCache.goal_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${perc}', '{{donationCache.completed_real}}');
</script>
<script src="/assets/js/upgrade.js" />
<script src="/assets/js/upgrade.js" />
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/blog.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/blog.css" />
{{/section}}
{{> header}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/blogpost.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/blogpost.css" />
{{/section}}
{{> header}}
@ -29,7 +31,9 @@
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
{{#section 'foot'}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{/section}}
<div class="docs-wrapper">
@ -48,9 +50,11 @@
</div>
</div>
<script src="/assets/js/docssidebarhandler.js"></script>
{{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{/section}}
<div class="docs-wrapper">
@ -64,9 +66,11 @@
</div>
</div>
<script src="/assets/js/docssidebarhandler.js"></script>
{{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{/section}}
<div class="docs-wrapper">
@ -53,63 +55,64 @@
</div>
</div>
<script src="/assets/js/docssidebarhandler.js"></script>
{{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<script id="errorList" type="application/json">
{{{errorList}}}
</script>
<script id="errorList" type="application/json">
{{{errorList}}}
</script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script>
// Get the error list from the script tag
let rawErrorList = JSON.parse(document.getElementById('errorList').innerHTML);
<script>
// Get the error list from the script tag
let rawErrorList = JSON.parse(document.getElementById('errorList').innerHTML);
// Convert the error list to a single flat array
rawErrorList = Object.values(rawErrorList).flat();
// Convert the error list to a single flat array
rawErrorList = Object.values(rawErrorList).flat();
// We remove the unknown characters (e.g. the X in JXT-598-2XXX), so fuse.js will be able to match the error codes
const errorList = rawErrorList.map(error => {
return error.replace(/X*$/g, '');
});
// We remove the unknown characters (e.g. the X in JXT-598-2XXX), so fuse.js will be able to match the error codes
const errorList = rawErrorList.map(error => {
return error.replace(/X*$/g, '');
});
const fuse = new Fuse(errorList, {includeMatches: true, threshold: 0.4});
const cleave = new Cleave('input#errorCode', {
delimiter: '-',
blocks: [3, 3, 4],
uppercase: true
});
const fuse = new Fuse(errorList, {includeMatches: true, threshold: 0.4});
const cleave = new Cleave('input#errorCode', {
delimiter: '-',
blocks: [3, 3, 4],
uppercase: true
});
const matchesContainer = document.querySelector('.matches');
const input = document.querySelector('input#errorCode');
const matchesContainer = document.querySelector('.matches');
const input = document.querySelector('input#errorCode');
input.addEventListener('input', (e) => {
const errorCode = e.target.value;
const matches = fuse.search(errorCode);
input.addEventListener('input', (e) => {
const errorCode = e.target.value;
const matches = fuse.search(errorCode);
if (!errorCode) {
matchesContainer.innerHTML = '';
input.classList.remove('has-matches');
return
}
if (!errorCode) {
matchesContainer.innerHTML = '';
input.classList.remove('has-matches');
return
}
matchesContainer.innerHTML = '';
input.classList.add('has-matches');
if (matches.length > 0) {
matches.forEach(match => {
const errorCode = match.item.padEnd(12, 'X');
const matchLink = document.createElement('a');
matchLink.innerText = errorCode;
matchLink.href = `/docs/errors/${errorCode}`;
matchesContainer.appendChild(matchLink);
});
} else {
const noMatch = document.createElement('p');
noMatch.innerText = '{{ locale.docs.search.no_match }}';
matchesContainer.appendChild(noMatch);
}
});
</script>
input.classList.add('has-matches');
if (matches.length > 0) {
matches.forEach(match => {
const errorCode = match.item.padEnd(12, 'X');
const matchLink = document.createElement('a');
matchLink.innerText = errorCode;
matchLink.href = `/docs/errors/${errorCode}`;
matchesContainer.appendChild(matchLink);
});
} else {
const noMatch = document.createElement('p');
noMatch.innerText = '{{ locale.docs.search.no_match }}';
matchesContainer.appendChild(noMatch);
}
});
</script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{/section}}
<div class="docs-wrapper">
@ -92,9 +94,11 @@
</div>
</div>
<script src="/assets/js/docssidebarhandler.js"></script>
{{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script>
{{/section}}

View File

@ -62,6 +62,10 @@
}
</script>
{{#each _sections.head}}
{{{this}}}
{{/each}}
<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "ea6695987d664a7f90874c9c0dee9385"}'></script><!-- End Cloudflare Web Analytics -->
</head>
<body>
@ -72,5 +76,8 @@
<script src="/assets/js/progress-charts.js"></script>
<script src="/assets/js/locale-dropdown-handler.js"></script>
{{#each _sections.foot}}
{{{this}}}
{{/each}}
</body>
</html>

View File

@ -61,6 +61,10 @@
twemoji.parse(document.body, {folder: 'svg', ext: '.svg'});
}
</script>
{{#each _sections.head}}
{{{this}}}
{{/each}}
</head>
<body>
<div class="main-body">
@ -69,5 +73,9 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="/assets/js/progress-charts.js"></script>
{{#each _sections.foot}}
{{{this}}}
{{/each}}
</body>
</html>

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/localization.css" />
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/localization.css" />
{{/section}}
{{> header}}
@ -25,4 +27,6 @@
{{> footer }}
<script src="/assets/js/locale-tester-handler.js" />
{{#section 'foot'}}
<script src="/assets/js/locale-tester-handler.js" />
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/partials/footer.css" /></link>
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/partials/footer.css" />
{{/section}}
<footer>
<div>
@ -62,32 +64,35 @@
</div>
</div>
</footer>
<script>
const bandwidthRaccoon = document.querySelector("footer img.bandwidth-raccoon");
const bandwidthRaccoonWrapper = document.querySelector("footer .bandwidth-raccoon-wrapper");
const bandwidthRaccoonBubbleText = document.querySelector("footer .bandwidth-raccoon-wrapper .text-bubble p");
let i = 0;
function unescapeHTML(string) {
const el = document.createElement("span");
el.innerHTML = string;
return el.innerText;
}
{{#section 'foot'}}
<script>
const bandwidthRaccoon = document.querySelector("footer img.bandwidth-raccoon");
const bandwidthRaccoonWrapper = document.querySelector("footer .bandwidth-raccoon-wrapper");
const bandwidthRaccoonBubbleText = document.querySelector("footer .bandwidth-raccoon-wrapper .text-bubble p");
let i = 0;
const randomSentences = [
{{#each locale.footer.bandwidthRaccoonQuotes}}
`${unescapeHTML("{{this}}")}`,
{{/each}}
]
bandwidthRaccoon.addEventListener("click", () =>
{
bandwidthRaccoonWrapper.classList.add("speak");
if (!randomSentences[i]) {
i = 0
function unescapeHTML(string) {
const el = document.createElement("span");
el.innerHTML = string;
return el.innerText;
}
bandwidthRaccoonBubbleText.innerText = randomSentences[i];
i += 1;
})
</script>
const randomSentences = [
{{#each locale.footer.bandwidthRaccoonQuotes}}
`${unescapeHTML("{{this}}")}`,
{{/each}}
]
bandwidthRaccoon.addEventListener("click", () =>
{
bandwidthRaccoonWrapper.classList.add("speak");
if (!randomSentences[i]) {
i = 0
}
bandwidthRaccoonBubbleText.innerText = randomSentences[i];
i += 1;
})
</script>
{{/section}}

View File

@ -1,4 +1,6 @@
<link rel="stylesheet" href="/assets/css/progress.css">
{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/progress.css">
{{/section}}
{{> header}}
@ -43,12 +45,14 @@
</div>
<script>
/* this jank is needed to have data mixed in with a localized string */
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${totd}', '{{donationCache.total_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${goald}', '{{donationCache.goal_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${perc}', '{{donationCache.completed_real}}');
</script>
{{#section 'foot'}}
<script>
/* this jank is needed to have data mixed in with a localized string */
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${totd}', '{{donationCache.total_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${goald}', '{{donationCache.goal_dollars}}');
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
.replace('${perc}', '{{donationCache.completed_real}}');
</script>
{{/section}}