From ac2173eac2b042dbd67b7ac3c275ea65a8696337 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Mon, 6 Sep 2021 19:35:21 +0100 Subject: [PATCH] Make favicon dynamic and add og:image --- components/DarkMode.tsx | 4 ++++ pages/404.tsx | 3 +-- pages/_document.tsx | 5 +++++ pages/about.tsx | 3 +-- pages/blog/[slug].tsx | 3 +-- pages/blog/index.tsx | 3 +-- pages/index.tsx | 3 +-- pages/portfolio/[slug].tsx | 3 +-- pages/portfolio/index.tsx | 3 +-- public/dark-favicon.png | Bin 0 -> 310 bytes public/light-favicon.png | Bin 0 -> 312 bytes public/logo.png | Bin 0 -> 18877 bytes 12 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 public/dark-favicon.png create mode 100644 public/light-favicon.png create mode 100644 public/logo.png diff --git a/components/DarkMode.tsx b/components/DarkMode.tsx index ce8e40b..fbc9757 100644 --- a/components/DarkMode.tsx +++ b/components/DarkMode.tsx @@ -22,6 +22,8 @@ const DarkMode: FC = ({ children }) => { const [dark, dispatch] = useReducer(reducer, false); const toggle = () => { const root = window.document.documentElement; + const lightFavicon = document.querySelector('link#light-favicon')!; + const darkFavicon = document.querySelector('link#dark-favicon')!; if (dark) { window.localStorage.setItem('theme', 'light'); @@ -29,12 +31,14 @@ const DarkMode: FC = ({ children }) => { root.style.setProperty('--secondary-background', 'white'); root.style.setProperty('--text', 'black'); root.style.setProperty('--text-inverted', 'white'); + document.head.append(darkFavicon); } else { window.localStorage.setItem('theme', 'dark'); root.style.setProperty('--background', '#262626'); root.style.setProperty('--secondary-background', '#2F2F2F'); root.style.setProperty('--text', 'white'); root.style.setProperty('--text-inverted', 'black'); + document.head.append(lightFavicon); } dispatch({ type: 'TOGGLE' }); diff --git a/pages/404.tsx b/pages/404.tsx index 5199786..c14c894 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -40,9 +40,8 @@ const NotFound: FC = () => { name='description' content='Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' /> - - + + +