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

Make favicon dynamic and add og:image

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-06 19:35:21 +01:00
parent 0b49477ee8
commit ac2173eac2
12 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DarkMode.tsx
+4
View File
@@ -22,6 +22,8 @@ const DarkMode: FC = ({ children }) => {
const [dark, dispatch] = useReducer(reducer, false); const [dark, dispatch] = useReducer(reducer, false);
const toggle = () => { const toggle = () => {
const root = window.document.documentElement; const root = window.document.documentElement;
const lightFavicon = document.querySelector('link#light-favicon')!;
const darkFavicon = document.querySelector('link#dark-favicon')!;
if (dark) { if (dark) {
window.localStorage.setItem('theme', 'light'); window.localStorage.setItem('theme', 'light');
@@ -29,12 +31,14 @@ const DarkMode: FC = ({ children }) => {
root.style.setProperty('--secondary-background', 'white'); root.style.setProperty('--secondary-background', 'white');
root.style.setProperty('--text', 'black'); root.style.setProperty('--text', 'black');
root.style.setProperty('--text-inverted', 'white'); root.style.setProperty('--text-inverted', 'white');
document.head.append(darkFavicon);
} else { } else {
window.localStorage.setItem('theme', 'dark'); window.localStorage.setItem('theme', 'dark');
root.style.setProperty('--background', '#262626'); root.style.setProperty('--background', '#262626');
root.style.setProperty('--secondary-background', '#2F2F2F'); root.style.setProperty('--secondary-background', '#2F2F2F');
root.style.setProperty('--text', 'white'); root.style.setProperty('--text', 'white');
root.style.setProperty('--text-inverted', 'black'); root.style.setProperty('--text-inverted', 'black');
document.head.append(lightFavicon);
} }
dispatch({ type: 'TOGGLE' }); dispatch({ type: 'TOGGLE' });
pages/404.tsx
+1 -2
View File
@@ -40,9 +40,8 @@ const NotFound: FC = () => {
name='description' name='description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech/*' /> <link rel='canonical' href='https://hazemkrimi.tech/*' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
pages/_document.tsx
+5
View File
@@ -31,6 +31,8 @@ class Doc extends Document {
return ( return (
<Html> <Html>
<Head> <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>
<script async src='https://www.googletagmanager.com/gtag/js?id=G-FMD81GLKS3'></script> <script async src='https://www.googletagmanager.com/gtag/js?id=G-FMD81GLKS3'></script>
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@@ -67,6 +69,8 @@ class Doc extends Document {
(() => { (() => {
const theme = getInitialTheme(); const theme = getInitialTheme();
const root = document.documentElement; const root = document.documentElement;
const lightFavicon = document.querySelector('link#light-favicon');
const darkFavicon = document.querySelector('link#dark-favicon');
root.style.setProperty('--theme', theme); root.style.setProperty('--theme', theme);
root.style.setProperty( root.style.setProperty(
@@ -85,6 +89,7 @@ class Doc extends Document {
'--text-inverted', '--text-inverted',
theme === 'light' ? 'white' : 'black' theme === 'light' ? 'white' : 'black'
); );
document.head.append(theme === 'light' ? darkFavicon : lightFavicon);
})(); })();
` `
}} }}
pages/about.tsx
+1 -2
View File
@@ -100,9 +100,8 @@ const About: FC = () => {
name='description' name='description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech/about' /> <link rel='canonical' href='https://hazemkrimi.tech/about' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
pages/blog/[slug].tsx
+1 -2
View File
@@ -126,9 +126,8 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
} }
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech' /> <link rel='canonical' href='https://hazemkrimi.tech' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content={ content={
pages/blog/index.tsx
+1 -2
View File
@@ -64,9 +64,8 @@ const Index: FC<Props> = ({ blogPosts }) => {
name='description' name='description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech/blog' /> <link rel='canonical' href='https://hazemkrimi.tech/blog' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
pages/index.tsx
+1 -2
View File
@@ -86,9 +86,8 @@ const Index: FC<Props> = ({ blogPosts, portfolioProjects }) => {
name='description' name='description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech' /> <link rel='canonical' href='https://hazemkrimi.tech' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
pages/portfolio/[slug].tsx
+1 -2
View File
@@ -112,9 +112,8 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
} }
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech' /> <link rel='canonical' href='https://hazemkrimi.tech' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content={ content={
pages/portfolio/index.tsx
+1 -2
View File
@@ -63,9 +63,8 @@ const Index: FC<Props> = ({ portfolioProjects }) => {
name='description' name='description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
/> />
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel='canonical' href='https://hazemkrimi.tech/portfolio' /> <link rel='canonical' href='https://hazemkrimi.tech/portfolio' />
<meta property='og:image' content='/logo.jpg' /> <meta property='og:image' content='/logo.png' />
<meta <meta
property='og:description' property='og:description'
content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
public/dark-favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 B

public/light-favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 B

public/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB