From 516670446acc9e0a8e4ce4998e415fe60337d9c2 Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Sat, 27 Jun 2020 00:42:30 +0200 Subject: [PATCH] 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. --- build.sh | 12 ++++++++++-- layouts/index.html | 28 ---------------------------- static/main.css | 20 ++++++++++++++++++++ 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/build.sh b/build.sh index 1366471..7ad7f25 100755 --- a/build.sh +++ b/build.sh @@ -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:0/0: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]?)%:\1%:g' content/_index.md +# Complete percentages (100%). +sed -Ei 's:100%:100%: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 diff --git a/layouts/index.html b/layouts/index.html index 3da04f6..739ae88 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -12,33 +12,5 @@ {{ .Content }} - - diff --git a/static/main.css b/static/main.css index 593f342..c29203b 100644 --- a/static/main.css +++ b/static/main.css @@ -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)); + } +}