Maintenance

.babelrc

@@ -1,4 +1,14 @@
 {
-  "presets": ["next/babel"],
-  "plugins": ["emotion"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion"]
 }

.eslintrc

@@ -3,10 +3,9 @@
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "react-app",
-    "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "@emotion"],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
@@ -19,7 +18,12 @@
     "jsx-a11y/accessible-emoji": "off",
     "jsx-a11y/iframe-has-title": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-anonymous-default-export": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@emotion/pkg-renaming": "error"
   },
   "overrides": [
     {

.gitignore

@@ -1,3 +1,4 @@
+.vscode/settings.json
 outDir
 jpOut
 enOut

.npmrc

@@ -0,0 +1,4 @@
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*
+# https://github.com/pnpm/pnpm/issues/4920#issuecomment-1226724790
+public-hoist-pattern[]=@react-spring/core

.nvmrc

@@ -1 +1 @@
-v13
+v18

.prettierignore

@@ -0,0 +1 @@
+*.md

.prettierrc

@@ -1,4 +1,7 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
 }

README.md

@@ -19,8 +19,8 @@ I wrote about this repo on [this blog post](https://ycombinator.chibicode.com/fu
 ## Running it locally (English version)
 
 ```
-yarn install
-yarn dev:en
+pnpm install
+pnpm dev:en
 # Go to http://localhost:9990
 ```
 

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -15,7 +15,7 @@ const config = {
     productionLocale: process.env.PRODUCTION_LOCALE,
     isDevelopment: process.env.IS_DEVELOPMENT
   },
-  exportTrailingSlash: true
+  trailingSlash: true
 }
 
 // For locale, if running 2 servers (JP and EN) locally, if you use build-time config

package.json

@@ -1,21 +1,22 @@
 {
   "private": true,
   "engines": {
-    "node": "14.x"
+    "node": ">=18",
+    "pnpm": ">=7"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.22",
-    "@emotion/styled": "^10.0.23",
-    "@material-ui/core": "^4.6.0",
-    "color": "^3.1.2",
-    "luxon": "^1.21.1",
-    "next": "9.1.7",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.0",
+    "@react-spring/web": "^9.6.1",
+    "color": "^4.2.3",
+    "luxon": "^3.1.1",
+    "next": "^12.3.4",
     "prism-react-renderer": "^1.0.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-spring": "^8.0.27",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "smoothscroll-polyfill": "^0.4.4",
-    "twemoji": "^12.1.3"
+    "twemoji": "^14.0.2"
   },
   "_moduleAliases": {
     "src": "outDir/tsconfig.scripts.json/src",
@@ -28,8 +29,8 @@
     "jp:production": "PRODUCTION=jp next -p 9993",
     "en:production": "PRODUCTION=en next -p 9992",
     "dev:prepare": "cp tsconfig.dev.json tsconfig.json && rm -f report.*.json && rm -f *.log && rm -rf .next",
-    "dev": "yarn dev:prepare && concurrently \"yarn jp\" \"yarn en\"",
-    "dev:en": "yarn dev:prepare && yarn en",
+    "dev": "pnpm dev:prepare && concurrently \"pnpm jp\" \"pnpm en\"",
+    "dev:en": "pnpm dev:prepare && pnpm en",
     "ts-node": "tsc --project tsconfig.scripts.json && node -r module-alias/register",
     "precompute": "tsc --project tsconfig.scripts.json && node -r module-alias/register outDir/tsconfig.scripts.json/scripts/precomputeExpressionContainers.js",
     "tsc": "tsc",
@@ -38,40 +39,43 @@
     "build": "cp tsconfig.prod.json tsconfig.json && next build",
     "build:jp": "cp tsconfig.prod.json tsconfig.json && PRODUCTION_LOCALE=jp next build && PRODUCTION_LOCALE=jp next export --outdir jpOut",
     "build:en": "cp tsconfig.prod.json tsconfig.json && PRODUCTION_LOCALE=en next build && PRODUCTION_LOCALE=en next export --outdir enOut",
-    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `yarn --silent ts-node outDir/tsconfig.scripts.json/scripts/copyUsedEmojis.js` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && yarn twemoji:bundle",
-    "twemoji:bundle": "yarn ts-node outDir/tsconfig.scripts.json/scripts/generateEmojisBundle.js"
+    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `pnpm --silent ts-node outDir/tsconfig.scripts.json/scripts/copyUsedEmojis.js` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && pnpm twemoji:bundle",
+    "twemoji:bundle": "pnpm ts-node outDir/tsconfig.scripts.json/scripts/generateEmojisBundle.js"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.0.1",
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@emotion/babel-plugin": "^11.10.5",
+    "@emotion/eslint-plugin": "^11.10.0",
+    "@svgr/cli": "^6.5.1",
     "@types/color": "^3.0.0",
-    "@types/fs-extra": "^8.0.0",
-    "@types/glob": "^7.1.1",
-    "@types/luxon": "^1.15.2",
+    "@types/fs-extra": "^9.0.13",
+    "@types/glob": "^8.0.0",
+    "@types/luxon": "^3.1.0",
     "@types/material-ui": "^0.21.7",
-    "@types/node": "^13.1.6",
-    "@types/prettier": "^1.18.3",
-    "@types/react": "^16.9.5",
-    "@types/react-dom": "^16.9.4",
+    "@types/node": "^18.11.17",
+    "@types/prettier": "^2.7.1",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^2.6.1",
-    "@typescript-eslint/parser": "^2.6.1",
-    "babel-eslint": "^10.0.3",
-    "babel-plugin-emotion": "^10.0.23",
-    "concurrently": "^5.0.0",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-plugin-flowtype": "4.5.3",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "2.3.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.0.3",
     "module-alias": "^2.2.2",
-    "now": "^16.6.0",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.2"
+    "prettier": "^2.8.1",
+    "typescript": "^4.9.4"
   }
 }

pages/1.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={1} />

pages/10.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={10} />

pages/11.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={11} />

pages/12.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={12} />

pages/13.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={13} />

pages/14.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={14} />

pages/15.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={15} />

pages/16.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={16} />

pages/2.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={2} />

pages/3.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={3} />

pages/4.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={4} />

pages/5.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={5} />

pages/6.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={6} />

pages/7.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={7} />

pages/8.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={8} />

pages/9.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
 export default () => <EpisodePageWrapper episodeNumber={9} />

pages/_app.tsx

@@ -1,20 +1,5 @@
-import React from 'react'
 import App from 'next/app'
-import Router from 'next/router'
-import { pageview } from 'src/lib/gtag'
 import GlobalState from 'src/components/GlobalState'
-import reloadTwitterScript from 'src/lib/reloadTwitterScript'
-import locale from 'src/lib/locale'
-
-Router.events.on('routeChangeStart', () => {
-  reloadTwitterScript()
-})
-
-if (locale === 'jp') {
-  Router.events.on('routeChangeComplete', (path: string) => {
-    pageview(path)
-  })
-}
 
 export default class MyApp extends App {
   public render() {

pages/_document.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { lang } from 'src/lib/locale'
 

pages/_error.tsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css } from '@emotion/react'
 import Page from 'src/components/Page'
 import Head from 'next/head'
 import H from 'src/components/H'