blog by izumiz ブログへの実装メモ
基本的には，src/lib/notion/client.tsとsrc/pages/blog/[slug].tsxにおけるblockタイプの条件分岐を増やす修正です．
タイプによってレンダリングするコンポーネントを返してあげる実装を行いました．
ブックマークとツイートの埋め込み実装
ブックマークとツイートの埋め込みについては以下を参考に実装させていただきました！
（ほぼコピペというか参考というか）
Youtubeの埋め込み実装
ブックマークやツイートと同じ要領で，Notionに埋め込まれたblockのTypeがvideoでさらにそれがYoutubeの場合について，Youtube再生のコンポーネントを返してあげるようにします．
video.external.urlからURLをとり，正規表現でvideoIdを取得し，react-youtubeのコンポーネントのvideoIdに突っ込むだけです．
以下のようなものがNotionAPIで取れるはずです．
{
object: 'block',
id: 'xxxx-xxxx',
created_time: '2022-02-05T21:31:00.000Z',
last_edited_time: '2022-02-05T21:31:00.000Z',
has_children: false,
archived: false,
type: 'video',
video: {
caption: [],
type: 'external',
external: { url: 'https://www.youtube.com/watch?v=TsqNgflG5KE' }
}
}
そして，次のような感じで，YoutubePlayerを返せばOKです．
case 'video':
toRender.push(<YoutubePlayer block={block} />)
break
---
function youtubeParser(url) {
var regExp =
/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
var match = url.match(regExp);
return match && match[7].length == 11 ? match[7] : false;
}
const YoutubePlayer = ({ block }) => {
const videoId = youtubeParser(block.Video.Url);
if (videoId) {
return <Youtube videoId={videoId} />;
}
return null;
};
使用したライブラリ・コード
デザインなど
CSSなどは，コピペしたままなので必要に応じて変更していきたいと思います．
（ただ，PC・スマホ両方を考えてやらなきゃなので，当面の間はこのままかも😭）
