Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-26 10:04:25 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

implement section helpers. to hoist link tags and defer script

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/server.js
View File

@ -138,6 +138,12 @@ app.engine('handlebars', handlebars({
}, },
slug(string) { slug(string) {
return string.toLowerCase().replaceAll(/ /g, '-'); 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;
} }
} }
})); }));

8
views/account/account.handlebars
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}} {{> header}}
@ -205,4 +207,6 @@
</div> </div>
</div> </div>
<script src="/assets/js/account.js"></script> {{#section 'foot'}}
<script src="/assets/js/account.js"></script>
{{/section}}

4
views/account/login.handlebars
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}} {{> header}}

14
views/account/miieditor.handlebars
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"> <div class="miieditor-wrapper">
<svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet"> <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>
</div> </div>
<script id="encodedUserMiiData" type="text/plain"> {{#section 'foot'}}
{{encodedUserMiiData}} <script id="encodedUserMiiData" type="text/plain">
</script> {{encodedUserMiiData}}
<script src="/assets/js/miieditor.bundled.js"></script> </script>
<script src="/assets/js/miieditor.bundled.js"></script>
{{/section}}

6
views/account/register.handlebars
View File

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

27
views/account/upgrade.handlebars
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"> <div class="wrapper">
<a href="/account" class="back-arrow"> <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> <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>
</div> </div>
<script> {{#section 'foot'}}
/* this jank is needed to have data mixed in with a localized string */ <script>
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML /* this jank is needed to have data mixed in with a localized string */
.replace('${totd}', '{{donationCache.total_dollars}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML .replace('${totd}', '{{donationCache.total_dollars}}');
.replace('${goald}', '{{donationCache.goal_dollars}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML .replace('${goald}', '{{donationCache.goal_dollars}}');
.replace('${perc}', '{{donationCache.completed_real}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
</script> .replace('${perc}', '{{donationCache.completed_real}}');
</script>
<script src="/assets/js/upgrade.js" /> <script src="/assets/js/upgrade.js" />
{{/section}}

4
views/blog/blog.handlebars
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}} {{> header}}

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

16
views/docs/docs.handlebars
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"> <div class="docs-wrapper">
@ -48,9 +50,11 @@
</div> </div>
</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"> <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> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css"> <link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
{{/section}}

16
views/docs/install.handlebars
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"> <div class="docs-wrapper">
@ -64,9 +66,11 @@
</div> </div>
</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"> <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> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css"> <link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
{{/section}}

103
views/docs/search.handlebars
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"> <div class="docs-wrapper">
@ -53,63 +55,64 @@
</div> </div>
</div> </div>
<script src="/assets/js/docssidebarhandler.js"></script> {{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<script id="errorList" type="application/json"> <script id="errorList" type="application/json">
{{{errorList}}} {{{errorList}}}
</script> </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/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/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script> <script>
// Get the error list from the script tag // Get the error list from the script tag
let rawErrorList = JSON.parse(document.getElementById('errorList').innerHTML); let rawErrorList = JSON.parse(document.getElementById('errorList').innerHTML);
// Convert the error list to a single flat array // Convert the error list to a single flat array
rawErrorList = Object.values(rawErrorList).flat(); 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 // 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 => { const errorList = rawErrorList.map(error => {
return error.replace(/X*$/g, ''); return error.replace(/X*$/g, '');
}); });
const fuse = new Fuse(errorList, {includeMatches: true, threshold: 0.4}); const fuse = new Fuse(errorList, {includeMatches: true, threshold: 0.4});
const cleave = new Cleave('input#errorCode', { const cleave = new Cleave('input#errorCode', {
delimiter: '-', delimiter: '-',
blocks: [3, 3, 4], blocks: [3, 3, 4],
uppercase: true uppercase: true
}); });
const matchesContainer = document.querySelector('.matches'); const matchesContainer = document.querySelector('.matches');
const input = document.querySelector('input#errorCode'); const input = document.querySelector('input#errorCode');
input.addEventListener('input', (e) => { input.addEventListener('input', (e) => {
const errorCode = e.target.value; const errorCode = e.target.value;
const matches = fuse.search(errorCode); const matches = fuse.search(errorCode);
if (!errorCode) {
matchesContainer.innerHTML = '';
input.classList.remove('has-matches');
return
}
if (!errorCode) {
matchesContainer.innerHTML = ''; matchesContainer.innerHTML = '';
input.classList.remove('has-matches'); input.classList.add('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>
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}}

16
views/docs/welcome.handlebars
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"> <div class="docs-wrapper">
@ -92,9 +94,11 @@
</div> </div>
</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"> <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> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/css/highlightjs.css"> <link rel="stylesheet" href="/assets/css/highlightjs.css">
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
{{/section}}

7
views/layouts/blog-opengraph.handlebars
View File

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

8
views/layouts/main.handlebars
View File

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

8
views/localization.handlebars
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}} {{> header}}
@ -25,4 +27,6 @@
{{> footer }} {{> footer }}
<script src="/assets/js/locale-tester-handler.js" /> {{#section 'foot'}}
<script src="/assets/js/locale-tester-handler.js" />
{{/section}}

59
views/partials/footer.handlebars
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> <footer>
<div> <div>
@ -62,32 +64,35 @@
</div> </div>
</div> </div>
</footer> </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) { {{#section 'foot'}}
const el = document.createElement("span"); <script>
el.innerHTML = string; const bandwidthRaccoon = document.querySelector("footer img.bandwidth-raccoon");
return el.innerText; 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 randomSentences = [ const el = document.createElement("span");
{{#each locale.footer.bandwidthRaccoonQuotes}} el.innerHTML = string;
`${unescapeHTML("{{this}}")}`, return el.innerText;
{{/each}}
]
bandwidthRaccoon.addEventListener("click", () =>
{
bandwidthRaccoonWrapper.classList.add("speak");
if (!randomSentences[i]) {
i = 0
} }
bandwidthRaccoonBubbleText.innerText = randomSentences[i];
i += 1;
}) const randomSentences = [
</script> {{#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}}

24
views/progress.handlebars
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}} {{> header}}
@ -43,12 +45,14 @@
</div> </div>
<script> {{#section 'foot'}}
/* this jank is needed to have data mixed in with a localized string */ <script>
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML /* this jank is needed to have data mixed in with a localized string */
.replace('${totd}', '{{donationCache.total_dollars}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML .replace('${totd}', '{{donationCache.total_dollars}}');
.replace('${goald}', '{{donationCache.goal_dollars}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML .replace('${goald}', '{{donationCache.goal_dollars}}');
.replace('${perc}', '{{donationCache.completed_real}}'); document.querySelector('.localeReplace').innerHTML = document.querySelector('.localeReplace').innerHTML
</script> .replace('${perc}', '{{donationCache.completed_real}}');
</script>
{{/section}}