react-selectとreact-markdown
このサイトの改善をしたいなと思って色々やりたいことを整理してた。
そもそもどんな完成形があるのかを知らないので、よく参考にさせてもらっていたblog.owlcode.netのソースコードを見たりしてた。
そういえば普段自分はVue/Nuxtを書いているのでReactのライブラリあんまり知らないなと思ったので、package.jsonを見てどんなライブラリを使っているのか見させてもらった。
blog.owlcode.net/package.json at main · TakahiroHimi/blog.owlcode.net
react-select
JedWatson/react-select: The Select Component for React.js
完成度の高いselectコンポーネントという感じ。
ドロップダウンリストがすごく簡単にできるっぽいので、これ使おうかなと思った。
blog.owlcode.netではタグでの絞り込みや年月での絞り込みが実装されていたので、真似しようかなと思いました……めっちゃいい。
react-markdown
remarkjs/react-markdown: Markdown component for React
React で Markdown を扱うときに便利な react-markdown と remove-markdown - きみはねこみたいなにゃんにゃんなまほう
このサイトではNext.jsのブログ作成のチュートリアルそのままremarkを使ってマークダウンをパースしているんだけど、内部でremarkを使っているらしく移行自体はそんなに難しくなさそう。
safe by default (no dangerouslySetInnerHTML or XSS attacks)
これだけでもよさそう、remarkではdangerouslySetInnerHTMLにデータを渡している。
また、マークダウンからプレーンテキストにする(マークダウンを除去する)remove-markdownというライブラリもあるらしい。
stiang/remove-markdown: Strip Markdown stuff from text
全然知らないので勉強になった。
どのライブラリを使おうか……。