Gatsby で作り直した

[ebkn]

What

• Gatsby (https://www.gatsbyjs.org/) で作り直した
• いらないページを削除
• ブログ機能を追加

作業ログ

	[gatsby]のビルドに必要なプラグインをインストール
		`npm i @babel/core gatsby gatsby-image gatsby-source-filesystem gatsby-plugin-typescript gatsby-plugin-preact`
	静的ファイルを置くフォルダを`static`に変更
	`gatsby-config.js`, `gatsby-browser.js`, `gatsby-node.js`を作成
	[webpack]周りの設定を[gatsby]に置き換え
	[gatsby]上でmarkdownで書いたものを変換するためのプラグインをインストール
		`npm i gatsby-transformer-remark gatsby-remark-images gatsby-remark-copy-linked-files gatsby-remark-prismjs gatsby-transformer-remark gatsby-remark-smartypants gatsby-transformer-sharp gatsby-plugin-sharp`
	`src/templates/blog-post.tsx`を作成
	`src/pages/notFound.tsx`→`src/pages/404.tsx`に変更
	諸々コンポーネントの置き場所、import path を変えた
	`gatsby-config.js`でfirebaseのinitializeをするように変更
	`content/blog`, `content/assets`以下に静的ファイルを配置
	[preact]を[React]に書き直した
		https://www.gatsbyjs.org/packages/gatsby-plugin-preact/?=preact#usage-in-a-development-environment
		`npm i react react-dom @types/react @types/react-dom prop-types`
	[Graphql]クエリの型定義を自動生成するように`gatsby-plugin-graphql-codegen`を入れた
	[workbox]から`gatsby-plugin-offline`に書き換え
	`gatsby-plugin-manifest`で[PWA]対応
	`gatsby-plugin-styled-components`で[styled-components]対応
	global のスタイルシートを設定
	スタイルの調整
	color, font-size を[CSS Variables]で管理
	[prismjs]で[syntax highlight]をつけた
	`@babel/proposal-optional-chaining`と`babel-preset-gatsby`をいれて[optional chaining]を有効にした
	ページと画像を service worker でキャッシュしてoffline対応
	型定義が間違ってたところを修正
	リファクタリング
	[dayjs]を使って投稿の時間をローカルのタイムゾーンに修正
	lint
	[now]にデプロイ
	[Google Domains]で登録してるドメインを使用するように変更
	[styled-components]をアップデートし`createGlobalStyle`APIでglobal styleを定義
	[dark-mode-toggle] を使ってダークモードのトグルを可能に
		https://github.com/GoogleChromeLabs/dark-mode-toggle
	ダークモードのトグルコンポーネントは自分で作ったのに置き換えた
	`layout.tsx`を`gatsby-browser.js`の`wrapPageElement`に追加
	ヘッダーの作り直し