hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve custom scripts

Browse Source
This commit is contained in:
Hazem Krimi
2022-02-13 19:52:54 +01:00
parent d32afe310d
commit 4025ee960b
4 changed files with 67 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
-52
View File
@@ -1,7 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import Script from 'next/script';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -36,57 +35,6 @@ const App = ({ Component, pageProps }: AppProps) => {
return ( 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> <Head>
<link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link> <link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link>
<link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link> <link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link>
pages/_document.tsx
+9 -13
View File
@@ -3,7 +3,8 @@ import Script from 'next/script';
import { ServerStyleSheet } from 'styled-components'; 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 { class Doc extends Document {
static async getInitialProps(ctx: DocumentContext) { static async getInitialProps(ctx: DocumentContext) {
@@ -43,18 +44,13 @@ class Doc extends Document {
id='google-analytics' id='google-analytics'
strategy='afterInteractive' strategy='afterInteractive'
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: initAnalytics()
window.dataLayer = window.dataLayer || []; }}
/>
function gtag() { <script
dataLayer.push(arguments); id='styles-init'
} dangerouslySetInnerHTML={{
__html: initStyles()
gtag('js', new Date());
gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
page_path: window.location.pathname,
});
`
}} }}
/> />
</Head> </Head>
utils/gtag.ts
+13
View File
@@ -17,3 +17,16 @@ export const event = ({ action, category, label, value }: any) => {
value: value value: value
}); });
}; };
export const initAnalytics = () => `
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
page_path: window.location.pathname,
});
`;
utils/styles.ts
+45
View File
@@ -0,0 +1,45 @@
export const initStyles = () => `
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);
})();
`;