Move all inline style to dedicated endpoint

vmcj · vmcj · commit a0f9cd3f0ae3 · 2024-12-08T22:46:16.000+01:00
We rendered the &lt;style&gt; within the &lt;body&gt; which is not valid. By moving
it to a dedicated endpoint we also save a bit of bandwith as this is
content which stays static during the contest.
diff --git a/.github/jobs/webstandard.sh b/.github/jobs/webstandard.sh
@@ -113,7 +113,7 @@ if [ "$TEST" = "w3cval" ]; then
     unzip -q vnu.linux.zip
     section_end
 
-    FLTR='--filterpattern .*autocomplete.*|.*style.*|.*role=tab.*|.*descendant.*|.*Stray.*|.*attribute.*|.*Forbidden.*|.*stream.*|.*obsolete.*'
+    FLTR='--filterpattern .*autocomplete.*|.*role=tab.*|.*descendant.*|.*Stray.*|.*attribute.*|.*Forbidden.*|.*stream.*|.*obsolete.*'
     for typ in html css svg
     do
         section_start "Analyse with $typ"
diff --git a/webapp/src/Controller/PublicController.php b/webapp/src/Controller/PublicController.php
@@ -100,6 +100,14 @@ public function scoreboardDataZipAction(
         return $this->dj->getScoreboardZip($request, $requestStack, $contest, $this->scoreboardService);
     }
 
+    #[Route(path: '/dynamic-css', name: 'get_dynamic_css')]
+    public function dynamicCSS(): Response {
+        $response = new Response();
+        $response->headers->set('Content-Type', 'text/css');
+        $response->setContent($this->renderView('public/dynamic.css.twig', $this->dj->getDynamicCSS()));
+	return $response;
+    }
+
     /**
      * Get the contest from the request, if any
      */
diff --git a/webapp/src/Service/DOMJudgeService.php b/webapp/src/Service/DOMJudgeService.php
@@ -27,6 +27,7 @@
 use App\Entity\Submission;
 use App\Entity\Team;
 use App\Entity\TeamAffiliation;
+use App\Entity\TeamCategory;
 use App\Entity\Testcase;
 use App\Entity\User;
 use App\Utils\FreezeData;
@@ -1532,6 +1533,15 @@ public function getScoreboardZip(
         return Utils::streamZipFile($tempFilename, 'scoreboard.zip');
     }
 
+    /**
+     * @return array{'backgroundColors', array<TeamCategory>}
+     */
+    public function getDynamicCSS(): array {
+	$backgroundColors = array_map(fn($x) => ( $x->getColor() ?? '#FFFFFF' ), $this->em->getRepository(TeamCategory::class)->findAll());
+	$backgroundColors = array_merge($backgroundColors, ['#FFFF99']);
+	return ['backgroundColors' => $backgroundColors];
+    }
+
     private function allowJudge(ContestProblem $problem, Submission $submission, Language $language, bool $manualRequest): bool
     {
         if (!$problem->getAllowJudge() || !$language->getAllowJudge()) {
diff --git a/webapp/templates/base.html.twig b/webapp/templates/base.html.twig
@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="{{ asset("css/bootstrap.min.css") }}">
     <link rel="stylesheet" href="{{ asset("css/fontawesome-all.min.css") }}">
+    <link rel="stylesheet" href="{{ path('get_dynamic_css') }}">
     <script src="{{ asset("js/jquery.min.js") }}"></script>
     <script src="{{ asset("js/jquery.debounce.min.js") }}"></script>
     <script src="{{ asset("js/bootstrap.bundle.min.js") }}"></script>
diff --git a/webapp/templates/partials/scoreboard_table.html.twig b/webapp/templates/partials/scoreboard_table.html.twig
@@ -578,24 +578,6 @@
     {% endif %}
 {% endif %}
 
-<style>
-    {% for color,i in backgroundColors %}
-        {% set colorClass = color | replace({"#": "_"}) %}
-
-        .cl{{ colorClass }} {
-            background-color: {{ color }};
-        }
-
-        {% set cMin = color|hexColorToRGBA(0) %}
-        {% set cMax = color|hexColorToRGBA(1) %}
-
-        .cl{{ colorClass }} .forceWidth.toolong:after {
-            background: linear-gradient(to right,
-                {{ cMin }} 0%,
-                {{ cMax }} 96%);
-        }
-    {% endfor %}
-</style>
 <script>
     document.querySelectorAll(".forceWidth:not(.toolong)").forEach(el => {
         if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
diff --git a/webapp/templates/public/dynamic.css.twig b/webapp/templates/public/dynamic.css.twig
@@ -0,0 +1,18 @@
+{% autoescape false %}
+{% for i,color in backgroundColors %}
+    {% set colorClass = color | replace({"#": "_"}) %}
+
+    .cl{{ colorClass }} {
+        background-color: {{ color }};
+    }
+
+    {% set cMin = color|hexColorToRGBA(0) %}
+    {% set cMax = color|hexColorToRGBA(1) %}
+
+    .cl{{ colorClass }} .forceWidth.toolong:after {
+        background: linear-gradient(to right,
+            {{ cMin }} 0%,
+            {{ cMax }} 96%);
+    }
+{% endfor %}
+{% endautoescape %}
