From 0008731f473c2357cbb3d4d780e799d0248c1de2 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 2 Apr 2024 14:02:45 +0200 Subject: [PATCH 1/5] using a single script --- package.json | 2 +- src/_includes/layouts/base.njk | 3 +- src/_js/legacy.js | 74 ---------------------------------- src/_js/main.mjs | 73 --------------------------------- 4 files changed, 2 insertions(+), 150 deletions(-) delete mode 100644 src/_js/legacy.js delete mode 100644 src/_js/main.mjs diff --git a/package.json b/package.json index 3e7553152..efc6f99ac 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 a06f0e159..7399dd68f 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -53,7 +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/legacy.js deleted file mode 100644 index e7d1a7b70..000000000 --- a/src/_js/legacy.js +++ /dev/null @@ -1,74 +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. - -(function() { - - // Navigation toggle. - var toggle = document.querySelector('#nav-toggle'); - toggle.addEventListener('click', (event) => { - event.preventDefault(); - document.querySelector('header nav').classList.add('show'); - toggle.classList.add('hide'); - }); - - // A user right-clicking the logo probably wants to download it. - if (location.pathname !== '/logo') { - var 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'); - script.src = src; - firstScript.parentNode.insertBefore(script, firstScript); - }; - - // Dynamically insert the Twitter widget if needed. - var twitterTimeline = document.querySelector('.twitter-timeline'); - if (twitterTimeline) { - insertScript('https://platform.twitter.com/widgets.js'); - } - - // 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.indexOf('utm_source') > -1) { - // 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. - var UA_ID = 'UA-65961526-1'; - self.GoogleAnalyticsObject = 'ga'; - self.ga = function() { - ga.q.push(arguments); - }; - ga.l = +new Date(); - ga.q = []; - ga('create', UA_ID, 'auto'); - ga('set', 'referrer', document.referrer.split('?')[0]); - ga('send', 'pageview'); - insertScript('https://www.google-analytics.com/analytics.js'); - -}()); 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); From 39727e85006a48691c7e7ae97fcade47727ed685 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 2 Apr 2024 14:07:00 +0200 Subject: [PATCH 2/5] add main.js script --- src/_js/main.js | 90 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/_js/main.js diff --git a/src/_js/main.js b/src/_js/main.js new file mode 100644 index 000000000..2647e0961 --- /dev/null +++ b/src/_js/main.js @@ -0,0 +1,90 @@ +// 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. + +(function() { + + const darkModeToggle = document.querySelector('dark-mode-toggle'); + if (darkModeToggle) { + // 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'); + toggle.addEventListener('click', (event) => { + event.preventDefault(); + document.querySelector('header nav').classList.add('show'); + toggle.classList.add('hide'); + }); + + // A user right-clicking the logo probably wants to download it. + if (location.pathname !== '/logo') { + let 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]; + let insertScript = (src) => { + let 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'); + if (twitterTimeline) { + insertScript('https://platform.twitter.com/widgets.js'); + } + + // 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.indexOf('utm_source') > -1) { + // 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 = function() { + ga.q.push(arguments); + }; + ga.l = +new Date(); + ga.q = []; + ga('create', UA_ID, 'auto'); + ga('set', 'referrer', document.referrer.split('?')[0]); + ga('send', 'pageview'); + insertScript('https://www.google-analytics.com/analytics.js'); + +}()); From fd8cd655643c10e68c74704ee7e632f160f181d5 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 2 Apr 2024 14:07:51 +0200 Subject: [PATCH 3/5] remove space --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index efc6f99ac..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.js -cm -o dist/_js/main.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", From b665de0e8f6d998f579dd94d993e0cdfdd5a59fb Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 2 Apr 2024 14:08:53 +0200 Subject: [PATCH 4/5] pre-format --- src/_js/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_js/main.js b/src/_js/main.js index 2647e0961..77436382e 100644 --- a/src/_js/main.js +++ b/src/_js/main.js @@ -39,7 +39,7 @@ // A user right-clicking the logo probably wants to download it. if (location.pathname !== '/logo') { - let logo = document.querySelector('#header a'); + const logo = document.querySelector('#header a'); logo.addEventListener('contextmenu', (event) => { event.preventDefault(); self.location = '/logo'; @@ -48,8 +48,8 @@ // Helper function to dynamically insert scripts. const firstScript = document.scripts[0]; - let insertScript = (src) => { - let script = document.createElement('script'); + const insertScript = (src) => { + const script = document.createElement('script'); script.src = src; firstScript.parentNode.insertBefore(script, firstScript); }; From fec68a7224e8a63b1be1671f2b7517abfc7dfd1e Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 2 Apr 2024 14:10:52 +0200 Subject: [PATCH 5/5] further simplify --- src/_includes/layouts/base.njk | 1 - src/_js/main.js | 22 ++++++++++------------ 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 7399dd68f..282a001dd 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -52,7 +52,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/main.js b/src/_js/main.js index 77436382e..011ab23f2 100644 --- a/src/_js/main.js +++ b/src/_js/main.js @@ -14,20 +14,18 @@ (function() { const darkModeToggle = document.querySelector('dark-mode-toggle'); - if (darkModeToggle) { - // 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'); - }; + // 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(); + // 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); - } + // 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');