From c992afdfa00b0f2bcdb71ab256002c0db054a6d6 Mon Sep 17 00:00:00 2001
From: saturn <saturn@glxl.net>
Date: Thu, 20 Apr 2023 02:34:09 -0500
Subject: [PATCH] New dark mode implementation, part 1.

---
 lw2-viewer.asd      |  2 +-
 lw2.lisp            |  3 +-
 src/clean-html.lisp |  1 +
 src/images.lisp     |  7 ++---
 src/resources.lisp  | 74 +++++++++++++++++++++++++++++++++++++++++--------
 www/head.js         |  2 +-
 www/script.js       | 79 +++++++++++++++++++++++++++++++----------------------
 7 files changed, 118 insertions(+), 50 deletions(-)

diff --git a/lw2-viewer.asd b/lw2-viewer.asd
index fc1ed92e..7d346164 100644
--- a/lw2-viewer.asd
+++ b/lw2-viewer.asd
@@ -45,7 +45,7 @@
 			     (:static-file "../text-clean-regexps.js")
 			     (:static-file "../html-clean-regexps.js")
 			     (:file "colors" :depends-on ("utils"))
-			     (:file "images" :depends-on ("conditions" "html-reader" "utils" "lmdb" "backend" "legacy-archive"))
+			     (:file "images" :depends-on ("conditions" "html-reader" "utils" "lmdb" "backend" "legacy-archive" "resources"))
 			     (:file "elicit-predictions" :depends-on ("utils" "html-reader" "backend" "graphql"))
                              (:file "clean-html" :depends-on ("utils" "links" "lmdb" "backend" "context" "sites" "conditions" "colors" "images" "elicit-predictions" "../text-clean-regexps.js" "../html-clean-regexps.js"))
                              (:file "lw2-login" :depends-on ("utils" "backend" "backend-modules" "context"))
