chore(www): optimize import path for components (#21849)

www/src/components/diagram.js

@@ -6,8 +6,8 @@ import { Link, StaticQuery, graphql } from "gatsby"
 
 import logo from "../assets/monogram.svg"
 import { GraphQLIcon, ReactJSIcon } from "../assets/tech-logos"
-import FuturaParagraph from "../components/futura-paragraph"
-import TechWithIcon from "../components/tech-with-icon"
+import FuturaParagraph from "./futura-paragraph"
+import TechWithIcon from "./tech-with-icon"
 
 const lineAnimation = keyframes({
   to: { strokeDashoffset: 10 },

www/src/components/homepage/homepage-newsletter.js

@@ -2,7 +2,7 @@ import React from "react"
 import styled from "@emotion/styled"
 
 import HomepageSection from "./homepage-section"
-import EmailCaptureForm from "../../components/email-capture-form"
+import EmailCaptureForm from "../email-capture-form"
 
 import { NewsletterFormOrnament } from "../../assets/ornaments"
 

www/src/components/layout.js

@@ -6,11 +6,11 @@ import { Global } from "@emotion/core"
 
 import { globalStyles } from "../utils/styles/global"
 import { breakpointGutter } from "../utils/styles"
-import Banner from "../components/banner"
-import Navigation from "../components/navigation"
-import MobileNavigation from "../components/navigation-mobile"
-import SiteMetadata from "../components/site-metadata"
-import SkipNavLink from "../components/skip-nav-link"
+import Banner from "./banner"
+import Navigation from "./navigation"
+import MobileNavigation from "./navigation-mobile"
+import SiteMetadata from "./site-metadata"
+import SkipNavLink from "./skip-nav-link"
 import "../assets/fonts/futura"
 import { defaultLang } from "../utils/i18n"
 

www/src/components/navigation.js

@@ -4,14 +4,14 @@ import { useColorMode } from "theme-ui"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import TwitterIcon from "react-icons/lib/fa/twitter"
 
-import Link from "../components/localized-link"
+import Link from "./localized-link"
 import SearchForm from "./search-form"
-import DiscordIcon from "../components/discord"
+import DiscordIcon from "./discord"
 import logo from "../assets/logo.svg"
 import logoInverted from "../assets/logo-inverted.svg"
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { breakpointGutter } from "../utils/styles"
-import DarkModeToggle from "../components/dark-mode-toggle"
+import DarkModeToggle from "./dark-mode-toggle"
 
 // what we need to nudge down the navItems to sit
 // on the baseline of the logo's wordmark

www/src/components/package-readme.js

@@ -5,11 +5,11 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 
 import { Link } from "gatsby"
-import Container from "../components/container"
-import MarkdownPageFooter from "../components/markdown-page-footer"
-import FooterLinks from "../components/shared/footer-links"
+import Container from "./container"
+import MarkdownPageFooter from "./markdown-page-footer"
+import FooterLinks from "./shared/footer-links"
 import GithubIcon from "react-icons/lib/go/mark-github"
-import GatsbyIcon from "../components/gatsby-monogram"
+import GatsbyIcon from "./gatsby-monogram"
 
 const PackageReadMe = props => {
   const { page, packageName, excerpt, html, githubUrl, timeToRead } = props

www/src/components/plugin-searchbar-body.js

@@ -14,7 +14,7 @@ import { navigate as reachNavigate } from "@reach/router"
 import { Link } from "gatsby"
 import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward"
 import AlgoliaLogo from "../assets/vendor-logos/algolia.svg"
-import GatsbyIcon from "../components/gatsby-monogram"
+import GatsbyIcon from "./gatsby-monogram"
 import { debounce, unescape } from "lodash-es"
 
 import {
@@ -24,7 +24,7 @@ import {
 import { visuallyHidden } from "../utils/styles"
 import { Global, css } from "@emotion/core"
 import removeMD from "remove-markdown"
-import SkipNavLink from "../components/skip-nav-link"
+import SkipNavLink from "./skip-nav-link"
 
 // This is for the urlSync
 const updateAfter = 700

www/src/components/showcase-details.js

@@ -8,9 +8,9 @@ import Img from "gatsby-image"
 import qs from "qs"
 
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
-import Modal from "../components/modal"
-import ShareMenu from "../components/share-menu"
-import Button from "../components/button"
+import Modal from "./modal"
+import ShareMenu from "./share-menu"
+import Button from "./button"
 import Screenshot from "../views/shared/screenshot"
 
 import MdArrowUpward from "react-icons/lib/md/arrow-upward"