syncing all local edits

Author: justinTsugranes

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    amd: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'next', 'next/core-web-vitals'],
+  rules: {
+    'prettier/prettier': 'error',
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 0,
+    'no-unused-vars': 0,
+    'react/no-unescaped-entities': 0,
+  },
+}

.eslintrc.json

@@ -0,0 +1,56 @@
+import Image from './Image'
+import Link from './Link'
+
+const Card = ({ title, description, imgSrc, href }) => (
+  <div className="md p-4 md:w-1/2" style={{ maxWidth: '544px' }}>
+    <div
+      className={`${
+        imgSrc && 'h-full'
+      }  overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
+    >
+      {imgSrc &&
+        (href ? (
+          <Link href={href} aria-label={`Link to ${title}`}>
+            <Image
+              alt={title}
+              src={imgSrc}
+              className="object-cover object-center md:h-36 lg:h-48"
+              width={544}
+              height={306}
+            />
+          </Link>
+        ) : (
+          <Image
+            alt={title}
+            src={imgSrc}
+            className="object-cover object-center md:h-36 lg:h-48"
+            width={544}
+            height={306}
+          />
+        ))}
+      <div className="p-6">
+        <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
+          {href ? (
+            <Link href={href} aria-label={`Link to ${title}`}>
+              {title}
+            </Link>
+          ) : (
+            title
+          )}
+        </h2>
+        <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>
+        {href && (
+          <Link
+            href={href}
+            className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+            aria-label={`Link to ${title}`}
+          >
+            Learn more &rarr;
+          </Link>
+        )}
+      </div>
+    </div>
+  </div>
+)
+
+export default Card

components/Card.js

@@ -0,0 +1,23 @@
+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 = () => {
+  // Exclude socket.io from prod bundle
+  useEffect(() => {
+    import('socket.io-client').then((module) => {
+      const socket = module.io()
+      socket.on('reload', (data) => {
+        Router.replace(Router.asPath, undefined, {
+          scroll: false,
+        })
+      })
+    })
+  }, [])
+
+  return null
+}

components/ClientReload.js

@@ -0,0 +1,54 @@
+import siteMetadata from '@/data/siteMetadata'
+import headerNavLinks from '@/data/headerNavLinks'
+import Logo from '@/data/logo.svg'
+import Link from './Link'
+import SectionContainer from './SectionContainer'
+import Footer from './Footer'
+import MobileNav from './MobileNav'
+import ThemeSwitch from './ThemeSwitch'
+
+const LayoutWrapper = ({ children }) => {
+  return (
+    <SectionContainer>
+      <div className="flex h-screen flex-col justify-between">
+        <header className="flex items-center justify-between py-10">
+          <div>
+            <Link href="/" aria-label={siteMetadata.headerTitle}>
+              <div className="flex items-center justify-between">
+                <div className="mr-3">
+                  <Logo />
+                </div>
+                {typeof siteMetadata.headerTitle === 'string' ? (
+                  <div className="hidden h-6 text-2xl font-semibold sm:block">
+                    {siteMetadata.headerTitle}
+                  </div>
+                ) : (
+                  siteMetadata.headerTitle
+                )}
+              </div>
+            </Link>
+          </div>
+          <div className="flex items-center text-base leading-5">
+            <div className="hidden sm:block">
+              {headerNavLinks.map((link) => (
+                <Link
+                  key={link.title}
+                  href={link.href}
+                  className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
+                >
+                  {link.title}
+                </Link>
+              ))}
+            </div>
+            <ThemeSwitch />
+            <MobileNav />
+          </div>
+        </header>
+        <main className="mb-auto">{children}</main>
+        <Footer />
+      </div>
+    </SectionContainer>
+  )
+}
+
+export default LayoutWrapper

components/LayoutWrapper.js

@@ -0,0 +1,23 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import Link from 'next/link'
+
+const CustomLink = ({ href, ...rest }) => {
+  const isInternalLink = href && href.startsWith('/')
+  const isAnchorLink = href && href.startsWith('#')
+
+  if (isInternalLink) {
+    return (
+      <Link href={href}>
+        <a {...rest} />
+      </Link>
+    )
+  }
+
+  if (isAnchorLink) {
+    return <a href={href} {...rest} />
+  }
+
+  return <a target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+}
+
+export default CustomLink

components/Link.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/display-name */
+import { useMemo } from 'react'
+import { getMDXComponent } from 'mdx-bundler/client'
+import Image from './Image'
+import CustomLink from './Link'
+import TOCInline from './TOCInline'
+import Pre from './Pre'
+import { BlogNewsletterForm } from './NewsletterForm'
+
+export const MDXComponents = {
+  Image,
+  TOCInline,
+  a: CustomLink,
+  pre: Pre,
+  BlogNewsletterForm: BlogNewsletterForm,
+  wrapper: ({ components, layout, ...rest }) => {
+    const Layout = require(`../layouts/${layout}`).default
+    return <Layout {...rest} />
+  },
+}
+
+export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
+  const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
+
+  return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
+}

components/MDXComponents.js

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import Link from './Link'
+import headerNavLinks from '@/data/headerNavLinks'
+
+const MobileNav = () => {
+  const [navShow, setNavShow] = useState(false)
+
+  const onToggleNav = () => {
+    setNavShow((status) => {
+      if (status) {
+        document.body.style.overflow = 'auto'
+      } else {
+        // Prevent scrolling
+        document.body.style.overflow = 'hidden'
+      }
+      return !status
+    })
+  }
+
+  return (
+    <div className="sm:hidden">
+      <button
+        type="button"
+        className="ml-1 mr-1 h-8 w-8 rounded py-1"
+        aria-label="Toggle Menu"
+        onClick={onToggleNav}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          className="text-gray-900 dark:text-gray-100"
+        >
+          <path
+            fillRule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+      <div
+        className={`fixed top-0 left-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
+          navShow ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        <div className="flex justify-end">
+          <button
+            type="button"
+            className="mr-5 mt-11 h-8 w-8 rounded"
+            aria-label="Toggle Menu"
+            onClick={onToggleNav}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="text-gray-900 dark:text-gray-100"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <nav className="fixed mt-8 h-full">
+          {headerNavLinks.map((link) => (
+            <div key={link.title} className="px-12 py-4">
+              <Link
+                href={link.href}
+                className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                onClick={onToggleNav}
+              >
+                {link.title}
+              </Link>
+            </div>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default MobileNav

components/MobileNav.js

@@ -0,0 +1,84 @@
+import { useRef, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
+  const inputEl = useRef(null)
+  const [error, setError] = useState(false)
+  const [message, setMessage] = useState('')
+  const [subscribed, setSubscribed] = useState(false)
+
+  const subscribe = async (e) => {
+    e.preventDefault()
+
+    const res = await fetch(`/api/${siteMetadata.newsletter.provider}`, {
+      body: JSON.stringify({
+        email: inputEl.current.value,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    })
+
+    const { error } = await res.json()
+    if (error) {
+      setError(true)
+      setMessage('Your e-mail address is invalid or you are already subscribed!')
+      return
+    }
+
+    inputEl.current.value = ''
+    setError(false)
+    setSubscribed(true)
+    setMessage('Successfully! 🎉 You are now subscribed.')
+  }
+
+  return (
+    <div>
+      <div className="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">{title}</div>
+      <form className="flex flex-col sm:flex-row" onSubmit={subscribe}>
+        <div>
+          <label className="sr-only" htmlFor="email-input">
+            Email address
+          </label>
+          <input
+            autoComplete="email"
+            className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600 dark:bg-black"
+            id="email-input"
+            name="email"
+            placeholder={subscribed ? "You're subscribed !  🎉" : 'Enter your email'}
+            ref={inputEl}
+            required
+            type="email"
+            disabled={subscribed}
+          />
+        </div>
+        <div className="mt-2 flex w-full rounded-md shadow-sm sm:mt-0 sm:ml-3">
+          <button
+            className={`w-full rounded-md bg-primary-500 py-2 px-4 font-medium text-white sm:py-0 ${
+              subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
+            } focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 dark:ring-offset-black`}
+            type="submit"
+            disabled={subscribed}
+          >
+            {subscribed ? 'Thank you!' : 'Sign up'}
+          </button>
+        </div>
+      </form>
+      {error && (
+        <div className="w-72 pt-2 text-sm text-red-500 dark:text-red-400 sm:w-96">{message}</div>
+      )}
+    </div>
+  )
+}
+
+export default NewsletterForm
+
+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} />
+    </div>
+  </div>
+)

components/NewsletterForm.js

@@ -0,0 +1,7 @@
+export default function PageTitle({ children }) {
+  return (
+    <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
+      {children}
+    </h1>
+  )
+}