🎨 Clean the code

components/Container.js

@@ -35,8 +35,15 @@ const Container = ({ children, layout, fullWidth, ...customMeta }) => {
         />
       </Head>
       <div className="wrapper">
-        <Header navBarTitle={layout === 'blog' ? meta.title : null} fullWidth={fullWidth}/>
-        <main className={`m-auto font-sans flex-grow w-full transition-all ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'}` }>
+        <Header
+          navBarTitle={layout === 'blog' ? meta.title : null}
+          fullWidth={fullWidth}
+        />
+        <main
+          className={`m-auto font-sans flex-grow w-full transition-all ${
+            !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+          }`}
+        >
           {children}
         </main>
         <Footer fullWidth={fullWidth} />

components/Footer.js

@@ -3,10 +3,23 @@ const Footer = ({ fullWidth }) => {
   const d = new Date()
   const y = d.getFullYear()
   return (
-    <div className={`mt-6 flex-shrink-0 m-auto font-noEmoji w-full text-gray-600 dark:text-gray-400 transition-all ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'}`}>
+    <div
+      className={`mt-6 flex-shrink-0 m-auto font-noEmoji w-full text-gray-600 dark:text-gray-400 transition-all ${
+        !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+      }`}
+    >
       <hr className="border-gray-200 dark:border-gray-600" />
       <div className="my-4 text-sm leading-6 font-medium">
-        <p><a href="https://github.com/craigary/nobelium" target="_blank" rel="noreferrer">Nobelium</a> is built with ♥ and ⚛ Next.js. Proudly deployed on ▲Vercel.</p>
+        <p>
+          <a
+            href="https://github.com/craigary/nobelium"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Nobelium
+          </a>{' '}
+          is built with ♥ and ⚛ Next.js. Proudly deployed on ▲Vercel.
+        </p>
         <p>
           © {BLOG.author}{' '}
           {BLOG.since === y || !BLOG.since ? y : `${BLOG.since} - ${y}`}

components/Gtag.js

@@ -5,7 +5,7 @@ import * as gtag from '@/lib/gtag'
 const Gtag = () => {
   const router = useRouter()
   useEffect(() => {
-    const handleRouteChange = (url) => {
+    const handleRouteChange = url => {
       gtag.pageview(url)
     }
     router.events.on('routeChangeComplete', handleRouteChange)

components/Header.js

@@ -56,7 +56,9 @@ const Header = ({ navBarTitle, fullWidth }) => {
     <>
       <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
       <div
-        className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-1 md:mb-8 py-8 bg-opacity-60 ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'}`}
+        className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-1 md:mb-8 py-8 bg-opacity-60 ${
+          !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+        }`}
         id="sticky-nav"
         ref={navRef}
       >
@@ -75,7 +77,11 @@ const Header = ({ navBarTitle, fullWidth }) => {
               >
                 <title id="logoTitle">{BLOG.title}</title>
                 <desc id="logoDesc">{BLOG.author}</desc>
-                <rect width="24" height="24" className="fill-current text-black dark:text-white" />
+                <rect
+                  width="24"
+                  height="24"
+                  className="fill-current text-black dark:text-white"
+                />
               </svg>
             </div>
           </Link>

components/Pagination.js

@@ -4,7 +4,6 @@ import { useLocale } from '@/lib/locale'
 
 const Pagination = ({ page, showNext }) => {
   const locale = useLocale()
-  // console.log(locale)
   const currentPage = +page
   return (
     <div className="flex justify-between font-medium text-black dark:text-gray-100">

components/Tags.js

@@ -1,9 +1,4 @@
-import { useState } from 'react'
-
 const Tags = ({ tags, handleTagClick, selectedTag }) => {
-  // const colorPalette = ['yellow-400', 'blue-400', 'purple-400', 'pink s-400']
-  // const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]
-  // const ClassToReturn = `border-${color} text-${color} bg-${color}`
   if (!tags) return null
   return (
     <div className="tag-container">
@@ -13,7 +8,9 @@ const Tags = ({ tags, handleTagClick, selectedTag }) => {
             key={key}
             onClick={() => handleTagClick(key)}
             className={`mr-3 py-2 font-medium cursor-pointer  border px-4 whitespace-nowrap bg-gray-100 border-gray-100 text-gray-400 dark:bg-night dark:border-gray-800 dark:text-gray-300 ${
-              key === selectedTag ? 'text-white bg-black border-black dark:bg-gray-600 dark:border-gray-600 dark:text-gray-300' : ''
+              key === selectedTag
+                ? 'text-white bg-black border-black dark:bg-gray-600 dark:border-gray-600 dark:text-gray-300'
+                : ''
             }`}
           >
             {`${key} (${tags[key]})`}

layouts/default.js

@@ -1,12 +1,7 @@
 import Image from 'next/image'
 import Container from '@/components/Container'
 import { useRouter } from 'next/router'
-import {
-  NotionRenderer,
-  Equation,
-  Code,
-  CollectionRow
-} from 'react-notion-x'
+import { NotionRenderer, Equation, Code, CollectionRow } from 'react-notion-x'
 import BLOG from '@/blog.config'
 import formatDate from '@/lib/formatDate'
 import dynamic from 'next/dynamic'

layouts/fullwidth.js

@@ -1,12 +1,7 @@
 import Image from 'next/image'
 import Container from '@/components/Container'
 import { useRouter } from 'next/router'
-import {
-  NotionRenderer,
-  Equation,
-  Code,
-  CollectionRow
-} from 'react-notion-x'
+import { NotionRenderer, Equation, Code, CollectionRow } from 'react-notion-x'
 import BLOG from '@/blog.config'
 import formatDate from '@/lib/formatDate'
 import dynamic from 'next/dynamic'

lib/gtag.js

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 export const GA_TRACKING_ID = BLOG.analytics.gaConfig.measurementId
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-export const pageview = (url) => {
+export const pageview = url => {
   window.gtag('config', GA_TRACKING_ID, {
     page_path: url
   })

lib/notion.js

@@ -3,7 +3,6 @@ const { NotionAPI } = require('notion-client')
 const api = new NotionAPI()
 
 export async function getAllPosts () {
-  // const response = await fetch(`/api/notion/collection?id=${BLOG.notionPageId}`)
   const page = await api.getPage(BLOG.notionPageId)
   const collectionId = Object.keys(page.collection)[0]
   const collectionViewId = Object.keys(page.collection_view)[0]

lib/rss.js

@@ -9,7 +9,6 @@ export function generateRss (posts) {
     id: `${BLOG.link}/${BLOG.path}`,
     link: `${BLOG.link}/${BLOG.path}`,
     language: BLOG.lang,
-    // image: `${BLOG.link}/image.png`,
     favicon: `${BLOG.link}/favicon.png`,
     copyright: `All rights reserved ${year}, ${BLOG.author}`,
     author: {

pages/[slug].js

@@ -17,7 +17,6 @@ const BlogPost = ({ post, blockMap }) => {
 export async function getStaticPaths () {
   let posts = await getAllPosts()
   posts = posts.filter(
-    // post => post.status === 'Published' && post.type === 'Post'
     post => post.status === 'Published'
   )
   return {
@@ -29,7 +28,6 @@ export async function getStaticPaths () {
 export async function getStaticProps ({ params: { slug } }) {
   let posts = await getAllPosts()
   posts = posts.filter(
-    // post => post.status === 'Published' && post.type === 'Post'
     post => post.status === 'Published'
   )
   const post = posts.find(t => t.slug === slug)

pages/_app.js

@@ -1,10 +1,6 @@
-// core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
-// used for code syntax highlighting (optional)
 import 'prismjs/themes/prism.css'
-// used for collection views (optional)
 import 'rc-dropdown/assets/index.css'
-// used for rendering equations (optional)
 import 'katex/dist/katex.min.css'
 import '@/styles/globals.css'
 import BLOG from '@/blog.config'
@@ -16,7 +12,7 @@ const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 
 function MyApp ({ Component, pageProps }) {
   return (
-  <LocaleProvider>
+    <LocaleProvider>
       <>
         {BLOG.analytics && BLOG.analytics === 'ackee' && (
           <Ackee
@@ -27,7 +23,7 @@ function MyApp ({ Component, pageProps }) {
         {BLOG.analytics && BLOG.analytics === 'ga' && <Gtag />}
         <Component {...pageProps} />
       </>
-  </LocaleProvider>
+    </LocaleProvider>
   )
 }
 

pages/index.js

@@ -6,10 +6,11 @@ import BLOG from '@/blog.config'
 
 export async function getStaticProps () {
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post')
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
   const postsToShow = posts.slice(0, BLOG.postsPerPage)
   const totalPosts = posts.length
-  // const totalPages = Math.ceil(totalPosts / BLOG.postsPerPage)
   const showNext = totalPosts > BLOG.postsPerPage
   return {
     props: {
@@ -27,7 +28,7 @@ const blog = ({ postsToShow, page, showNext }) => {
       {postsToShow.map(post => (
         <BlogPost key={post.id} post={post} />
       ))}
-      {showNext && <Pagination page={page} showNext={showNext}/>}
+      {showNext && <Pagination page={page} showNext={showNext} />}
     </Container>
   )
 }

pages/page/[page].js

@@ -4,25 +4,28 @@ import Pagination from '@/components/Pagination'
 import { getAllPosts } from '@/lib/notion'
 import BLOG from '@/blog.config'
 
-const Page = ({ postsToShow, page, totalPages, showNext }) => {
+const Page = ({ postsToShow, page, showNext }) => {
   return (
     <Container>
       {postsToShow &&
         postsToShow.map(post => <BlogPost key={post.id} post={post} />)}
-      <Pagination page={page} showNext={showNext}/>
+      <Pagination page={page} showNext={showNext} />
     </Container>
   )
 }
 
 export async function getStaticProps (context) {
   const { page } = context.params // Get Current Page No.
-  // fetch page data
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post')
-  const postsToShow = posts.slice(BLOG.postsPerPage * (page - 1), BLOG.postsPerPage * page)
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
+  const postsToShow = posts.slice(
+    BLOG.postsPerPage * (page - 1),
+    BLOG.postsPerPage * page
+  )
   const totalPosts = posts.length
-  const totalPages = Math.ceil(totalPosts / BLOG.postsPerPage)
-  const showNext = (page * BLOG.postsPerPage) < totalPosts
+  const showNext = page * BLOG.postsPerPage < totalPosts
   return {
     props: {
       page, // Current Page

pages/search.js

@@ -6,8 +6,9 @@ export default function search ({ tags, posts }) {
 }
 export async function getStaticProps () {
   let posts = await getAllPosts()
-  posts = posts
-    .filter(post => post.status === 'Published' && post.type === 'Post')
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
   const tags = await getAllTags()
   return {
     props: {