Revert "yarn upgrade && yarn format-all"

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

@@ -41,6 +41,7 @@ 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.8.0",
+    "@octokit/graphql": "^4.3.1",
     "@reach/portal": "^0.10.0",
     "@reach/router": "^1.3.3",
     "@reach/tooltip": "^0.10.0",
     "classnames": "^2.2.6",
-    "color": "^3.2.1",
+    "color": "^3.1.2",
     "compression": "^1.7.4",
-    "date-fns": "^2.23.0",
+    "date-fns": "^2.11.1",
     "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.1.25",
+    "nanoid": "^3.0.2",
     "node-cache": "^5.1.0",
-    "perfect-scrollbar": "^1.5.2",
+    "perfect-scrollbar": "^1.5.0",
     "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.3",
+    "repo-link-check": "^0.7.1",
     "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.15.0",
+    "@babel/core": "^7.9.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.14.14",
+    "@types/react": "^16.9.32",
     "@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.4.1",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
     "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,8 +69,9 @@ 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}>
-        {image ? (
+        {picture ? (
           <Image fluid={image} className={styles.picture} />
         ) : (
           <Placeholder className={styles.picture} />

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

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

src/components/Community/Learn/index.tsx

@@ -45,10 +45,9 @@ 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,10 +30,9 @@ 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}>
@@ -68,10 +67,9 @@ 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,42 +78,44 @@ const getUserOS = (): OS => {
   return OSName
 }
 
-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]
-
+const DownloadButtonDropdownItems: React.FC<IDownloadButtonDropdownItemsProps> = ({
+  onClick,
+  userOS
+}) => {
+  return (
+    <div className={styles.links}>
+      {dropdownItems.map((os, index) => {
+        if (os === null) {
           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
+              className={styles.dropdownDelimiter}
+              key={`delimiter-${index}`}
+            />
           )
-        })}
-      </div>
-    )
-  }
+        }
+
+        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>
+  )
+}
 
 const DownloadButton: React.FC<IDownloadButtonProps> = ({ openTop }) => {
   const userOS = useRef(getUserOS())

src/components/Paginator/LocationContext/index.ts

@@ -6,8 +6,9 @@ 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,10 +65,11 @@ 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 } from 'gatsby-image'
+import { FixedObject, FluidObject, GatsbyImageProps } from 'gatsby-image'
 
 import { graphql } from 'gatsby'
 import React from 'react'
@@ -8,11 +8,22 @@ import Post from '../components/Blog/Post'
 
 import { ISocialIcon } from '../components/SocialIcon'
 
-export interface IFluidObject extends FluidObject {
+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] } }