Refactor/e slint error

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  "extends": ["next", "next/core-web-vitals"]
+}

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  semi: false,
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+}

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -7,21 +7,27 @@
     "build": "run-s build:posts build:next",
     "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/posts.ts",
     "build:next": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint",
+    "fix": "yarn format && yarn lint:fix",
+    "format": "prettier --write ./src/**/**/*.{js,jsx,ts,tsx}"
   },
   "dependencies": {
     "dayjs": "^1.9.3",
-    "next": "11.1.2",
+    "next": "^12.1.5",
     "next-themes": "^0.0.15",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.2",
     "@types/node": "^16.11.1",
     "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-next": "12.1.5",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.21.4",

src/builder/posts.ts

@@ -1,82 +1,81 @@
-import fs from "fs-extra";
-import Parser from "rss-parser";
-import { members } from "../../members";
-import { PostItem, Member } from "../types";
-export default {};
+import fs from 'fs-extra'
+import Parser from 'rss-parser'
+import { members } from '../../members'
+import { PostItem, Member } from '../types'
 
 type FeedItem = {
-  title: string;
-  link: string;
-  contentSnippet?: string;
-  isoDate?: string;
-  dateMiliSeconds: number;
-};
+  title: string
+  link: string
+  contentSnippet?: string
+  isoDate?: string
+  dateMiliSeconds: number
+}
 
-const parser = new Parser();
-let allPostItems: PostItem[] = [];
+const parser = new Parser()
+let allPostItems: PostItem[] = []
 
 async function fetchFeedItems(url: string) {
-  const feed = await parser.parseURL(url);
-  if (!feed?.items?.length) return [];
+  const feed = await parser.parseURL(url)
+  if (!feed?.items?.length) return []
 
   // return item which has title and link
   return feed.items
     .map(({ title, contentSnippet, link, isoDate }) => {
       return {
         title,
-        contentSnippet: contentSnippet?.replace(/\n/g, ""),
+        contentSnippet: contentSnippet?.replace(/\n/g, ''),
         link,
         isoDate,
         dateMiliSeconds: isoDate ? new Date(isoDate).getTime() : 0,
-      };
+      }
     })
-    .filter(({ title, link }) => title && link) as FeedItem[];
+    .filter(({ title, link }) => title && link) as FeedItem[]
 }
 
 async function getFeedItemsFromSources(sources: undefined | string[]) {
-  if (!sources?.length) return [];
-  let feedItems: FeedItem[] = [];
+  if (!sources?.length) return []
+  let feedItems: FeedItem[] = []
   for (const url of sources) {
-    const items = await fetchFeedItems(url);
-    if (items) feedItems = [...feedItems, ...items];
+    const items = await fetchFeedItems(url)
+    if (items) feedItems = [...feedItems, ...items]
   }
-  return feedItems;
+  return feedItems
 }
 
 async function getMemberFeedItems(member: Member): Promise<PostItem[]> {
-  const { id, sources, name, includeUrlRegex, excludeUrlRegex } = member;
-  const feedItems = await getFeedItemsFromSources(sources);
-  if (!feedItems) return [];
+  const { id, sources, name, includeUrlRegex, excludeUrlRegex } = member
+  const feedItems = await getFeedItemsFromSources(sources)
+  if (!feedItems) return []
 
   let postItems = feedItems.map((item) => {
     return {
       ...item,
       authorName: name,
       authorId: id,
-    };
-  });
+    }
+  })
   // remove items which not matches includeUrlRegex
   if (includeUrlRegex) {
     postItems = postItems.filter((item) => {
-      return item.link.match(new RegExp(includeUrlRegex));
-    });
+      return item.link.match(new RegExp(includeUrlRegex))
+    })
   }
   // remove items which matches excludeUrlRegex
   if (excludeUrlRegex) {
     postItems = postItems.filter((item) => {
-      return !item.link.match(new RegExp(excludeUrlRegex));
-    });
+      return !item.link.match(new RegExp(excludeUrlRegex))
+    })
   }
 
-  return postItems;
+  return postItems
 }
 
-(async function () {
+;(async function () {
   for (const member of members) {
-    const items = await getMemberFeedItems(member);
-    if (items) allPostItems = [...allPostItems, ...items];
+    const items = await getMemberFeedItems(member)
+    if (items) allPostItems = [...allPostItems, ...items]
   }
-  allPostItems.sort((a, b) => b.dateMiliSeconds - a.dateMiliSeconds);
-  fs.ensureDirSync(".contents");
-  fs.writeJsonSync(".contents/posts.json", allPostItems);
-})();
+  allPostItems.sort((a, b) => b.dateMiliSeconds - a.dateMiliSeconds)
+  fs.ensureDirSync('.contents')
+  fs.writeJsonSync('.contents/posts.json', allPostItems)
+})()

src/components/ContentWrapper.tsx

@@ -1,11 +1,9 @@
-export const ContentWrapper: React.FC<{ children: React.ReactNode }> = (
-  props
-) => {
-  return <div className="content-wrapper">{props.children}</div>;
-};
+export const ContentWrapper: React.FC<{ children: React.ReactNode }> = (props) => {
+  return <div className="content-wrapper">{props.children}</div>
+}
 
 export const UndoWrapForScroll: React.FC<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }> = (props) => {
-  return <div className="undo-wrap-for-scroll">{props.children}</div>;
-};
+  return <div className="undo-wrap-for-scroll">{props.children}</div>
+}

src/components/LinkBackHome.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
+import Link from 'next/link'
 
 export const LinkBackHome: React.FC = () => (
   <Link href="/" passHref>
     <a className="link-back-home">Back Home</a>
   </Link>
-);
+)

