23.06.30

오늘 한 일

DogSounds TIL에 검색 및 댓글 기능 추가
Next.js 번역 PR

하루 요약

13:00 ~ 17:00 : Next.js 번역 후 PR
23:00 ~ 01:00 : DogSounds TIL에 검색 및 댓글 기능 추가

DogSounds TIL

검색 기능 추가

Algolia를 사용하여 검색 기능을 추가했다.

docusaurus.config.js 수정

module.exports = {
  //...
  themeConfig: {
    //...
    algolia: {
      appId: '55PPSXAP11',
      apiKey: 'bded4ade906245dfda8034bd40daeb7c',
      indexName: 'til',
      contextualSearch: true,
    },
  },
};

위에 키는 공개되도 상관없는 키이다.

algolia-config.json 추가

{
  "index_name": "til",
  "start_urls": ["https://self-driven-development.github.io/Dogsounds-TIL/"],
  "sitemap_urls": ["https://self-driven-development.github.io/Dogsounds-TIL/sitemap.xml"],
  "sitemap_alternate_links": true,
  "stop_urls": ["/tests"],
  "selectors": {
    "lvl0": {
      "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
      "type": "xpath",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "header h1",
    "lvl2": "article h2",
    "lvl3": "article h3",
    "lvl4": "article h4",
    "lvl5": "article h5, article td:first-child",
    "lvl6": "article h6",
    "text": "article p, article li, article td:last-child"
  },
  "strip_chars": " .,;:#",
  "custom_settings": {
    "separatorsToIndex": "_",
    "attributesForFaceting": ["language", "version", "type", "docusaurus_tag"],
    "attributesToRetrieve": ["hierarchy", "content", "anchor", "url", "url_without_anchor", "type"]
  },
  "conversation_id": ["833762294"],
  "nb_hits": 46250
}

docker run

docker run -it --env-file=.env -e "CONFIG=$(cat ./algolia-config.json | jq -r tostring)" algolia/docsearch-scraper

Github Action으로 자동화

TIL이 올라올 때마다 docker run을 하기 귀찮아서 Github Action으로 자동화했다.

name: Algolia

on:
  push:
    branches:
      - main

jobs:
  update-index:
    name: Update Algolia index
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Algolia DocSearch
        uses: darrenjennings/algolia-docsearch-action@master
        with:
          algolia_application_id: ${{ secrets.ALGOLIA_APPLICATION_ID }}}
          algolia_api_key: ${{ secrets.ALGOLIA_API_KEY }}
          file: algolia-config.json

근데 계속 실패해서 내일 다시 시도해봐야겠다..

댓글 기능 추가

utterances를 사용하여 댓글 기능을 추가했다.

Comment 컴포넌트 추가

import React, { useEffect, useRef } from 'react';
import { useColorMode } from '@docusaurus/theme-common';

function Comment() {
  const containerRef = useRef(null);
  const utterancesRef = useRef(null);

  const { colorMode } = useColorMode();
  const utterancesTheme = colorMode === 'dark' ? 'github-dark' : 'github-light';

  useEffect(() => {
    const createUtterancesEl = () => {
      const script = document.createElement('script');
      script.src = 'https://utteranc.es/client.js';
      script.setAttribute('repo', 'Self-Driven-Development/Dogsounds-TIL');
      script.setAttribute('issue-term', 'title');
      script.setAttribute('label', 'comment');
      script.setAttribute('theme', utterancesTheme);
      script.crossOrigin = 'anonymous';
      script.async = true;
      script.onload = () => {
        utterancesRef.current = document.querySelector('.utterances-frame');
      };

      containerRef.current.appendChild(script);
    };
    createUtterancesEl();
  }, []);

  useEffect(() => {
    if (!utterancesRef.current) return;
    const message = {
      type: 'set-theme',
      theme: utterancesTheme,
    };

    utterancesRef.current.contentWindow.postMessage(message, 'https://utteranc.es');
  }, [utterancesTheme]);

  return <div ref={containerRef} />;
}
export default Comment;

DocItem 컴포넌트 수정

pnpm swizzle @docusaurus/theme-classic DocItem --danger

위 명령어를 통해 DocItem 컴포넌트를 수정할 수 있다.

그럼 이제 DocItem 컴포넌트 안에 Comment 컴포넌트를 추가하면 된다.

import React from 'react';
import DocItem from '@theme-original/DocItem';
import Comment from '@site/src/components/Comment';

export default function DocItemWrapper(props) {
  return (
    <>
      <DocItem {...props} />
      <Comment />
    </>
  );
}

근데 기본적으로 utterances는 문서의 가운데에 위치해서 뭔가 봤을 때 살짝 삐져나와서 불편하다. 그래서 왼쪽 정렬을 해주었다.

// src/css/custom.css
.utterances {
  margin-left: 0;
}

이제 모든 TIL들에 댓글을 달 수 있게 되었다! 댓글을 달면 해당 레포의 Issue가 추가되는 형식이라 따로 서버를 구축할 필요가 없어서 가볍고 좋다.

더 구현할 것

이제 어느정도 완료가 되었는데, 두 가지 중 고민이다.

기존처럼 TIL 레포지토리에 올리면 자동으로 DogSounds-TIL 레포지토리에서 빌드되도록 설정
TIL 레포지토리에서 DogSounds-TIL 레포지토리로 이전

최대한 1번 방향으로 하고 싶다. 대신 세팅이 좀 까다로울 것 같다.

아까 조금 찾아봤는데 github-action-push-to-another-repository 액션을 사용하면 기존 레포 그대로 사용할 수 있을 것 같다.

이거 해보고 안되면 그냥 2번 방식으로 하자.

아, 그리고 여러명이 하루에 TIL을 올릴테니까 시간을 맞춰서 하루에 한번 빌드되는 식으로 설정해야겠다.

내일 할 일

algolia 자동화
TIL 레포지토리에 올리면 자동으로 DogSounds-TIL 레포지토리에서 빌드되도록 설정 시도
CS 스터디 공부

23.06.30

오늘 한 일​

하루 요약​

DogSounds TIL

검색 기능 추가​

docusaurus.config.js 수정​

algolia-config.json 추가​

docker run​

Github Action으로 자동화​

댓글 기능 추가​

Comment 컴포넌트 추가​

DocItem 컴포넌트 수정​

더 구현할 것​

내일 할 일​