easy-notion-blogで大きな改善がなされました。

アルパカ先生の解説記事「easy-notion-blog v0.4のアップデート内容紹介」によると

• component化して繰り返しコード削減
• componentファイルに対応したCSSファイルの仕分け

つまり、CSSをいじりにいじりまくってきた私にとっては大ピンチなわけです(´；ω；｀)ﾌﾞﾜｯ

▼ 振り返るとこんな感じ

1. CSSに関するcommit前の部分をcherry pick
2. CSSに関するコードはcomponentも含めて調整
3. CSSに関するcommit後はCSSとの関連を確認しつつcherry pick
4. まとめ

本家リポジトリにcommitの追加があると自動でNotionの方に反映させているデータベースをもとに着手してしまってから気づいた。

原因はこれ！！！

古いcommitから同期せずに進めてから気づく。。。。

sortして

古いcommitから同期してみると・・・

遅かったか〜〜〜〜

• githubサイトへ行き、必ず確認してからNotionに反映されているcommitを取り入れる

CSSを調整する上でのポイントは、

【componentフォルダやpagesフォルダ内のファイル内でどういった変更がされているか】

ということ。

考えるだけでも頭が痛くなりそうなので、

視覚的に確認＆メモ&修正を繰り返しながら進めることにしました。

ブログの検証画面はこんな感じでHTMLやCSSの要素を確認できます。

【見比べた検証画面】

• easy-notion-blogのデモページ
• 自分のブログページ
• アルパカブログページ

検証画面で見比べ、VSCodeで関連するファイルを確認。

index.tsxや[date].tsxからこなし全体像をなんとなく掴む。

と同時に疑問もあったり。

ありがたいことに返信いただけたり

質問して聞いたほうが早そうなことはGitHubのIssueへ投稿してみたり。

ふと思いついたことはツイートして整理してみたり。

自信は無い状態で背伸びしてみたり。

とにかく開発画面で修正してはエラーの繰り返し。

なかなか乗り越えられない壁に立ち往生したり。

よく寝たら代案が思いついてなんとか集結。

実際のCSS内容はこちら

CSSの調整で数日格闘した影響か、

全体像をある程度理解している状態での差分検討だったので数分で完了＼(^o^)／

【確認】

• 現状と目標との差分を見比べる

👉 自分のブログページとデモページとの検証画面を見比べる

👉  クラス名の変更はないか？ある場合構成の変更もあるか？

• つながりを辿って元を探る

👉 CSSの変更からindex.tsx・[date].tsxなどと関連付ける

👉 componentから派生した記述かどうかも意識する

👉 componentが他のファイルから参照している部分がヒントになることもある

• 自分で解決できる課題か否かを判断する

👉  開発者だから分かる部分かもしれない場合はIssueを活用

【メモ】

• すぐに忘れそうなことはメモする

👉 ツイートしてみる

👉 作図して考えたい場合はノートにメモ

【修正】

• 開発画面でとにかくトライ・アンド・エラーを繰り返しながら少しずつ進む

達成感で満たされた結果、

自動ツイート機能の実装までこなして今日は充実した１日でした＼(^o^)／