src/components/PageSEO.tsx

@@ -1,43 +1,28 @@
-import Head from "next/head";
-
-import { config } from "@site.config";
+import Head from 'next/head'
+import { config } from '@site.config'
 
 // types
 type Props = {
-  title: string;
-  path?: string;
-  description?: string;
-  ogImageUrl?: string;
-  noindex?: boolean;
-  removeSiteNameFromTitle?: boolean;
-};
+  title: string
+  path?: string
+  description?: string
+  ogImageUrl?: string
+  noindex?: boolean
+  removeSiteNameFromTitle?: boolean
+}
 
 export const PageSEO: React.FC<Props> = (props) => {
-  const {
-    path,
-    title,
-    description,
-    ogImageUrl,
-    noindex,
-    removeSiteNameFromTitle,
-  } = props;
+  const { path, title, description, ogImageUrl, noindex, removeSiteNameFromTitle } = props
 
-  const pageUrl = `${config.siteRoot}${path || ""}`;
+  const pageUrl = `${config.siteRoot}${path || ''}`
   return (
     <Head>
-      <title>
-        {removeSiteNameFromTitle
-          ? title
-          : `${title} | ${config.siteMeta.title}`}
-      </title>
+      <title>{removeSiteNameFromTitle ? title : `${title} | ${config.siteMeta.title}`}</title>
       <meta property="og:title" content={title} />
       <meta property="og:url" content={pageUrl} />
       <meta name="twitter:card" content="summary_large_image" />
       <meta property="og:site" content={config.siteMeta.title} />
-      <meta
-        property="og:image"
-        content={ogImageUrl || `${config.siteRoot}/og.png`}
-      />
+      <meta property="og:image" content={ogImageUrl || `${config.siteRoot}/og.png`} />
       {!!description && (
         <>
           <meta name="description" content={description} />
@@ -47,5 +32,5 @@ export const PageSEO: React.FC<Props> = (props) => {
       {path && <link rel="canonical" href={pageUrl} />}
       {noindex && <meta name="robots" content="noindex" />}
     </Head>
-  );
-};
+  )
+}

src/components/PostList.tsx

@@ -1,36 +1,31 @@
-import { useState } from "react";
-import Link from "next/link";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-import { PostItem } from "@src/types";
+import { useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { PostItem } from '@src/types'
 import {
   getMemberByName,
   getHostFromURL,
   getFaviconSrcFromHostname,
   getMemberPath,
   getMemberById,
-} from "@src/utils/helper";
+} from '@src/utils/helper'
 
-dayjs.extend(relativeTime);
+dayjs.extend(relativeTime)
 
 const PostLink: React.FC<{ item: PostItem }> = (props) => {
-  const { authorId, title, isoDate, link, dateMiliSeconds } = props.item;
-  const member = getMemberById(authorId);
-  if (!member) return null;
+  const { authorId, title, isoDate, link, dateMiliSeconds } = props.item
+  const member = getMemberById(authorId)
+  if (!member) return null
 
-  const hostname = getHostFromURL(link);
+  const hostname = getHostFromURL(link)
 
   return (
     <article className="post-link">
       <Link href={getMemberPath(member.id)} passHref>
         <a className="post-link__author">
-          <img
-            src={member.avatarSrc}
-            className="post-link__author-img"
-            width={35}
-            height={35}
-          />
+          <Image src={member.avatarSrc} alt={member.name} className="post-link__author-img" width={35} height={35} />
           <div className="post-link__author-name">
             <div className="post-link__author-name">{member.name}</div>
             <time dateTime={isoDate} className="post-link__date">
@@ -41,32 +36,22 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => {
       </Link>
       <a href={link} className="post-link__main-link">
         <h2 className="post-link__title">{title}</h2>
-        {hostname && (
-          <div className="post-link__site">
-            <img
-              src={getFaviconSrcFromHostname(hostname)}
-              width={14}
-              height={14}
-              className="post-link__site-favicon"
-            />
-            {hostname}
-          </div>
-        )}
+        {hostname && <div className="post-link__site">{hostname}</div>}
       </a>
       {dateMiliSeconds && dateMiliSeconds > Date.now() - 86400000 * 3 && (
         <div className="post-link__new-label">NEW</div>
       )}
     </article>
-  );
-};
+  )
+}
 
 export const PostList: React.FC<{ items: PostItem[] }> = (props) => {
-  const [displayItemsCount, setDisplayItemsCount] = useState<number>(32);
-  const totalItemsCount = props.items?.length || 0;
-  const canLoadMore = totalItemsCount - displayItemsCount > 0;
+  const [displayItemsCount, setDisplayItemsCount] = useState<number>(32)
+  const totalItemsCount = props.items?.length || 0
+  const canLoadMore = totalItemsCount - displayItemsCount > 0
 
   if (!totalItemsCount) {
-    return <div className="post-list-empty">No posts yet</div>;
+    return <div className="post-list-empty">No posts yet</div>
   }
 
   return (
@@ -78,14 +63,11 @@ export const PostList: React.FC<{ items: PostItem[] }> = (props) => {
       </div>
       {canLoadMore && (
         <div className="post-list-load">
-          <button
-            onClick={() => setDisplayItemsCount(displayItemsCount + 32)}
-            className="post-list-load__button"
-          >
+          <button onClick={() => setDisplayItemsCount(displayItemsCount + 32)} className="post-list-load__button">
             LOAD MORE
           </button>
         </div>
       )}
     </>
-  );
-};
+  )
+}