godotengine/doc-status
1
0
Fork 0
mirror of https://github.com/godotengine/doc-status.git synced 2025-12-31 13:48:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

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

12
build.sh
View File

@@ -34,10 +34,18 @@ EOF
# Ensure that module documentation is also included in the report.
python3 "$TMP/doc/tools/doc_status.py" -u "$TMP/doc/classes" "$TMP"/modules/*/doc_classes | tail -n +2 >> content/_index.md
# Fade out `0/0` completion ratios as they can't be completed (there's nothing
# to document).
# Fade out `0/0` completion ratios as they can't be completed (there's nothing to document).
sed -i 's:0/0:<span style="opacity\: 0.5">0/0</span>:g' content/_index.md
# Add classes for completion percentages to style them for easier visual grepping.
# Incomplete percentages (0-99%).
sed -Ei 's:\s([0-9][0-9]?)%:<span class="completion-incomplete" style="--percentage\: \1">\1%</span>:g' content/_index.md
# Complete percentages (100%).
sed -Ei 's:100%:<span class="completion-complete">100%</span>:g' content/_index.md
# Shorten class links' text to decrease the table's width.
sed -Ei 's:(https\:.+(class_.+)\.html):[\2](\1):g' content/_index.md
# Build the website with optimizations enabled.
hugo --minify

28
layouts/index.html
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>

20
static/main.css
View File

@@ -2,6 +2,7 @@
--body-background-color: hsl(0, 0%, 100%);
--body-color: hsl(0, 0%, 25%);
--link-color: hsl(210, 90%, 50%);
--completion-complete-color: hsl(125, 60%, 35%);
}
@media (prefers-color-scheme: dark) {
@@ -9,6 +10,7 @@
--body-background-color: hsl(0, 0%, 20%);
--body-color: hsl(0, 0%, 85%);
--link-color: hsl(210, 100%, 80%);
--completion-complete-color: hsl(125, 50%, 65%);
}
}
@@ -62,3 +64,21 @@ td:first-child {
font-weight: bold;
text-align: right;
}
.completion-complete {
color: var(--completion-complete-color);
}
/* Dynamic coloring depending on the completion percentage. */
/* Will be fully red at (roughly) 50% completion, and black/white (depending on the theme) at 99%. */
.completion-incomplete {
font-weight: bold;
color: rgb(calc(320 - calc(var(--percentage) * 3.2)), 64, 64);
}
@media (prefers-color-scheme: dark) {
.completion-incomplete {
--green-blue: calc(80 + calc(var(--percentage) * 2));
color: rgb(255, var(--green-blue), var(--green-blue));
}
}