Add widescreen option, default apply faster

build/fragments/darkmode.js

@@ -68,6 +68,12 @@ const style = `
   }
 `;
 
+const permanentStyle = `
+    body.widescreen {
+        max-width: 100% !important;
+    }
+`
+
 const transitions = `
     .body, div.footer, div.content {
       transition: background-color 0.2s;
@@ -79,13 +85,27 @@ const transitions = `
       transition: background-color 0.2s;
     }
     a.active {
-      transition: background-color 0.2s color 0.2s;
+      transition: background-color 0.2s, color 0.2s;
     }
     .markdown, .markdown .code, .markdown code, .markdown span.key, .markdown h2, .markdown h3, .body-tabs ul li a, .markdown table td, .markdown table th, .member_line, .member_line a.subject, .highlight {
-      transition: background-color 0.2s border 0.2s;
+      transition: background-color 0.2s, border 0.2s;
+    }
+    body {
+        transition: max-width 0.1s;
     }
 `;
 
+function addPermanentStyles() {
+    const head = document.getElementsByTagName("head")[0];
+    if (!head) { return; }
+
+    const styleElement = document.createElement("style");
+    styleElement.id = "dark-mode-permanent";
+    styleElement.type = "text/css";
+    styleElement.innerHTML = permanentStyle;
+    head.appendChild(styleElement);
+}
+
 function addTransitions() {
     const head = document.getElementsByTagName("head")[0];
     if (!head) { return; }
@@ -113,37 +133,69 @@ function removeGlobalStyle() {
     if (style) style.remove();
 }
 
-function setDarkMode(value) {
-    localStorage.setItem("darkMode", value);
+function setSetting(setting, value) {
+    localStorage.setItem(setting, value);
 }
 
-function getDarkMode() {
-    return localStorage.getItem("darkMode");
+function getSetting(setting) {
+    return localStorage.getItem(setting) === "true";
 }
 
-let darkModeEnabled = getDarkMode() === "true";
-
 function checkDarkMode() {
-  if (darkModeEnabled) {
-      addGlobalStyle();
-  } else {
-      removeGlobalStyle();
-  }
+    const darkModeEnabled = getSetting("dark-mode");
+    if (darkModeEnabled) {
+        addGlobalStyle();
+    } else {
+        removeGlobalStyle();
+    }
 }
 
 function toggleDarkMode() {
-    darkModeEnabled = !darkModeEnabled
+    const darkModeEnabled = getSetting("dark-mode");
     if (darkModeEnabled) {
-        setDarkMode("true");
+        setSetting("dark-mode", "false");
     } else {
-        setDarkMode("false");
+        setSetting("dark-mode", "true");
+    }
+
+    requestAnimationFrame(checkDarkMode)
+}
+
+function checkWidescreen() {
+    const widescreenEnabled = getSetting("widescreen");
+    if (widescreenEnabled) {
+        document.body.classList.add("widescreen")
+    } else {
+        document.body.classList.remove("widescreen")
     }
-    checkDarkMode()
+}
+
+function toggleWidescreen() {
+    const widescreenEnabled = getSetting("widescreen");
+    if (widescreenEnabled) {
+        setSetting("widescreen", "false");
+    } else {
+        setSetting("widescreen", "true");
+    }
+
+    requestAnimationFrame(checkWidescreen)
 }
 
 window.addEventListener("load", () => {
-    addTransitions()
     checkDarkMode()
-    const button = document.getElementById("toggle-dark-mode")
-    button.addEventListener("click", toggleDarkMode)
+    checkWidescreen()
+    addPermanentStyles()
+    setTimeout( addTransitions, 500 );
+
+    const darkModeButton = document.getElementById("toggle-dark-mode")
+    darkModeButton.addEventListener("click", (e) => {
+      toggleDarkMode()
+      e.preventDefault()
+    })
+
+    const widescreenButton = document.getElementById("toggle-widescreen")
+    widescreenButton.addEventListener("click", (e) => {
+      toggleWidescreen()
+      e.preventDefault()
+    })
 })

build/setup.ts

@@ -162,10 +162,16 @@ function removeDeadStyles(content: string) {
         return false
     }
 
+    const usesBadStyles = (block: string) => {
+        if (block.startsWith("#sidebar details.level1 > summary")) return true
+        return false
+    }
+
     const shouldKeep = (block: string) => {
         if (isBadMdi(block)) return false
         if (usesDeadClass(block)) return false
         if (isEdit(block)) return false
+        if (usesBadStyles(block)) return false
         return true
     }
 
@@ -199,6 +205,10 @@ function optimizeCss(content: string) {
     content = content.replace(/#sidebar details a {/g, "details[open] a {")
     content = content.replace(/#sidebar details\.level1 > ul > li > a {/g, "details[open].level1 > ul > li > a {")
 
+    // Style fixes
+    content = content.replace(/cursor: hand;/g, "cursor: pointer;")
+    content = content.replace(/\s+-moz-osx-font-smoothing: grayscale;/g, "")
+
     return content
 }
 
@@ -242,9 +252,10 @@ ${content}
 
 async function setupDarkMode($: cheerio.CheerioAPI) {
     const pagelinks = $("ul[id='pagelinks']")
+    pagelinks.append(`<li><button id="toggle-widescreen">Toggle Widescreen</button></li>`)
     pagelinks.append(`<li><button id="toggle-dark-mode">Toggle Dark Mode</button></li>`)
 
-    $(`<script src="/darkmode.js" is:inline></script>`).insertAfter("meta[name='viewport']")
+    $(`<script src="/darkmode.js" is:inline></script>`).insertAfter(".footer[id='pagefooter']")
 
     await fs.copyFile("build/fragments/darkmode.js", "public/darkmode.js")
 }

src/layouts/Layout.astro

@@ -5,7 +5,7 @@ const { title, description, views, updated } = Astro.props;
 ---
 <!DOCTYPE html><html lang="en"><head>
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="/darkmode.js" is:inline=""></script><link rel="preconnect" href="https://i.imgur.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link rel="preconnect" href="https://fonts.googleapis.com">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="preconnect" href="https://i.imgur.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link rel="preconnect" href="https://fonts.googleapis.com">
 	<title>{title}</title>
 	<link rel="stylesheet" href="/styles/gmod.css">
 	<link rel="icon" type="image/png" href="/garry/822e60dc-c931-43e4-800f-cbe010b3d4cc.webp">
@@ -51,7 +51,7 @@ const { title, description, views, updated } = Astro.props;
 
 				<div class="pagetitle" id="tabs_page_title"><a href="/" class="parent">Home</a> / <a href="/">Garry's Mod Wiki</a></div>
 
-				<ul id="pagelinks"><li><button id="toggle-dark-mode">Toggle Dark Mode</button></li></ul>
+				<ul id="pagelinks"><li><button id="toggle-widescreen">Toggle Widescreen</button></li><li><button id="toggle-dark-mode">Toggle Dark Mode</button></li></ul>
 			</div>
 
 		<div class="content">
@@ -63,7 +63,7 @@ const { title, description, views, updated } = Astro.props;
 
 </div>
 
-<div class="footer" id="pagefooter">{views} <br> {updated}</div><div class="markdown">
+<div class="footer" id="pagefooter">{views} <br> {updated}</div><script src="/darkmode.js" is:inline=""></script><div class="markdown">
   <div class="note">
     <div class="inner">
       <p><a target="_blank" href="https://github.com/CFC-Servers/gmodwiki">This site</a> is a community mirror of the <a target="_blank" href="https://wiki.facepunch.com">official Garry's Mod wiki.</a>. This site is not maintained by Facepunch Studios.</p>