site-root: randomize the order of the company logos

We don't want to endorse any brand more than any other, so randomize the
logos.

We use Hugo to randomize the order every build. Also in CSS the order is
randomized using a seed and some math. And in JS we set that set every
time the page reloads.

Signed-off-by: Toon Claes <[email protected]>

Author: To1ne

assets/sass/front-page.scss

@@ -199,6 +199,18 @@ $monitor-height: 271px;
   }
 }
 
+@property --floor {
+  syntax: '<integer>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --seed {
+  syntax: '<integer>';
+  initial-value: #{random(1000)};
+  inherits: true;
+}
+
 #companies-projects {
   border-top: solid 1px var(--base-border-color);
 
@@ -212,6 +224,18 @@ $monitor-height: 271px;
 
     li {
       margin: 1em 2em;
+
+      $num: 11;
+      $prime: 97;
+
+      @for $i from 1 through $num {
+        &:nth-child(#{$i}) {
+          --prod: calc(var(--seed) * #{$i} * #{$prime});
+          --floor: calc((var(--prod) / #{$num}) - 0.5);
+
+          order: calc(var(--prod) - (#{$num} * var(--floor)));
+        }
+      }
     }
 
     a {

layouts/partials/site-root.html

@@ -60,11 +60,19 @@ <h3>Community</h3>
 <section id="companies-projects">
   <h3 class="text-center">Products providing Git hosting</h3>
   <ul>
-    <li><a href="https://gitlab.com">{{ partial "company-svg" "company-project-logos/gitlab" }}</a></li>
-    <li><a href="https://github.com">{{ partial "company-svg" "company-project-logos/github" }}</a></li>
-    <li><a href="https://forgejo.org">{{ partial "company-svg" "company-project-logos/forgejo" }}</a></li>
-    <li><a href="https://codeberg.org">{{ partial "company-svg" "company-project-logos/codeberg" }}</a></li>
-    <li><a href="https://sourcehut.org">{{ partial "company-svg" "company-project-logos/sourcehut" }}</a></li>
-    <li><a href="https://gitea.com">{{ partial "company-svg" "company-project-logos/gitea" }}</a></li>
+    {{ $m := slice
+    (dict "name" "gitlab" "url" "https://gitlab.com")
+    (dict "name" "github" "url" "https://github.com")
+    (dict "name" "forgejo" "url" "https://forgejo.org")
+    (dict "name" "codeberg" "url" "https://codeberg.org")
+    (dict "name" "sourcehut" "url" "https://sourcehut.org")
+    (dict "name" "gitea" "url" "https://gitea.com")
+    }}
+    {{ range shuffle $m }}
+    <li><a href="{{ .url }}">{{ partial "company-svg" (printf "company-project-logos/%s" .name) }}</a></li>
+    {{ end }}
   </ul>
+  <script type="text/javascript">
+    document.getElementById("companies-projects").style.setProperty("--seed", Math.floor(Math.random() * 1000));
+  </script>
 </section>