feat(www): Add Community Plugin Badge (#21847)

* Add Community Plugin Badge * Add Community Icon for plugins search body
gatsbyjs · Apr 6, 2020 · 9b635cb · 9b635cb
1 parent 4e1dc8a
commit 9b635cb
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 36 deletions.
diff --git a/www/src/components/package-readme.js b/www/src/components/package-readme.js
@@ -10,10 +10,51 @@ import MarkdownPageFooter from "./markdown-page-footer"
 import FooterLinks from "./shared/footer-links"
 import { GoMarkGithub as GithubIcon } from "react-icons/go"
 import GatsbyIcon from "./gatsby-monogram"
+import { FaUsers as CommunityIcon } from "react-icons/fa"
+
+const GatsbyPluginBadge = ({ isOfficial }) => {
+  const Icon = isOfficial ? GatsbyIcon : CommunityIcon
+  const title = isOfficial
+    ? "Official Gatsby Plugin"
+    : "Community Gatsby Plugin"
+  const text = isOfficial ? `Official Plugin` : `Community Plugin`
+
+  return (
+    <div
+      sx={{
+        variant: `links.muted`,
+        mr: 8,
+        "&&": {
+          border: 0,
+          color: `textMuted`,
+          display: `flex`,
+          fontWeight: `body`,
+        },
+        "&&:hover": {
+          color: `textMuted`,
+        },
+      }}
+    >
+      <span
+        sx={{
+          display: `inline-block`,
+          mr: 2,
+        }}
+        title={title}
+      >
+        <Icon />
+      </span>
+      {text}
+    </div>
+  )
+}
 
 const PackageReadMe = props => {
   const { page, packageName, excerpt, html, githubUrl, timeToRead } = props
   const metaExcerpt = excerpt || `Plugin information for ${packageName}`
+  const isOfficial =
+    githubUrl.indexOf(`https://github.com/gatsbyjs/gatsby`) === 0 &&
+    packageName[0] !== `@`
 
   return (
     <React.Fragment>
@@ -45,35 +86,7 @@ const PackageReadMe = props => {
               justifyContent: `space-between`,
             }}
           >
-            {githubUrl.indexOf(`https://github.com/gatsbyjs/gatsby`) === 0 &&
-              packageName[0] !== `@` && (
-                <div
-                  sx={{
-                    variant: `links.muted`,
-                    mr: 8,
-                    "&&": {
-                      border: 0,
-                      color: `textMuted`,
-                      display: `flex`,
-                      fontWeight: `body`,
-                    },
-                    "&&:hover": {
-                      color: `textMuted`,
-                    },
-                  }}
-                >
-                  <span
-                    sx={{
-                      display: `inline-block`,
-                      mr: 2,
-                    }}
-                    title={`Official Gatsby Plugin`}
-                  >
-                    <GatsbyIcon />
-                  </span>
-                  Official Plugin
-                </div>
-              )}
+            <GatsbyPluginBadge isOfficial={isOfficial} />
             <a
               sx={{ variant: `links.muted` }}
               href={githubUrl}

diff --git a/www/src/components/plugin-searchbar-body.js b/www/src/components/plugin-searchbar-body.js
@@ -25,6 +25,7 @@ import { visuallyHidden } from "../utils/styles"
 import { Global, css } from "@emotion/core"
 import removeMD from "remove-markdown"
 import SkipNavLink from "./skip-nav-link"
+import { FaUsers as CommunityIcon } from "react-icons/fa"
 
 // This is for the urlSync
 const updateAfter = 700
@@ -407,13 +408,17 @@ const Result = ({ hit, pathname, query }) => {
           }}
         >
           {hit.repository &&
-            hit.name[0] !== `@` &&
-            hit.repository.url.indexOf(`https://github.com/gatsbyjs/gatsby`) ===
-              0 && (
-              <span sx={{ mr: 1 }} alt={`Official Gatsby Plugin`}>
-                <GatsbyIcon />
-              </span>
-            )}
+          hit.name[0] !== `@` &&
+          hit.repository.url.indexOf(`https://github.com/gatsbyjs/gatsby`) ===
+            0 ? (
+            <span sx={{ mr: 1 }} alt={`Official Gatsby Plugin`}>
+              <GatsbyIcon />
+            </span>
+          ) : (
+            <span sx={{ mr: 1 }} alt={`Community Gatsby Plugin`}>
+              <CommunityIcon />
+            </span>
+          )}
           <span
             css={{
               width: `5em`,