Merge pull request #81 from re-taro/feat/#79

feat: Update SEO config and some icons

.github/actions/production/action.yml

@@ -38,4 +38,3 @@ runs:
         env: ${{ steps.deployment.outputs.env }}
         env_url: ${{ steps.deploy.outputs.preview-url }}
         deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-

.github/workflows/release.yml

@@ -21,4 +21,3 @@ jobs:
           vercel: ${{ secrets.VERCEL_TOKEN }}
           org: ${{ secrets.ORG_ID }}
           project: ${{ secrets.PROJECT_ID }}
-

next-seo.config.js

@@ -1,21 +1,21 @@
 /** @type {import('next-seo').DefaultSeoProps} */
 const defaultSEOConfig = {
-  title: "ありばむ",
-  titleTemplate: "%s | ありばむ",
-  defaultTitle: "ありばむへようこそ",
-  description: "「ありばむ」で日頃の感謝をサプライズしよう",
+  title: "Alibum",
+  titleTemplate: "%s | Alibum",
+  defaultTitle: "Alibumへようこそ",
+  description: "日頃の感謝でサプライズをしよう",
   canonical: "https://alibum.re-taro.dev",
   openGraph: {
     url: "https://alibum.re-taro.dev",
-    title: "ありばむ",
-    description: "「ありばむ」で日頃の感謝をサプライズしよう",
+    title: "Alibum",
+    description: "日頃の感謝でサプライズをしよう",
     images: [
       {
-        url: "https://alibum.re-taro.dev/api/ogp?title=ありばむ",
-        alt: "ありばむ",
+        url: "https://alibum.re-taro.dev/api/og?title=Alibum",
+        alt: "alibum",
       },
     ],
-    site_name: "ありばむ",
+    site_name: "Alibum",
   },
   twitter: {
     handle: "@10969_rintaro",

next.config.js

@@ -1,16 +1,22 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 const withPWA = require("next-pwa")({
   dest: "public",
   disable: process.env.NODE_ENV === "development",
 });
 
 /** @type {import('next').NextConfig} */
-module.exports = withPWA({
-  swcMinify: true,
-  reactStrictMode: true,
-  images: {
-    domains: ["firebasestorage.googleapis.com"],
-  },
-  eslint: {
-    dirs: ["src"],
-  },
-});
+module.exports = withBundleAnalyzer(
+  withPWA({
+    swcMinify: true,
+    reactStrictMode: true,
+    images: {
+      domains: ["firebasestorage.googleapis.com"],
+    },
+    eslint: {
+      dirs: ["src"],
+    },
+  }),
+);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "alibum",
   "version": "1.0.0",
-  "description": "「ありばむ」で日頃の感謝をサプライズしよう",
+  "description": "日頃の感謝でサプライズをしよう",
   "repository": {
     "type": "git",
     "url": "https://github.com/re-taro/alibum.git"
@@ -16,6 +16,7 @@
     "dev": "next dev",
     "build": "next build",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
+    "build:size": "cross-env ANALYZE=true yarn build",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "eslint src --fix && npm run fmt",
@@ -44,10 +45,12 @@
   "devDependencies": {
     "@chakra-ui/cli": "2.2.0",
     "@chakra-ui/system": "2.3.4",
+    "@next/bundle-analyzer": "13.0.6",
     "@next/env": "13.0.6",
     "@types/react": "18.0.26",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
+    "cross-env": "7.0.3",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",

public/README.md

@@ -0,0 +1,23 @@
+# Your Favicon Package
+
+This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
+
+## Install instructions
+
+To install this package:
+
+Extract this package in the root of your web site. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicon.ico</code>.
+
+Insert the following code in the `head` section of your pages:
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
+    <meta name="apple-mobile-web-app-title" content="Alibum">
+    <meta name="application-name" content="Alibum">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="theme-color" content="#ffffff">
+
+_Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/manifest.json

@@ -1,12 +1,24 @@
 {
-  "short_name": "ありばむ",
-  "name": "ありばむ",
+  "name": "Alibum",
+  "short_name": "Alibum",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "start_url": "https://alibum.re-taro.dev/",
+  "display": "standalone",
   "lang": "ja",
-  "start_url": "/",
-  "background_color": "#FFFFFF",
-  "theme_color": "#FFFFFF",
   "dir": "ltr",
-  "display": "standalone",
   "orientation": "portrait",
   "prefer_related_applications": false
 }

src/components/meta.tsx

@@ -8,7 +8,12 @@ export const Meta = (): JSX.Element => (
     <meta name="apple-mobile-web-app-title" content={APP_NAME} />
     <meta name="format-detection" content="telephone=no" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#FFFFFF" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="manifest" href="/manifest.json" />
   </>

src/pages/login/index.tsx

@@ -34,7 +34,7 @@ const Login: NextPage = () => {
         fontSize={{ base: "xs", md: "xl" }}
         pb={{ base: "28", md: "64" }}
       >
-        毎日の感謝をサプライズしよう
+        日頃の感謝でサプライズをしよう
       </Text>
       <Button
         colorScheme="extra"

tsconfig.json

@@ -16,8 +16,6 @@
     "baseUrl": "src",
     "incremental": true
   },
-  "include": [
-    "next-env.d.ts", "**/*.ts", "**/*.tsx", "src"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src"],
   "exclude": ["node_modules"]
 }