fix warning

dak2 · May 31, 2021 · e1fdf7e · e1fdf7e
1 parent a81e87c
commit e1fdf7e
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 102 deletions.
diff --git a/components/atoms/ThemeChanger.tsx b/components/atoms/ThemeChanger.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 
 const ThemeChanger = () => {
   const [darkMode, setDarkMode] = useState(false);
-  console.log('darkMode', darkMode);
   useEffect(() => {
     if (
       localStorage.theme === 'dark' ||
@@ -37,12 +36,12 @@ const ThemeChanger = () => {
           fill="currentColor"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={2}
             d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </svg>
       </div>

diff --git a/components/atoms/date.tsx b/components/atoms/date.tsx
@@ -1,10 +1,14 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from 'date-fns';
 
 export function FormatedCreatedAt({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'yyyy-MM-dd')}</time>
+  const date = parseISO(dateString);
+  return <p>{format(date, 'yyyy-MM-dd')}</p>;
 }
 
 export function FormatedToday({ date }) {
-  return <time dateTime={date}>{format(date, 'yyyy')}</time>
+  return (
+    <p className="inline-block text-xs">
+      {`© ${format(date, 'yyyy')} Kdevlog.com`}
+    </p>
+  );
 }
diff --git a/components/atoms/footer.tsx b/components/atoms/footer.tsx
@@ -2,8 +2,8 @@ import { FormatedToday } from './date';
 
 const Footer = () => {
   return (
-    <div className="mt-28">
-      ©︎ <FormatedToday date={new Date()} /> kdevlog.com
+    <div className="mt-12">
+      <FormatedToday date={new Date()} />
     </div>
   );
 };

diff --git a/components/atoms/icons/github.tsx b/components/atoms/icons/github.tsx
@@ -6,7 +6,7 @@ const GithubIcon = () => {
       className="h-6 w-6 ml-3 cursor-pointer fill-current	text-black dark:text-gray-50"
     >
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
       ></path>
     </svg>

diff --git a/components/atoms/icons/left.tsx b/components/atoms/icons/left.tsx
@@ -8,9 +8,9 @@ const Left = () => {
       stroke="currentColor"
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M15 19l-7-7 7-7"
       />
     </svg>

diff --git a/components/atoms/icons/right.tsx b/components/atoms/icons/right.tsx
@@ -8,9 +8,9 @@ const Right = () => {
       stroke="currentColor"
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M9 5l7 7-7 7"
       />
     </svg>

diff --git a/components/molecules/layout.tsx b/components/molecules/layout.tsx
@@ -30,6 +30,7 @@ export default function Layout({ children, home }) {
           </Link>
         </div>
       )}
+      <div className="border-b-2 mt-10"></div>
       <Footer />
     </div>
   );

diff --git a/components/molecules/pagination.tsx b/components/molecules/pagination.tsx
@@ -35,7 +35,7 @@ const Pagination = ({ totalCount }) => {
   };
 
   return (
-    <div className="flex justify-end">
+    <div className="flex justify-start">
       {prevPage()}
       <ul>
         {range(1, Math.ceil(totalCount / PER_PAGE)).map((number, index) => (

diff --git a/pages/archives/tags/[...params].tsx b/pages/archives/tags/[...params].tsx
@@ -8,42 +8,52 @@ import TagIcon from '../../../components/atoms/tagIcon';
 
 export default function Tags({ allPostsData, tagName }) {
   return (
-    <Layout home>
+    <Layout home={null}>
       <Head>
         <title>{siteTitle}</title>
       </Head>
       <div className="flex mb-10">
         <TagIcon tagName={tagName} />
         <h2 className="ml-2 font-bold">{tagName}</h2>
       </div>
-      {allPostsData.map(({ id, createdAt, title, tags }) => (
-        <div className="mb-12">
-          <Link href={`/posts/${id}`}>
-            <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
-              <a>{title}</a>
-            </h2>
-          </Link>
-          <small className="text-gray-500">
-            <FormatedCreatedAt dateString={createdAt} />
-          </small>
-          <div>
-            {tags.map((tag) => (
-              <Link
-                href={{
-                  pathname: '/archives/tags/[params]',
-                  query: {
-                    params: `${tag.name.toLowerCase().replace(/\s+/g, '')}`,
-                  },
-                }}
-              >
-                <p className="cursor-pointer p-1	text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
-                  {tag.name}
-                </p>
+      <ul>
+        {allPostsData.map(({ id, createdAt, title, tags }, postIndex) => (
+          <li key={postIndex}>
+            <div className="mb-12">
+              <Link href={`/posts/${id}`}>
+                <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
+                  <a>{title}</a>
+                </h2>
               </Link>
-            ))}
-          </div>
-        </div>
-      ))}
+              <small className="text-gray-500">
+                <FormatedCreatedAt dateString={createdAt} />
+              </small>
+              <div>
+                <ul>
+                  {tags.map((tag, tagIndex) => (
+                    <li key={tagIndex}>
+                      <Link
+                        href={{
+                          pathname: '/archives/tags/[params]',
+                          query: {
+                            params: `${tag.name
+                              .toLowerCase()
+                              .replace(/\s+/g, '')}`,
+                          },
+                        }}
+                      >
+                        <p className="cursor-pointer p-1 text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
+                          {tag.name}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
     </Layout>
   );
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -8,38 +8,48 @@ import Pagination from '../components/molecules/pagination';
 
 export default function Home({ allPostsData, totalCount }) {
   return (
-    <Layout home>
+    <Layout home={true}>
       <Head>
         <title>{siteTitle}</title>
       </Head>
-      {allPostsData.map(({ id, createdAt, title, tags }) => (
-        <div className="mb-12">
-          <Link href={`/posts/${id}`}>
-            <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
-              <a>{title}</a>
-            </h2>
-          </Link>
-          <small className="text-gray-500">
-            <FormatedCreatedAt dateString={createdAt} />
-          </small>
-          <div>
-            {tags.map((tag) => (
-              <Link
-                href={{
-                  pathname: '/archives/tags/[params]',
-                  query: {
-                    params: `${tag.name.toLowerCase().replace(/\s+/g, '')}`,
-                  },
-                }}
-              >
-                <p className="cursor-pointer p-1	text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
-                  {tag.name}
-                </p>
+      <ul>
+        {allPostsData.map(({ id, createdAt, title, tags }, postIndex) => (
+          <li key={postIndex}>
+            <div className="mb-12">
+              <Link href={`/posts/${id}`}>
+                <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
+                  <a>{title}</a>
+                </h2>
               </Link>
-            ))}
-          </div>
-        </div>
-      ))}
+              <small className="text-gray-500">
+                <FormatedCreatedAt dateString={createdAt} />
+              </small>
+              <div>
+                <ul>
+                  {tags.map((tag, tagIndex) => (
+                    <li key={tagIndex}>
+                      <Link
+                        href={{
+                          pathname: '/archives/tags/[params]',
+                          query: {
+                            params: `${tag.name
+                              .toLowerCase()
+                              .replace(/\s+/g, '')}`,
+                          },
+                        }}
+                      >
+                        <p className="cursor-pointer p-1	text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
+                          {tag.name}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
       <Pagination totalCount={totalCount} />
     </Layout>
   );

diff --git a/pages/posts/page/[id].tsx b/pages/posts/page/[id].tsx
@@ -9,38 +9,48 @@ import { range, PER_PAGE } from '../../../lib/const';
 
 export default function PostsPageId({ allPostsData, totalCount }) {
   return (
-    <Layout home>
+    <Layout home={null}>
       <Head>
         <title>{siteTitle}</title>
       </Head>
-      {allPostsData.map(({ id, createdAt, title, tags }) => (
-        <div className="mb-12">
-          <Link href={`/posts/${id}`}>
-            <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
-              <a>{title}</a>
-            </h2>
-          </Link>
-          <small className="text-gray-500">
-            <FormatedCreatedAt dateString={createdAt} />
-          </small>
-          <div>
-            {tags.map((tag) => (
-              <Link
-                href={{
-                  pathname: '/archives/tags/[params]',
-                  query: {
-                    params: `${tag.name.toLowerCase().replace(/\s+/g, '')}`,
-                  },
-                }}
-              >
-                <p className="cursor-pointer p-1 text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
-                  {tag.name}
-                </p>
+      <ul>
+        {allPostsData.map(({ id, createdAt, title, tags }, postIndex) => (
+          <li key={postIndex}>
+            <div className="mb-12">
+              <Link href={`/posts/${id}`}>
+                <h2 className="cursor-pointer text-2xl mb-2 text-blue-800 dark:text-gray-400">
+                  <a>{title}</a>
+                </h2>
               </Link>
-            ))}
-          </div>
-        </div>
-      ))}
+              <small className="text-gray-500">
+                <FormatedCreatedAt dateString={createdAt} />
+              </small>
+              <div>
+                <ul>
+                  {tags.map((tag, tagIndex) => (
+                    <li key={tagIndex}>
+                      <Link
+                        href={{
+                          pathname: '/archives/tags/[params]',
+                          query: {
+                            params: `${tag.name
+                              .toLowerCase()
+                              .replace(/\s+/g, '')}`,
+                          },
+                        }}
+                      >
+                        <p className="cursor-pointer p-1 text-sm	inline-block mr-2 text-white bg-gray-500 rounded-md">
+                          {tag.name}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
       <Pagination totalCount={totalCount} />
     </Layout>
   );

diff --git a/styles/global.css b/styles/global.css
@@ -4,7 +4,6 @@
 
 html {
   background-color: #f3f4f6;
-  font-family: 'Ubuntu', sans-serif;
 }
 
 .toggle-checkbox {
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ export default function Layout({ children, home }) { @@
               </Link>
             </div>
           )}
+          <div className="border-b-2 mt-10"></div>
           <Footer />
         </div>
       );
@@ Expand Down @@