From 48f1f49bef5efc20223716bbff44a6d62f8ce427 Mon Sep 17 00:00:00 2001
From: dak2 <dawt2h@gmail.com>
Date: Sat, 15 Jul 2023 15:45:10 +0900
Subject: [PATCH] eslint

---
 components/atoms/genericIcon.tsx    | 60 +++++++++++++++++------------
 components/molecules/headerBar.tsx  | 10 +++--
 components/molecules/layout.tsx     |  2 +-
 components/molecules/pagination.tsx | 32 +++++++++------
 lib/api.ts                          |  2 +-
 lib/myHighlight.ts                  | 24 ++++++++++--
 lib/type.ts                         |  2 +-
 next-env.d.ts                       |  5 ++-
 pages/404.tsx                       |  8 ++--
 pages/_app.tsx                      |  5 ++-
 pages/archives/tags/[...params].tsx | 19 +++++----
 pages/index.tsx                     |  7 +++-
 pages/posts/[id].tsx                | 31 ++++++++-------
 pages/posts/page/[id].tsx           | 11 ++++--
 tsconfig.json                       |  5 ++-
 15 files changed, 141 insertions(+), 82 deletions(-)

diff --git a/components/atoms/genericIcon.tsx b/components/atoms/genericIcon.tsx
index afa6bc0..fe932e4 100644
--- a/components/atoms/genericIcon.tsx
+++ b/components/atoms/genericIcon.tsx
@@ -1,36 +1,48 @@
-import { FaGithub, FaAws, FaDocker, FaChevronLeft, FaChevronRight, FaRust, FaNodeJs, FaReact, FaBookOpen } from 'react-icons/fa';
-import { SiJavascript, SiRuby, SiRubyonrails, SiTypescript, SiDeno } from 'react-icons/si';
+import {
+  FaGithub,
+  FaAws,
+  FaDocker,
+  FaChevronLeft,
+  FaChevronRight,
+  FaRust,
+  FaNodeJs,
+  FaReact,
+  FaBookOpen,
+} from 'react-icons/fa';
+import {
+  SiJavascript,
+  SiRuby,
+  SiRubyonrails,
+  SiTypescript,
+  SiDeno,
+} from 'react-icons/si';
 
 type Props = {
   iconName: string;
   styleName?: string;
-}
+};
 
 const GenericIcon = (props: Props) => {
   const iconName = props.iconName;
   const styleName = props.styleName;
   const icons = {
-    'aws': <FaAws/>,
-    'docker': <FaDocker/>,
-    'github': <FaGithub/>,
-    'javascript': <SiJavascript/>,
-    'typescript': <SiTypescript/>,
-    'nodejs': <FaNodeJs/>,
-    'react': <FaReact/>,
-    'ruby': <SiRuby/>,
-    'ruby-on-rails': <SiRubyonrails/>,
-    'rust': <FaRust/>,
-    'deno': <SiDeno/>,
-    'right': <FaChevronRight/>,
-    'left': <FaChevronLeft/>,
-    'book': <FaBookOpen/>,
-  }
+    aws: <FaAws />,
+    docker: <FaDocker />,
+    github: <FaGithub />,
+    javascript: <SiJavascript />,
+    typescript: <SiTypescript />,
+    nodejs: <FaNodeJs />,
+    react: <FaReact />,
+    ruby: <SiRuby />,
+    'ruby-on-rails': <SiRubyonrails />,
+    rust: <FaRust />,
+    deno: <SiDeno />,
+    right: <FaChevronRight />,
+    left: <FaChevronLeft />,
+    book: <FaBookOpen />,
+  };
 
-  return (
-    <div className={styleName}>
-      {icons[iconName]}
-    </div>
-  )
-}
+  return <div className={styleName}>{icons[iconName]}</div>;
+};
 
 export default GenericIcon;
