From 1ff707cc1f5f5b2a4ec3adba877ef2c6ae02620e Mon Sep 17 00:00:00 2001
From: lassulus <git@lassul.us>
Date: Tue, 12 Aug 2025 16:43:57 +0200
Subject: [PATCH] fix CLS in the wiki

---
 modules/nixos-wiki/default.nix | 11 ++++++++++
 pages/common.css.wiki          | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/modules/nixos-wiki/default.nix b/modules/nixos-wiki/default.nix
index ea7c3b9..f29a651 100644
--- a/modules/nixos-wiki/default.nix
+++ b/modules/nixos-wiki/default.nix
@@ -266,6 +266,17 @@ in
       forceSSL = lib.mkDefault (!cfg.testMode);
       extraConfig = ''
         limit_req zone=ip burst=20 nodelay;
+
+        # Add resource hints for critical assets to reduce CLS
+        add_header Link "</load.php?modules=site.styles&only=styles&skin=vector-2022>; rel=preload; as=style" always;
+        add_header Link "</w/skins/Vector/resources/common/fonts/Nunito-Regular.woff2>; rel=preload; as=font; type=font/woff2; crossorigin" always;
+        add_header Link "</w/skins/Vector/resources/common/fonts/Nunito-Bold.woff2>; rel=preload; as=font; type=font/woff2; crossorigin" always;
+
+        # Enable browser caching for static assets to improve performance
+        location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
+          expires 30d;
+          add_header Cache-Control "public, immutable";
+        }
       '';
       locations."=/nixos.png".alias = ./nixos.png;
       locations."=/favicon.ico".alias = ./favicon.ico;
diff --git a/pages/common.css.wiki b/pages/common.css.wiki
index 9e3dcd3..90a8125 100644
--- a/pages/common.css.wiki
+++ b/pages/common.css.wiki
@@ -1,3 +1,21 @@
+/* Font preloading and optimization for CLS */
+@font-face {
+  font-family: system-ui;
+  font-display: swap; /* Prevents invisible text during font load */
+}
+
+/* Reserve space for common UI elements */
+* {
+  /* Prevent margin collapse that can cause layout shifts */
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+/* Add explicit margins back where needed */
+p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote {
+  margin-block-end: 1em;
+}
+
 :root {
   --home-panel-heading-background: var(--background-color-neutral);
   --home-panel-border-color: var(--border-color-subtle);
@@ -61,6 +79,9 @@ p {
 .infobox {
   margin: auto;
   max-width: 272px;
+  /* Reserve space to prevent layout shift */
+  min-height: 100px;
+  contain: layout style;
 }
 
 @media (min-width: 768px) {
@@ -69,6 +90,9 @@ p {
     min-width: 272px;
     margin-left: 1rem;
     margin-bottom: 1rem;
+    /* Ensure infobox doesn't cause reflow */
+    position: relative;
+    z-index: 1;
   }
 }
 
@@ -104,11 +128,21 @@ p {
 code,
 pre {
   hyphens: none;
+  /* Prevent layout shift from code blocks */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+/* Reserve space for syntax highlighting to prevent shift */
+.mw-highlight {
+  min-height: 1.5em;
 }
 
 .mw-body img {
   max-width: 100%;
   height: auto;
+  /* Prevent layout shift by using aspect-ratio where possible */
+  aspect-ratio: attr(width) / attr(height);
 }
 
 .mw-highlight.mw-highlight {
@@ -178,6 +212,9 @@ html.skin-theme-clientpref-night body.page-NixOS_Wiki p > span.mw-default-size i
   border: 1px solid var(--home-panel-border-color);
   margin-bottom: 1.6rem;
   border-radius: 0.16rem;
+  /* Reserve minimum height to prevent layout shift */
+  min-height: 150px;
+  contain: layout style;
 }
 
 .home-box .panel-heading {
@@ -194,6 +231,9 @@ html.skin-theme-clientpref-night body.page-NixOS_Wiki p > span.mw-default-size i
 
 .table .table {
   border: 1px solid var(--table-border-color);
+  /* Prevent table layout shifts */
+  table-layout: fixed;
+  width: 100%;
 }
 
 .table .table th,