v1.0.5

README.md

@@ -1,18 +1,20 @@
 ## yiyb-blog
+
 Link: https://yiyb-blog.vercel.app
 
 How to make (ko): https://yiyb-blog.vercel.app/posts/nextjs-contentlayer-blog
 
 ### Tech Stacks
+
 - Front-End
   - TypeScript
   - Next.js
   - Styled Components
   - Contentlayer
-  - GitHub Utterances
+  - Giscus
 - CI/CD
   - GitHub Actions
 - Infrastructure
   - Vercel
 
-![yiyb-blog](https://github.com/yiyb0603/yiyb-blog/assets/50941453/109dd0aa-db52-4b6f-8145-c2b911c5f9e1)
+![yiyb-blog](https://github.com/yiyb0603/yiyb-blog/assets/50941453/109dd0aa-db52-4b6f-8145-c2b911c5f9e1)

src/components/Modules/Post/PostComment/index.tsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react';
-import useUtterance from '@/hooks/utterance/useUtterance';
+import useGiscus from '@/hooks/giscus/useGiscus';
 import Section from '@/components/Common/Section';
 
 const PostComment = (): JSX.Element => {
   const commentRef = useRef<HTMLElement>(null);
 
-  useUtterance(commentRef);
+  useGiscus(commentRef);
 
   return (
     <Section
@@ -14,6 +14,6 @@ const PostComment = (): JSX.Element => {
       margin='6rem 0 0 0'
     ></Section>
   );
-}
+};
 
-export default PostComment;
+export default PostComment;

src/hooks/giscus/useGiscus.ts

@@ -0,0 +1,62 @@
+import { RefObject, useRef, useEffect } from 'react';
+import { SystemTheme } from '@/enums/theme';
+import { giscusSetup } from '@/libs/giscus';
+import useTheme from '../theme/useTheme';
+
+const useGiscus = <T extends HTMLElement>(giscusRef: RefObject<T>): void => {
+  const { theme } = useTheme();
+
+  const initializedRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (
+      giscusRef.current === null ||
+      initializedRef.current ||
+      theme === SystemTheme.DEFAULT
+    ) {
+      return;
+    }
+
+    const giscusScript = document.createElement('script');
+
+    for (const [key, value] of Object.entries(giscusSetup)) {
+      giscusScript.setAttribute(key, value);
+    }
+
+    if (theme === SystemTheme.LIGHT) {
+      giscusScript.setAttribute('data-theme', 'light');
+    } else {
+      giscusScript.setAttribute('data-theme', 'cobalt');
+    }
+
+    giscusRef.current.append(giscusScript);
+
+    initializedRef.current = true;
+  }, [giscusRef, theme]);
+
+  useEffect(() => {
+    if (theme === SystemTheme.DEFAULT) {
+      return;
+    }
+
+    const giscusIframe =
+      document.querySelector<HTMLIFrameElement>('.giscus-frame');
+
+    if (giscusIframe === null) {
+      return;
+    }
+
+    giscusIframe.contentWindow?.postMessage(
+      {
+        giscus: {
+          setConfig: {
+            theme: theme === SystemTheme.LIGHT ? 'light' : 'cobalt',
+          },
+        },
+      },
+      'https://giscus.app'
+    );
+  }, [theme]);
+};
+
+export default useGiscus;

src/hooks/theme/useTheme.ts

@@ -1,35 +1,39 @@
 import { useCallback, useEffect } from 'react';
 import { getCookie, setCookie } from 'cookies-next';
+import dayjs from 'dayjs';
 import { OS_DARK_THEME } from '@/constants/theme';
 import { SystemTheme } from '@/enums/theme';
 import isEmpty from '@/utils/is-packages/isEmpty';
 import { themeAction } from '@/stores/theme';
 import useAppDispatch from '../redux/useAppDispatch';
 import useRootSelector from '../redux/useRootSelector';
