しばらくフレームワークやパッケージの更新をサボっていて最新バージョンに追いつくのが大変そうだったので、いちから作り直すことにした。これで二度目。とはいえ、Gatsby を使うのには変わりないし、実装も使いまわせるのでそこまで大変ではない。
Gatsby でつまづいたところ
日本語をパスに設定できない
Gatsby ではページの作成方法が二種類ある。
1 つ目は File system route API を使うもので、例えば {MarkdownRemark.fields__slug}.tsx というファイル名にすれば、MarkdownRemark タイプの Node の fileds.slug をパスにしてページを生成してくれる。
ただし、この方法ではパスを slugify というライブラリで変換するようで、ラテン文字以外は除去されてしまう。つまり、日本語のパスは設定できない。日本語であることにこだわらないなら、あらかじめエンコードしておけば良い。
2 つ目の方法が createPage を使う方法で、こちらは日本語をパスに含めることができる。
このサイトの articles 以下のページは 1 つ目の方法、tags 以下のページはパスに日本語を使いたかったので 2 つ目の方法で作成している。
plugin がうまく動かない
オプションを正しく指定しているはずなのに全くうまく動かなくて困っていた。
原因は gatsby-config.ts のプラグインを二度設定していたからというしょーもない間違いだった……
const config: GatsbyConfig = {
...
plugins: [
{
resolve: 'hogehoge-plugin',
options: {
// ここで Option を設定しても
},
},
'hogehoge-plugin' // ここで Option の設定が無効になる
]定義の順番が逆だったら気が付かずにうまく動いていたんだろう。
プラグインのロード順が影響を与えるケースは他にもあって、例えば gatsby-remark-prismjs-title | Gatsby と gatsby-remark-prismjs | Gatsby を同時に使う場合、title を先に設定しないと title の拡張記法に邪魔されて prism が動かなくなる。
デザイン
オシャレ感を出す
デザインはよくわかってないが、とりあえず、余白が多くてスッカスカで、ちいちぇえちいちぇえ文字で、解像度が低いと見えないくらい細い文字がオシャレだと思っているので、そんな感じを目指した。文字が小さいのは嫌なのでそれはやってないけど。
Tailwind CSS を使った
Fomantic-UI-React を使っていたが、最近は Tailwind CSS にはまっているのでそちらに全部置き換えた。React のコンポーネントをいちから定義するのは大変だと思っていたが、サイトの規模が小さくて単純で、ホワイトボックスになる分スタイル調整が簡単なのもあって予想していたよりも簡単だった。