From 9b635cbde5003f8762f1c2c8fe983786fb9a3a90 Mon Sep 17 00:00:00 2001
From: Akshit Kr Nagpal <akshitkrnagpal@gmail.com>
Date: Mon, 6 Apr 2020 20:24:07 +0530
Subject: [PATCH] feat(www): Add Community Plugin Badge (#21847)

* Add Community Plugin Badge

* Add Community Icon for plugins search body
---
 www/src/components/package-readme.js        | 71 ++++++++++++---------
 www/src/components/plugin-searchbar-body.js | 19 ++++--
 2 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/www/src/components/package-readme.js b/www/src/components/package-readme.js
index 569d2fd420b79..34a984ea6b255 100644
--- 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
index 7f2cc242400f2..a95cd34aa95fb 100644
--- 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`,