Skip to content

Commit 68d027f

Browse files
Deploying to gh-pages from @ f5844a8 🚀
1 parent 143ea19 commit 68d027f

File tree

180 files changed

+379
-425
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

180 files changed

+379
-425
lines changed
Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 103 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -340007,7 +340007,7 @@ __webpack_require__.r(__webpack_exports__);
340007340007
/******/ // This function allow to reference async chunks
340008340008
/******/ __webpack_require__.u = (chunkId) => {
340009340009
/******/ // return url for filenames based on template
340010-
/******/ return ".server/" + chunkId + "." + {"15":"39dbc3074a3bc840","703":"c076420990cc021d"}[chunkId] + ".js";
340010+
/******/ return ".server/" + chunkId + "." + {"15":"496f38ae210c08b8","703":"c076420990cc021d"}[chunkId] + ".js";
340011340011
/******/ };
340012340012
/******/ })();
340013340013
/******/
@@ -341096,7 +341096,7 @@ var Helmet = class extends react.Component {
341096341096
// EXTERNAL MODULE: ../node_modules/react-router/dist/development/chunk-UVKPFVEO.mjs
341097341097
var chunk_UVKPFVEO = __webpack_require__(2129);
341098341098
;// ../dist/prod-assets-manifest.json
341099-
const prod_assets_manifest_namespaceObject = /*#__PURE__*/JSON.parse('{"js":["/vendor.10c925c108c2c7c7.js","/index.99fd81ec58e5dd8e.js"],"A":["/index.685614c7915597ca.css","/637.2538833ba36445be.css"]}');
341099+
const prod_assets_manifest_namespaceObject = /*#__PURE__*/JSON.parse('{"js":["/vendor.10c925c108c2c7c7.js","/index.9bbe30429eb9a030.js"],"A":["/index.685614c7915597ca.css","/637.2538833ba36445be.css"]}');
341100341100
// EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
341101341101
var jsx_runtime = __webpack_require__(2540);
341102341102
;// ./components/Print/PrintScript.jsx
@@ -343185,151 +343185,79 @@ SidebarMobile_defineProperty(SidebarMobile, "propTypes", {
343185343185
// EXTERNAL MODULE: ./content/index.mdx + 5 modules
343186343186
var content = __webpack_require__(9081);
343187343187
;// ./components/Cube/Cube.jsx
343188-
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; }
343189-
function Cube_toPropertyKey(t) { var i = Cube_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
343190-
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); }
343191343188
// Import External Dependencies
343192343189

343193343190

343194343191

343195-
class Cube extends react.Component {
343196-
constructor(...args) {
343197-
super(...args);
343198-
Cube_defineProperty(this, "state", {
343199-
x: 0,
343200-
y: 0,
343201-
z: 0,
343202-
iteration: 0
343203-
});
343204-
/**
343205-
* Spin the cubes in opposite directions semi-randomly
343206-
*
343207-
* @param {object} e - Native event
343208-
*/
343209-
Cube_defineProperty(this, "_spin", () => {
343210-
const obj = {};
343211-
const axis = this._getRandomAxis();
343212-
const sign = Math.random() < 0.5 ? -1 : 1;
343213-
obj[axis] = sign * 90;
343214-
this.setState(obj);
343215-
});
343216-
/**
343217-
* Rotate the cubes back to their original position
343218-
*
343219-
* @param {object} e - Native event
343220-
*/
343221-
Cube_defineProperty(this, "_reset", () => {
343222-
this.setState({
343223-
x: 0,
343224-
y: 0,
343225-
z: 0
343226-
});
343227-
});
343228-
}
343229-
render() {
343230-
const {
343231-
x,
343232-
y,
343233-
z
343234-
} = this.state;
343235-
const {
343236-
theme,
343237-
depth,
343238-
className = ""
343239-
} = this.props;
343240-
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
343241-
className: `cube__container ${className}`,
343242-
style: {
343243-
width: `${depth * 1.5}px`,
343244-
height: `${depth * 1.5}px`,
343245-
paddingLeft: `${depth / 1.7}px`
343246-
},
343247-
children: /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
343248-
ref: ref => this.container = ref,
343249-
className: `cube cube--${theme} relative block [transform-style:preserve-3d]`,
343250-
style: {
343251-
width: `${depth}px`,
343252-
paddingBottom: `${depth * 0.5}px`,
343253-
transform: "rotateX(-35.5deg) rotateY(45deg)"
343254-
},
343255-
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
343256-
className: "cube__outer inline-block [transform-style:preserve-3d] transition-transform duration-1000",
343257-
style: {
343258-
width: `${depth}px`,
343259-
height: `${depth}px`,
343260-
transform: `translateX(-50%)
343261-
scale3d(1,1,1)
343262-
rotateX(${x}deg)
343263-
rotateY(${y}deg)
343264-
rotateZ(${z}deg)`
343265-
},
343266-
children: this._getFaces("outer")
343267-
}), /*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
343268-
className: "cube__inner absolute -top-[2px] left-0 inline-block [transform-style:preserve-3d] transition-transform duration-1000",
343269-
style: {
343270-
width: `${depth}px`,
343271-
height: `${depth}px`,
343272-
transform: `translateX(-50%) translateY(2px)
343273-
scale3d(0.5,0.5,0.5)
343274-
rotateX(${-x}deg)
343275-
rotateY(${-y}deg)
343276-
rotateZ(${-z}deg)`
343277-
},
343278-
children: this._getFaces("inner")
343279-
})]
343280-
})
343281-
});
343282-
}
343283-
componentDidMount() {
343284-
const {
343285-
hover,
343286-
continuous,
343287-
repeatDelay
343288-
} = this.props;
343192+
function Cube({
343193+
hover = false,
343194+
theme = "dark",
343195+
depth = 30,
343196+
repeatDelay = 1000,
343197+
className = "",
343198+
continuous
343199+
}) {
343200+
const [state, setState] = (0,react.useState)({
343201+
x: 0,
343202+
y: 0,
343203+
z: 0,
343204+
iteration: 0
343205+
});
343206+
const containerRef = (0,react.useRef)(null);
343207+
const timeoutRef = (0,react.useRef)(null);
343208+
const {
343209+
x,
343210+
y,
343211+
z,
343212+
iteration
343213+
} = state;
343214+
(0,react.useEffect)(() => {
343215+
const container = containerRef.current;
343289343216
if (hover) {
343290-
this.container.addEventListener("mouseenter", this._spin);
343291-
this.container.addEventListener("mouseleave", this._reset);
343217+
const spin = () => {
343218+
const axes = ["x", "y", "z", "iteration"];
343219+
const axis = axes[Math.floor(Math.random() * axes.length)];
343220+
const sign = Math.random() < 0.5 ? -1 : 1;
343221+
setState(prev => ({
343222+
...prev,
343223+
[axis]: sign * 90
343224+
}));
343225+
};
343226+
const reset = () => {
343227+
setState(prev => ({
343228+
...prev,
343229+
x: 0,
343230+
y: 0,
343231+
z: 0
343232+
}));
343233+
};
343234+
container.addEventListener("mouseenter", spin);
343235+
container.addEventListener("mouseleave", reset);
343236+
return () => {
343237+
container.removeEventListener("mouseenter", spin);
343238+
container.removeEventListener("mouseleave", reset);
343239+
};
343292343240
} else if (continuous) {
343293343241
let degrees = 0;
343294343242
const axis = "y";
343295343243
const animation = () => {
343296343244
const obj = {};
343297343245
obj[axis] = degrees += 90;
343298-
this.setState({
343246+
setState(prev => ({
343247+
...prev,
343299343248
...obj,
343300-
iteration: (this.state.iteration + 1) % 4
343301-
});
343249+
iteration: (prev.iteration + 1) % 4
343250+
}));
343302343251
// eslint-disable-next-line no-use-before-define
343303343252
tick();
343304343253
};
343305343254
const tick = () => setTimeout(() => requestAnimationFrame(animation), repeatDelay);
343306-
this._timeout = tick();
343307-
}
343308-
}
343309-
componentWillUnmount() {
343310-
const {
343311-
hover,
343312-
continuous
343313-
} = this.props;
343314-
if (hover) {
343315-
this.container.removeEventListener("mouseenter", this._spin);
343316-
this.container.removeEventListener("mouseleave", this._reset);
343317-
} else if (continuous) {
343318-
clearTimeout(this._timeout);
343255+
timeoutRef.current = tick();
343256+
return () => clearTimeout(timeoutRef.current);
343319343257
}
343320-
}
343321-
343322-
/**
343323-
* Get all faces for a cube
343324-
*
343325-
* @param {'inner' | 'outer' } type
343326-
* @return {array} - An array of nodes
343327-
*/
343328-
_getFaces(type) {
343329-
const {
343330-
iteration
343331-
} = this.state;
343258+
}, []); // eslint-disable-line react-hooks/exhaustive-deps
343332343259

343260+
const getFaces = type => {
343333343261
// Keep the thicker border on
343334343262
// the outside on each iteration
343335343263
const borderWidthMap = {
@@ -343387,37 +343315,63 @@ class Cube extends react.Component {
343387343315
return /*#__PURE__*/(0,jsx_runtime.jsx)("section", {
343388343316
className: `cube__face ${baseFaceClasses} ${variantClasses}`,
343389343317
style: {
343390-
transform: `${rotation} translateZ(${this.props.depth / 2}px)`,
343318+
transform: `${rotation} translateZ(${depth / 2}px)`,
343391343319
...borderStyles
343392343320
}
343393343321
}, i);
343394343322
});
343395-
}
343396-
343397-
/**
343398-
* Get a random axis
343399-
*
343400-
* @return {string} - A random axis (i.e. x, y, or z)
343401-
*/
343402-
_getRandomAxis() {
343403-
const axes = Object.keys(this.state);
343404-
return axes[Math.floor(Math.random() * axes.length)];
343405-
}
343323+
};
343324+
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
343325+
className: `cube__container ${className}`,
343326+
style: {
343327+
width: `${depth * 1.5}px`,
343328+
height: `${depth * 1.5}px`,
343329+
paddingLeft: `${depth / 1.7}px`
343330+
},
343331+
children: /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
343332+
ref: containerRef,
343333+
className: `cube cube--${theme} relative block [transform-style:preserve-3d]`,
343334+
style: {
343335+
width: `${depth}px`,
343336+
paddingBottom: `${depth * 0.5}px`,
343337+
transform: "rotateX(-35.5deg) rotateY(45deg)"
343338+
},
343339+
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
343340+
className: "cube__outer inline-block [transform-style:preserve-3d] transition-transform duration-1000",
343341+
style: {
343342+
width: `${depth}px`,
343343+
height: `${depth}px`,
343344+
transform: `translateX(-50%)
343345+
scale3d(1,1,1)
343346+
rotateX(${x}deg)
343347+
rotateY(${y}deg)
343348+
rotateZ(${z}deg)`
343349+
},
343350+
children: getFaces("outer")
343351+
}), /*#__PURE__*/(0,jsx_runtime.jsx)("figure", {
343352+
className: "cube__inner absolute -top-[2px] left-0 inline-block [transform-style:preserve-3d] transition-transform duration-1000",
343353+
style: {
343354+
width: `${depth}px`,
343355+
height: `${depth}px`,
343356+
transform: `translateX(-50%) translateY(2px)
343357+
scale3d(0.5,0.5,0.5)
343358+
rotateX(${-x}deg)
343359+
rotateY(${-y}deg)
343360+
rotateZ(${-z}deg)`
343361+
},
343362+
children: getFaces("inner")
343363+
})]
343364+
})
343365+
});
343406343366
}
343407-
Cube_defineProperty(Cube, "propTypes", {
343367+
Cube.propTypes = {
343408343368
hover: (prop_types_default()).bool,
343409343369
theme: (prop_types_default()).string,
343410343370
depth: (prop_types_default()).number,
343411343371
repeatDelay: (prop_types_default()).number,
343412343372
className: (prop_types_default()).string,
343413343373
continuous: (prop_types_default()).bool
343414-
});
343415-
Cube_defineProperty(Cube, "defaultProps", {
343416-
hover: false,
343417-
theme: "dark",
343418-
depth: 30,
343419-
repeatDelay: 1000
343420-
});
343374+
};
343421343375
;// ./components/TextRotater/TextRotater.jsx
343422343376
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; }
343423343377
function TextRotater_toPropertyKey(t) { var i = TextRotater_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }

0 commit comments

Comments
 (0)