Add bundle analyzer and update React imports

.eslintrc.json

@@ -5,7 +5,8 @@
     "jsx-a11y/anchor-is-valid": "off",
     "import/no-default-export": "off",
     "react/forbid-dom-props": "warn",
-    "@typescript-eslint/require-await": "warn"
+    "@typescript-eslint/require-await": "warn",
+    "react/react-in-jsx-scope": "off"
   },
   "parserOptions": {
     "project": "tsconfig.json"

components/Footer/index.tsx

@@ -4,7 +4,7 @@ import LinkedinIcon from 'mdi-react/LinkedinIcon'
 import TwitterIcon from 'mdi-react/TwitterIcon'
 import YouTubeIcon from 'mdi-react/YoutubeIcon'
 import Link from 'next/link'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import {
     StyledFooterWrapper,
@@ -28,7 +28,7 @@ interface Props {
     minimal?: boolean
 }
 
-const Footer: React.FunctionComponent<Props> = ({ minimal }) => (
+const Footer: FunctionComponent<Props> = ({ minimal }) => (
     <StyledFooterWrapper minimal={minimal}>
         <StyledFooterContainer>
             {!minimal && (

components/Header/index.tsx

@@ -1,6 +1,6 @@
 import HeaderCta from '@components/atoms/HeaderCta'
 import Row from '@components/atoms/Row'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledHeaderImage, StyledHeaderText } from './HeaderStyles'
 
@@ -14,7 +14,7 @@ interface Props {
     text?: string
 }
 
-const Header: React.FunctionComponent<Props> = props => (
+const Header: FunctionComponent<Props> = props => (
     <>
         <Row>
             {props.showImage && <StyledHeaderImage src={props.headerImage} alt={props.headerImageAlt} />}

components/NavBar/index.tsx

@@ -2,7 +2,7 @@ import Button from '@components/atoms/Button'
 import MenuDownIcon from 'mdi-react/MenuDownIcon'
 import MenuIcon from 'mdi-react/MenuIcon'
 import MenuUpIcon from 'mdi-react/MenuUpIcon'
-import React, { useState } from 'react'
+import { FunctionComponent, useState } from 'react'
 
 import {
     StyledNavBarWrapper,
@@ -20,7 +20,7 @@ import {
     StyledNavBarDropDownItem,
 } from './NavBarStyles'
 
-const NavBar: React.FunctionComponent = () => {
+const NavBar: FunctionComponent = () => {
     const [ expandDropdown, setExpandDropdown ] = useState(false)
     const [ expandOnMobile, setExpandOnMobile ] = useState(false)
 

components/atoms/AuthorCard/index.tsx

@@ -1,6 +1,6 @@
 import Card from '@components/atoms/Card'
 import ContentCard from '@components/atoms/ContentCard'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledAuthorImage } from './AuthorCardStyles'
 
@@ -12,7 +12,7 @@ interface Props {
     id: string
 }
 
-const AuthorCard: React.FunctionComponent<Props> = props => (
+const AuthorCard: FunctionComponent<Props> = props => (
     <Card showBorder={true}>
         <StyledAuthorImage src="/authors/unisex-avatar.svg" alt="Author Avatar" />
         <ContentCard

components/atoms/AuthorCardList/index.tsx

@@ -1,15 +1,15 @@
 import AuthorCard from '@components/atoms/AuthorCard'
 import Column from '@components/atoms/Column'
 import AuthorCollection from '@interfaces/AuthorCollection'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledAuthorCardList } from './AuthorCardListStyles'
 
 interface Props {
     authors: AuthorCollection[]
 }
 
-const AuthorCardList: React.FunctionComponent<Props> = props => (
+const AuthorCardList: FunctionComponent<Props> = props => (
     <StyledAuthorCardList>
         {props.authors.map(author => (
             <Column className='flex-medium' width='flex-medium' key={author.id}>

components/atoms/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from 'react'
+import { ReactNode, FunctionComponent } from 'react'
 
 import { StyledButton } from './ButtonStyles'
 

components/atoms/Card/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from 'react'
+import { ReactNode, FunctionComponent } from 'react'
 
 import { StyledCard } from './CardStyles'
 

components/atoms/CollectionView/index.tsx

@@ -1,7 +1,7 @@
 import Card from '@components/atoms/Card'
 import MarkdownFile from '@interfaces/MarkdownFile'
 import Link from 'next/link'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import {
     StyledCollectionHeader,
@@ -19,7 +19,7 @@ interface Props {
     activeSlug?: string
 }
 
-const CollectionView: React.FunctionComponent<Props> = props => (
+const CollectionView: FunctionComponent<Props> = props => (
     <Card addMargin={true} showBorder={true} leftAlign={true}>
         <StyledCollectionHeader>This article is part of a series:</StyledCollectionHeader>
         <StyledCollectionBody>

components/atoms/Column/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from 'react'
+import { ReactNode, FunctionComponent } from 'react'
 
 import { StyledColumn } from './ColumnStyles'
 

components/atoms/Container/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from 'react'
+import { ReactNode, FunctionComponent } from 'react'
 
 import { StyledContainer } from './ContainerStyles'
 

components/atoms/ContentCard/index.tsx

@@ -1,6 +1,6 @@
 import Card from '@components/atoms/Card'
 import Link from 'next/link'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import {
     StyledCardBody,
@@ -20,7 +20,7 @@ export interface Props {
     contentType?: string | null
 }
 
-const ContentCard: React.FunctionComponent<Props> = props => {
+const ContentCard: FunctionComponent<Props> = props => {
     const isPost = props.contentType === 'post'
 
     return (

components/atoms/ContentCardList/index.tsx

@@ -2,13 +2,13 @@ import Column from '@components/atoms/Column'
 import ContentCard from '@components/atoms/ContentCard'
 import Row from '@components/atoms/Row'
 import MarkdownFileWithUrl from '@interfaces/MarkdownFileWithUrl'
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 interface Props {
     records: MarkdownFileWithUrl[]
 }
 
-const ContentCardList: React.FunctionComponent<Props> = props => (
+const ContentCardList: FunctionComponent<Props> = props => (
     <Row>
         {props.records.map(record => (
             <Column className='flex-medium' width='flex-medium' key={record.url}>

components/atoms/CreativeCommonsNotice/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import {
     StyledCreativeCommonsNoticeContainer,
@@ -9,7 +9,7 @@ import {
 
 const creativeCommonsUrl = 'https://creativecommons.org/licenses/by-nc-sa/4.0/'
 
-const CreativeCommonsNotice: React.FunctionComponent = () => (
+const CreativeCommonsNotice: FunctionComponent = () => (
     <StyledCreativeCommonsNoticeContainer>
         <StyledCreativeCommonsNoticeText>
             This work is licensed under a{' '}

components/atoms/EmbeddedYoutubeVideo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledEmbeddedVideoWrapper, StyledEmbeddedVideo } from './EmbeddedYoutubeVideoStyles'
 
@@ -9,7 +9,7 @@ interface Props {
     id: string
 }
 
-const EmbeddedYoutubeVideo: React.FunctionComponent<Props> = props => (
+const EmbeddedYoutubeVideo: FunctionComponent<Props> = props => (
     <StyledEmbeddedVideoWrapper>
         <StyledEmbeddedVideo
             title="Embedded Youtube Video"

components/atoms/GifLikeVideo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledVideo } from './GifLikeVideoStyles'
 
@@ -15,7 +15,7 @@ interface Props {
  * and accessibility advantages (like being pausable). Use cases include
  * screencast demonstrations or animations.
  */
-const GifLikeVideo: React.FunctionComponent<Props> = props => (
+const GifLikeVideo: FunctionComponent<Props> = props => (
     <StyledVideo
         autoPlay={true}
         loop={true}

components/atoms/GoogleTagManager/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledIframe } from './GoogleTagManagerStyles'
 
@@ -12,7 +12,7 @@ interface Props {
 /**
  * Google Tag Manager script tag. This should be rendered in the <head>.
  */
-export const GoogleTagManagerScriptTag: React.FunctionComponent<Props> = props => (
+export const GoogleTagManagerScriptTag: FunctionComponent<Props> = props => (
     <script
         dangerouslySetInnerHTML={{
             __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -29,7 +29,7 @@ export const GoogleTagManagerScriptTag: React.FunctionComponent<Props> = props =
  * script. This should be rendered in the <body> element (ideally right after
  * the opening <body> tag).
  */
-export const GoogleTagManagerNoscriptFrame: React.FunctionComponent<Props> = props => (
+export const GoogleTagManagerNoscriptFrame: FunctionComponent<Props> = props => (
     <noscript>
         <StyledIframe
             title="google-tag-manager-noscript-frame"

components/atoms/HeaderCta/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import Button from '../Button'
 
@@ -9,7 +9,7 @@ interface Props {
     text?: string
 }
 
-const HeaderCta: React.FunctionComponent<Props> = props => (
+const HeaderCta: FunctionComponent<Props> = props => (
     <StyledHeaderCtaWrapper>
         {props.link && 
             <Button href={props.link} className="header-cta">

components/atoms/Row/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from 'react'
+import { ReactNode, FunctionComponent } from 'react'
 
 import { StyledRow } from './RowStyles'
 

components/atoms/SourcegraphSearch/index.tsx

@@ -1,7 +1,7 @@
 import Button from '@components/atoms/Button'
 import Card from '@components/atoms/Card'
 import Column from '@components/atoms/Column'
-import React, { useState } from 'react'
+import { FunctionComponent, useState } from 'react'
 
 import { StyledSearchBody, StyledSearchInput } from './SourcegraphSearchStyles'
 
@@ -10,7 +10,7 @@ interface Props {
     patternType?: string
 }
 
-const SourcegraphSearch: React.FunctionComponent<Props> = props => {
+const SourcegraphSearch: FunctionComponent<Props> = props => {
     const [query, setQuery] = useState(props.query)
     let modifiedQuery = query
 

components/atoms/TocWrapper/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledTocWrapper } from './TocWrapperStyles'
 
 interface Props {
     tocContents: string
 }
 
-const TocWrapper: React.FunctionComponent<Props> = props => (
+const TocWrapper: FunctionComponent<Props> = props => (
     <StyledTocWrapper>
         <h5>Contents</h5>
         {props.tocContents}

components/layouts/Layout.tsx

@@ -3,7 +3,7 @@ import { GoogleTagManagerScriptTag, GoogleTagManagerNoscriptFrame } from '@compo
 import Footer from '@components/Footer'
 import NavBar from '@components/NavBar'
 import Head from 'next/head'
-import * as React from 'react'
+import { FunctionComponent } from 'react'
 
 import { googleTagManagerId } from '../../site-config'
 
@@ -34,7 +34,7 @@ export interface Props {
     metaTags?: MetaTags
 }
 
-const Layout: React.FunctionComponent<Props> = props => {
+const Layout: FunctionComponent<Props> = props => {
     let documentTitle = props.documentTitle
     if (!documentTitle) {
         documentTitle = SITE_TITLE
@@ -61,8 +61,7 @@ const Layout: React.FunctionComponent<Props> = props => {
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <link rel="preconnect" href="https://fonts.gstatic.com" />
                 <link
-                    rel="stylesheet preload prefetch"
-                    as="style"
+                    rel="stylesheet"
                     href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans:wght@700&display=swap"
                 />
                 {/* Prism theme for syntax highlighting */}

components/layouts/PageLayout.tsx

@@ -1,14 +1,14 @@
 import Column from '@components/atoms/Column'
 import Row from '@components/atoms/Row'
-import Layout, { Props as LayoutProps, MetaTags } from '@components/layouts/Layout'
-import React from 'react'
+import Layout, { Props as LayoutProps } from '@components/layouts/Layout'
+import { FunctionComponent } from 'react'
 
 interface Props extends LayoutProps {
     leftColumn?: React.ReactNode
     rightColumn?: React.ReactNode
 }
 
-const PageLayout: React.FunctionComponent<Props> = props => (
+const PageLayout: FunctionComponent<Props> = props => (
     <Layout documentTitle={props.documentTitle} appendSiteTitle={props.appendSiteTitle} metaTags={props.metaTags}>
         <Row className='medium'>
             <Column className='flex-small' width='flex-small'>{props.leftColumn}</Column>

components/templates/ArticleTemplate/index.tsx

@@ -9,7 +9,7 @@ import PageLayout from '@components/layouts/PageLayout'
 import RecordCollection from '@interfaces/RecordCollection'
 import RegexIcon from 'mdi-react/RegexIcon'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-import React from 'react'
+import { FunctionComponent, createElement } from 'react'
 import rehypeReact from 'rehype-react'
 import unified from 'unified'
 import { Node } from 'unist'
@@ -38,7 +38,7 @@ export interface Props {
 
 const components = { SourcegraphSearch, EmbeddedYoutubeVideo, GifLikeVideo, RegexIcon, CollectionView }
 
-const ArticleTemplate: React.FunctionComponent<Props> = props => {
+const ArticleTemplate: FunctionComponent<Props> = props => {
     const metaTags: MetaTags = {
         image: props.socialImage ?? props.image,
         description: props.description,
@@ -54,7 +54,7 @@ const ArticleTemplate: React.FunctionComponent<Props> = props => {
 
     let tocFragment
     if (props.toc) {
-        tocFragment = unified().use(rehypeReact, { createElement: React.createElement }).stringify(props.toc)
+        tocFragment = unified().use(rehypeReact, { createElement }).stringify(props.toc)
         tocFragment = (
             <>
                 <TocWrapper tocContents={tocFragment} />

components/templates/ErrorTemplate/index.tsx

@@ -1,5 +1,5 @@
 import SignDirectionIcon from 'mdi-react/SignDirectionIcon'
-import React, { FunctionComponent } from 'react'
+import { FunctionComponent } from 'react'
 
 import { StyledErrorPageWrapper, StyledErrorPageText } from './ErrorTemplateStyles'
 

next.config.js

@@ -1,7 +1,11 @@
 // @ts-check
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+})
 
 /** @type {import("next/dist/next-server/server/config-shared").NextConfig} */
-module.exports = {
+
+module.exports = withBundleAnalyzer({
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   future: {
     // Enable webpack5
@@ -10,4 +14,4 @@ module.exports = {
   env: {
     NEXT_PUBLIC_URL: process.env.DEPLOY_URL,
   }
-}
+})