Skip to content

fix CLS in the wiki #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix CLS in the wiki #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions modules/nixos-wiki/default.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
40 changes: 40 additions & 0 deletions pages/common.css.wiki
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
}
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand Down