見出し画像

Notion Blogのブックマークを表示する

この記事はこちらのクロスポストです

ブックマークに対応していなかったので、リッチリンクで表示してみました。

概要

ブックマークを入れていても表示されないのですが、リンク先のサムネイル や説明文などはNotionが取得してくれているので、それをそのままリッチリンク風に表示するようにしてみました。

修正内容

ブックマークがあった場合、リッチリンクとして表示しているだけです。

Notion本家のリッチリンクを参考にしてスタイルを当てています。

コードをここに書くよりコミットを〜ということで💦

注意としてはサムネイル などが取れなかった場合には対応していないので不格好になります😅そこは適当に処理を入れてください〜

Notionデータ

あとがき

Notionがとれないサムネイル や説明文には対応できないので、react-tiny-linkなどを使って別途取得したほうがいいかも?と思ったらSSR対応してないっぽいな〜、何かいいコンポーネントないかな🤣

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
残念なプログラマ🤪 エラートラップ?なにそれ😇

こちらでもピックアップされています

コーディングやWeb
コーディングやWeb
  • 11本

プログラミングの話やらHeroku等のサービスやらいろいろ

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。