From 1e7c5e0dde54cc3bc6e056b4f9c2b86540b7e6b9 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@grasppe.com>
Date: Thu, 7 Nov 2019 06:48:47 -0500
Subject: [PATCH 01/11] refactor: Swap to @smotaal.io/dark-mode-controller NPM

> **Note**: This commit squashed earlier attempts to use GitHub Pakcage Registery since it required an authority token.
---
 .npmrc                                        |   3 +
 .nvmrc                                        |   1 -
 package.json                                  |   1 +
 src/components/controls.tsx                   |  14 +-
 src/components/header.tsx                     |  31 ++--
 src/components/layout.tsx                     |   9 +-
 src/util/DarkModeController.js                | 161 ------------------
 src/util/darkModeController.ts                |  15 ++
 .../__snapshots__/header.test.tsx.snap        |   1 -
 yarn.lock                                     |   5 +
 10 files changed, 48 insertions(+), 193 deletions(-)
 create mode 100644 .npmrc
 delete mode 100644 .nvmrc
 delete mode 100644 src/util/DarkModeController.js
 create mode 100644 src/util/darkModeController.ts

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000..dbfc35fec2
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+always-auth=true
+registry=https://npm.pkg.github.com/smotaal/
+//npm.pkg.github.com/smotaal/:_authToken=a7653bd26ff93879e33d4cfb4a5dc9eb831617fe
diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 3f6c11fc18..0000000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v8.12.0
\ No newline at end of file
diff --git a/package.json b/package.json
index 8ad059edd6..59d7e4d3e6 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "author": "Adam Miller <ammiller@linkedin.com>",
   "private": true,
   "dependencies": {
+    "@smotaal.io/dark-mode-controller": "*",
     "@emotion/core": "^10.0.7",
     "@types/react-helmet": "^5.0.7",
     "dotenv": "^6.0.0",
diff --git a/src/components/controls.tsx b/src/components/controls.tsx
index 49b49924b1..07c7715bae 100644
--- a/src/components/controls.tsx
+++ b/src/components/controls.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/core';
-import DarkModeController from '../util/DarkModeController';
+import darkModeController from '../util/darkModeController';
 
 const controlsStyles = {
   header: css/* scss */ `
@@ -45,14 +45,12 @@ const controlsStyles = {
 interface Props {
   lightModeIcon?: string;
   darkModeIcon?: string;
-  controller?: DarkModeController;
 }
 
 const Controls = ({
   lightModeIcon = 'wb_sunny',
   darkModeIcon = 'nights_stay',
-  controller = new DarkModeController(),
-}: Props) => (
+}: Props = {}) => (
   <header css={controlsStyles.header}>
     <div id="controls" css={controlsStyles.controls}>
       <span>
@@ -61,11 +59,9 @@ const Controls = ({
           css={controlsStyles.button}
           id="contrast"
           title="Dark/Light"
-          onPointerDown={(): void => {
-            controller.onPointerDown();
-          }}
-          onPointerUp={(): void => {
-            controller.onPointerUp();
+          {...{
+            onPointerDown: darkModeController.handleEvent,
+            onPointerUp: darkModeController.handleEvent,
           }}
         >
           <span className="sr-only">Toggle Dark Mode</span>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 9f3b01197b..2baf24f4ae 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,7 +2,7 @@ import { Link } from 'gatsby';
 import React from 'react';
 import logoLight from '../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../images/logos/nodejs-logo-dark-mode.svg';
-import DarkModeController from '../util/DarkModeController';
+import darkModeController from '../util/darkModeController';
 
 const activeStyleTab = {
   fontWeight: 'var(--font-weight-semibold)',
@@ -10,11 +10,7 @@ const activeStyleTab = {
   borderBottom: 'var(--space-04) inset var(--color-text-accent)',
 };
 
-interface Props {
-  darkModeController?: DarkModeController;
-}
-
-const Header = ({ darkModeController }: Props) => (
+const Header = () => (
   <nav className="nav">
     <div className="logo">
       <Link to="/">
@@ -56,16 +52,19 @@ const Header = ({ darkModeController }: Props) => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={() => {
-            if (!darkModeController)
-              document.body.classList.toggle('dark-mode');
-          }}
-          onPointerDown={(): void => {
-            if (darkModeController) darkModeController.onPointerDown();
-          }}
-          onPointerUp={(): void => {
-            if (darkModeController) darkModeController.onPointerUp();
-          }}
+          onClick={
+            darkModeController
+              ? undefined
+              : () => {
+                  document.body.classList.toggle('dark-mode');
+                }
+          }
+          onPointerDown={
+            darkModeController ? darkModeController.handleEvent : undefined
+          }
+          onPointerUp={
+            darkModeController ? darkModeController.handleEvent : undefined
+          }
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 8e810eade5..2a514a0a88 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -6,7 +6,6 @@ import '../styles/tokens.css';
 import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
-import DarkModeController from '../util/DarkModeController';
 
 interface Props {
   children: React.ReactNode;
@@ -14,7 +13,7 @@ interface Props {
   description?: string;
   img?: string;
   href: string;
-  darkModeController?: DarkModeController;
+  // darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -23,12 +22,12 @@ const Layout = ({
   description,
   img,
   location,
-  darkModeController = new DarkModeController(),
-}: Props): JSX.Element => {
+}: // darkModeController = new DarkModeController(),
+Props): JSX.Element => {
   return (
     <React.Fragment>
       <SEO title={title} description={description} img={img} />
-      <Header darkModeController={darkModeController} />
+      <Header />
       {children}
     </React.Fragment>
   );
diff --git a/src/util/DarkModeController.js b/src/util/DarkModeController.js
deleted file mode 100644
index fb1e260cff..0000000000
--- a/src/util/DarkModeController.js
+++ /dev/null
@@ -1,161 +0,0 @@
-// @ts-check
-
-/*eslint-disable */
-
-export default class DarkModeController {
-  static get timeout() {
-    const value = Symbol.for('dark-mode.toggler.timeout');
-    Object.defineProperty(this, 'timeout', { value, writable: false });
-    return value;
-  }
-
-  static get resetting() {
-    const value = Symbol.for('dark-mode.toggler.resetting');
-    Object.defineProperty(this, 'resetting', { value, writable: false });
-    return value;
-  }
-
-  static get prefersLightMode() {
-    const value =
-      (typeof matchMedia === 'function' &&
-        matchMedia('(prefers-color-scheme: light)')) ||
-      undefined;
-    Object.defineProperty(this, 'prefersLightMode', { value, writable: false });
-    return value;
-  }
-
-  static get prefersDarkMode() {
-    const value =
-      (typeof matchMedia === 'function' &&
-        matchMedia('(prefers-color-scheme: dark)')) ||
-      undefined;
-    Object.defineProperty(this, 'prefersDarkMode', { value, writable: false });
-    return value;
-  }
-
-  /** @param {HTMLElement} [target] */
-  constructor(target) {
-    Object.defineProperties(this, {
-      target: {
-        value:
-          /** @type {HTMLElement|undefined} */ (target ||
-          (typeof document === 'object' && document.body) ||
-          undefined),
-        writable: false,
-      },
-      [DarkModeController.timeout]: {
-        value: /** @type {number|undefined} */ (undefined),
-        writable: true,
-      },
-      [DarkModeController.resetting]: {
-        value: /** @type {boolean|undefined} */ (undefined),
-        writable: true,
-      },
-      state: {
-        value: /** @type {DarkModeState|undefined} */ (undefined),
-        writable: true,
-      },
-      prefers: {
-        value: /** @type {PrefersColorSchemes|undefined} */ (undefined),
-        writable: true,
-      },
-      enable: { value: this.enable.bind(this), writable: false },
-      disable: { value: this.disable.bind(this), writable: false },
-      toggle: { value: this.toggle.bind(this), writable: false },
-      onPointerDown: { value: this.onPointerDown.bind(this), writable: false },
-      onPointerUp: { value: this.onPointerUp.bind(this), writable: false },
-    });
-
-    ((prefersDarkMode, prefersLightMode, localStorage) => {
-      if (!localStorage || !prefersDarkMode || !prefersLightMode) return;
-      localStorage.darkMode === 'enabled'
-        ? ((this.state = 'enabled'), this.enable())
-        : localStorage.darkMode === 'disabled'
-        ? ((this.state = 'disabled'), this.disable())
-        : this.toggle(
-            prefersDarkMode.matches === true ||
-              prefersLightMode.matches !== true,
-            !!(localStorage.darkMode = this.state = 'auto')
-          );
-      prefersDarkMode.addListener(
-        ({ matches = false }) =>
-          matches === true && this.toggle(!!matches, true)
-      );
-      prefersLightMode.addListener(
-        ({ matches = false }) => matches === true && this.toggle(!matches, true)
-      );
-    })(
-      DarkModeController.prefersDarkMode,
-      DarkModeController.prefersLightMode,
-      (typeof localStorage === 'object' && localStorage) || undefined
-    );
-
-    Object.preventExtensions(this);
-  }
-
-  /**
-   * @param {DarkModeState|boolean} [state]
-   * @param {boolean} [auto]
-   */
-  async toggle(state, auto) {
-    const { classList } = this.target;
-
-    if (auto === true) {
-      if (state === true) this.prefers = 'dark';
-      else if (state === false) this.prefers = 'light';
-      if (this.state !== 'auto') return;
-    }
-
-    state =
-      state === 'auto'
-        ? ((auto = true), this.prefers !== 'light')
-        : state == null
-        ? !classList.contains('dark-mode')
-        : !!state;
-
-    this.state = localStorage.darkMode = auto
-      ? 'auto'
-      : state
-      ? 'enabled'
-      : 'disabled';
-
-    state
-      ? (classList.add('dark-mode'), classList.remove('light-mode'))
-      : (classList.add('light-mode'), classList.remove('dark-mode'));
-  }
-
-  /** @param {boolean} [auto] */
-  enable(auto) {
-    this.toggle(true, auto);
-  }
-
-  /** @param {boolean} [auto] */
-  disable(auto) {
-    this.toggle(false, auto);
-  }
-
-  onPointerDown() {
-    clearTimeout(this[DarkModeController.timeout]);
-    this[DarkModeController.timeout] = setTimeout(() => {
-      this.toggle('auto');
-      this[DarkModeController.resetting] = true;
-      // console.log('Reset dark mode!');
-    }, 2000);
-  }
-
-  onPointerUp() {
-    this[DarkModeController.timeout] = clearTimeout(
-      this[DarkModeController.timeout]
-    );
-    this[DarkModeController.resetting] === true
-      ? (this[DarkModeController.resetting] = false)
-      : this.toggle();
-  }
-}
-
-Object.preventExtensions(DarkModeController);
-
-/** @typedef {'auto'|'enabled'|'disabled'} DarkModeState */
-/** @typedef {'light'|'dark'} PrefersColorSchemes */
-
-/* eslint-enable */
diff --git a/src/util/darkModeController.ts b/src/util/darkModeController.ts
new file mode 100644
index 0000000000..f8b7de88f5
--- /dev/null
+++ b/src/util/darkModeController.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+import { DarkModeController } from '@smotaal.io/dark-mode-controller';
+
+interface ReactDarkModeController extends DarkModeController {
+  onPointerDown(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  onPointerUp(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  handleEvent(event?: React.PointerEvent | React.MouseEvent | Event): void;
+}
+
+// We're exporting a singleton
+export default new DarkModeController() as ReactDarkModeController;
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index 1cbd94b6ef..d39e063266 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -92,7 +92,6 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <button
         className="dark-mode-toggle"
-        onClick={[Function]}
         onPointerDown={[Function]}
         onPointerUp={[Function]}
         type="button"
diff --git a/yarn.lock b/yarn.lock
index 48d8cfba52..6f78196b98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1547,6 +1547,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@smotaal.io/dark-mode-controller@*":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.2.tgz#966e1c1390fb0d25acfd511e5bec83c98cba269d"
+  integrity "sha1-lm4cE5D7DSWs/VEeW+yDyYy6Jp0= sha512-a+kVzV+TRM13mok5BUFkE3BDjFELd1H3ebQLa6hkjD1yBPW2fMbWhzMGuyY5zImjnBA2ZfP2+ZarN7NdRr8Dvw=="
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"

From 993dbce16900e74455a0f6b7142baf87ad1616d8 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sun, 10 Nov 2019 07:25:40 -0500
Subject: [PATCH 02/11] build: Upgrade to
 @smotaal.io/dark-mode-controller@0.0.3

---
 .npmrc                         | 3 ---
 src/util/darkModeController.ts | 5 ++++-
 yarn.lock                      | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 .npmrc

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index dbfc35fec2..0000000000
--- a/.npmrc
+++ /dev/null
@@ -1,3 +0,0 @@
-always-auth=true
-registry=https://npm.pkg.github.com/smotaal/
-//npm.pkg.github.com/smotaal/:_authToken=a7653bd26ff93879e33d4cfb4a5dc9eb831617fe
diff --git a/src/util/darkModeController.ts b/src/util/darkModeController.ts
index f8b7de88f5..e64e69f066 100644
--- a/src/util/darkModeController.ts
+++ b/src/util/darkModeController.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DarkModeController } from '@smotaal.io/dark-mode-controller';
+import { DarkModeController } from '@smotaal.io/dark-mode-controller/commonjs';
 
 interface ReactDarkModeController extends DarkModeController {
   onPointerDown(
@@ -11,5 +11,8 @@ interface ReactDarkModeController extends DarkModeController {
   handleEvent(event?: React.PointerEvent | React.MouseEvent | Event): void;
 }
 
+// TODO: Figure out a way around HRM glitching (tackled upstream)
+// SEE: https://github.com/SMotaal/meta/issues/7
+
 // We're exporting a singleton
 export default new DarkModeController() as ReactDarkModeController;
diff --git a/yarn.lock b/yarn.lock
index 6f78196b98..dc44c2c9e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1548,9 +1548,9 @@
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
 "@smotaal.io/dark-mode-controller@*":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.2.tgz#966e1c1390fb0d25acfd511e5bec83c98cba269d"
-  integrity "sha1-lm4cE5D7DSWs/VEeW+yDyYy6Jp0= sha512-a+kVzV+TRM13mok5BUFkE3BDjFELd1H3ebQLa6hkjD1yBPW2fMbWhzMGuyY5zImjnBA2ZfP2+ZarN7NdRr8Dvw=="
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.3.tgz#f9be0835bed02be9edbb363701e25f62cd70f9ff"
+  integrity sha512-xZQLGUFFyrrBk2XcWPw4krwHNjU7ZEk6aeP/gHVbO4baEmY96NQwOxiHNBG/PNVs6UNJIzCvEDkEjzGzDIY3uw==
 
 "@types/babel__core@^7.1.0":
   version "7.1.2"

From 567ebbcd04a7e746b1ab46f8d8abbae997919f77 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sun, 10 Nov 2019 07:40:51 -0500
Subject: [PATCH 03/11] fix: Delegating to dark-mode-controller not always
 stable

---
 src/components/header.tsx | 23 ++++++++++-------------
 src/components/layout.tsx |  7 ++++---
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 2baf24f4ae..6bdb6bcc37 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -52,19 +52,16 @@ const Header = () => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={
-            darkModeController
-              ? undefined
-              : () => {
-                  document.body.classList.toggle('dark-mode');
-                }
-          }
-          onPointerDown={
-            darkModeController ? darkModeController.handleEvent : undefined
-          }
-          onPointerUp={
-            darkModeController ? darkModeController.handleEvent : undefined
-          }
+          onClick={() => {
+            if (!darkModeController)
+              document.body.classList.toggle('dark-mode');
+          }}
+          onMouseDown={(event): void => {
+            if (darkModeController) darkModeController.onPointerDown(event);
+          }}
+          onMouseUp={(event): void => {
+            if (darkModeController) darkModeController.onPointerUp(event);
+          }}
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 2a514a0a88..76d6c949b3 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -7,13 +7,15 @@ import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
 
+// Always import to restore dark-mode on load
+import '../util/darkModeController';
+
 interface Props {
   children: React.ReactNode;
   title?: string;
   description?: string;
   img?: string;
   href: string;
-  // darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -22,8 +24,7 @@ const Layout = ({
   description,
   img,
   location,
-}: // darkModeController = new DarkModeController(),
-Props): JSX.Element => {
+}: Props): JSX.Element => {
   return (
     <React.Fragment>
       <SEO title={title} description={description} img={img} />

From 247d9cba967247a51110f505e3f98a89d3d9e46d Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sun, 10 Nov 2019 07:41:40 -0500
Subject: [PATCH 04/11] test: Update snapshots

---
 test/components/__snapshots__/header.test.tsx.snap | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index d39e063266..0202ebf5f8 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -92,8 +92,9 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <button
         className="dark-mode-toggle"
-        onPointerDown={[Function]}
-        onPointerUp={[Function]}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
         type="button"
       >
         <span

From 3a5908481b5eeae24a3c57da8ad19c3335e70a3d Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Wed, 13 Nov 2019 18:40:37 -0500
Subject: [PATCH 05/11] fix: Restore accidentally deleted `.nvmrc`

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..368fe859d7
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v8.12.0

From 5b05bb60d97aad829cce935bf1832dfdaef67df0 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Thu, 6 Feb 2020 12:03:24 -0500
Subject: [PATCH 06/11] build: Upgrade to
 @smotaal.io/dark-mode-controller@0.0.4

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index dc44c2c9e5..05cacb0db4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1548,9 +1548,9 @@
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
 "@smotaal.io/dark-mode-controller@*":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.3.tgz#f9be0835bed02be9edbb363701e25f62cd70f9ff"
-  integrity sha512-xZQLGUFFyrrBk2XcWPw4krwHNjU7ZEk6aeP/gHVbO4baEmY96NQwOxiHNBG/PNVs6UNJIzCvEDkEjzGzDIY3uw==
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.4.tgz#0412651850db97c8f9ca3e2f269042aae6a01755"
+  integrity sha512-BUU3rNWh8VAvpJgMzz/WTk7PdlA5tI+ys4XveO5Q5Zk6xgB0utWZZSGcbSP2rk+TlUvUsLKCzNDA3t3UTLsy2A==
 
 "@types/babel__core@^7.1.0":
   version "7.1.2"

From e7b8768204a5d7c387031d95e2ec720f216e4304 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sat, 29 Feb 2020 15:37:48 -0500
Subject: [PATCH 07/11] refactor: Delete controls.tsx

---
 src/components/controls.tsx | 77 -------------------------------------
 1 file changed, 77 deletions(-)
 delete mode 100644 src/components/controls.tsx

diff --git a/src/components/controls.tsx b/src/components/controls.tsx
deleted file mode 100644
index c287a595f7..0000000000
--- a/src/components/controls.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/core';
-import darkModeController from '../util/darkModeController';
-
-const controlsStyles = {
-  header: css/* scss */ `
-    position: fixed;
-    padding: 0.25ch 1ch;
-    margin-bottom: 1ch;
-    margin-top: -1ch;
-    right: 0;
-    z-index: 999;
-    box-sizing: border-box;
-    will-change: transform;
-
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-gap: 1ch;
-    align-items: center;
-
-    opacity: 0.9;
-    color: var(--color-text-accent, #999);
-    background-color: var(--black9, #9993);
-    border-top-left-radius: 1ch;
-    border-bottom-left-radius: 1ch;
-
-    min-width: max-content;
-    width: 0;
-    white-space: normal;
-    text-size-adjust: 100%;
-    text-shadow: #333f46 0px 0.875px 0px;
-    user-select: none;
-  `,
-  button: css/* scss */ `
-    color: inherit;
-    border: none;
-    width: max-content;
-    display: contents;
-  `,
-  controls: css/* scss */ `
-    color: inherit;
-  `,
-};
-
-interface Props {
-  lightModeIcon?: string;
-  darkModeIcon?: string;
-}
-
-const Controls = ({
-  lightModeIcon = 'wb_sunny',
-  darkModeIcon = 'nights_stay',
-  controller = new DarkModeController(),
-}: Props): JSX.Element => (
-  <header css={controlsStyles.header}>
-    <div id="controls" css={controlsStyles.controls}>
-      <span>
-        <button
-          type="button"
-          css={controlsStyles.button}
-          id="contrast"
-          title="Dark/Light"
-          {...{
-            onPointerDown: darkModeController.handleEvent,
-            onPointerUp: darkModeController.handleEvent,
-          }}
-        >
-          <span className="sr-only">Toggle Dark Mode</span>
-          <i className="material-icons light-mode-only">{darkModeIcon}</i>
-          <i className="material-icons dark-mode-only">{lightModeIcon}</i>
-        </button>
-      </span>
-    </div>
-  </header>
-);
-
-export default Controls;

From 23401e0621312f6dfc0c7aff8c6b067d07bf2ea8 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sat, 29 Feb 2020 15:49:13 -0500
Subject: [PATCH 08/11] refactor: Optionally cascade darkModeController as a
 property

---
 src/components/header.tsx      | 20 +++++++-------------
 src/components/layout.tsx      |  8 +++-----
 src/util/darkModeController.ts |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 5669bfc578..3266863125 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,7 +2,7 @@ import { Link } from 'gatsby';
 import React from 'react';
 import logoLight from '../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../images/logos/nodejs-logo-dark-mode.svg';
-import darkModeController from '../util/darkModeController';
+import defaultDarkModeController from '../util/darkModeController';
 
 const activeStyleTab = {
   fontWeight: 'var(--font-weight-semibold)',
@@ -11,10 +11,12 @@ const activeStyleTab = {
 };
 
 interface Props {
-  darkModeController?: DarkModeController;
+  darkModeController?: typeof defaultDarkModeController;
 }
 
-const Header = ({ darkModeController }: Props): JSX.Element => (
+const Header = ({
+  darkModeController = defaultDarkModeController,
+}: Props): JSX.Element => (
   <nav className="nav">
     <div className="logo">
       <Link to="/">
@@ -56,16 +58,8 @@ const Header = ({ darkModeController }: Props): JSX.Element => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={(): void => {
-            if (!darkModeController)
-              document.body.classList.toggle('dark-mode');
-          }}
-          onMouseDown={(event): void => {
-            if (darkModeController) darkModeController.onPointerDown(event);
-          }}
-          onMouseUp={(event): void => {
-            if (darkModeController) darkModeController.onPointerUp(event);
-          }}
+          onMouseDown={darkModeController.handleEvent}
+          onMouseUp={darkModeController.handleEvent}
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index a23ddecda0..b9ec93531b 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -8,8 +8,8 @@ import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
 
-// Always import to restore dark-mode on load
-import '../util/darkModeController';
+// NOTE: Quickly restores dark-mode state to mitigate onload flash
+import darkModeController from '../util/darkModeController';
 
 interface Props {
   children: React.ReactNode;
@@ -19,7 +19,6 @@ interface Props {
   href?: string;
   showFooter?: boolean;
   location?: any;
-  darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -29,12 +28,11 @@ const Layout = ({
   img,
   location,
   showFooter = true,
-  darkModeController = new DarkModeController(),
 }: Props): JSX.Element => {
   return (
     <React.Fragment>
       <SEO title={title} description={description} img={img} />
-      <Header />
+      <Header darkModeController={darkModeController} />
       {children}
       {showFooter && <Footer />}
     </React.Fragment>
diff --git a/src/util/darkModeController.ts b/src/util/darkModeController.ts
index e64e69f066..a1745152f7 100644
--- a/src/util/darkModeController.ts
+++ b/src/util/darkModeController.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DarkModeController } from '@smotaal.io/dark-mode-controller/commonjs';
 
-interface ReactDarkModeController extends DarkModeController {
+export interface ReactDarkModeController extends DarkModeController {
   onPointerDown(
     event: React.PointerEvent | React.MouseEvent | PointerEvent
   ): void;

From 30f83227310ca314f6f4d7e49fd5c9c4f4ed3600 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sat, 29 Feb 2020 15:50:02 -0500
Subject: [PATCH 09/11] test(snapshot): Updated snapshot for banner.tsx

---
 test/components/__snapshots__/header.test.tsx.snap | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index 0202ebf5f8..84efecf7a2 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -92,7 +92,6 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <button
         className="dark-mode-toggle"
-        onClick={[Function]}
         onMouseDown={[Function]}
         onMouseUp={[Function]}
         type="button"

From 15ad5a3a37e9f5d0e952fa2464a7e23fa87d96ca Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sat, 29 Feb 2020 16:28:56 -0500
Subject: [PATCH 10/11] build: Set explicit version for
 @smotaal.io/dark-mode-controller

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2654526baa..b4f6e258c2 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Adam Miller <ammiller@linkedin.com>",
   "private": true,
   "dependencies": {
-    "@smotaal.io/dark-mode-controller": "*",
+    "@smotaal.io/dark-mode-controller": "^0.0.4",
     "@emotion/core": "^10.0.7",
     "@types/react-helmet": "^5.0.7",
     "dotenv": "^6.0.0",

From 955978c442ba18c078f07013aca87f26a99bae61 Mon Sep 17 00:00:00 2001
From: Saleh Abdel Motaal <saleh@smotaal.io>
Date: Sat, 29 Feb 2020 16:41:45 -0500
Subject: [PATCH 11/11] build: Update yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 05cacb0db4..2547c3c0db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1547,7 +1547,7 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
-"@smotaal.io/dark-mode-controller@*":
+"@smotaal.io/dark-mode-controller@^0.0.4":
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.4.tgz#0412651850db97c8f9ca3e2f269042aae6a01755"
   integrity sha512-BUU3rNWh8VAvpJgMzz/WTk7PdlA5tI+ys4XveO5Q5Zk6xgB0utWZZSGcbSP2rk+TlUvUsLKCzNDA3t3UTLsy2A==