Merge pull request #177 from devHudi/feature/176

feat: migrate from utterances to giscus

README-kr.md

@@ -22,7 +22,7 @@ gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gats
 - 시리즈 분류
 - 반응형 웹
 - SEO
-- Utterance (댓글 위젯)
+- Giscus
 
 아래 단계를 따라서 여러분의 블로그를 시작하세요. 굉장히 쉬워요 😉.
 
@@ -45,7 +45,7 @@ $ npm run start
 
 ## 3. Github 레포지토리 생성
 
-Utterance 댓글 위젯은 **Github 이슈 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다.
+Giscus 댓글 위젯은 **Github Discuss 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다.
 
 만약 Github 레포지토리를 생성하는 법을 모른다면, [Github 공식 문서](https://docs.github.com/en/github/getting-started-with-github/create-a-repo) 를 참조하세요.
 
@@ -69,14 +69,21 @@ module.exports = {
     instagram: "https://www.instagram.com",
     etc: "https://www.google.com/",
   },
-  utterances: {
+  giscus: {
     repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
-    type: "pathname",
+    repoId: "{YOUR_GITHUB_REPOSITORY_ID}",
+    category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}",
+    categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}",
+    mapping: "pathname",
+    strict: "0",
+    reactionsEnabled: "1",
+    inputPosition: "bottom",
+    lang: "en",
   },
 }
 ```
 
-gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Utterance 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. 하지만, `utterances.type` 속성은 수정하지 않는 것을 권장합니다.
+gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Giscus 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요.
 
 ## 5. 포스트 추가
 

README.md

@@ -32,7 +32,7 @@ This project inspired by [velog](https://velog.io).
 - Series Categorization
 - Responsive Web
 - SEO
-- Utterance (Comment widget)
+- Giscus
 
 Getting started your blog with gatsby-starter-hoodie by following steps below. It's very easy 😉.
 
@@ -55,7 +55,7 @@ Now you can access to your blog at localhost:8000.
 
 ## 3. Create your own Github repository
 
-Utterance comment widget is based on **Github issue system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary.
+Giscus comment widget is based on **Github Discuss system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary.
 
 If you don't know how to create a GitHub repository, follow the [official GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/create-a-repo).
 
@@ -79,16 +79,21 @@ module.exports = {
     instagram: "https://www.instagram.com",
     etc: "https://www.google.com/",
   },
-  utterances: {
+  giscus: {
     repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
-    type: "pathname",
+    repoId: "{YOUR_GITHUB_REPOSITORY_ID}",
+    category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}",
+    categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}",
+    mapping: "pathname",
+    strict: "0",
+    reactionsEnabled: "1",
+    inputPosition: "bottom",
+    lang: "en",
   },
 }
 ```
 
-gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and utterance.
-
-Configure `blog-config.js` to suit your blog. However, it is recommended not to modify `utterances.type`.
+gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and giscus. Configure `blog-config.js` to suit your blog.
 
 ## 5. Add your content
 

blog-config.js

@@ -16,8 +16,16 @@ module.exports = {
     resume: "https://hudi.blog",
     link: "https://hudi.blog",
   },
-  utterances: {
+  // See https://giscus.app/
+  giscus: {
     repo: "devHudi/gatsby-starter-hoodie",
-    type: "pathname",
+    repoId: "MDEwOlJlcG9zaXRvcnkzNjk4NjMzNTg=",
+    category: "Comments",
+    categoryId: "DIC_kwDOFguqvs4ChwGy",
+    mapping: "pathname",
+    strict: "0",
+    reactionsEnabled: "1",
+    inputPosition: "bottom",
+    lang: "en",
   },
 }

contents/posts/about-hoodie-kr/index.md

@@ -25,7 +25,7 @@ gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gats
 - 시리즈 분류
 - 반응형 웹
 - SEO
-- Utterance (댓글 위젯)
+- Giscus
 
 ## 시작
 

contents/posts/about-hoodie/index.md

