サイトの見た目を一新し、Reactに移行

週末にサイトの見た目を全面的に作り直しました。因みに、今まではこんな見た目でした。

個人的には、前のデザインのチェック柄の背景が気に入ってはいました。しかし、良いデザインかどうかと問われれば、あまり面白味がないかなと感じていました。ということで、作り直すことにしました。また、ページの生成プロセスを、Nano JSXからReactに移行することにしました。現状はフロントエンドではフレームワークを用いておらず、最小限のスクリプトのみだったのですが、フロントエンドにもフレームワークを導入して、Viewを操作する観点からは、Reactの方がエコシステムが大きくて楽ではないかと思いました。

新しいサイトのテーマは、HugoのテーマであるStackに触発された部分が大きいです。3カラムレイアウトがかなり気に入っています。またTabler Iconsというアイコンテーマも、質素ながら美しいです。

今回CSSを触っていて、いろいろな学びがありました。特にCSSのカスタムプロパティです。今まで私はカスタムプロパティを使っていなかったのですが、ダークモード対応のための色を変数としておくと非常に便利であることに気づきました。またposition: sticky;の存在を知りました。今まではfixedを使っていたのですが、stickyはコンテナ内のみを移動するので、使いやすいです。また、今回はfont-feature-settingsを使ってみました。このプロパティを使うと、日本語をプロポーショナルフォントで表示したりできるのですが、半角カナが全角で表示されてしまったりと、調整の難易度は高めです。あと、React Routerがv6でかなり使い勝手が変わっており、若干戸惑いました。

そしてようやく、記事内に画像を挿入できるようになりました。いつか実装しようと思っていたのですが、ようやくです。ただし、まだまだ実装すべき機能が残っていますし、HTML描画部分のコードがかなり煩雑化しているので、どうにかしたいと考えています。また、現在は備忘録と日記のページしか存在していませんが、もっとコンテンツの種類を増やしたいと思っています。ひとまず、今回のレイアウトの改修で、コンテンツを増やすための土台が完成しました。