-import dayjs from 'dayjs';
 
 const useTheme = () => {
   const dispatch = useAppDispatch();
 
-  const {
-    theme,
-  } = useRootSelector(({ theme }) => theme);
+  const { theme } = useRootSelector(({ theme }) => theme);
 
-  const setThemeWithoutCookie = useCallback((theme: SystemTheme): void => {
-    document.documentElement.setAttribute('data-theme', theme);
-
-    dispatch(themeAction.changeTheme(theme));
-  }, [dispatch]);
+  const setThemeWithoutCookie = useCallback(
+    (theme: SystemTheme): void => {
+      document.documentElement.setAttribute('data-theme', theme);
 
-  const setTheme = useCallback((theme: SystemTheme): void => {
-    const nonExpireDate = dayjs().add(1000, 'years').toDate();    
+      dispatch(themeAction.changeTheme(theme));
+    },
+    [dispatch]
+  );
 
-    setCookie('theme', theme, {
-      expires: nonExpireDate,
-    });
+  const setTheme = useCallback(
+    (theme: SystemTheme): void => {
+      const nonExpireDate = dayjs().add(1000, 'years').toDate();
 
-    setThemeWithoutCookie(theme);
-  }, [setThemeWithoutCookie]);
+      setCookie('theme', theme, {
+        expires: nonExpireDate,
+      });
+
+      setThemeWithoutCookie(theme);
+    },
+    [setThemeWithoutCookie]
+  );
 
   const toggleTheme = (): void => {
     switch (theme) {
@@ -42,21 +46,24 @@ const useTheme = () => {
       default:
         return;
     }
-  }
+  };
 
-  const systemThemeListener = useCallback((e: MediaQueryListEvent): void => {
-    const cookieTheme = getCookie('theme');
+  const systemThemeListener = useCallback(
+    (e: MediaQueryListEvent): void => {
+      const cookieTheme = getCookie('theme');
 
-    if (!isEmpty(cookieTheme)) {
-      return;
-    }
+      if (!isEmpty(cookieTheme)) {
+        return;
+      }
 
-    if (e.matches) {
-      setThemeWithoutCookie(SystemTheme.DARK);
-    } else {
-      setThemeWithoutCookie(SystemTheme.LIGHT);
-    }
-  }, [setThemeWithoutCookie]);
+      if (e.matches) {
+        setThemeWithoutCookie(SystemTheme.DARK);
+      } else {
+        setThemeWithoutCookie(SystemTheme.LIGHT);
+      }
+    },
+    [setThemeWithoutCookie]
+  );
 
   const initializeTheme = useCallback((): void => {
     const cookieTheme = getCookie('theme');
@@ -70,9 +77,9 @@ const useTheme = () => {
         setThemeWithoutCookie(SystemTheme.LIGHT);
       }
     } else {
-      setTheme(cookieTheme as SystemTheme);
+      setThemeWithoutCookie(cookieTheme as SystemTheme);
     }
-  }, [setTheme, setThemeWithoutCookie]);
+  }, [setThemeWithoutCookie]);
 
   useEffect(() => {
     initializeTheme();
@@ -92,6 +99,6 @@ const useTheme = () => {
     theme,
     toggleTheme,
   };
-}
+};
 
 export default useTheme;

src/libs/giscus.ts

@@ -0,0 +1,17 @@
+export const giscusSetup = {
+  id: 'giscus-comment',
+  src: 'https://giscus.app/client.js',
+  'data-repo': 'yiyb0603/yiyb-blog',
+  'data-repo-id': 'R_kgDOJB64hA',
+  'data-category': 'Blog Comment',
+  'data-category-id': 'DIC_kwDOJB64hM4CaASM',
+  'data-mapping': 'title',
+  'data-strict': '0',
+  'data-reactions-enabled': '1',
+  'data-emit-metadata': '0',
+  'data-theme': 'preferred_color_scheme',
+  'data-input-position': 'bottom',
+  'data-lang': 'ko',
+  crossorigin: 'anonymous',
+  async: 'true',
+};

src/pages/_app.tsx

@@ -7,9 +7,13 @@ import App, {
   NextWebVitalsMetric,
 } from 'next/app';
 import dynamic from 'next/dynamic';
+import cookies from 'next-cookies';
+import { SystemTheme } from '@/enums/theme';
 import gtag from '@/libs/gtag';
+import isEmpty from '@/utils/is-packages/isEmpty';
 import { wrapper } from '@/stores/nextStore';
 import { userAction } from '@/stores/user';
+import { themeAction } from '@/stores/theme';
 import GlobalStyle from '@/styles/GlobalStyle';
 import StyleProvider from '@/components/Providers/StyleProvider';
 import UserTemplate from '@/components/Templates/UserTemplate';
@@ -18,52 +22,49 @@ const Dialog = dynamic(() => import('@/components/Common/Dialog'));
 
 type MyAppProps = AppProps & {};
 
-type CustomAppComponent = NextComponentType<AppContext, AppInitialProps, MyAppProps>;
+type CustomAppComponent = NextComponentType<
+  AppContext,
+  AppInitialProps,
+  MyAppProps
+>;
 
-const MyApp: CustomAppComponent = ({
-  Component,
-  pageProps,
-  ...reduxProps
-}) => {
-  const {
-    store,
-  } = wrapper.useWrappedStore(reduxProps);
+const MyApp: CustomAppComponent = ({ Component, pageProps, ...reduxProps }) => {
+  const { store } = wrapper.useWrappedStore(reduxProps);
 
   return (
-    <ReduxProvider
-      store={store}
-    >
+    <ReduxProvider store={store}>
       <StyleProvider>
         <UserTemplate>
-          <Component
-            {...pageProps}
-          />
+          <Component {...pageProps} />
         </UserTemplate>
 
         <Dialog />
 
-        <GlobalStyle />        
+        <GlobalStyle />
       </StyleProvider>
     </ReduxProvider>
   );
-}
+};
 
-MyApp.getInitialProps = wrapper.getInitialAppProps(({
-  dispatch,
-}) => {
+MyApp.getInitialProps = wrapper.getInitialAppProps(({ dispatch }) => {
   return async (context) => {
     const { ctx } = context;
+    const { theme } = cookies(ctx);
 
     const userAgent = ctx?.req?.headers['user-agent'] || '';
 
     dispatch(userAction.setUserAgent(userAgent));
 
+    if (!isEmpty(theme)) {
+      dispatch(themeAction.changeTheme(theme as SystemTheme));
+    }
+
     return await App.getInitialProps(context);
   };
 });
 
 export const reportWebVitals = (metric: NextWebVitalsMetric): void => {
   gtag.reportWebVitals(metric);
-}
+};
 
-export default MyApp;
+export default MyApp;

src/styles/GlobalStyle.ts

@@ -79,10 +79,6 @@ const GlobalStyle = createGlobalStyle`
   input[type=number] {
     -moz-appearance: textfield;
   }
-
-  .utterances {
-    max-width: 100% !important;
-  }
 `;
 
 export default GlobalStyle;