@@ -25,7 +25,7 @@ Start your blog with a neatly designed gatsby-starter-hoodie that supports dark
 - Series Categorization
 - Responsive Web
 - SEO
-- Utterance (Comment widget)
+- Giscus
 
 ## Let's get started
 

contents/posts/other-tips-kr/index.md

@@ -15,10 +15,6 @@ series: "gatsby-starter-hoodie 로 블로그 시작하기"
 
 만약 파비콘 파일의 이름을 변경하고 싶다면, `gatsby-config.js` 파일의 `gatsby-plugin-manifest` 에서 `icon` 속성을 변경하셔야합니다.
 
-## Utterance 가 제대로 작동하지 않아요.
-
-http 환경에서는 Utterance 가 제대로 작동하지 않을 수 있습니다. 여러분의 웹사이트를 https 환경으로 제공하세요.
-
 ## OG Image 를 설정하고 싶어요.
 
 `/static` 디렉토리의 `og-image.png` 파일을 여러분이 원하는 이미지 파일로 대체하세요.

contents/posts/other-tips/index.md

@@ -15,10 +15,6 @@ The favicon is located in `static/favicon.png`. If you replace that image, the f
 
 If you want to change the name of the favicon, change the `icon` property of `gatsby-plugin-manifest` in `gatsby-config.js`.
 
-## Utterance is not working properly.
-
-In the http environment, utterance may not work properly. Host your blog with https.
-
 ## How to set OG Image?
 
 Replace the `og-image.png` file in the `/static` directory with your own image file.

contents/posts/quick-start-kr/index.md

@@ -30,7 +30,7 @@ $ npm run start
 
 ## 3. Github 레포지토리 생성
 
-Utterance 댓글 위젯은 **Github 이슈 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다.
+Giscus 댓글 위젯은 **Github Discuss 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다.
 
 만약 Github 레포지토리를 생성하는 법을 모른다면, [Github 공식 문서](https://docs.github.com/en/github/getting-started-with-github/create-a-repo) 를 참조하세요.
 
@@ -54,14 +54,21 @@ module.exports = {
     instagram: "https://www.instagram.com",
     etc: "https://www.google.com/",
   },
-  utterances: {
+  giscus: {
     repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
-    type: "pathname",
+    repoId: "{YOUR_GITHUB_REPOSITORY_ID}",
+    category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}",
+    categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}",
+    mapping: "pathname",
+    strict: "0",
+    reactionsEnabled: "1",
+    inputPosition: "bottom",
+    lang: "en",
   },
 }
 ```
 
-gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Utterance 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. 하지만, `utterances.type` 속성은 수정하지 않는 것을 권장합니다.
+gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Giscus 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요.
 
 ### 프로필 이미지 변경
 

contents/posts/quick-start/index.md

@@ -30,7 +30,7 @@ Now you can access to your blog at localhost:8000.
 
 ## 3. Create your own Github repository
 
-Utterance comment widget is based on **Github issue system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary.
+Giscus comment widget is based on **Github Discuss system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary.
 
 If you don't know how to create a GitHub repository, follow the [official GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/create-a-repo).
 
@@ -55,16 +55,21 @@ module.exports = {
     instagram: "https://www.instagram.com",
     etc: "https://www.google.com/",
   },
-  utterances: {
+  giscus: {
     repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
-    type: "pathname",
+    repoId: "{YOUR_GITHUB_REPOSITORY_ID}",
+    category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}",
+    categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}",
+    mapping: "pathname",
+    strict: "0",
+    reactionsEnabled: "1",
+    inputPosition: "bottom",
+    lang: "en",
   },
 }
 ```
 
-gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and utterance. The website settings you are currently viewing are as above.
-
-Configure `blog-config.js` to suit your blog. However, it is recommended not to modify `utterances.type`.
+gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and giscus. The website settings you are currently viewing are as above. Configure `blog-config.js` to suit your blog.
 
 ### Change profile image
 

