📝
portfolio-v3
いまご覧になっているページです！2023 年の 7 月頃にリリースしました。
技術的な話
bonychops.com v2 は React のみ で作成していましたが (えっ？)、今回は Next.js で作成しました。
SSG で作りたい気持ちがあったので、元来は Gatsby.js を採用する予定でしたが、どうやら Next.js も SSG に対応しているとのことで、こちらを採用したという感じです。
苦労した点
/posts以下を mdx で記述できる仕様に苦労しました。まさにここのページですね。
当初からここは Markdown で書きたいと思っていたので、
Next.js 公式のガイドに従って remark 使ったり、v13 からの Dynamic Routesは書き方が違ったり、mdx ならそもそも remark ではなく@next/mdxを使えば良かったり、でもこいつは frontmatter 対応してなかったり...
最終的に、こんな感じ(mdx 置き場)に書くと、それに準じてページが生成されるようにできました。
気になる点
- コードブロック(
これ)に Syntax Highlight を入れたい- なぜか
rehype-pretty-codeがうまく反映されない...
- なぜか
この箇条書き、なぜが左により過ぎでは？(誰かがpadding: 0をしているけど、犯人がわからない...)- 無理やり
padding: revertで解除させた
- 無理やり
- 上記で気付いたけど、取り消し線効いてなくないか
- GFM というのが必要らしい、
remark-gfmを導入
- GFM というのが必要らしい、
- わざわざ
<CustomLink />なるものを作ったのに、うまく反映させられていない - せっかく mdx にしたのに
aタグに Component を並べるとflexにならない、したらしたで別の場所で flex 以外の要素と段落が分かれる！