Revert "Merge legacy.js and main.mjs into main.js (#755)"

This reverts commit 3f113cb.

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.js -cm -o dist/_js/main.js",
+    "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",
     "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,6 +53,8 @@
       </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 src="/_js/main.js"></script>
+    <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>
   </body>
 </html>

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

@@ -13,22 +13,8 @@
 
 (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.
-  const toggle = document.querySelector('#nav-toggle');
+  var toggle = document.querySelector('#nav-toggle');
   toggle.addEventListener('click', (event) => {
     event.preventDefault();
     document.querySelector('header nav').classList.add('show');
@@ -37,23 +23,23 @@
 
   // A user right-clicking the logo probably wants to download it.
   if (location.pathname !== '/logo') {
-    const logo = document.querySelector('#header a');
+    var logo = document.querySelector('#header a');
     logo.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       self.location = '/logo';
     });
   }
 
   // Helper function to dynamically insert scripts.
-  const firstScript = document.scripts[0];
-  const insertScript = (src) => {
-    const script = document.createElement('script');
+  var firstScript = document.scripts[0];
+  var insertScript = (src) => {
+    var script = document.createElement('script');
     script.src = src;
     firstScript.parentNode.insertBefore(script, firstScript);
   };
 
   // Dynamically insert the Twitter widget if needed.
-  const twitterTimeline = document.querySelector('.twitter-timeline');
+  var twitterTimeline = document.querySelector('.twitter-timeline');
   if (twitterTimeline) {
     insertScript('https://platform.twitter.com/widgets.js');
   }
@@ -73,7 +59,7 @@
   }
 
   // Google Analytics.
-  const UA_ID = 'UA-65961526-1';
+  var UA_ID = 'UA-65961526-1';
   self.GoogleAnalyticsObject = 'ga';
   self.ga = function() {
     ga.q.push(arguments);

src/_js/main.mjs

@@ -0,0 +1,73 @@
+// Copyright 2018 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the “License”);
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// <https://apache.org/licenses/LICENSE-2.0>.
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an “AS IS” BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+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.
+const navToggle = document.querySelector('#nav-toggle');
+navToggle.addEventListener('click', (event) => {
+  event.preventDefault();
+  document.querySelector('header nav').classList.add('show');
+  navToggle.classList.add('hide');
+});
+
+// A user right-clicking the logo probably wants to download it.
+if (location.pathname !== '/logo') {
+  const logo = document.querySelector('#header a');
+  logo.addEventListener('contextmenu', (event) => {
+    event.preventDefault();
+    self.location = '/logo';
+  });
+}
+
+// Install our service worker.
+if ('serviceWorker' in navigator) {
+  addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js');
+  });
+}
+
+// Remove UTM garbage from URLs, to make it less likely such links get shared.
+if (location.search.includes('utm_source')) {
+  // This site doesn’t use query string parameters anyway, so we can just
+  // set the location to `location.pathname` directly.
+  history.replaceState({}, '', location.pathname);
+}
+
+// Google Analytics.
+const UA_ID = 'UA-65961526-1';
+self.GoogleAnalyticsObject = 'ga';
+self.ga = (...args) => {
+  ga.q.push(args);
+};
+ga.l = Date.now();
+ga.q = [];
+ga('create', UA_ID, 'auto');
+ga('set', 'referrer', document.referrer.split('?')[0]);
+ga('send', 'pageview');
+const gaScript = document.createElement('script');
+gaScript.src = 'https://www.google-analytics.com/analytics.js';
+document.head.appendChild(gaScript);