Style the table at build time to speed up page loading (#4)

This makes the page load in ~500 ms instead of 3 seconds on
Chromium 81 on Linux.
This commit is contained in:
Hugo Locurcio
2020-06-27 00:42:30 +02:00
committed by GitHub
parent 7f457624e3
commit 516670446a
3 changed files with 30 additions and 30 deletions

View File

@@ -12,33 +12,5 @@
</head>
<body>
{{ .Content }}
<script>
// Color percentages in the Overall column depending on completion.
// Fully completed documentations are highlighted with a green background.
// Incomplete documentations have a red background whose opacity depends on the
// percentage (lower is more opaque).
document.querySelectorAll('td:nth-child(9)').forEach(td => {
const percentage = Math.floor(td.innerText.substring(0, td.innerText.length - 1));
if (percentage === 100) {
td.style.backgroundColor = 'hsla(120, 100%, 50%, 0.25)';
} else {
td.style.backgroundColor = `hsla(0, 100%, 50%, ${0.334 - percentage / 300.0})`
}
});
document.querySelectorAll('td:last-child').forEach(td => {
const docLink = td.querySelector('a');
if (docLink) {
// Only keep the last fragment and trim the file extension to make the table less wide.
const docLinkSplit = docLink.innerText.split('/');
const finalText = docLinkSplit[docLinkSplit.length - 1].slice(0, -5);
if (finalText.length >= 1) {
// Don't override the Overall link as it's short enough to be displayed in full.
docLink.innerText = finalText;
}
}
});
</script>
</body>
</html>