diff --git a/package.json b/package.json index 3e7553152..2524aa553 100644 --- a/package.json +++ b/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", diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index a5a80eb27..375f0aa67 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -53,8 +53,6 @@

Except as otherwise noted, any code samples from the V8 project are licensed under V8’s BSD-style license. Other content on this page is licensed under the Creative Commons Attribution 3.0 License. For details, see our site policies.

- - - + diff --git a/src/_js/legacy.js b/src/_js/main.js similarity index 70% rename from src/_js/legacy.js rename to src/_js/main.js index e7d1a7b70..011ab23f2 100644 --- a/src/_js/legacy.js +++ b/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,7 +37,7 @@ // 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'; @@ -31,15 +45,15 @@ } // 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); diff --git a/src/_js/main.mjs b/src/_js/main.mjs deleted file mode 100644 index 315349877..000000000 --- a/src/_js/main.mjs +++ /dev/null @@ -1,73 +0,0 @@ -// 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 -// . -// -// 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);