Merge pull request #113 from KoheiNishino/feature/set_up_eslint_and_p…

…rettier

Feature/set up eslint and prettier

.eslintignore

@@ -0,0 +1,5 @@
+.next/
+node_modules/
+coverage/
+__snapshots__/
+package-lock.json

.eslintrc

@@ -0,0 +1,57 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "plugins": ["import", "unused-imports"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "warn",
+    "import/extensions": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          ["parent", "sibling"],
+          "object",
+          "type",
+          "index"
+        ],
+        "newlines-between": "always",
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [".jsx", ".tsx"]
+      }
+    ],
+    "react/function-component-definition": [
+      "error",
+      { "namedComponents": "arrow-function" }
+    ],
+    "react/require-default-props": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
+    ],
+    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }],
+    "react/jsx-props-no-spreading": "off"
+  },
+  "overrides": [],
+  "ignorePatterns": ["node_modules"]
+}

.prettierignore

@@ -0,0 +1,7 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+*.html
+*.md

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true
+}

package.json

@@ -4,8 +4,10 @@
     "dev": "NODE_OPTIONS='--inspect' next",
     "build": "next build",
     "start": "next start",
-    "typecheck": "tsc",
-    "postbuild": "next-sitemap"
+    "lint": "next lint --fix --dir src",
+    "format": "prettier --write .",
+    "postbuild": "next-sitemap",
+    "preinstall": "npx only-allow yarn"
   },
   "dependencies": {
     "classnames": "2.3.1",
@@ -24,9 +26,21 @@
     "@types/node": "^18.0.1",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.4.7",
+    "eslint": "8.18.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "12.1.6",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "next-sitemap": "^2.5.28",
     "postcss": "^8.4.14",
+    "prettier": "2.7.1",
     "tailwindcss": "^3.1.4"
   }
 }

public/favicon/site.webmanifest

@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
 }

src/components/container.tsx

@@ -4,12 +4,8 @@ type Props = {
   children?: ReactNode
 }
 
-const Container: FunctionComponent = ({ children }: Props) => {
-  return (
-    <div className="container mx-auto max-w-3xl px-5">
-      {children}
-    </div>
-  )
-}
+const Container: FunctionComponent = ({ children }: Props) => (
+  <div className="container mx-auto max-w-3xl px-5">{children}</div>
+)
 
 export default Container

src/components/cover-image.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames'
+import Image from 'next/image'
 import Link from 'next/link'
 
 type Props = {
@@ -9,24 +10,26 @@ type Props = {
 
 const CoverImage = ({ title, src, slug }: Props) => {
   const image = (
-    <img
+    <Image
       src={src}
       alt={`Cover Image for ${title}`}
+      layout="fill"
+      objectFit="contain"
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
     />
   )
   return (
-    <div className="sm:mx-0">
+    <>
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (
         image
       )}
-    </div>
+    </>
   )
 }
 

src/components/footer.tsx

@@ -1,21 +1,20 @@
 import Link from 'next/link'
+
 import { BLOG_RELEASE_YEAR } from '@/lib/constants'
 
-const Footer = () => {
-  return (
-    <footer className="text-secondary border-t border-solid border-opacity-10">
-      <div className="flex flex-col items-center">
-        <div className="text-sm md:text-lg py-5">
-          <Link href="/policy">
-            <a className="hover:underline" >Privacy Policy</a>
-          </Link>
-        </div>
-        <div className="text-sm md:text-lg pb-5">
-          ©  {BLOG_RELEASE_YEAR} Kohei Nishino
-        </div>
+const Footer = () => (
+  <footer className="text-secondary border-t border-solid border-opacity-10">
+    <div className="flex flex-col items-center">
+      <div className="text-sm md:text-lg py-5">
+        <Link href="/policy">
+          <a className="hover:underline">Privacy Policy</a>
+        </Link>
+      </div>
+      <div className="text-sm md:text-lg pb-5">
+        © {BLOG_RELEASE_YEAR} Kohei Nishino
       </div>
-    </footer>
-  )
-}
+    </div>
+  </footer>
+)
 
 export default Footer

src/components/google-analytics.tsx

@@ -1,4 +1,5 @@
 import Script from 'next/script'
+
 import { GA_TRACKING_ID } from '@/lib/gtag'
 
 const GoogleAnalytics = () => (

src/components/header.tsx

@@ -1,14 +1,13 @@
 import Link from 'next/link'
+
 import { BLOG_TITLE } from '@/lib/constants'
 
-const Header = () => {
-  return (
-    <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-16 mt-8 mx-auto text-center sm:text-left">
-      <Link href="/">
-        <a>{BLOG_TITLE}</a>
-      </Link>
-    </h2>
-  )
-}
+const Header = () => (
+  <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-16 mt-8 mx-auto text-center sm:text-left">
+    <Link href="/">
+      <a>{BLOG_TITLE}</a>
+    </Link>
+  </h2>
+)
 
 export default Header

src/components/layout.tsx

@@ -7,19 +7,17 @@ type Props = {
   children: React.ReactNode
 }
 
-const Layout = ({ children }: Props) => {
-  return (
-    <>
-      <Meta />
-      <div className="min-h-screen">
-        <Container>
-          <Header />
-          <main>{children}</main>
-          <Footer />
-        </Container>
-      </div>
-    </>
-  )
-}
+const Layout = ({ children }: Props) => (
+  <>
+    <Meta />
+    <div className="min-h-screen">
+      <Container>
+        <Header />
+        <main>{children}</main>
+        <Footer />
+      </Container>
+    </div>
+  </>
+)
 
 export default Layout

src/components/markdown-styles.module.css

@@ -22,5 +22,5 @@
 }
 
 .markdown p {
-  @apply whitespace-pre-wrap
+  @apply whitespace-pre-wrap;
 }

src/components/meta.tsx

@@ -1,29 +1,42 @@
 import Head from 'next/head'
+
 import { BLOG_TITLE, BLOG_DESCRIPTION, BLOG_URL } from '@/lib/constants'
 
-const Meta = () => {
-  return (
-    <Head>
-      <title>{BLOG_TITLE}</title>
-      <meta name="description" content={BLOG_DESCRIPTION} />
-      <meta property="og:url" content={BLOG_URL} />
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content={BLOG_TITLE} />
-      <meta property="og:description" content={BLOG_DESCRIPTION} />
-      <meta property="og:site_name" content={BLOG_TITLE} />
-      <meta property="og:image" content={`${BLOG_URL}assets/og-image.jpeg`} />
-      <meta name="msapplication-TileColor" content="#000" />
-      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
-      <meta name="theme-color" content="#000" />
-      <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
-      <link rel="manifest" href="/favicon/site.webmanifest" />
-      <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000" />
-      <link rel="shortcut icon" href="/favicon/favicon.ico" />
-      <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
-    </Head>
-  )
-}
+const Meta = () => (
+  <Head>
+    <title>{BLOG_TITLE}</title>
+    <meta name="description" content={BLOG_DESCRIPTION} />
+    <meta property="og:url" content={BLOG_URL} />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={BLOG_TITLE} />
+    <meta property="og:description" content={BLOG_DESCRIPTION} />
+    <meta property="og:site_name" content={BLOG_TITLE} />
+    <meta property="og:image" content={`${BLOG_URL}assets/og-image.jpeg`} />
+    <meta name="msapplication-TileColor" content="#000" />
+    <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+    <meta name="theme-color" content="#000" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000" />
+    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+    <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+  </Head>
+)
 
 export default Meta