GitHub에서 제공하는 블로그 댓글

블로그 개발의 마지막 단계에 있을 때 댓글을 처리하는 가장 좋은 방법을 찾기 시작했습니다. 일반적인 용의자 목록(예: Disqus )을 검토한 후 GitHub를 사용하여 댓글을 작성하는 주제에 대한 일련의 블로그 게시물(1 , 2 , 3 및 more )을 발견했습니다. . 계속 파헤치면서 앞서 언급한 블로그 게시물에서 일반적인 패턴을 발견했습니다. 사람들은 Disqus가 얼마나 느리고 비대하고 개인 정보를 침해하는지 때문에 GitHub 솔루션을 위해 Disqus를 버리고 있었습니다. 나는 이제 GitHub를 활용하는 것이 갈 길이라고 확신했습니다.

그래서 필요한 모든 구성 요소에 대해 메모하기 시작했습니다. GitHub API 속도 제한 처리, 댓글 섹션 스타일 지정, 모든 블로그 게시물에 대한 GitHub 문제 생성 프로세스 자동화 등과 같은 작업을 수행했습니다. 그런 다음 Utterances 을(를) 만났습니다.

발화

Utterances는 블로그에 GitHub 지원 댓글 섹션을 두고 GitHub app 에 패키징하기 위해 해야 할 모든 노력을 기울입니다. 그것은 open source이며 심지어 어두운 테마와 함께 제공됩니다! 나는 이미 그것을 my blog에 통합했으며 전체 프로세스가 완전히 고통스럽지 않다는 것을 확인할 수 있습니다. 설정하기 위해 취해야 할 단계 목록은 다음과 같습니다.

공개 GitHub 리포지토리 만들기

첫 번째 단계는 create a public GitHub repository for housing my blog's comments 이었습니다.

발화 앱 설치

그런 다음 위에서 만든 저장소에 Utterances GitHub app을 설치해야 했습니다.

스크립트 태그 생성

그런 다음 configuration section on the Utterances website을 사용하여 나중에 내 블로그에 로드할 스크립트 태그를 생성했습니다. 내 경우의 스크립트 태그는 다음과 같습니다.

<script src="https://utteranc.es/client.js"
        repo="loizoskounios/blog-comments-tracker"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

스크립트 로드

남은 것은 스크립트를 내 Gatsby 블로그에 로드하는 것뿐이었습니다. 운 좋게도 React에서 이것을 설정하는 것은 상당히 쉬웠습니다.

React에서 스크립트를 로드하려면 스크립트 요소를 수동으로 생성하고 다른 요소에 자식으로 추가해야 했습니다. 저는 document 전역을 사용하여 스크립트 요소를 생성하고 Reactref를 사용하여 스크립트 요소를 수용할 구성 요소에 대한 참조를 유지했습니다. 이것은 모든 불필요한 노이즈(Gatsby 정적 쿼리, 스타일 구성 요소 등)를 제거한 상태에서 결국 수행한 작업입니다.

import React from 'react';

class Comments extends React.Component {
  constructor(props) {
    super(props);

    this.commentsEl = React.createRef();
    this.state = { status: 'pending' };
  }

  componentDidMount() {
    const scriptEl = document.createElement('script');
    scriptEl.onload = () => this.setState({ status: 'success' });
    scriptEl.onerror = () => this.setState({ status: 'failed' });
    scriptEl.async = true;
    scriptEl.src = 'https://utteranc.es/client.js';
    scriptEl.setAttribute('repo', 'loizoskounios/blog-comments-tracker');
    scriptEl.setAttribute('issue-term', 'title');
    scriptEl.setAttribute('theme', 'github-light');
    scriptEl.setAttribute('crossorigin', 'anonymous');
    this.commentsEl.current.appendChild(scriptEl);
  }

  render() {
    const { status } = this.state;

    return (
      <div className="comments-wrapper">
        {status === 'failed' && <div>Error. Please try again.</div>}
        {status === 'pending' && <div>Loading script...</div>}
        <div ref={this.commentsEl} />
      </div>
    );
  }
}

export default Comments;

최종 결과

이것은 더미 블로그 게시물의 최종 결과입니다.



이 기능이 실제로 어떻게 작동하는지 확인하려면 Utterances가 이미 my blog에 통합되어 있습니다. 마음껏 놀이터로 사용하세요.