Add Community Plugin Badge

gatsbyjs · Mar 13, 2020 · a19f0e3 · a19f0e3
1 parent c5c27ff
commit a19f0e3
Showing 1 changed file with 42 additions and 29 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}