Deploying to gh-pages from @ f5844a8 🚀

Author: alexander-akait

.server/15.39dbc3074a3bc840.js .server/15.496f38ae210c08b8.js.server/15.39dbc3074a3bc840.js renamed to .server/15.496f38ae210c08b8.js

@@ -340007,7 +340007,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return ".server/" + chunkId + "." + {"15":"39dbc3074a3bc840","703":"c076420990cc021d"}[chunkId] + ".js";
+/******/ 			return ".server/" + chunkId + "." + {"15":"496f38ae210c08b8","703":"c076420990cc021d"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -341096,7 +341096,7 @@ var Helmet = class extends react.Component {
 // EXTERNAL MODULE: ../node_modules/react-router/dist/development/chunk-UVKPFVEO.mjs
 var chunk_UVKPFVEO = __webpack_require__(2129);
 ;// ../dist/prod-assets-manifest.json
-const prod_assets_manifest_namespaceObject = /*#__PURE__*/JSON.parse('{"js":["/vendor.10c925c108c2c7c7.js","/index.99fd81ec58e5dd8e.js"],"A":["/index.685614c7915597ca.css","/637.2538833ba36445be.css"]}');
+const prod_assets_manifest_namespaceObject = /*#__PURE__*/JSON.parse('{"js":["/vendor.10c925c108c2c7c7.js","/index.9bbe30429eb9a030.js"],"A":["/index.685614c7915597ca.css","/637.2538833ba36445be.css"]}');
 // EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(2540);
 ;// ./components/Print/PrintScript.jsx
@@ -343185,151 +343185,79 @@ SidebarMobile_defineProperty(SidebarMobile, "propTypes", {
 // EXTERNAL MODULE: ./content/index.mdx + 5 modules
 var content = __webpack_require__(9081);
 ;// ./components/Cube/Cube.jsx
-function Cube_defineProperty(e, r, t) { return (r = Cube_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function Cube_toPropertyKey(t) { var i = Cube_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function Cube_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // Import External Dependencies
 
 
 
-class Cube extends react.Component {
-  constructor(...args) {
-    super(...args);
-    Cube_defineProperty(this, "state", {
-      x: 0,
-      y: 0,
-      z: 0,
-      iteration: 0
-    });
-    /**
-     * Spin the cubes in opposite directions semi-randomly
-     *
-     * @param {object} e - Native event
-     */
-    Cube_defineProperty(this, "_spin", () => {
-      const obj = {};
-      const axis = this._getRandomAxis();
-      const sign = Math.random() < 0.5 ? -1 : 1;
-      obj[axis] = sign * 90;
-      this.setState(obj);
-    });
-    /**
-     * Rotate the cubes back to their original position
-     *
-     * @param {object} e - Native event
-     */
-    Cube_defineProperty(this, "_reset", () => {
-      this.setState({
-        x: 0,
-        y: 0,
-        z: 0
-      });
-    });
-  }
-  render() {
-    const {
-      x,
-      y,
-      z
-    } = this.state;
-    const {
-      theme,
-      depth,
-      className = ""
-    } = this.props;
-    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: `cube__container ${className}`,
-      style: {
-        width: `${depth * 1.5}px`,
-        height: `${depth * 1.5}px`,
-        paddingLeft: `${depth / 1.7}px`
-      },
-      children: /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
-        ref: ref => this.container = ref,
-        className: `cube cube--${theme} relative block [transform-style:preserve-3d]`,
-        style: {
-          width: `${depth}px`,
-          paddingBottom: `${depth * 0.5}px`,
-          transform: "rotateX(-35.5deg) rotateY(45deg)"
-        },
-        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
-          className: "cube__outer inline-block [transform-style:preserve-3d] transition-transform duration-1000",
-          style: {
-            width: `${depth}px`,
-            height: `${depth}px`,
-            transform: `translateX(-50%)
-            scale3d(1,1,1)
-            rotateX(${x}deg)
-            rotateY(${y}deg)
-            rotateZ(${z}deg)`
-          },
-          children: this._getFaces("outer")
-        }), /*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
-          className: "cube__inner absolute -top-[2px] left-0 inline-block [transform-style:preserve-3d] transition-transform duration-1000",
-          style: {
-            width: `${depth}px`,
-            height: `${depth}px`,
-            transform: `translateX(-50%) translateY(2px)
-            scale3d(0.5,0.5,0.5)
-            rotateX(${-x}deg)
-            rotateY(${-y}deg)
-            rotateZ(${-z}deg)`
-          },
-          children: this._getFaces("inner")
-        })]
-      })
-    });
-  }
-  componentDidMount() {
-    const {
-      hover,
-      continuous,
-      repeatDelay
-    } = this.props;
+function Cube({
+  hover = false,
+  theme = "dark",
+  depth = 30,
+  repeatDelay = 1000,
+  className = "",
+  continuous
+}) {
+  const [state, setState] = (0,react.useState)({
+    x: 0,
+    y: 0,
+    z: 0,
+    iteration: 0
+  });
+  const containerRef = (0,react.useRef)(null);
+  const timeoutRef = (0,react.useRef)(null);
+  const {
+    x,
+    y,
+    z,
+    iteration
+  } = state;
+  (0,react.useEffect)(() => {
+    const container = containerRef.current;
     if (hover) {
-      this.container.addEventListener("mouseenter", this._spin);
-      this.container.addEventListener("mouseleave", this._reset);
+      const spin = () => {
+        const axes = ["x", "y", "z", "iteration"];
+        const axis = axes[Math.floor(Math.random() * axes.length)];
+        const sign = Math.random() < 0.5 ? -1 : 1;
+        setState(prev => ({
+          ...prev,
+          [axis]: sign * 90
+        }));
+      };
+      const reset = () => {
+        setState(prev => ({
+          ...prev,
+          x: 0,
+          y: 0,
+          z: 0
+        }));
+      };
+      container.addEventListener("mouseenter", spin);
+      container.addEventListener("mouseleave", reset);
+      return () => {
+        container.removeEventListener("mouseenter", spin);
+        container.removeEventListener("mouseleave", reset);
+      };
     } else if (continuous) {
       let degrees = 0;
       const axis = "y";
       const animation = () => {
         const obj = {};
         obj[axis] = degrees += 90;
-        this.setState({
+        setState(prev => ({
+          ...prev,
           ...obj,
-          iteration: (this.state.iteration + 1) % 4
-        });
+          iteration: (prev.iteration + 1) % 4
+        }));
         // eslint-disable-next-line no-use-before-define
         tick();
       };
       const tick = () => setTimeout(() => requestAnimationFrame(animation), repeatDelay);
-      this._timeout = tick();
-    }
-  }
-  componentWillUnmount() {
-    const {
-      hover,
-      continuous
-    } = this.props;
-    if (hover) {
-      this.container.removeEventListener("mouseenter", this._spin);
-      this.container.removeEventListener("mouseleave", this._reset);
-    } else if (continuous) {
-      clearTimeout(this._timeout);
+      timeoutRef.current = tick();
+      return () => clearTimeout(timeoutRef.current);
     }
-  }
-
-  /**
-   * Get all faces for a cube
-   *
-   * @param {'inner' | 'outer' } type
-   * @return {array} - An array of nodes
-   */
-  _getFaces(type) {
-    const {
-      iteration
-    } = this.state;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const getFaces = type => {
     // Keep the thicker border on
     // the outside on each iteration
     const borderWidthMap = {
@@ -343387,37 +343315,63 @@ class Cube extends react.Component {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("section", {
         className: `cube__face ${baseFaceClasses} ${variantClasses}`,
         style: {
-          transform: `${rotation} translateZ(${this.props.depth / 2}px)`,
+          transform: `${rotation} translateZ(${depth / 2}px)`,
           ...borderStyles
         }
       }, i);
     });
-  }
-
-  /**
-   * Get a random axis
-   *
-   * @return {string} - A random axis (i.e. x, y, or z)
-   */
-  _getRandomAxis() {
-    const axes = Object.keys(this.state);
-    return axes[Math.floor(Math.random() * axes.length)];
-  }
+  };
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: `cube__container ${className}`,
+    style: {
+      width: `${depth * 1.5}px`,
+      height: `${depth * 1.5}px`,
+      paddingLeft: `${depth / 1.7}px`
+    },
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
+      ref: containerRef,
+      className: `cube cube--${theme} relative block [transform-style:preserve-3d]`,
+      style: {
+        width: `${depth}px`,
+        paddingBottom: `${depth * 0.5}px`,
+        transform: "rotateX(-35.5deg) rotateY(45deg)"
+      },
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
+        className: "cube__outer inline-block [transform-style:preserve-3d] transition-transform duration-1000",
+        style: {
+          width: `${depth}px`,
+          height: `${depth}px`,
+          transform: `translateX(-50%)
+            scale3d(1,1,1)
+            rotateX(${x}deg)
+            rotateY(${y}deg)
+            rotateZ(${z}deg)`
+        },
+        children: getFaces("outer")
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
+        className: "cube__inner absolute -top-[2px] left-0 inline-block [transform-style:preserve-3d] transition-transform duration-1000",
+        style: {
+          width: `${depth}px`,
+          height: `${depth}px`,
+          transform: `translateX(-50%) translateY(2px)
+            scale3d(0.5,0.5,0.5)
+            rotateX(${-x}deg)
+            rotateY(${-y}deg)
+            rotateZ(${-z}deg)`
+        },
+        children: getFaces("inner")
+      })]
+    })
+  });
 }
-Cube_defineProperty(Cube, "propTypes", {
+Cube.propTypes = {
   hover: (prop_types_default()).bool,
   theme: (prop_types_default()).string,
   depth: (prop_types_default()).number,
   repeatDelay: (prop_types_default()).number,
   className: (prop_types_default()).string,
   continuous: (prop_types_default()).bool
-});
-Cube_defineProperty(Cube, "defaultProps", {
-  hover: false,
-  theme: "dark",
-  depth: 30,
-  repeatDelay: 1000
-});
+};
 ;// ./components/TextRotater/TextRotater.jsx
 function TextRotater_defineProperty(e, r, t) { return (r = TextRotater_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function TextRotater_toPropertyKey(t) { var i = TextRotater_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }