-
Notifications
You must be signed in to change notification settings - Fork 0
/
gatsby-ssr.js
76 lines (59 loc) · 2.07 KB
/
gatsby-ssr.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React from 'react';
import Terser from 'terser';
import preval from 'preval.macro';
import PackageJson from './package.json';
import { DARK_MODE } from './src/utils/constants.js';
const buildTimestamp = preval`module.exports = new Date().getTime();`;
function initialize() {
const updateBodyClass = (theme) => {
document.body.className = theme;
};
const prefersColorScheme = (theme) => {
return window.matchMedia(`(prefers-color-scheme: ${theme})`).matches;
};
const autoDetectTheme = () => {
const date = new Date();
const sunrise = '7:28';
const sunset = '19:28';
const currentTime = `${date.getHours()}:${date.getMinutes()}`;
if ((currentTime < sunrise && currentTime > sunset) || prefersColorScheme('dark')) {
updateBodyClass('dark');
} else {
updateBodyClass('light');
}
};
const nodeEnv = 'unsetEnv';
if (nodeEnv === 'production') {
console.log(
`%cDick Wyn Yong's Portfolio vAPP_VERSION
Looking for something?
👨💻 https://www.github.com/dickwyn
📄 https://dickwyn.xyz/dickwyn-resume.pdf
🐛 https://dickwyn.xyz/debug
built: unsetTimestamp`,
'font-family:monospace;'
);
}
const lsDarkMode = localStorage.getItem('DARK_MODE.LOCAL_STORAGE_KEY');
if (lsDarkMode === null) {
autoDetectTheme();
} else if (lsDarkMode === 'true') {
updateBodyClass('dark');
} else if (lsDarkMode === 'false') {
updateBodyClass('light');
}
}
const InitializeScript = () => {
const boundFn = String(initialize)
.replace('APP_VERSION', PackageJson.version)
.replace('unsetEnv', process.env.NODE_ENV)
.replace('unsetTimestamp', new Date(buildTimestamp).toString())
.replace('DARK_MODE.LOCAL_STORAGE_KEY', DARK_MODE.LOCAL_STORAGE_KEY);
let calledFunction = `(${boundFn})()`;
calledFunction = Terser.minify(calledFunction).code;
// eslint-disable-next-line react/no-danger
return <script dangerouslySetInnerHTML={{ __html: calledFunction }} />;
};
export const onRenderBody = ({ setPreBodyComponents }) => {
setPreBodyComponents(<InitializeScript />);
};