Merge legacy.js and main.mjs into main.js

package.json

@@ -5,7 +5,7 @@
     "eleventy": "eleventy",
     "html": "html-minifier-terser --config-file=.html-minifier.json --input-dir=dist --output-dir=dist --file-ext=html",
     "css": "postcss src/_css/main.css --output dist/_css/main.css && postcss src/_css/feature-support.css --output dist/_css/feature-support.css",
-    "js": "shx mkdir -p dist/_js && terser src/_js/main.mjs -cm --module -o dist/_js/main.mjs && terser src/_js/legacy.js -cm -o dist/_js/legacy.js",
+    "js": "shx mkdir -p dist/_js && terser src/_js/main.js -cm -o dist/_js/main.js",
     "json": "json-minify src/.webmanifest > dist/.webmanifest",
     "xml": "minify-xml --in-place dist/sitemap.xml && minify-xml --in-place dist/blog.atom && minify-xml --in-place dist/features.atom",
     "sw": "workbox injectManifest workbox-config.js && terser dist/sw.js -cm -o dist/sw.js",

src/_includes/layouts/base.njk

@@ -53,8 +53,6 @@
       </div>
       <p><small>Except as otherwise noted, any code samples from the V8 project are licensed under <a href="https://chromium.googlesource.com/v8/v8.git/+/main/LICENSE">V8’s BSD-style license</a>. Other content on this page is licensed under <a href="https://creativecommons.org/licenses/by/3.0/">the Creative Commons Attribution 3.0 License</a>. For details, see <a href="/terms#site-policies">our site policies</a>.</small></p>
     </footer>
-    <script type="module" src="/_js/dark-mode-toggle.mjs"></script>
-    <script type="module" src="/_js/main.mjs"></script>
-    <script nomodule src="/_js/legacy.js"></script>
+    <script src="/_js/main.js"></script>
   </body>
 </html>

src/_js/legacy.js → src/_js/main.js

@@ -13,8 +13,22 @@
 
 (function() {
 
+  const darkModeToggle = document.querySelector('dark-mode-toggle');
+  // Toggles the `dark` class based on the dark mode toggle’s mode.
+  const root = document.documentElement;
+  const updateThemeClass = () => {
+    root.classList.toggle('dark', darkModeToggle.mode === 'dark');
+  };
+
+  // Set or remove the `dark` class the first time.
+  updateThemeClass();
+
+  // Listen for toggle changes (which includes `prefers-color-scheme` changes)
+  // and toggle the `dark` class accordingly.
+  darkModeToggle.addEventListener('colorschemechange', updateThemeClass);
+
   // Navigation toggle.
-  var toggle = document.querySelector('#nav-toggle');
+  const toggle = document.querySelector('#nav-toggle');
   toggle.addEventListener('click', (event) => {
     event.preventDefault();
     document.querySelector('header nav').classList.add('show');
@@ -23,23 +37,23 @@
 
   // A user right-clicking the logo probably wants to download it.
   if (location.pathname !== '/logo') {
-    var logo = document.querySelector('#header a');
+    const logo = document.querySelector('#header a');
     logo.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       self.location = '/logo';
     });
   }
 
   // Helper function to dynamically insert scripts.
-  var firstScript = document.scripts[0];
-  var insertScript = (src) => {
-    var script = document.createElement('script');
+  const firstScript = document.scripts[0];
+  const insertScript = (src) => {
+    const script = document.createElement('script');
     script.src = src;
     firstScript.parentNode.insertBefore(script, firstScript);
   };
 
   // Dynamically insert the Twitter widget if needed.
-  var twitterTimeline = document.querySelector('.twitter-timeline');
+  const twitterTimeline = document.querySelector('.twitter-timeline');
   if (twitterTimeline) {
     insertScript('https://platform.twitter.com/widgets.js');
   }
@@ -59,7 +73,7 @@
   }
 
   // Google Analytics.
-  var UA_ID = 'UA-65961526-1';
+  const UA_ID = 'UA-65961526-1';
   self.GoogleAnalyticsObject = 'ga';
   self.ga = function() {
     ga.q.push(arguments);