diff --git a/components/molecules/headerBar.tsx b/components/molecules/headerBar.tsx
index 55d63e3..c1efd3f 100644
--- a/components/molecules/headerBar.tsx
+++ b/components/molecules/headerBar.tsx
@@ -3,14 +3,18 @@ import GenericIcon from '../atoms/genericIcon';
 
 const HeaderBar = () => {
   return (
-    <div id="header" className="flex mb-32 justify-start">
+    <div id="header" className="flex justify-start mb-32">
       <Link href="/">
-        <h1 className="text-4xl font-bold	font-mono mr-96 cursor-pointer text-gray-200">
+        <h1 className="font-mono text-4xl font-bold text-gray-200 cursor-pointer mr-96">
           Kdevlog
         </h1>
       </Link>
       <div id="github-icon-container" className="flex ml-64">
-        <a id="github-icon" href="https://github.com/dak2" className="text-2xl ml-2">
+        <a
+          id="github-icon"
+          href="https://github.com/dak2"
+          className="ml-2 text-2xl"
+        >
           <GenericIcon iconName="github" />
         </a>
       </div>
diff --git a/components/molecules/layout.tsx b/components/molecules/layout.tsx
index 7e1832b..164021c 100644
--- a/components/molecules/layout.tsx
+++ b/components/molecules/layout.tsx
@@ -28,7 +28,7 @@ export default function Layout({ children, home }) {
       {!home && currentPageId != 1 && (
         <div id="back-page-link" className="my-12">
           <Link href="/">
-            <a className="text-gray-200 hover:underline">← Back to home</a>
+            <p className="text-gray-200 hover:underline">← Back to home</p>
           </Link>
         </div>
       )}
diff --git a/components/molecules/pagination.tsx b/components/molecules/pagination.tsx
index 29d3e71..45815dd 100644
--- a/components/molecules/pagination.tsx
+++ b/components/molecules/pagination.tsx
@@ -13,14 +13,18 @@ const Pagination = ({ totalCount }) => {
   const prevPage = () => {
     if (pagenationList.length <= 1) {
       return (
-          <div id="prev-page-icon" style={{ marginTop: 5 }}>
-            <GenericIcon iconName='left'/>
-          </div>
-        )
+        <div id="prev-page-icon" style={{ marginTop: 5 }}>
+          <GenericIcon iconName="left" />
+        </div>
+      );
     } else {
       return (
-        <a id="prev-page-icon" href={`/posts/page/${prevPageId}`} style={{ marginTop: 5 }}>
-          <GenericIcon iconName='left'/>
+        <a
+          id="prev-page-icon"
+          href={`/posts/page/${prevPageId}`}
+          style={{ marginTop: 5 }}
+        >
+          <GenericIcon iconName="left" />
         </a>
       );
     }
@@ -30,13 +34,17 @@ const Pagination = ({ totalCount }) => {
     if (pagenationList.length <= 1 || pagenationList.length === currentPageId) {
       return (
         <div id="next-page-icon" style={{ marginTop: 5 }}>
-          <GenericIcon iconName='right'/>
+          <GenericIcon iconName="right" />
         </div>
-      )
+      );
     } else {
       return (
-        <a id="next-page-icon" href={`/posts/page/${nextPageId}`} style={{ marginTop: 5 }}>
-          <GenericIcon iconName='right'/>
+        <a
+          id="next-page-icon"
+          href={`/posts/page/${nextPageId}`}
+          style={{ marginTop: 5 }}
+        >
+          <GenericIcon iconName="right" />
         </a>
       );
     }
@@ -50,10 +58,10 @@ const Pagination = ({ totalCount }) => {
           <li
             id="page-number"
             key={index}
-            className="mx-1.5 w-6 inline-block text-center hover:underline"
+            className="inline-block w-6 text-center mx-1.5 hover:underline"
           >
             <Link href={`/posts/page/${number}`}>
-              <a>{number}</a>
+              <p>{number}</p>
             </Link>
           </li>
         ))}
diff --git a/lib/api.ts b/lib/api.ts
index e38fcb1..135851b 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -1,4 +1,4 @@
-export const httpRequest = async (url: string, key: any) =>
+export const httpRequest = async (url: string, key: RequestInit) =>
   fetch(url, key)
     .then((response) => response.json())
     .catch((error) => error);
diff --git a/lib/myHighlight.ts b/lib/myHighlight.ts
index 78ebca9..ed95d38 100644
--- a/lib/myHighlight.ts
+++ b/lib/myHighlight.ts
@@ -1,12 +1,28 @@
 import hljs from 'highlight.js/lib/core';
 import { RegistLanguages } from '../lib/const';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import go from 'highlight.js/lib/languages/go';
+import ruby from 'highlight.js/lib/languages/ruby';
+import rust from 'highlight.js/lib/languages/rust';
+
+const languages = {
+  javascript,
+  typescript,
+  go,
+  ruby,
+  rust,
+};
 
 export const registLanguage = (language: string) => {
   if (RegistLanguages.includes(language)) {
-    hljs.registerLanguage(
-      `${language}`,
-      require(`highlight.js/lib/languages/${language}`),
-    );
+    const langModule = languages[language];
+
+    if (langModule) {
+      hljs.registerLanguage(language, langModule);
+    } else {
+      return false;
+    }
   } else {
     return false;
   }
diff --git a/lib/type.ts b/lib/type.ts
index 1da5168..adb0d4f 100644
--- a/lib/type.ts
+++ b/lib/type.ts
@@ -24,4 +24,4 @@ export const LanguageTypes = [
   { lang: 'rust' },
   { lang: 'deno' },
   { lang: 'go' },
-]
+];
diff --git a/next-env.d.ts b/next-env.d.ts
index 7b7aa2c..4f11a03 100644
--- a/next-env.d.ts
+++ b/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.
diff --git a/pages/404.tsx b/pages/404.tsx
index aa3fa60..c47aba0 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -2,10 +2,10 @@ import Link from 'next/link';
 
 export default function Custom404() {
   return (
-    <div className="grid justify-items-center pt-64">
-      <h1 className="text-5xl mb-10 font-bold">404 - Page Not Found</h1>
-      <Link href="/">
-        <a className="text-2xl">→ Go back home</a>
+    <div className="pt-64 grid justify-items-center">
+      <h1 className="mb-10 text-5xl font-bold">404 - Page Not Found</h1>
+      <Link href="/" className="text-2xl">
+        → Go back home
       </Link>
     </div>
   );
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 8c4c12f..175e7f2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,7 +2,10 @@ import '../styles/global.scss';
 
 export default function App({ Component, pageProps }) {
   return (
-    <div id="_app" className="bg-zinc-800 min-h-fit font-sans py-10 text-gray-200">
+    <div
+      id="_app"
+      className="py-10 font-sans text-gray-200 bg-zinc-800 min-h-fit"
+    >
       <Component {...pageProps} />
     </div>
   );
diff --git a/pages/archives/tags/[...params].tsx b/pages/archives/tags/[...params].tsx
index f9b09a9..1883cfd 100644
--- a/pages/archives/tags/[...params].tsx
+++ b/pages/archives/tags/[...params].tsx
@@ -29,12 +29,12 @@ const postLists = (props: PropsType) => {
             <li key={postIndex}>
               <div id="post-sub-container" className="mb-12">
                 <Link href={`/posts/${id}`}>
-                  <h2 className="text-2xl font-extrabold mb-2">
-                    <a className="cursor-pointer hover:underline">{title}</a>
+                  <h2 className="mb-2 text-2xl font-extrabold">
+                    <p className="cursor-pointer hover:underline">{title}</p>
                   </h2>
                 </Link>
                 <small id="updated-at" className="text-gray-200">
-                    <FormatedDate dateString={updatedAt} />
+                  <FormatedDate dateString={updatedAt} />
                 </small>
                 <div>
                   <ul>
@@ -50,7 +50,10 @@ const postLists = (props: PropsType) => {
                             },
                           }}
                         >
-                          <p id="tag" className="mr-2 text-sm font-bold cursor-pointer hover:underline">
+                          <p
+                            id="tag"
+                            className="mr-2 text-sm font-bold cursor-pointer hover:underline"
+                          >
                             #{tag.name}
                           </p>
                         </Link>
@@ -69,7 +72,7 @@ const postLists = (props: PropsType) => {
 };
 
 const icon = (tag: string) => {
-  if(tag) return <GenericIcon iconName={tag} styleName={'mt-2'} />
+  if (tag) return <GenericIcon iconName={tag} styleName={'mt-2'} />;
   return null;
 };
 
@@ -79,8 +82,8 @@ const noPosts = () => {
       <Head>
         <title>{siteTitle}</title>
       </Head>
-      <div className="grid justify-items-center pt-64">
-        <h1 className="text-5xl mb-10 font-bold">記事はありません</h1>
+      <div className="pt-64 grid justify-items-center">
+        <h1 className="mb-10 text-5xl font-bold">記事はありません</h1>
       </div>
     </Layout>
   );
@@ -102,7 +105,7 @@ export const getStaticPaths = async () => {
     tag.toLowerCase().replace(/\s+/g, ''),
   );
   const newPaths = [];
-  for (let tag of toLowerCaseTags) {
+  for (const tag of toLowerCaseTags) {
     newPaths.push({ params: { params: [tag] } });
   }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 422c668..6069737 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -25,7 +25,7 @@ const postLists = (props: PropsType) => {
               <div id="post-sub-container" className="mb-12">
                 <Link href={`/posts/${id}`}>
                   <h2 className="mb-2 text-2xl font-extrabold">
-                    <a className="cursor-pointer hover:underline">{title}</a>
+                    <p className="cursor-pointer hover:underline">{title}</p>
                   </h2>
                 </Link>
                 <small id="updated-at" className="text-gray-200">
@@ -45,7 +45,10 @@ const postLists = (props: PropsType) => {
                             },
                           }}
                         >
-                          <p id="tag" className="mr-2 text-sm font-bold cursor-pointer hover:underline">
+                          <p
+                            id="tag"
+                            className="mr-2 text-sm font-bold cursor-pointer hover:underline"
+                          >
                             #{tag.name}
                           </p>
                         </Link>
diff --git a/pages/posts/[id].tsx b/pages/posts/[id].tsx
index f8d53d7..39930c4 100644
--- a/pages/posts/[id].tsx
+++ b/pages/posts/[id].tsx
@@ -1,6 +1,6 @@
 import Layout from '../../components/molecules/layout';
 import { httpRequest } from '../../lib/api';
-import { CMS_API_KEY, CMS_URL } from '../../lib/const';
+import { CMS_API_KEY } from '../../lib/const';
 import Head from 'next/head';
 import { FormatedDate } from '../../components/atoms/date';
 import marked from 'marked';
@@ -13,7 +13,7 @@ type PropsType = {
   post: PostType;
 };
 
-const postDetail = (post: PostType) => {
+const PostDetail = (post: PostType) => {
   if (post.tags.length > 0) {
     registLanguage(postLang(post.tags));
   }
@@ -27,7 +27,10 @@ const postDetail = (post: PostType) => {
         <title>{post.title}</title>
       </Head>
       <article id="post-container">
-        <h1 id="post-title" className="text-3xl font-extrabold tracking-tighter my-4">
+        <h1
+          id="post-title"
+          className="my-4 text-3xl font-extrabold tracking-tighter"
+        >
           {post.title}
         </h1>
         <div id="updated-at" className="text-gray-200">
@@ -44,17 +47,17 @@ const postDetail = (post: PostType) => {
 
 const postLang = (tags: TagType[]): string => {
   let postLang = '';
-  const tagNames = tags.map(tag => tag.name);
-  for(const langType of LanguageTypes) {
-    postLang = tagNames.find(tag => tag === langType.lang)
-    if(postLang) break;
+  const tagNames = tags.map((tag) => tag.name);
+  for (const langType of LanguageTypes) {
+    postLang = tagNames.find((tag) => tag === langType.lang);
+    if (postLang) break;
   }
   return postLang;
 };
 
 const noPost = () => {
   <Layout home={null}>
-    <h1 className="text-3xl font-extrabold tracking-tighter my-4">
+    <h1 className="my-4 text-3xl font-extrabold tracking-tighter">
       記事がありません。
     </h1>
   </Layout>;
@@ -69,7 +72,7 @@ marked.setOptions({
 export default function Post(props: PropsType) {
   const post = props.post;
   if (post) {
-    return postDetail(post);
+    return PostDetail(post);
   } else {
     return noPost;
   }
@@ -84,20 +87,20 @@ export const getStaticPaths = async () => {
   );
   const contents = await res.contents;
   const paths = contents.map((content) => `${content.id}`);
-  for (let path of paths) {
+  for (const path of paths) {
     newPaths.push({ params: { id: path } });
   }
   const count = Math.floor(res.totalCount / 10);
   if (count != 0) {
     let offset = 10;
     for (let i = 0; i < count; i++) {
-      let res = await httpRequest(
+      const res = await httpRequest(
         `https://kdevlog.microcms.io/api/v1/posts?offset=${offset}&limit=10`,
         CMS_API_KEY,
       );
-      let contents = await res.contents;
-      let paths = contents.map((content) => `${content.id}`);
-      for (let path of paths) {
+      const contents = await res.contents;
+      const paths = contents.map((content) => `${content.id}`);
+      for (const path of paths) {
         newPaths.push({ params: { id: path } });
       }
       offset += 10;
diff --git a/pages/posts/page/[id].tsx b/pages/posts/page/[id].tsx
index 14c5de5..0668525 100644
--- a/pages/posts/page/[id].tsx
+++ b/pages/posts/page/[id].tsx
@@ -26,7 +26,7 @@ const postLists = (props: PropsType) => {
               <div id="post-sub-container" className="mb-12">
                 <Link href={`/posts/${id}`}>
                   <h2 className="mb-2 text-2xl font-extrabold">
-                    <a className="cursor-pointer hover:underline">{title}</a>
+                    <p className="cursor-pointer hover:underline">{title}</p>
                   </h2>
                 </Link>
                 <small id="updated-at" className="text-gray-200">
@@ -46,7 +46,10 @@ const postLists = (props: PropsType) => {
                             },
                           }}
                         >
-                          <p id="tag" className="mr-2 text-sm font-bold cursor-pointer rounded-md hover:underline">
+                          <p
+                            id="tag"
+                            className="mr-2 text-sm font-bold cursor-pointer rounded-md hover:underline"
+                          >
                             #{tag.name}
                           </p>
                         </Link>
@@ -70,8 +73,8 @@ const noPosts = () => {
       <Head>
         <title>{siteTitle}</title>
       </Head>
-      <div className="grid justify-items-center pt-64">
-        <h1 className="text-5xl mb-10 font-bold">記事はありません</h1>
+      <div className="pt-64 grid justify-items-center">
+        <h1 className="mb-10 text-5xl font-bold">記事はありません</h1>
       </div>
     </Layout>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 107ff6e..5e02f3e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,12 +17,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "downlevelIteration": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
   ],
   "exclude": [
     "node_modules"