yarn upgrade && yarn format-all

content/docs/user-guide/contributing/blog.md

@@ -41,7 +41,6 @@ tags:
   - Version Control
   - AI
 ---
-
 ```
 
 - `title` (**required**) - title of the post.

package.json

@@ -37,14 +37,14 @@
   },
   "dependencies": {
     "@hapi/wreck": "^17.0.0",
-    "@octokit/graphql": "^4.3.1",
+    "@octokit/graphql": "^4.8.0",
     "@reach/portal": "^0.10.0",
     "@reach/router": "^1.3.3",
     "@reach/tooltip": "^0.10.0",
     "classnames": "^2.2.6",
-    "color": "^3.1.2",
+    "color": "^3.2.1",
     "compression": "^1.7.4",
-    "date-fns": "^2.11.1",
+    "date-fns": "^2.23.0",
     "docsearch.js": "^2.6.3",
     "ease-component": "^1.0.0",
     "express": "^4.17.1",
@@ -59,9 +59,9 @@
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.17.21",
     "moment": "^2.25.3",
-    "nanoid": "^3.0.2",
+    "nanoid": "^3.1.25",
     "node-cache": "^5.1.0",
-    "perfect-scrollbar": "^1.5.0",
+    "perfect-scrollbar": "^1.5.2",
     "pretty-quick": "^2.0.1",
     "prismjs": "^1.24.0",
     "promise-polyfill": "^8.1.3",
@@ -78,7 +78,7 @@
     "react-use": "^14.0.0",
     "rehype-react": "^5.0.1",
     "remark-preset-lint-recommended": "^5.0.0",
-    "repo-link-check": "^0.7.1",
+    "repo-link-check": "^0.7.3",
     "reset-css": "^5.0.1",
     "s3-client": "^4.4.2",
     "scroll": "^3.0.1",
@@ -89,12 +89,12 @@
     "upath": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.15.0",
     "@svgr/webpack": "^5.3.1",
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/promise-polyfill": "^6.0.3",
-    "@types/react": "^16.9.32",
+    "@types/react": "^16.14.14",
     "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
@@ -112,8 +112,8 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-json": "^2.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-react": "^7.25.1",
     "gatsby-plugin-catch-links": "^2.2.1",
     "gatsby-plugin-feed": "^2.4.1",
     "gatsby-plugin-google-analytics": "^2.2.2",

scripts/deploy-with-s3.js

@@ -69,9 +69,8 @@ const {
   cleanEntry
 } = require('./s3-utils')
 const { move } = require('fs-extra')
-const { downloadAllFromS3, uploadAllToS3, cleanAllLocal } = withEntries(
-  cacheDirs
-)
+const { downloadAllFromS3, uploadAllToS3, cleanAllLocal } =
+  withEntries(cacheDirs)
 
 function run(command) {
   execSync(command, {

src/components/Blog/Feed/Item/index.tsx

@@ -66,7 +66,7 @@ const Item: React.FC<IBlogFeedItemProps> = ({
       )}
     >
       <Link href={slug} className={styles.pictureLink}>
-        {picture ? (
+        {image ? (
           <Image fluid={image} className={styles.picture} />
         ) : (
           <Placeholder className={styles.picture} />

src/components/Blog/Post/HeroPic/index.tsx

@@ -2,34 +2,42 @@ import Image from 'gatsby-image'
 import React from 'react'
 
 import { BLOG } from '../../../../consts'
-import {
-  IBlogPostHeroPic,
-  IGatsbyImageProps
-} from '../../../../templates/blog-post'
+import { IFluidObject } from '../../../../templates/blog-post'
 
 import styles from './styles.module.css'
 
-const NonStretchedImage: React.FC<IGatsbyImageProps> = props => {
-  let normalizedProps = props
+interface INonStretchedImageProps {
+  fluid: IFluidObject
+  style?: object
+}
+
+interface IHeroPicProps {
+  picture: {
+    fluid: IFluidObject
+  }
+  pictureComment?: string
+}
+
+const NonStretchedImage: React.FC<INonStretchedImageProps> = props => {
+  let style = {}
   if (props.fluid && props.fluid.presentationWidth) {
-    const presetantionWidth = props.fluid?.presentationWidth
+    const presetantionWidth = props.fluid.presentationWidth
     const width =
       presetantionWidth < BLOG.imageMaxWidthHero
         ? presetantionWidth / 2
         : presetantionWidth
-    normalizedProps = {
-      ...props,
-      style: {
-        ...(props.style || {}),
-        maxWidth: width,
-        margin: '0 auto'
-      }
+    style = {
+      ...(props.style || {}),
+
+      maxWidth: width,
+      margin: '0 auto'
     }
   }
-  return <Image {...normalizedProps} />
+
+  return <Image style={style} {...props} />
 }
 
-const HeroPic: React.FC<IBlogPostHeroPic> = ({ pictureComment, picture }) => {
+const HeroPic: React.FC<IHeroPicProps> = ({ pictureComment, picture }) => {
   return (
     <div className={styles.pictureWrapper}>
       <div className={styles.picture}>

src/components/Community/Learn/index.tsx

@@ -45,9 +45,10 @@ const BlogPost: React.FC<ICommunityBlogPost> = ({
     return null
   }
 
-  const logPost = useCallback(() => logEvent('community', 'blog', title), [
-    title
-  ])
+  const logPost = useCallback(
+    () => logEvent('community', 'blog', title),
+    [title]
+  )
 
   const { error, ready, result } = useCommentsCount(commentsUrl)
 

src/components/Community/Meet/index.tsx

@@ -30,9 +30,10 @@ const Topic: React.FC<{ color: string } & IDiscussTopic> = ({
   comments,
   color
 }) => {
-  const logTopic = useCallback(() => logEvent('community', 'forum', title), [
-    title
-  ])
+  const logTopic = useCallback(
+    () => logEvent('community', 'forum', title),
+    [title]
+  )
 
   return (
     <div className={sharedStyles.line}>
@@ -67,9 +68,10 @@ const Issue: React.FC<{ color: string } & IGithubIssue> = ({
   comments,
   color
 }) => {
-  const logIssue = useCallback(() => logEvent('community', 'issue', title), [
-    title
-  ])
+  const logIssue = useCallback(
+    () => logEvent('community', 'issue', title),
+    [title]
+  )
 
   return (
     <div className={sharedStyles.line}>

src/components/Documentation/Markdown/index.tsx

@@ -34,7 +34,7 @@ const Details: React.FC<{
    */
   return (
     <Collapsible
-      trigger={(triggerChildren as unknown) as ReactElement}
+      trigger={triggerChildren as unknown as ReactElement}
       transitionTime={200}
     >
       {filteredChildren.slice(1)}

src/components/DownloadButton/index.tsx

@@ -78,44 +78,42 @@ const getUserOS = (): OS => {
   return OSName
 }
 
-const DownloadButtonDropdownItems: React.FC<IDownloadButtonDropdownItemsProps> = ({
-  onClick,
-  userOS
-}) => {
-  return (
-    <div className={styles.links}>
-      {dropdownItems.map((os, index) => {
-        if (os === null) {
+const DownloadButtonDropdownItems: React.FC<IDownloadButtonDropdownItemsProps> =
+  ({ onClick, userOS }) => {
+    return (
+      <div className={styles.links}>
+        {dropdownItems.map((os, index) => {
+          if (os === null) {
+            return (
+              <div
+                className={styles.dropdownDelimiter}
+                key={`delimiter-${index}`}
+              />
+            )
+          }
+
+          const item = itemsByOs[os]
+
           return (
-            <div
-              className={styles.dropdownDelimiter}
-              key={`delimiter-${index}`}
-            />
+            <Link
+              download={item.download}
+              key={os}
+              className={cn(
+                styles.dropdownItem,
+                os === userOS && styles.active,
+                'link-with-focus'
+              )}
+              href={item.url}
+              optOutPreRedirect={true}
+              onClick={(): void => onClick(os)}
+            >
+              {item.title}
+            </Link>
           )
-        }
-
-        const item = itemsByOs[os]
-
-        return (
-          <Link
-            download={item.download}
-            key={os}
-            className={cn(
-              styles.dropdownItem,
-              os === userOS && styles.active,
-              'link-with-focus'
-            )}
-            href={item.url}
-            optOutPreRedirect={true}
-            onClick={(): void => onClick(os)}
-          >
-            {item.title}
-          </Link>
-        )
-      })}
-    </div>
-  )
-}
+        })}
+      </div>
+    )
+  }
 
 const DownloadButton: React.FC<IDownloadButtonProps> = ({ openTop }) => {
   const userOS = useRef(getUserOS())

src/components/Paginator/LocationContext/index.ts

@@ -6,9 +6,8 @@ export interface IPaginatorLocationContextValue {
   }
 }
 
-export const PaginatorLocationContext = createContext<IPaginatorLocationContextValue | null>(
-  null
-)
+export const PaginatorLocationContext =
+  createContext<IPaginatorLocationContextValue | null>(null)
 
 export const usePaginatorContext = (): IPaginatorLocationContextValue | null =>
   useContext(PaginatorLocationContext)

src/gatsby/models/authors/parse-link.js

@@ -65,11 +65,10 @@ function parseLink(input) {
   switch (typeof input) {
     // Handle shorthand string links
     case 'string':
-      const {
-        groups
-      } = /^(?<scheme>.*?\/\/)?(?:www\.)?(?<host>[^\/]*)(?<pathname>.*?)\/?$/.exec(
-        input
-      )
+      const { groups } =
+        /^(?<scheme>.*?\/\/)?(?:www\.)?(?<host>[^\/]*)(?<pathname>.*?)\/?$/.exec(
+          input
+        )
 
       // Extract groups into variables and assign defaults to non-matches
       return (processors[groups.host] || defaultProcessor)(groups)

src/templates/blog-home.tsx

@@ -32,7 +32,7 @@ const BlogHomePage: React.FC<IBlogHomePageProps> = ({
 export default BlogHomePage
 
 export const pageQuery = graphql`
