matumoto1234 / blog

自作ブログ

Blog

デザイン：figma

使用するもの

環境

• node v19.2.0

パッケージマネージャー

• pnpm v7.18.0

ビルドツール

• vite v3.2.3

ライブラリ

• React v18.0.24
• TypeScript v4.6.4
• React Router v6.4.4
• vanilla-extract

blog's Issues

[FEATURE] Spacerの更新

内容

なんかめっちゃいいコンポーネントがあったので自作Spacerじゃなくてそっちに更新したい

• https://github.com/aeagle/react-spaces

Doneの定義

色々調査して、置き換えて良さそうなら置き換えていること（置き換えない場合は置き換えないままでいい）

その他

[BUG] 現在時刻の表示がおかしい

内容

月が0-indexedであることを考慮してない

Doneの定義

Date.getMonthの仕様などを考慮して正しい表示に修正する

その他

[FEATURE] 目次欲しい

内容

こんな感じの目次がほしい

Doneの定義

• 目次が用意されている

その他

[FEATURE] モバイルに対応

内容

モバイルでもまともに見れるように調整する

zli-blogを参考にしてPC用とモバイル用で分けても良いかも

Doneの定義

モバイル表示に対応できた表示になっている

その他

[FEATURE] 記事追加 grep

内容

Doneの定義

• grep についての記事を書く

その他

[FEATURE] 本文の改行まわり調整

内容

句読点とかのために若干スペースが空くのは嫌

line-break: anywhere あたりを使って、改行の調整をしたい

Doneの定義

• なんらかの処理で改行まわりの調整がなっている

その他

[BUG] Web API の Notification に対応していないブラウザで開くとエラーとなって閲覧できない

内容

https://developer.mozilla.org/ja/docs/Web/API/Notification

にある、Nortificationに未対応のブラウザで開くとエラーとなってしまって閲覧ができない

https://github.com/matumoto1234/blog/blob/main/src/utils/components/NavBar/index.tsx#L43C7-L43C37
とかが該当していそう

Doneの定義

• Nortificationに未対応のブラウザで開いても大丈夫なようにする

その他

[FEATURE] Skeletonの更新

内容

めっちゃいいのがあったのでそれに置き換えたい

• https://github.com/dvtng/react-loading-skeleton

Doneの定義

• コンポーネントの調査と、もし置き換え可能なら置き換える

その他

[BUG] TwitterCardが作られない

内容

TwitterでつぶやこうとしてもCardが作られない

og:description あたりを追加してみる

Doneの定義

• https://cards-dev.twitter.com/validator で作られることが確認できればOK

その他

• https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

[FEATURE] 画像まわりの処理を改善

内容

現状、imgurにアップロード→markdownに挿入の手順を踏んでいるのでかなり手間

AWSだったり、cloudflareのストレージだったりを使って画像をおいておく場所を作りたい(バックエンドの仕事か？)
それか普通にImgコンポーネントを修正してsrc属性はpublic/以下から持ってくるようにするとか

Doneの定義

imgurへアップロードせずmatumotoが管理する範囲内で画像をやり取りできていること

その他

[FEATURE] コミットメッセージの形式を統一する

内容

huskyを導入してコミットメッセージの形式を統一したい
#<issue番号>: <コミットメッセージ> の形式にしたい

Doneの定義

• コミット時にコミットメッセージの形式が統一されているかチェックするスクリプトをhuskyで用意する

その他

[REFACTORING] NavBarの通知ボタンをコンポーネントに切り分ける

内容

NavBarに通知ボタンのロジックが全て含まれているので通知ボタンとしてコンポーネントに切り分ける

Doneの定義

• 通知ボタンコンポーネントがあってそれをNavBarが使用しているようにする

その他

[FEATURE] 404ページの見た目改善

内容

現状、以下のような404ページなのでちゃんと実装したい

Doneの定義

なんらかの形で404ページが実装されていればOK

その他

[FEATURE] web上でマークダウンを編集する

内容

画像を記事内に挿入したいときなどにURLが取得できなかったりして困るので、マークダウンエディタを作りたい

ログイン機能とかは別で実装する

Doneの定義

• web上にマークダウンエディタがあって、記事の追加ができればOK
  • 記事の編集機能とかはつけなくて良い

その他

[BUG] 折りたたみの中身に余白がない

内容

Doneの定義

• 折りたたみの中身の余白が適切に設定されている

その他

[FEATURE] linterとformatterのCIを導入する

内容

linterとformatterのCIを導入したい
GitHub Actionsとかでいい感じに作る
トリガーはpush時とかでよさそう

この際にlinterとかの設定をいじってみてもいいかも

Doneの定義

• linterとformatterのCIが導入できている
• すでにあるコードがlinterとformatterのルールに準拠している

その他

[FEATURE] 文章の行間を空けて見やすくする

内容

ちょっと内容がごちゃついているので行間をもっと空けたい
line-height をいい感じに修正する

Paragraph は 300%くらいにしていいかも
List なども適宜変えてみる

Doneの定義

• 文章の行間が空けて見やすくなっている

その他

[FEATURE] アドカレブログ追加

内容

Doneの定義

• AizuAdventCalendar2023のブログを書く

その他

[FEATURE] PR時にステージング環境のページを見たい

内容

https://github.com/cloudflare/pages-action とか追加してみる

Doneの定義

• PR時にステージングのページが見れること

その他

[FEATURE] disqusでコメント欄を表示する

内容

disqusを使ってコメント欄を表示したい

• 参考
  • 静的なサイトにDisqusでコメント欄を設置する

Doneの定義

1つの記事に対してコメント欄が表示されていること

その他

[FEATURE] Markdownの見た目をいじる

内容

現状だとインデントしか引用にかかっていないため、ちゃんとわかりやすくする

あと、脚注がうまく動かないとかもあるので色々見直す

Doneの定義

• 引用の見た目が作られている

その他

[REFACTORING] MarkdownViewerにスタイルをつけない

内容

現状、MarkdownViewerにminHeightとかのスタイルをつけているが、それは呼び出し側で管理すべき

Doneの定義

• MarkdownViewerまわりのスタイルを調整し、呼び出し側もそれに伴って変更する

その他

[FEATURE] Notificationまわりの処理を見直す

内容

• getToken() で vapidKey をデフォルトのものにしてしまっているので、鍵を生成して使用する
  • 渡すのは公開鍵なので鍵の中身をハードコーディングしてもOK
• manifest.jsonのgcm_sender_idはいるのか
• manifest.jsonでPWAとして対応
  • https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

Doneの定義

• getToken()に vapidKeyを渡す
• manifest.jsonでiOS対応
• gcm_sender_idがいるのかいらないのか確かめる

その他

[FEATURE] Webプッシュ通知の有効化

内容

Webプッシュ通知を有効にする
Firebase Cloud Messagingを使用して、記事が追加されたときとかにWebプッシュ通知をバックグランドで受け取れるようにする

通知の権限を求める際には、https://web.dev/articles/push-notifications-permissions-ux?hl=ja を参考にすること

Doneの定義

• Firebase Consoleから通知を送信した際に、バックグランドで通知を受け取れるようになっている
• 通知の権限を求める際にバッドプラクティスなUXを提供しないこと

その他

[FEATURE] ページ遷移したときにヘッダーのピン止めを保持したい

内容

ヘッダーをピン止めをした状態でページ遷移すると、デフォルトの状態に戻ってしまうので保持したい

Doneの定義

• ページ遷移してもピン止め状態が保持されている

その他