fix: md-to-markdown - Githubissues

📝 PR 유형

[x] 🚀 feature 기능 추가
[x] 🐞 버그 발생
[ ] 🔨 리팩토링
[ ] 📋 문서작성
[ ] 🌍 빌드 설정 및 문제
[ ] ETC

📝 PR 설명

notion data 컴포넌트 변환

✅ 작업 목록

커스텀 컴포넌트 연동

Anchor
BlockQuote
Callout
IndexList(목차)
Paragraph

css 수정

MR하기 전에 확인해주세요

[ ] local code lint 검사를 진행하셨나요?
[ ] loca ci test를 진행하셨나요?

📚 논의사항

callout component

Callout 의 경우 사용하는 라이브러리에서 지원하지 않아 복잡하게 처리 하였습니다.

function customizeMdBlocks(blocks: any[]) {
  return blocks.map(block => {
    if (block.type === "callout") {
      const content = block.parent.replace(/>\s*(\S+)\s*/, "").trim();
      const newContent = `> [callout] ${content}`;

      return {
        ...block,
        type: "blockquote",
        parent: newContent
      };
    }
    return block;
  });
}

1차로 노션 데이터를 md block으로 변환 시 중간에 [callout] 이라는 키워드를 넣어서 아래와 같이 분기로 받아 처리 할 수 있게 하였습니다.

 blockquote: ({ node, ...props }) => {
            const content = getChildrenContent(props.children);

            if (content.startsWith("[callout]")) {
              return <Callout>{content.substring("[callout]".length).trim()}</Callout>;
            }

            return <BlockQuote {...props} />;

Anchor component

Anchor의 경우 그대로 사용 할 경우 이동하려는 경로가 표시되어 아래와 코드로 이동하려는 페이지에서 title, og title 등을 파싱하여 텍스트로 보여주게 처리하였습니다.

export const Anchor = (props: any) => {
  const parse = async () => {
    try {
      const response = await fetch(props.href);
      const text = await response.text();

      const title = text.match(/<title[^>]*>(.*?)<\/title>/i);
      if (title && title[1]) return title[1];

      const ogTitle = text.match(/<meta\s+property="og:title"\s+content="(.*?)"/i);
      if (ogTitle && ogTitle[1]) return ogTitle[1];

      return null;
    } catch (error) {
      console.error("Error fetching title:", error);
    }
  };

  return <Link {...props}>{parse() || props.children}</Link>;
};

추가 고려 사항

디자인을 완벽하게 적용하지 않았습니다. 각 태그에 따른 컴포넌트를 만들어서 대응이 필요합니다 ex) li, check box, ..
다크 모드 일 경우 처리가 필요합니다
📚 ETC

fotcamp / tech-blog

fix: md-to-markdown #16