TSXで記事を書きたい漢の格闘日記

お久しぶりです。がむです。

最近(直近半年)は何をしていたかというと、

†孤独の就活戦士†をしていたり...(理系で院進せず就活してたから就活仲間がマジで0人だった)

友達と神戸から姫路まで70km散歩してみたり...

ポーカーの大会に出まくってちょっと優勝見えるところまで行ったり...

大阪万博で謎のカクテルパーティにお呼ばれしたり...

技術カンファレンスに出席したり...

LT会に登壇したり...(これは先週)

とまあ、わりかし色んなことをやっていたんですが、なーんでブログにしなかったかというと、

沼、ハマってました。

というのも、"がむログ"そのものの改修をしようと思い開発していたのですが、この沼がもう深い深い。

やりたかったこととしては、こーんな感じに、自分で好き勝手CSSをいじったりコンポーネントを使ったりして記事を書きたかったので、

今までの、Zenn-markdownを使って簡単かつ十分リッチな見た目で記事を書ける状態(主に技術記事用)も維持しつつ、

雑談や趣味の記事に関してはCSSやらカスタムコンポーネントやらで遊べるようにする

というのが目標でした。

ここからが沼の始まりでした。

試行錯誤 残念プレー集

1.そもそもmdファイル内にtsx書いちゃえばいいんじゃないか？

→Zenn-markdown内の処理でsanitizerが走っててHTML直書きは消される。こうやってXSS対策するのね。学びになりましたわ(捨てゼリフ)

2.じゃあ、mdxで書けばいいんじゃない？

→なんかmdxとmd両立させる処理が絶妙にむずい。しかもNext.jsのSSRだとちょっとMDXの仕様が違う？的な感じでどうしても最後までうまくいかず。7回くらい「これ絶対いけたわ」って確信したシーンあった。

→あとDynamicRoutingの仕様にやられたところもある。

ちなみにGitHubに上げてる分は僕の格闘記録が見れます。恥ずかしいので見ないでください。

開発している人ならわかると思うんですけど、全然うまくいかない時ってモチベの削れ方エグいですよね。試行錯誤しつつ半分逃げつつで、TechWordSpikesを優先して作ってたらこんなにも月日が経ってしまいました。最新記事古すぎてサ終したのかと思った。

現状

現状はカスタムコンポーネント使ったり、CSSいじれてるので上手くできてると思うんですが、結構妥協してます。

なるべく共通のフレームは共有した状態で、app/posts配下に直置きする形でTSXを書いてます。逆Dynamic Routingです。mdファイルは引き続きapp/posts/[slug]て感じ。

これからなにするの

時間経っちゃったけど記事にしたいなーってやつは記事にしようかなと。

あと関係ないけど普通に英語の勉強したいな(マジで関係ない)

技術記事でいうと普通にVibe Codingの環境構築したいのでそれ終わったら記事にする予定(多分)

個人開発だとiOSアプリで1個良さげなアイデアあるので磨いてから作りたい。

(ポーカーの記事でも書くか...)