diff --git a/lw2.lisp b/lw2.lisp
index 56535026..023a06fb 100644
--- a/lw2.lisp
+++ b/lw2.lisp
@@ -869,7 +869,8 @@ signaled condition to *HTML-OUTPUT*."
 		(t
 		 (values t nil)))
 	(when (not *revalidate-default*)
-	  (setf (hunchentoot:header-out :cache-control) (format nil "public, max-age=~A" (* 5 60))))
+	  (setf (hunchentoot:header-out :cache-control) (format nil "public, max-age=~A" (* 5 60))
+		(hunchentoot:header-out :vary) "cookie"))
 	(when (site-domain *current-site*)
 	  (setf (hunchentoot:header-out :origin-agent-cluster) "?0")) ; Allow document.domain in Chrome: https://developer.chrome.com/blog/immutable-document-domain/
 	(let ((*memoized-output-without-hyphens*
diff --git a/src/clean-html.lisp b/src/clean-html.lisp
index c9c17715..87802d9d 100644
--- a/src/clean-html.lisp
+++ b/src/clean-html.lisp
@@ -1107,6 +1107,7 @@
 	    (with-output-to-string (out-stream out-string)
 	      (style-hash-to-html style-hash out-stream)
 	      (when (> (hash-table-count used-colors) 0)
+		#.(warn "need to finish updating this for the new dark mode system")
 		(format out-stream "<style>~%:root {~%")
 		(maphash (lambda (name rgba-list)
 			   (declare (ignore rgba-list))
diff --git a/src/images.lisp b/src/images.lisp
index 3a9020a5..c137010b 100644
--- a/src/images.lisp
+++ b/src/images.lisp
@@ -208,14 +208,13 @@
 	      (predicate (lambda (attr) (string-equal attr "alt"))))
 	  (cond
 	    (inverted-uri
-	     (format stream "<picture style='display: var(--invertible-display)' data-original-src='~A'><source srcset='~A' media='(prefers-color-scheme: dark)'><img src='~A' loading='lazy'"
+	     (format stream "<picture class='invertible' data-original-src='~A'><source srcset='~A' media='~A'><img src='~A' loading='lazy'"
 		      encoded-uri
 		      inverted-uri
+		      (lw2.resources:inverted-media-query)
 		      (or proxy-uri encoded-uri))
 	     (finish-tag img-attributes predicate stream)
-	     (format stream "</picture><img style='display: var(--inverted-display)' loading='lazy' src='~A'"
-		     inverted-uri)
-	     (finish-tag img-attributes predicate stream))
+	     (format stream "</picture>"))
 	    (:otherwise
 	      (format stream "<img src='~A' data-original-src='~A' loading='lazy'"
 		      (or proxy-uri encoded-uri) encoded-uri)
diff --git a/src/resources.lisp b/src/resources.lisp
index 27de0949..6625b45c 100644
--- a/src/resources.lisp
+++ b/src/resources.lisp
@@ -1,7 +1,7 @@
 (uiop:define-package #:lw2.resources
   (:use #:cl #:iterate #:lw2-viewer.config #:lw2.utils #:lw2.sites #:lw2.context)
   (:import-from #:alexandria #:with-gensyms #:when-let #:appendf)
-  (:export #:*page-resources* #:with-page-resources #:require-resource #:generate-versioned-link #:with-resource-bindings #:call-with-fonts-source-resources #:site-resources)
+  (:export #:*page-resources* #:inverted-media-query #:with-page-resources #:require-resource #:generate-versioned-link #:with-resource-bindings #:call-with-fonts-source-resources #:site-resources)
   (:recycle #:lw2-viewer)
   (:unintern #:fonts-source-resources))
 
@@ -15,6 +15,12 @@
 
 (defparameter *push-option* nil)
 
+(defun inverted-media-query ()
+  (alexandria:switch ((hunchentoot:cookie-in "dark-mode") :test #'string-equal)
+		     ("dark" "all")
+		     ("light" "not all")
+		     (t "all and (prefers-color-scheme: dark)")))
+
 (defmacro with-page-resources (&body body)
   `(let* ((*link-header* *link-header*)
 	  (*style-tags* *style-tags*)
@@ -37,7 +43,8 @@
 
 (defun generate-versioned-link (file)
   (let* ((filename (format nil "www~A" file)))
-    (format nil "~A?v=~A" file (universal-time-to-unix (file-write-date filename)))))
+    (or (ignore-errors (format nil "~A?v=~A" file (universal-time-to-unix (file-write-date filename))))
+	file)))
 
 (defgeneric call-with-fonts-source-resources (site fn))
 
@@ -106,18 +113,18 @@
 (defgeneric site-resources (site)
   (:method-combination append :most-specific-first)
   (:method append ((s site))
-    (labels ((gen-inner (theme os &optional dark-preference)
-	       (with-resource-bindings ((:style (format nil "/css/style~@[-~A~].~A.css" theme os)
-						(if dark-preference "(prefers-color-scheme: dark)")
-						"theme"))))
-	     (gen-theme (theme os)
-	       (if theme
-		   (gen-inner theme os)
-		   (progn (gen-inner nil os)
-			  (gen-inner "dark" os t)))))
+    (labels ((gen-theme (theme os)
+	       (let* ((basename (format nil "~@[-~A~].~A.css" theme os))
+		      (filename (format nil "www/css/style~A" basename))
+		      (version (universal-time-to-unix (file-write-date filename)))
+		      (baseurl (format nil "~A?v=~A" basename version)))
+		 (with-resource-bindings ((:style (format nil "/generated-css/style~A" baseurl) nil "theme")
+					  (:style (format nil "/generated-css/colors~A" baseurl) nil "theme light-mode")
+					  (:style (format nil "/generated-css/inverted~A" baseurl) (inverted-media-query) "theme dark-mode"))))))
       (let* ((ua (hunchentoot:header-in* :user-agent))
 	     (theme (or (and *preview* (nonempty-string (hunchentoot:get-parameter "theme")))
 			(nonempty-string (hunchentoot:cookie-in "theme"))))
+	     (theme (if (string= theme "default") nil theme))
 	     (os (cond ((search "Windows" ua) "windows")
 		       ((search "Mac OS" ua) "mac")
 		       (t "linux"))))
@@ -156,3 +163,48 @@
 		(hunchentoot:handle-static-file file content-type))
 	      t)))
     nil)
+
+(defun output-tweakable-css (file out-stream)
+  (with-open-file (in-stream file)
+    (lw2.colors::rewrite-css-colors in-stream out-stream
+				    (lambda (color-string)
+				      (format nil "var(--theme-color-~A)"
+					      (multiple-value-call #'lw2.colors::safe-color-name (lw2.colors::decode-css-color color-string)))))))
+
+(defun output-css-colors (file out-stream invert)
+  (let ((used-colors (make-hash-table :test 'equal)))
+    (with-open-file (in-stream file)
+      (format out-stream ":root {~%")
+      (loop for in-line = (read-line in-stream nil)
+	 while in-line
+	 do (ppcre:do-matches-as-strings (color-string lw2.colors::-css-color-scanner- in-line)
+	      (multiple-value-bind (r g b a) (lw2.colors::decode-css-color color-string)
+		(let ((color-name (lw2.colors::safe-color-name r g b a)))
+		  (unless (gethash color-name used-colors)
+		    (setf (gethash color-name used-colors) t)
+		    (format out-stream "--theme-color-~A: ~A;~%"
+			    color-name
+			    (if invert
+				(multiple-value-call #'lw2.colors::encode-css-color (lw2.colors::perceptual-invert-rgba r g b a))
+				color-string)))))))
+      (format out-stream "}~%"))))
+
+(hunchentoot:define-easy-handler
+    (view-generated-css
+     :uri (lambda (r)
+	    (let ((regs (nth-value 1 (ppcre:scan-to-strings "^/generated-css/(style|colors|inverted)([-.][a-z.-]+)$" (hunchentoot:script-name r)))))
+	      (when (= (length regs) 2)
+		(setf (hunchentoot:header-out "Content-Type") "text/css")
+		(when (assoc "v" (hunchentoot:get-parameters r) :test #'string=)
+		  (setf (hunchentoot:header-out "Cache-Control") #.(format nil "public, max-age=~A, immutable" (- (expt 2 31) 1))))
+		(let ((file (format nil "www/css/style~A" (aref regs 1)))
+		      (out-stream (flex:make-flexi-stream (hunchentoot:send-headers) :external-format :utf-8)))
+		(cond
+		  ((string= (aref regs 0) "style")
+		   (output-tweakable-css file out-stream))
+		  ((string= (aref regs 0) "colors")
+		   (output-css-colors file out-stream nil))
+		  ((string= (aref regs 0) "inverted")
+		   (output-css-colors file out-stream t))))
+		t))))
+    nil)
diff --git a/www/head.js b/www/head.js
index 03339541..3ee4cfc6 100644
--- a/www/head.js
+++ b/www/head.js
@@ -168,7 +168,7 @@ function readCookie(name) {
 function newElement(tagName, attributes = { }, properties = { }) {
 	let element = document.createElement(tagName);
 	for (const attrName in attributes)
-		if (attributes.hasOwnProperty(attrName))
+		if (attributes.hasOwnProperty(attrName) && attributes[attrName] !== null)
 			element.setAttribute(attrName, attributes[attrName]);
 	for (const propName in properties)
 		if (properties.hasOwnProperty(propName))
diff --git a/www/script.js b/www/script.js
index c7fe477e..2ddfd03f 100644
--- a/www/script.js
+++ b/www/script.js
@@ -1283,7 +1283,7 @@ DarkMode = {
     /*  Returns current (saved) mode (light, dark, or auto).
      */
     getSavedMode: () => {
-        return (localStorage.getItem("dark-mode-setting") || "auto");
+        return (readCookie("dark-mode") || "auto");
     },
 
 	/*	Saves specified mode (light, dark, or auto).
@@ -1292,9 +1292,19 @@ DarkMode = {
 		GWLog("DarkMode.setMode");
 
 		if (mode == "auto")
-			localStorage.removeItem("dark-mode-setting");
+			setCookie("dark-mode", "");
 		else
-			localStorage.setItem("dark-mode-setting", mode);
+			setCookie("dark-mode", mode);
+	},
+
+	getMediaQuery: (selectedMode = DarkMode.getSavedMode()) => {
+		if (selectedMode == "auto") {
+			return "all and (prefers-color-scheme: dark)";
+		} else if (selectedMode == "dark") {
+			return "all";
+		} else {
+			return "not all";
+		}
 	},
 
 	/*  Set specified color mode (light, dark, or auto).
@@ -1302,17 +1312,16 @@ DarkMode = {
 	setMode: (selectedMode = DarkMode.getSavedMode()) => {
 		GWLog("DarkMode.setMode");
 
-		//	The style block should be inlined (and already loaded).
-		let darkModeStyles = document.querySelector("#inlined-dark-mode-styles");
+		let media = DarkMode.getMediaQuery(selectedMode);
+		let darkModeStyles = document.querySelector("link.dark-mode");
 		if (darkModeStyles) {
 			//	Set `media` attribute of style block to match requested mode.
-			if (selectedMode == "auto") {
-				darkModeStyles.media = "all and (prefers-color-scheme: dark)";
-			} else if (selectedMode == "dark") {
-				darkModeStyles.media = "all";
-			} else {
-				darkModeStyles.media = "not all";
-			}
+			darkModeStyles.media = media;
+		}
+
+		for(elem of document.querySelectorAll("picture.invertible source")) {
+			// Update invertible images.
+			elem.media = media;
 		}
 
 		//	Update state.
@@ -1486,19 +1495,22 @@ Appearance = { ...Appearance,
 		given theme name and color scheme preference (i.e., value for the 
 		‘media’ attribute; may be “light”, “dark”, or “” [empty string]).
 	 */
-	makeNewStyle: (newThemeName, colorSchemePreference) => {
+	makeNewStyle: (newThemeName) => {
 		let styleSheetNameSuffix = newThemeName == Appearance.defaultTheme
 								   ? "" 
 								   : ("-" + newThemeName);
 		let currentStyleSheetNameComponents = /style[^\.]*(\..+)$/.exec(query("head link[href*='.css']").href);
 
-		let newStyle = newElement("LINK", {
-			"class": "theme",
-			"rel": "stylesheet",
-			"href": ("/css/style" + styleSheetNameSuffix + currentStyleSheetNameComponents[1]),
-			"media": (colorSchemePreference ? ("(prefers-color-scheme: " + colorSchemePreference + ")") : "")
+		return [["style", "theme"], ["colors", "theme light-mode"], ["inverted", "theme dark-mode", DarkMode.getMediaQuery()]].map(args => {
+			let [baseName, className, mediaQuery] = args;
+			return newElement("LINK", {
+				"class": className,
+				"rel": "stylesheet",
+				"href": ("/generated-css/" + baseName + styleSheetNameSuffix + currentStyleSheetNameComponents[1]),
+				"media": mediaQuery || null,
+				"blocking": "render"
+			});
 		});
-		return newStyle;
 	},
 
 	setTheme: (newThemeName, save = true) => {
@@ -1540,26 +1552,28 @@ Appearance = { ...Appearance,
 				Appearance.saveCurrentTheme();
 		}
 
-		let newMainStyle, newStyles;
-		if (newThemeName === Appearance.defaultTheme) {
-			newStyles = [ Appearance.makeNewStyle("dark", "dark"), Appearance.makeNewStyle(Appearance.defaultTheme, "light") ];
-			newMainStyle = (window.matchMedia("prefers-color-scheme: dark").matches ? newStyles[0] : newStyles[1]);
-		} else {
-			newStyles = [ Appearance.makeNewStyle(newThemeName) ];
-			newMainStyle = newStyles[0];
-		}
+		let newStyles = Appearance.makeNewStyle(newThemeName);
+		let loadingStyleCount = newStyles.length;
 
 		let oldStyles = queryAll("head link.theme");
-		newMainStyle.addEventListener("load", (event) => { oldStyles.forEach(x => removeElement(x)); });
-		newMainStyle.addEventListener("load", (event) => { Appearance.postSetThemeHousekeeping(oldThemeName, newThemeName); });
+
+		let onNewStylesLoaded = (event) => {
+			loadingStyleCount--;
+			if(loadingStyleCount === 0) {
+				for(oldStyle of oldStyles) removeElement(oldStyle);
+				Appearance.postSetThemeHousekeeping(oldThemeName, newThemeName);
+			}
+		};
+
+		for(newStyle of newStyles) newStyle.addEventListener("load", onNewStylesLoaded);
 
 		if (Appearance.adjustmentTransitions) {
 			pageFadeTransition(false);
 			setTimeout(() => {
-				newStyles.forEach(newStyle => document.head.insertBefore(newStyle, oldStyles[0].nextSibling));
+				document.head.prepend(...newStyles);
 			}, 500);
 		} else {
-			newStyles.forEach(newStyle => document.head.insertBefore(newStyle, oldStyles[0].nextSibling));
+			document.head.prepend(...newStyles);
 		}
 
 		//	Update UI state of all theme selectors.
@@ -2339,6 +2353,7 @@ Appearance = { ...Appearance,
 		// Here we find out what is the actual background color that will be visible behind
 		// the body text of posts, and set the sample text’s background to that.
 		let findStyleBackground = (selector) => {
+			return "#fff"; // FIXME
 			let x;
 			Array.from(query("link[rel=stylesheet]").sheet.cssRules).forEach(rule => {
 				if (rule.selectorText == selector)
@@ -3550,7 +3565,7 @@ function addCommentParentPopups() {
 						popupTarget = popupTarget.replace(/#comment-/, "/comment/");
 					}
 					// 'theme' attribute is required for proper caching
-					popup.setAttribute("src", popupTarget + (popupTarget.match(/\?/) ? '&' : '?') + "format=preview&theme=" + (readCookie('theme') || 'default'));
+					popup.setAttribute("src", popupTarget + (popupTarget.match(/\?/) ? '&' : '?') + "format=preview");
 					popup.addClass("preview-popup");
 					
 					let linkRect = linkTag.getBoundingClientRect();
-- 
2.11.4.GIT