atis9 / nyantech.com Goto Github PK

やりたい事柄

• コードフォーマッタの導入

やりたい理由

• コードに統一性がなくなるおそれがあるため

やりたい事柄

CSS フレームワークの導入。

やりたい理由

サイトの見た目の一貫性と保守の簡易化のため。

プロフィールのとこ

やりたい事柄

JavaScript から TypeScript へのリプレイス

やりたい理由

学習のため

やりたい事柄

• OGP 画像の変更
• favicon の変更
• サイトタイトルの変更
• その他 meta データの変更など

やりたい理由

• サイト運用のため

毎回書くのがめんどくさいし表記揺れするので。

同日に複数ポストしたら id 順にソーティングされて不便そうだから

<li class="ActionList-item p-2"> となっているせいで、パディング部分をクリックしてもリンク先に遷移しない。
リンク用のタグを修正する必要がある。

最新を追いかけていきましょう。

やりたい事柄

md ファイル名に制約をかける。
e.g.) /(\w|-)+\.md/ に制限する。

やりたい理由

posts/*.md のファイル名が任意で設定できるようになっている。

ファイル名が id とされる仕様上、下記の行で id とディレクトリパスを結合している処理でディレクトリトラバーサルが可能になる。

const fullPath: string = path.join(postsDirectory, `${id}.md`)

バグについての説明
next export ができない

再現するために
動作を再現するための手順:

1. yarn next build && yarn next export

期待される動作
/out に出力されること

補足説明

❯ yarn next export
yarn run v1.22.18
$ /home/atis/repositories/nyantech.com/node_modules/.bin/next export
info  - using build directory: /home/atis/repositories/nyantech.com/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/home/atis/repositories/nyantech.com/next.config.js". Generating map from "./pages"Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /home/atis/repositories/nyantech.com/node_modules/next/dist/export/index.js:156:23
    at async Span.traceAsyncFn (/home/atis/repositories/nyantech.com/node_modules/next/dist/trace/trace.js:79:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

機能リクエストは何かしらの問題に関連するものか？
今は blog 機能しか無いが、将来的な拡張性のために nyantech.com, blog.nyantech.com のように分離したい。

希望の解決策についての説明
monorepo (yarn workspace) を用いて分離する。
Vercel との親和性もよいと思われる。（補足資料を参考のこと）

検討した代替案についての説明
マイクロサービスとしてリポジトリごと分離してもよいが、巨大なモノリスアプリというわけではないため、
今回は共通化しつつ 1 リポジトリ構成としたい。

補足説明
Vercelでmonorepo構成で管理しているサイトをホスティングしてみる | DevelopersIO

やりたい事柄

sanitize を他の役割に移譲する。
Using Advanced - Marked Documentation

やりたい理由

非推奨のため。

型情報は devDependencies でよい。

    "@types/highlight.js": "^10.1.0",
    "@types/marked": "^4.0.3",

やりたい事柄

• テストコードを追加したい

やりたい理由

• 安定性向上のため
• 学習のため

#44 と同様に毎回書くのが面倒なのと表記ゆれするので（今も適当）。
とりあえず Enhancement と bug のテンプレートがあればいいと思う。

ブログ記事が増えてきたら必要になる

機能リクエストは何かしらの問題に関連するものか？
記事の読みやすさ。

希望の解決策についての説明

• フォントサイズを大きくする。
  • かつ、フォントサイズの指定を rem 指定にする。
• 記事の背景に色を付けて、テキストエリアとそれ以外を明確に区別する。

色付けのイメージ

GitHub Flavored Markdown とコードハイライトを利用できるようにする。
remark は撤去する。

ブログを作成した - Nyantech とか。
一旦ホームに戻ってからブログ記事を開くと favicon が表示されている。（Shift + F5 でキャッシュ再読み込みしても大丈夫）

やりたい事柄

/lib/posts.ts の機能のリファクタ

• PostData 作成の共通化
• 命名が冗長なのを修正
  • PostData の Data いらないよね
• PostSummary の作成
  • contentHtml がいらない場合に利用したい

やりたい理由

• 今後の開発効率の効率化のため
• 学習のため

やりたい事柄

Prettier の役割を ESLint に統合したい。

やりたい理由

• 役割とできることが被っているのに設定が別なので扱いにくい
• GitHub Actions で ESLint の CI を行いたい