Improve custom scripts

2026-05-01 18:00:26 +00:00 · 2022-02-13 19:52:54 +01:00
parent d32afe310d
commit 4025ee960b
4 changed files with 67 additions and 65 deletions
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';

 import type { AppProps } from 'next/app';
-import Script from 'next/script';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

@@ -36,57 +35,6 @@ const App = ({ Component, pageProps }: AppProps) => {

 	return (
 		<>
-			<Script
-				id='styles-init'
-				strategy='afterInteractive'
-				dangerouslySetInnerHTML={{
-					__html: `
-						function getInitialThemeMode() {
-							const persistedColorPreference = window.localStorage.getItem('mode');
-							const hasPersistedPreference = typeof persistedColorPreference === 'string';
-
-							if (hasPersistedPreference) {
-								return persistedColorPreference;
-							}
-
-							const mql = window.matchMedia('(prefers-color-scheme: dark)');
-							const hasMediaQueryPreference = typeof mql.matches === 'boolean';
-
-							if (hasMediaQueryPreference) {
-								return mql.matches ? 'dark' : 'light';
-							}
-
-							return 'light';
-						}
-
-						(() => {
-							const mode = getInitialThemeMode();
-							const root = document.documentElement;
-							const lightFavicon = document.querySelector('link#light-favicon');
-							const darkFavicon = document.querySelector('link#dark-favicon');
-
-							root.style.setProperty('--mode', mode);
-							root.style.setProperty(
-								'--background',
-								mode === 'light' ? '#F9F9F9' : '#262626'
-							);
-							root.style.setProperty(
-								'--secondary-background',
-								mode === 'light' ? 'white' : '#2F2F2F'
-							);
-							root.style.setProperty(
-								'--text',
-								mode === 'light' ? 'black' : 'white'
-							);
-							root.style.setProperty(
-								'--text-inverted',
-								mode === 'light' ? 'white' : 'black'
-							);
-							document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
-						})();
-					`
-				}}
-			/>
 			<Head>
 				<link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link>
 				<link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link>
@@ -3,7 +3,8 @@ import Script from 'next/script';

 import { ServerStyleSheet } from 'styled-components';

-import { GOOGLE_ANALYTICS_KEY } from '../utils/gtag';
+import { GOOGLE_ANALYTICS_KEY, initAnalytics } from '../utils/gtag';
+import { initStyles } from '../utils/styles';

 class Doc extends Document {
 	static async getInitialProps(ctx: DocumentContext) {
@@ -43,18 +44,13 @@ class Doc extends Document {
 						id='google-analytics'
 						strategy='afterInteractive'
 						dangerouslySetInnerHTML={{
-							__html: `
-						window.dataLayer = window.dataLayer || [];
-						
-						function gtag() {
-							dataLayer.push(arguments);
-						}
-						
-						gtag('js', new Date());
-						gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
-              page_path: window.location.pathname,
-            });
-					`
+							__html: initAnalytics()
+						}}
+					/>
+					<script
+						id='styles-init'
+						dangerouslySetInnerHTML={{
+							__html: initStyles()
 						}}
 					/>
 				</Head>