-  query($skip: Int, $limit: Int) {
+  query ($skip: Int, $limit: Int) {
     posts: allBlogPost(
       sort: { fields: [date], order: DESC }
       skip: $skip

src/templates/blog-post.tsx

@@ -1,4 +1,4 @@
-import { FixedObject, FluidObject, GatsbyImageProps } from 'gatsby-image'
+import { FixedObject, FluidObject } from 'gatsby-image'
 
 import { graphql } from 'gatsby'
 import React from 'react'
@@ -8,22 +8,11 @@ import Post from '../components/Blog/Post'
 
 import { ISocialIcon } from '../components/SocialIcon'
 
-interface IFluidObject extends FluidObject {
+export interface IFluidObject extends FluidObject {
   presentationWidth: number
   presentationHeight: number
 }
 
-export interface IGatsbyImageProps extends GatsbyImageProps {
-  fluid?: IFluidObject
-}
-
-export interface IBlogPostHeroPic {
-  picture?: {
-    fluid: IFluidObject
-  }
-  pictureComment?: string
-}
-
 export interface IBlogPostData {
   id: string
   html: string

src/templates/blog-tags.tsx

@@ -46,7 +46,7 @@ const BlogTagsPage: React.FC<IBlogTagsPageData> = ({
 export default BlogTagsPage
 
 export const pageQuery = graphql`
-  query($tag: String, $skip: Int, $limit: Int) {
+  query ($tag: String, $skip: Int, $limit: Int) {
     posts: allBlogPost(
       sort: { fields: [date], order: DESC }
       filter: { tags: { in: [$tag] } }