공식 Notion API로 이미지 렌더링

이 게시물을 작성하는 시점에서 공식 Notion API는 아직 이미지 블록을 지원하지 않습니다. blog template 을 구축 중이므로 게시물에 대한 이미지를 렌더링하기 위한 임시 솔루션을 개발해야 했습니다.

문제를 해결하지 못한 솔루션

게시물에 대한 이미지를 렌더링하는 여러 가지 방법을 살펴보았습니다.

1. 공식 Notion API가 이미지 블록에 대한 지원을 추가할 때까지 기다립니다.

이미지 지원이 없는 블로그는 나를 포함하여 많은 사람들에게 매력적이지 않기 때문에 이것은 선택 사항이 아니었습니다. 또한 한 달이 넘었고 새로운 블록 유형(예: 이미지 블록)이 언제 추가되는지에 대한 업데이트가 없습니다.

2. 이미지에 비공식 개념 API 사용

우리는 이것을 조사했지만 비공식 API에 의존하고 싶지 않았습니다. 다른 플랫폼도 마찬가지라는 것을 알고 있지만 공식 및 비공식 API 호출을 혼합하면 지저분해지고 프로젝트의 복잡성이 증가하므로 낮게 유지하고자 합니다.

postImageSource 배열 소개

Notion API는 텍스트 링크를 지원하므로 템플릿 사용자가 Notion 게시물에 추가할 때 링크 대신 이미지로 렌더링되는 도메인을 지정할 수 있다는 아이디어를 생각해 냈습니다.

예, 이는 동일한 도메인을 사용하여 텍스트 링크를 렌더링할 수 없음을 의미합니다.

구성 파일이 있으므로 템플릿이 이 도메인과의 링크를 발견할 때 사용자가 이미지로 렌더링할 도메인을 지정할 수 있는 배열postImageSource을 추가했습니다.

// site.config.js
postImageSource: [
  'images.unsplash.com',
  'res.cloudinary.com',
  'dl.dropboxusercontent.com',
],

업그레이드 경로를 제공하려면 사용자가 여전히 Notion 문서에 이미지를 업로드하고 이미지 아래에 텍스트 링크를 배치하는 것이 좋습니다. 이렇게 하면 공식 API에서 이미지 블록이 준비되면 postImageSource 역방향으로 작동하도록 하는 옵션을 제공할 수 있습니다. 즉, postImageSource 의 도메인을 포함하는 텍스트 링크 렌더링을 비활성화할 수 있습니다. 궁극적으로 모든 게시물을 업데이트하고 postImageSource를 영구적으로 제거할 수 있습니다.

우리를 지루하게하지 말고 코러스 코드를 얻으십시오!

그래서 Notion API를 활용하는 프로젝트를 진행 중이신가요? 좋아요, 댓글에서 그것에 대해 듣고 싶습니다! 하지만 나는 당신이 여기 있는 이유를 알고 있고 당신이 코드를 원하고 있습니다. 더 이상 고민하지 않고 다음은 이미지를 표시하는 데 필요한 최소한의 코드입니다.

먼저 이미지로 렌더링하려는 도메인을 지정하는 배열을 추가합니다.

const postImageSource = [
  'images.unsplash.com',
  'res.cloudinary.com',
  'dl.dropboxusercontent.com',
];

둘째, 텍스트 개체에 링크 속성이 있는지 확인합니다.

const postImageSource = [
  'images.unsplash.com',
  'res.cloudinary.com',
  'dl.dropboxusercontent.com',
];

if (text.link) {
 ....
}

마지막으로 링크에 도메인이 포함되어 있는지 확인하고 이미지 또는 텍스트 링크를 렌더링할지 여부를 결정합니다.

const postImageSource = [
  'images.unsplash.com',
  'res.cloudinary.com',
  'dl.dropboxusercontent.com',
];

if (text.link) {
  const linkUrl = text.link.url;

  if (postImageSource.some((u) => linkUrl.includes(u))) {
    return <img src={linkUrl} alt="insert alt" />;
  }

  // If the domain is not specified in the postImageSource, render a text link.
  return <a href={linkUrl} target="_blank" rel="noopener noreferrer">{text.content}</a>;
}

이 가이드가 당분간 Notion 기반 웹사이트에 이미지 지원을 추가하는 데 도움이 되기를 바랍니다. Notion의 환상적인 개발자들이 공식을 깨고 곧 이미지와 비디오에 대한 지원을 추가하기를 바랍니다. 그래야 아름다운 가능성의 세계가 열릴 것이기 때문입니다.