fruition-with-comments :: Fruition에 댓글 시스템 추가하기
💬

fruition-with-comments :: Fruition에 댓글 시스템 추가하기

Created
Sep 26, 2021 04:11 PM
Tags
notion image
 
 
요즘 Notion을 이용해 블로그를 하는 사람들이 많아졌다.
다만 Notion은 커스텀 도메인이나 스레드 타입 댓글 시스템과 같은...
어떻게 보면 필수적이라 할 수 있는 기능들을 제공해 주지 않고 있어 약간의 불편함이 있었다.
 
물론 이를 타겟팅하는 SuperOopy같은 서비스들이 있지만, 돈을 내야 하지 않는가?
굳이 나는 돈을 낼 필요가 있나 생각했었고... 한 번 직접 구성해보자 마음먹게 되었다.
 
먼저 커스텀 도메인의 경우, Fruition 이라는 멋진 오픈소스 프로젝트가 있어 이를 이용했으나.
여기서는 댓글 시스템을 제공해주지 않고 있었기 때문에 그 쪽은 직접 구성할 필요가 있었다.
혹시나 해서 r/Notion 이나 Issues, PR을 모두 확인해 봤지만, 딱히 건질 것은 없었다.
(아마도) 내가 처음 Fruition에 댓글 시스템을 추가해보는 그런 사람이지 않을까? 싶었다.
 
자 그럼... 댓글 시스템을 어떻게 추가해줄 수 있을까? 이 역시 답 자체는 간단했다.
기존에 눈여겨 봤던 프로젝트 중 하나인 Giscus를 이용해 댓글 시스템을 추가해보자는 것.
그래서 시도했고, PoC 결과 실제 가능한 것을 확인해서 바로 이에 대한 매뉴얼을 작성했다.
 
다만 PoC 과정에서 잡아내지 못했던 이슈들이 있었는데... 각각 이랬다.
 
  • 모바일에서 레이아웃 깨짐 → CSS Media Query 이용
  • 로그인 때때로 안 됨 → Fruition과 Giscus 사이에서 Race Condition 발생
 
특히 두 번째 이슈는... 좀 많이 애를 먹어 거진 하루를 모두 소진해야 했었다.
아무튼, Giscus 깃헙에서 코드를 하나하나 따라가보며 찾아낸 이유는 약간 허탈했다.
 
Fruition에서는 location.search 를 자동으로 제거해주는데,
Giscus는 GitHub OAuth Token 등록 시 이를 이용하기 때문에...
Giscus의 Fetch 속도에 따라 로그인이 되었다가 되지 않았다가 했던 것.
 
아무튼 이를 해결했고, 해결 후 또 나타났던 약간의 버그들도 Fix해주는 과정을 거쳐...
어느정도 완성이 된 상태가 되었다. 물론 이 블로그에도 적용이 되어 있는 상태다.
(현재는 nextjs-notion-starter-kit 이용중)
 
아무튼 이렇게 댓글 추가가 가능했고, 이를 이제 다른 사람들에게 소개하는 것만 남았다.
Notion을 커스텀 도메인 붙여서 배포하는 방법부터 댓글 시스템 추가하는 것 까지 작성 후,
이를 r/Notion 이랑 Geeknews랑 Hackernews? 에 소개해봐야겠다.
솔직히 홍보보다는 그냥 필요한 사람이 있을까봐(나중에라도)... 아무튼 그랬다.
 

Loading Comments...