vimhelp: Add offline light/dark mode support

ychin · ychin · commit e505034d311d · 2023-03-08T01:37:47.000-08:00
Make light/dark mode completely offline, instead of relying on server.
Currently the logic is already almost completely client-side via cookie,
but it sends the requested mode to the server, which pre-generates the
correct version to the client. Instead, we just have a simple JavaScript
to set it on launch. It does mean this won't work on web browsers that
turned off JS, but that's not a big deal.

Also fixed up the way cookies work as it has some special casing to make
sure neo.vimhelp.org and vimhelp.org could share the same cookies, but
that's irrelevant to MacVim's use cases and should be removed.
diff --git a/vimhelp/static/vimhelp-v5.js b/vimhelp/static/vimhelp-v5.js
@@ -40,12 +40,11 @@ for (let theme of ["theme-native", "theme-light", "theme-dark"]) {
         document.getElementsByTagName("html")[0].className = className;
         document.querySelector('meta[name="color-scheme"]').content = meta;
 
-        const cookieDomain = location.hostname.replace(/^neo\./, "");
         const cookieExpiry = theme === "theme-native"
             ? "Tue, 01 Jan 1970 00:00:00 GMT"   // delete cookie
-            : "Tue, 19 Jan 2038 04:14:07 GMT";  // set "permanent" cookie
+            : "Tue, 19 Jan 2050 04:14:07 GMT";  // set "permanent" cookie
         document.cookie =
-            `theme=${className}; Secure; Domain=${cookieDomain}; SameSite=Lax; Path=/; Expires=${cookieExpiry}`;
+            `theme=${className}; Secure; SameSite=Strict; Path=/; Expires=${cookieExpiry}`;
     });
 }
 
diff --git a/vimhelp/templates/page.html b/vimhelp/templates/page.html
@@ -18,6 +18,18 @@
 <link rel="stylesheet" href="{{static_dir}}vimhelp-v5.css" type="text/css">
 <noscript><link rel="stylesheet" href="{{static_dir}}noscript.css" type="text/css"></noscript>
 <script defer src="{{static_dir}}vimhelp-v5.js"></script>
+{# MacVim extension: Offline light/dark mode selection using JavaScript #}
+{% if project.name == 'MacVim' %}
+<script>
+  if (document.cookie.indexOf('theme=light') != -1) {
+    document.getElementsByTagName("html")[0].className = 'light';
+    document.querySelector('meta[name="color-scheme"]').content = 'only light';
+  } else if (document.cookie.indexOf('theme=dark') != -1) {
+    document.getElementsByTagName("html")[0].className = 'dark';
+    document.querySelector('meta[name="color-scheme"]').content = 'only dark';
+  }
+</script>
+{% endif %}
 </head>
 <body>
 