package.json

@@ -6,6 +6,7 @@
   "version": "0.2.0",
   "author": "Hudi",
   "dependencies": {
+    "@giscus/react": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.11.0",
@@ -49,8 +50,7 @@
     "redux": "^4.2.1",
     "sharp": "^0.32.1",
     "styled-components": "^5.2.1",
-    "styled-reset": "^4.4.7",
-    "utterances-react-component": "^1.0.0"
+    "styled-reset": "^4.4.7"
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",

src/components/Article/Footer/Comment.jsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { useSelector } from "react-redux"
+import Giscus from "@giscus/react"
+
+import { giscus } from "../../../../blog-config"
+
+const Comment = () => {
+  const { theme } = useSelector(state => state.theme)
+
+  return (
+    <Giscus
+      id="comments"
+      repo={giscus.repo}
+      repoId={giscus.repoId}
+      category={giscus.category}
+      categoryId={giscus.categoryId}
+      mapping={giscus.mapping}
+      strict={giscus.strict}
+      reactionsEnabled={giscus.reactionsEnabled}
+      inputPosition={giscus.inputPosition}
+      lang={giscus.lang}
+      theme={theme === "light" ? "light" : "dark"}
+      emitMetadata="0"
+    />
+  )
+}
+
+export default Comment

src/components/Article/Footer/index.jsx

@@ -1,16 +1,11 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 import { navigate } from "gatsby"
-import { useSelector } from "react-redux"
-import styled, { useTheme } from "styled-components"
+import styled from "styled-components"
 import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"
-import { Utterances } from "utterances-react-component"
-
-import { utterances } from "../../../../blog-config"
-
-import MDSpinner from "react-md-spinner"
 
 import Divider from "components/Divider"
 import Bio from "components/Bio"
+import Comment from "./Comment"
 
 const ArticleButtonContainer = styled.div`
   display: flex;
@@ -111,18 +106,6 @@ const CommentWrapper = styled.div`
   }
 `
 
-const SpinnerWrapper = styled.div`
-  height: 200px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-const HiddenWrapper = styled.div`
-  height: ${props => (props.isHidden ? "0px" : "auto")};
-  overflow: ${props => (props.isHidden ? "hidden" : "auto")};
-`
-
 const ArticleButton = ({ right, children, onClick }) => {
   return (
     <ArticleButtonWrapper right={right} onClick={onClick}>
@@ -139,49 +122,6 @@ const ArticleButton = ({ right, children, onClick }) => {
   )
 }
 
-const Spinner = () => {
-  const theme = useTheme()
-  return (
-    <SpinnerWrapper>
-      <MDSpinner singleColor={theme.colors.spinner} />
-    </SpinnerWrapper>
-  )
-}
-
-const Comment = () => {
-  const { theme } = useSelector(state => state.theme)
-  const [spinner, setSpinner] = useState(true)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setSpinner(false)
-    }, 1500)
-  }, [])
-
-  return (
-    <>
-      {spinner && <Spinner />}
-
-      <HiddenWrapper isHidden={spinner}>
-        <HiddenWrapper isHidden={theme === "light"}>
-          <Utterances
-            repo={utterances.repo}
-            theme={`github-dark`}
-            issueTerm={utterances.type}
-          />
-        </HiddenWrapper>
-        <HiddenWrapper isHidden={theme === "dark"}>
-          <Utterances
-            repo={utterances.repo}
-            theme={`github-light`}
-            issueTerm={utterances.type}
-          />
-        </HiddenWrapper>
-      </HiddenWrapper>
-    </>
-  )
-}
-
 const Footer = ({ previous, next }) => {
   return (
     <>
@@ -199,9 +139,11 @@ const Footer = ({ previous, next }) => {
           </ArticleButton>
         )}
       </ArticleButtonContainer>
+
       <Bio />
       <CommentWrapper>
         <Divider mt="32px" />
+
         <Comment />
       </CommentWrapper>
     </>