utterances 이용한 댓글 기능

블로그에 댓글 기능을 추가하려고 이것저것을 찾는 와중에 기존에 알고 있었던 disqus는 무겁다는 글을 보게 됐다.
그래서, Github issue를 활용해 댓글을 달 수 있게하는 utterances 알게 됐고, 적용해보려고 한다.

1. utternaces app을 설치하고, 원하는 repo를 선택해서 적용한다.
2. 모든 레포 혹은 선택한 레포를 적용할 수 있다.
3. issue를 읽고 만들 수 있는 권한을 부여한다.
4. pulic으로 된 레포와 연결해야한다.

<script src="https://utteranc.es/client.js"
        repo="[public repo name]" <- issue를 생성할 레포를 설정(public)
        issue-term="[select mapping method]" <- 생성되는 이슈의 이름을 정함
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

3. issue-term은 utterances에 적혀있는 방법들 중 하나를 선택해서 하면 된다.
4. pathname을 선택했는데, url에서 origin 주소를 제외하고 나머지 pathname이 issue의 제목으로 생성된다.
5. script 태그를 추가해주면 정상적으로 작동한다.

React(Gatsby)에 적용하기

1. script tag를 직접 붙여넣어야하는데, jsx문법의 경우 script 태그를 생성하지 못하는 듯 하다.
2. 그래서, useEffect를 이용해서 script 태그를 만들고 해당 태그를 element에 append 하는 방법으로 해결했다.
3. 레이아웃을 커스텀하고 싶다면, .utterances 와 .utterances-frame를 사용하면 된다.

export default function Template(){
  const commentDiv = useRef(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://utteranc.es/client.js";
    script.setAttribute("issue-term", "[select mapping method](ex. pathname, etc");
    script.setAttribute("repo", "[repo name](ex. johndoe/johndoe.github.io");
    script.setAttribute("theme", "github-light");
    script.crossOrigin = "anonymous";
    script.async = true;
    commentDiv.current.appendChild(script);
  }, []);

  return (
    <Layout>
      <div ref={commentDiv}></div>
    </Layout>
  );
}