Comment를 마크다운으로 작성해 GitHub Issues로 저장할 수 있는 utterances 플러그인을 React에서 사용해보자
1. Comment를 저장할 repository를 생성하고 아래 링크에서 utterances를 연동해준다
GitHub: Where the world builds software
GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
github.com
2. 생성한 repository에 다음 파일을 생성해 플러그인을 사용할 url들을 입력하고 넣어주자
[utterances.json]
{
"origins": [
"http://localhost:3000",
"https://localhost:3000",
"http://frontend-master-library.vercel.app",
"https://frontend-master-library.vercel.app"
]
}
3. React 프로젝트에서 다음과 같이 사용할 수 있다
[utterances.tsx]
import React, { createRef, useLayoutEffect } from "react";
const src = "https://utteranc.es/client.js";
export interface IUtterancesProps {
repo: string;
theme: string;
}
const Utterances: React.FC<IUtterancesProps> = React.memo(({ repo, theme }) => {
const containerRef = createRef<HTMLDivElement>();
useLayoutEffect(() => {
const utterances = document.createElement("script");
const attributes = {
src,
repo,
theme,
"issue-term": "pathname",
label: "💬 comments",
crossOrigin: "anonymous",
async: "true",
};
Object.entries(attributes).forEach(([key, value]) => {
utterances.setAttribute(key, value);
});
containerRef.current!.appendChild(utterances);
}, [repo]);
return <div ref={containerRef} />;
});
Utterances.displayName = "Utterances";
export default Utterances;
* Issue title contains page pathname 옵션으로, url의 pathname 기준으로 Issue가 구분
[detail.tsx]
import Utterances from "../api/utterances";
...
<Utterances repo="FTOOOS/comment" theme="photon-dark" />
...
* repo는 계정/연동한 repository이름을 입력
다른 테마들 및 옵션은 공식 문서에서 확인할 수 있다!
utterances
utteranc.es
'Front-end > React' 카테고리의 다른 글
[TIL] CRA & TypeScript & Electron 환경 구축 (0) | 2022.07.19 |
---|---|
[TIL] react-animation-on-scroll 간단한 스크롤 애니메이션 (0) | 2022.04.25 |
[TIL] CRA & TypeScript 초기 세팅 (ESLint & Prettier) (0) | 2022.03.26 |
[TIL] Gatsby 템플릿으로 React 홈페이지 만들기 (10) | 2022.02.10 |
[TIL] progress 태그 애니메이션 (2) | 2022.02.07 |