キャラクターごとの製品ページを作成する (#121)

README.md

@@ -75,6 +75,16 @@ output_file=output.wav
 ffmpeg -i $audio_file -af volume=-3dB $output_file
 ```
 
+## サムネイル生成
+
+一部のサムネイルは HTML をレンダリングしたものを画像化しています。
+次のコマンドで更新してください。
+
+```bash
+# FIXME: なぜか package.json に `"type": "module",` を追加する必要がある
+npm run generate_thumb
+```
+
 ## タイポチェック
 
 [typos](https://github.com/crate-ci/typos) を使ってタイポのチェックを行っています。

gatsby-config.js

@@ -1,9 +1,11 @@
+const siteUrl = "https://voicevox.hiroshiba.jp/"
+
 module.exports = {
   siteMetadata: {
     title: `VOICEVOX`,
     description: `VOICEVOXのホームページ`,
     author: `Hiroshiba Kazuyuki`,
-    siteUrl: `https://voicevox.hiroshiba.jp`,
+    siteUrl,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -91,6 +93,15 @@ module.exports = {
         slugify: { separator: "_" },
       },
     },
+    {
+      resolve: `gatsby-plugin-canonical-urls`,
+      options: {
+        siteUrl,
+        stripQueryString: true,
+      },
+    },
+    // スタイルが適用される前に画面が表示されてちらつくのを防ぐ
+    // `gatsby-plugin-fix-fouc`, // FIXME: フォント容量が減ったら適用しても良いかも
   ],
   graphqlTypegen: true,
 }