내 포트폴리오 웹 사이트에 대한 변경 로그 페이지를 만들었습니다.

모든 웹사이트의 변경 로그 페이지는 새롭고 의미 있는 변경 사항으로 청중을 최신 상태로 유지하는 좋은 방법입니다.
이전 게시물에서 내 포트폴리오 웹사이트에 대한 변경 로그 페이지를 만들 것이라고 언급했습니다. 그래서 주말에 시간을 내서 작업을 했습니다.

페이지 링크: ma-ahmad/changelog
Github 저장소: https://github.com/MA-Ahmad/myPortfolio

내 포트폴리오 웹사이트의 PR을 가져오기 위해 Github Api을 사용했습니다. 요구 사항에 따라 Github Api로 재생할 수 있습니다.

패키지:

remark

remark-html

react-html-parser

참고: mdx 콘텐츠 처리를 위해 위에서 언급한 패키지를 사용했습니다.

다음은 내 포트폴리오 웹사이트의 PR 목록을 가져온 후 mdx 콘텐츠를 처리하는 코드 덩어리입니다.

//Imports
import remark from 'remark'
import html from 'remark-html'

//Component code
const [prDataState, setPrDataState] = useState(null)
const processPrBody = async () => {
    await prData?.map(async (obj) => {
      if (obj.body) {
        const htmlBody = await remark().use(html).process(obj.body)
        obj['body_html'] = String(htmlBody)
      }
    })
    setPrDataState(prData)
  }

Complete File code

페이지 이미지

당신의 지지를 보여주세요

내 작업이 마음에 든다면 Github에서 ⭐️를 주세요!