maintenance(www): Get eslint to work on www again (#24133)

* Get eslint to work on www again

* fragment

* add rule explanation

* get rid of reporter

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

.eslintignore

@@ -8,11 +8,12 @@ packages/*/scripts/**
 **/dist/*
 **/__testfixtures__/**
 **/__tests__/fixtures/**
+www/public
+www/src/components/search-form/docsearch.min.js
 peril
 docs
 plop-templates
 starters
-www
 benchmarks
 e2e-tests
 examples

.eslintrc.js

@@ -79,6 +79,15 @@ module.exports = {
         Cypress: false,
       },
     },
+    {
+      files: ["www/**/*"],
+      rules: {
+        // We need to import React to use the Fragment shorthand (`<>`).
+        // When we use theme-ui's JSX pragma, it lists React as an unused var
+        // even though it's still needed.
+        "no-unused-vars": ["error", { varsIgnorePattern: "React" }],
+      },
+    },
     {
       files: ["*.ts", "*.tsx"],
       parser: "@typescript-eslint/parser",

www/__mocks__/gatsby.js

@@ -7,7 +7,7 @@ module.exports = {
   Link: jest.fn().mockImplementation(({ children, to, onClick, id }) => {
     // Prevent the default click event to stop a console.error from jsdom.
     // https://github.com/jsdom/jsdom/issues/2112
-    const onClickWithoutDefault = (ev) => {
+    const onClickWithoutDefault = ev => {
       ev.preventDefault()
       onClick(ev)
     }

www/gatsby-config.js

@@ -55,15 +55,17 @@ if (process.env.AIRTABLE_API_KEY) {
 
 if (i18nEnabled) {
   dynamicPlugins.push(
-    ...langCodes.map(code => ({
-      resolve: `gatsby-source-git`,
-      options: {
-        name: `docs-${code}`,
-        remote: `https://github.com/gatsbyjs/gatsby-${code}.git`,
-        branch: `master`,
-        patterns: [`docs/**`],
-      },
-    })),
+    ...langCodes.map(code => {
+      return {
+        resolve: `gatsby-source-git`,
+        options: {
+          name: `docs-${code}`,
+          remote: `https://github.com/gatsbyjs/gatsby-${code}.git`,
+          branch: `master`,
+          patterns: [`docs/**`],
+        },
+      }
+    }),
     {
       resolve: `gatsby-plugin-i18n`, // local plugin
       options: {
@@ -93,7 +95,7 @@ module.exports = {
           // Relative paths when importing components from MDX break translations of the docs,
           // so use an alias instead inside MDX:
           // https://www.gatsbyjs.org/contributing/docs-and-blog-components/#importing-other-components
-          "@components": "src/components",
+          "@components": `src/components`,
         },
       },
     },

www/gatsby-node.js

@@ -59,7 +59,6 @@ exports.onPostBuild = () => {
 exports.sourceNodes = async ({
   actions: { createTypes, createNode },
   createContentDigest,
-  schema,
 }) => {
   /*
    * NOTE: This _only_ defines the schema we currently query for. If anything in

www/src/assets/ornaments/index.js

@@ -7,5 +7,5 @@ export {
   CirclesOrnament,
   NewsletterFormOrnament,
   QuotationMarkOrnament,
-  StarOrnament
+  StarOrnament,
 }

www/src/components/__tests__/blog-post-metadata.js

@@ -1,7 +1,5 @@
-jest.mock("../../hooks/use-site-metadata", () => {
-  return () => {
-    return { siteUrl: "https://www.gatsbyjs.org" }
-  }
+jest.mock(`../../hooks/use-site-metadata`, () => () => {
+  return { siteUrl: `https://www.gatsbyjs.org` }
 })
 
 import React from "react"
@@ -12,88 +10,88 @@ import BlogPostMetadata from "../blog-post-metadata"
 const basePost = {
   timeToRead: 2,
   fields: {
-    excerpt: "This is the very first Gatsby blog post.",
+    excerpt: `This is the very first Gatsby blog post.`,
   },
   frontmatter: {
-    title: "My first Gatsby blog post!",
-    seoTitle: "How to write a Gatsby blog post",
+    title: `My first Gatsby blog post!`,
+    seoTitle: `How to write a Gatsby blog post`,
     rawDate: 12345,
     author: {
-      id: "Kyle Mathews",
-      twitter: "@kylemathews",
+      id: `Kyle Mathews`,
+      twitter: `@kylemathews`,
       fields: {
-        slug: "/contributors/kyle-mathews/",
+        slug: `/contributors/kyle-mathews/`,
       },
     },
   },
 }
 
-it("generates an alternate url the post has a canonicalLink in frontmatter", () => {
+it(`generates an alternate url the post has a canonicalLink in frontmatter`, () => {
   const post = {
     ...basePost,
     frontmatter: {
       ...basePost.frontmatter,
-      canonicalLink: "https://reactjs.org/",
+      canonicalLink: `https://reactjs.org/`,
     },
   }
   render(<BlogPostMetadata post={post} />)
   const content = Helmet.peek()
   expect(content.linkTags).toContainEqual({
-    rel: "canonical",
-    href: "https://reactjs.org/",
+    rel: `canonical`,
+    href: `https://reactjs.org/`,
   })
   expect(content.metaTags).toContainEqual({
-    property: "og:url",
-    content: "https://reactjs.org/",
+    property: `og:url`,
+    content: `https://reactjs.org/`,
   })
 })
 
-it("does not generate an alternate url if the post doesn't have a canonicalLink", () => {
+it(`does not generate an alternate url if the post doesn't have a canonicalLink`, () => {
   render(<BlogPostMetadata post={basePost} />)
   const content = Helmet.peek()
   expect(content.linkTags).not.toContainEqual({
-    rel: "canonical",
-    href: "https://reactjs.org/",
+    rel: `canonical`,
+    href: `https://reactjs.org/`,
   })
   expect(content.metaTags).not.toContainEqual({
-    property: "og:url",
-    content: "https://reactjs.org/",
+    property: `og:url`,
+    content: `https://reactjs.org/`,
   })
 })
 
-it("populates the author info and published time", () => {
+it(`populates the author info and published time`, () => {
   render(<BlogPostMetadata post={basePost} />)
   const content = Helmet.peek()
   expect(content.linkTags).toContainEqual({
-    rel: "author",
-    href: "https://www.gatsbyjs.org/contributors/kyle-mathews/",
+    rel: `author`,
+    href: `https://www.gatsbyjs.org/contributors/kyle-mathews/`,
   })
   expect(content.metaTags).toContainEqual({
-    name: "author",
-    content: "Kyle Mathews",
+    name: `author`,
+    content: `Kyle Mathews`,
   })
   expect(content.metaTags).toContainEqual({
-    name: "twitter:creator",
-    content: "@kylemathews",
+    name: `twitter:creator`,
+    content: `@kylemathews`,
   })
   expect(content.metaTags).toContainEqual({
-    property: "article:author",
-    content: "Kyle Mathews",
+    property: `article:author`,
+    content: `Kyle Mathews`,
   })
   expect(content.metaTags).toContainEqual({
-    property: "article:published_time",
+    property: `article:published_time`,
     content: 12345,
   })
 })
 
-it("uses the seoTitle when available", () => {
+it(`uses the seoTitle when available`, () => {
   render(<BlogPostMetadata post={basePost} />)
   const content = Helmet.peek()
 
-  expect(content.title).toEqual("How to write a Gatsby blog post")
+  expect(content.title).toEqual(`How to write a Gatsby blog post`)
 })
 
-it("uses the default title when seoTitle is not available", () => {
+it(`uses the default title when seoTitle is not available`, () => {
   const basePostWithoutSeoTitle = {
     ...basePost,
     frontmatter: {
@@ -105,5 +103,5 @@ it("uses the default title when seoTitle is not available", () => {
   render(<BlogPostMetadata post={basePostWithoutSeoTitle} />)
   const content = Helmet.peek()
 
-  expect(content.title).toEqual("My first Gatsby blog post!")
+  expect(content.title).toEqual(`My first Gatsby blog post!`)
 })