Remove typescript cause build was stack in type checking

components/About.tsx → components/About.jsx

@@ -1,8 +1,7 @@
-import {FC} from 'react'
 import Link from './Link'
 import SectionContainer from './SectionContainer'
 
-const About: FC = () => {
+const About = () => {
   return (
     <section
       id="about"

components/ActiveLink.jsx

@@ -0,0 +1,18 @@
+import {cloneElement, Children} from 'react'
+import Link from 'next/link'
+import {withRouter} from 'next/router'
+
+const ActiveLink = ({router, children, href, ...rest}) => {
+  return (
+    <Link href={href} {...rest}>
+      {cloneElement(Children.only(children), {
+        className:
+          router.pathname === /\// || router.asPath === rest.href
+            ? `active ${children.props.className}`
+            : children.props.className,
+      })}
+    </Link>
+  )
+}
+
+export default withRouter(ActiveLink)

components/Banner.tsx → components/Banner.jsx

@@ -1,9 +1,8 @@
-import {FC} from 'react'
 import Link from './Link'
 import SectionContainer from './SectionContainer'
 import PageTitle from './PageTitle'
 
-const Banner: FC = () => {
+const Banner = () => {
   return (
     <section id="banner" className="mb-[-50px] text-gray-100">
       <div

components/ClientReload.tsx → components/ClientReload.jsx

@@ -1,12 +1,12 @@
-import {FC, useEffect} from 'react'
+import {useEffect} from 'react'
 import Router from 'next/router'
 
 /**
  * Client-side complement to next-remote-watch
  * Re-triggers getStaticProps when watched mdx files change
  *
  */
-export const ClientReload: FC = () => {
+export const ClientReload = () => {
   // Exclude socket.io from prod bundle
   useEffect(() => {
     import('socket.io-client').then(module => {

components/Contact.tsx → components/Contact.jsx

@@ -1,4 +1,3 @@
-import {FC} from 'react'
 import {Formik, Form, Field, ErrorMessage} from 'formik'
 import * as Yup from 'yup'
 import SectionContainer from './SectionContainer'
@@ -24,15 +23,8 @@ const ContactSchema = Yup.object().shape({
     .label('Message'),
 })
 
-interface ContactInterface {
-  name?: string
-  email?: string
-  subject?: string
-  message?: string
-}
-
-const Contact: FC = () => {
-  const handleSubmit = (values: ContactInterface) => {
+const Contact = () => {
+  const handleSubmit = values => {
     console.log(values)
   }
   return (

components/CoverImage.tsx → components/CoverImage.jsx

@@ -1,16 +1,7 @@
-import {FC} from 'react'
 import Image from 'next/image'
 import cn from 'classnames'
-import type {FrontMatterTypes} from '../types/index'
 
-interface Props {
-  item: FrontMatterTypes
-  width?: number
-  height?: number
-  src: string
-}
-
-const CoverImage: FC<Props> = ({item, width, height, src, ...rest}) => {
+const CoverImage = ({item, width, height, src, ...rest}) => {
   const image = (
     <Image
       {...rest}

components/Dateformatter.tsx → components/Dateformatter.jsx

@@ -1,11 +1,6 @@
 import {parseISO, format} from 'date-fns'
-import {FC} from 'react'
 
-interface Props {
-  dateString: string
-}
-
-const DateFormatter: FC<Props> = ({dateString}) => {
+const DateFormatter = ({dateString}) => {
   const date = parseISO(dateString)
   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }

components/Footer.tsx → components/Footer.jsx

@@ -1,12 +1,11 @@
-import {FC} from 'react'
 import Image from 'next/image'
 import Link from 'components/Link'
 import SectionContainer from './SectionContainer'
 import headerNavLinks from 'data/headerNavLinks'
 import icons from 'data/icons'
 import styles from 'styles/Footer.module.css'
 
-const Footer: FC = () => {
+const Footer = () => {
   return (
     <footer className="w-full border-y border-y-gray-300 py-3 text-gray-500 dark:bg-[#111827]">
       <div>

components/Header.tsx → components/Header.jsx

@@ -1,4 +1,4 @@
-import {FC, useState, useEffect} from 'react'
+import {useState, useEffect} from 'react'
 import ActiveLink from './ActiveLink'
 import headerNavLinks from '@data/headerNavLinks'
 import MobileOverlay from './MobileOverlay'
@@ -7,7 +7,7 @@ import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import smoothscroll from 'smoothscroll-polyfill'
 
-const Header: FC = () => {
+const Header = () => {
   const [scrolled, setScrolled] = useState(false)
   const [showMobileMenu, setShowMobileMenu] = useState(false)
 

components/Image.jsx

@@ -0,0 +1,7 @@
+import NextImage from 'next/image'
+
+const Image = props => {
+  return <NextImage {...props} />
+}
+
+export default Image

components/Layout.tsx → components/Layout.jsx

@@ -1,12 +1,10 @@
-import {FC} from 'react'
 import {useRouter} from 'next/router'
 import Header from './Header'
 import Footer from './Footer'
 import Head from 'next/head'
 import siteMetadata from '@data/siteMetadata'
-import type {LayoutTypes} from '../types/index'
 
-const Layout: FC<LayoutTypes> = ({
+const Layout = ({
   title,
   description,
   author,

components/LayoutWrapper.tsx → components/LayoutWrapper.jsx

@@ -1,12 +1,7 @@
-import {FC} from 'react'
 import Header from './Header'
 import Footer from './Footer'
 
-interface Props {
-  children?: React.ReactNode
-}
-
-const LayoutWrapper: FC<Props> = ({children}) => {
+const LayoutWrapper = ({children}) => {
   return (
     <div className="flex h-screen flex-col justify-between">
       <Header />

components/Link.jsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+
+const CustomLink = props => {
+  const {href, ...rest} = props
+  const internalLink = href.toString().startsWith('/')
+  const anchorLink = href.toString().startsWith('/#')
+
+  if (internalLink)
+    return (
+      <Link href={href}>
+        <a {...rest} />
+      </Link>
+    )
+
+  if (anchorLink) return <a href={href?.toString()} {...rest} />
+
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href?.toString()}
+      {...rest}
+    />
+  )
+}
+
+export default CustomLink

components/MDXComponents.tsx → components/MDXComponents.jsx

@@ -1,28 +1,24 @@
-import {useMemo} from 'react'
-import {getMDXComponent} from 'mdx-bundler/client'
+import {FunctionComponent, useMemo} from 'react'
+import {getMDXComponent, MDXContentProps} from 'mdx-bundler/client'
 import Image from './Image'
 import CustomLink from './Link'
 import TOCInline from './TOCInline'
 import Pre from './Pre'
 import {BlogNewsLetterForm} from './NewsLetterForm'
 
-interface Props {
-  [key: string]: any
-}
-
 export const MDXComponents = {
   Image,
   TOCInline,
   a: CustomLink,
   pre: Pre,
   BlogNewsletterForm: BlogNewsLetterForm,
-  wrapper: ({components, layout, ...rest}: Props) => {
+  wrapper: ({components, layout, ...rest}) => {
     const Layout = require(`../layouts/${layout}`).default
     return <Layout {...rest} />
   },
 }
 
-export const MDXLayoutRenderer = ({layout, mdxSource, ...rest}: any) => {
+export const MDXLayoutRenderer = ({layout, mdxSource, ...rest}) => {
   const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
 
   return <MDXLayout layout={layout} components={MDXComponents} {...rest} />

components/MobileNav.tsx → components/MobileNav.jsx

@@ -1,13 +1,8 @@
 import {FC} from 'react'
-import Link from 'next/link'
+import Link, {LinkProps} from 'next/link'
 import headerNavLinks from '@data/headerNavLinks'
 
-interface Props {
-  show?: boolean
-  onClick?: React.MouseEventHandler
-}
-
-const MobileNav: FC<Props> = ({show, onClick}) => {
+const MobileNav = ({show, onClick}) => {
   return (
     <nav
       className={`fixed top-0 bottom-0 z-40 flex h-full w-[40vw] flex-col justify-start overflow-y-auto bg-gray-800 py-3 transition-all duration-300 ease-in-out ${

components/MobileOverlay.tsx → components/MobileOverlay.jsx

@@ -1,11 +1,4 @@
-import {FC} from 'react'
-
-interface Props {
-  show?: boolean
-  onClose?: React.MouseEventHandler
-}
-
-const MobileOverlay: FC<Props> = ({show, onClose}) => {
+const MobileOverlay = ({show, onClose}) => {
   return (
     <div
       onClick={onClose}

components/NewsLetterForm.tsx → components/NewsLetterForm.jsx

@@ -1,18 +1,14 @@
-import React, {FC, useRef, useState} from 'react'
+import React, {FormEventHandler, useRef, useState} from 'react'
 
 import siteMetadata from '@data/siteMetadata'
 
-interface Props {
-  title?: string
-}
-
-const NewsLetterForm: FC<Props> = ({title = 'Subscribe to the newsletter'}) => {
-  const inputEl = useRef() as React.MutableRefObject<HTMLInputElement>
+const NewsLetterForm = ({title = 'Subscribe to the newsletter'}) => {
+  const inputEl = useRef()
   const [error, setError] = useState(false)
   const [message, setMessage] = useState('')
   const [subscribed, setSubscribed] = useState(false)
 
-  const subscribe = async (e: React.SyntheticEvent<EventTarget>) => {
+  const subscribe = async e => {
     e.preventDefault()
 
     const res = await fetch(`/api/${siteMetadata.newsletter.provider}`, {
@@ -88,7 +84,7 @@ const NewsLetterForm: FC<Props> = ({title = 'Subscribe to the newsletter'}) => {
 
 export default NewsLetterForm
 
-export const BlogNewsLetterForm: FC<Props> = ({title}) => (
+export const BlogNewsLetterForm = ({title}) => (
   <div className="flex items-center justify-center">
     <div className="bg-gray-100 p-6 dark:bg-gray-800 sm:px-14 sm:py-8">
       <NewsLetterForm title={title} />

components/PageTitle.tsx → components/PageTitle.jsx

@@ -1,11 +1,6 @@
-import {FC} from 'react'
+import React from 'react'
 
-interface Props {
-  banner?: boolean
-  children?: React.ReactNode
-}
-
-const PageTitle: FC<Props> = ({banner, children}) => {
+const PageTitle = ({banner, children}) => {
   return (
     <h1
       className={`text-3xl font-extrabold leading-9 tracking-tight ${