feat: add js.org and homebrew provider

src/components/Card.js

@@ -2,6 +2,53 @@ import React, { Suspense } from 'react'
 import styled from 'styled-components'
 import { BarLoader } from 'react-spinners'
 
+export function Card({ children }) {
+  return (
+    <CardWrapper>
+      <ErrorBoundary>
+        <Suspense fallback={<BarLoader />}>{children}</Suspense>
+      </ErrorBoundary>
+    </CardWrapper>
+  )
+}
+
+export const CardTitle = styled.div`
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-bottom: 15px;
+`
+
+export const CardHolder = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export function AvailabilityCell({
+  name,
+  availability,
+  url,
+  prefix = '',
+  suffix = '',
+  icon,
+}) {
+  return (
+    <ItemContainer>
+      {icon}
+      <Item>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          {prefix}
+          {availability ? (
+            <span style={{ color: 'green' }}>{name}</span>
+          ) : (
+            <span style={{ color: 'red' }}>{name}</span>
+          )}
+          {suffix}
+        </a>
+      </Item>
+    </ItemContainer>
+  )
+}
+
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
@@ -23,22 +70,7 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-export function Card({ children }) {
-  return (
-    <CardWrapper>
-      <ErrorBoundary>
-        <Suspense fallback={<BarLoader />}>{children}</Suspense>
-      </ErrorBoundary>
-    </CardWrapper>
-  )
-}
-
-export const CardHolder = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-export const CardWrapper = styled.div`
+const CardWrapper = styled.div`
   margin-bottom: 40px;
   padding: 20px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
@@ -63,21 +95,3 @@ const Item = styled.span`
     color: inherit;
   }
 `
-
-export function AvailabilityCell({ name, availability, url, prefix, icon }) {
-  return (
-    <ItemContainer>
-      {icon}
-      <Item>
-        <a href={url + name} target="_blank" rel="noopener noreferrer">
-          {prefix}
-          {availability ? (
-            <span style={{ color: 'green' }}>{name}</span>
-          ) : (
-            <span style={{ color: 'red' }}>{name}</span>
-          )}
-        </a>
-      </Item>
-    </ItemContainer>
-  )
-}

src/components/GithubCard.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import useFetch from 'fetch-suspense'
-import { Card, AvailabilityCell } from './Card'
+import { Card, CardTitle, AvailabilityCell } from './Card'
 import { FaGithub } from 'react-icons/fa'
 
-function GithubPanel({ name }) {
+function Availability({ name }) {
   const response = useFetch(`/availability/github/${name}`)
 
   if (response.error) {
@@ -14,9 +14,9 @@ function GithubPanel({ name }) {
     <AvailabilityCell
       name={name}
       availability={response.availability}
-      icon={<FaGithub />}
-      url="https://github.com/"
+      url={`https://github.com/${name}`}
       prefix="github.com/"
+      icon={<FaGithub />}
     />
   )
 }
@@ -24,7 +24,8 @@ function GithubPanel({ name }) {
 export default function GithubCard({ name }) {
   return (
     <Card key={name}>
-      <GithubPanel name={name} />
+      <CardTitle>GitHub</CardTitle>
+      <Availability name={name} />
     </Card>
   )
 }

src/components/HomebrewCard.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { Card, CardTitle, AvailabilityCell } from './Card'
+import { IoIosBeer } from 'react-icons/io'
+
+function Availability({ name }) {
+  const response = useFetch(
+    `https://formulae.brew.sh/api/formula/${name}.json`,
+    null,
+    { metadata: true }
+  )
+
+  if (response.status !== 404 && response.status !== 200) {
+    throw new Error(`Homebrew: ${response.statusText}`)
+  }
+
+  const availability = response.status === 404
+
+  return (
+    <AvailabilityCell
+      name={name}
+      availability={availability}
+      url={`https://formulae.brew.sh/formula/${name}`}
+      icon={<IoIosBeer />}
+    />
+  )
+}
+
+export default function HomebrewCard({ name }) {
+  return (
+    <Card key={name}>
+      <CardTitle>Homebrew</CardTitle>
+      <Availability name={name} />
+    </Card>
+  )
+}

src/components/JsOrgCard.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { Card, CardTitle, AvailabilityCell } from './Card'
+import { FaJsSquare } from 'react-icons/fa'
+
+function Availability({ name }) {
+  const response = useFetch(`/availability/jsorg/${name}`)
+
+  if (response.error) {
+    throw new Error(`Twitter: ${response.error}`)
+  }
+
+  return (
+    <AvailabilityCell
+      name={name}
+      availability={response.availability}
+      url={`https://${name}.js.org`}
+      suffix=".js.org"
+      icon={<FaJsSquare />}
+    />
+  )
+}
+
+export default function JsOrgCard({ name }) {
+  return (
+    <Card key={name}>
+      <CardTitle>js.org</CardTitle>
+      <Availability name={name} />
+    </Card>
+  )
+}

src/components/NpmCard.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import useFetch from 'fetch-suspense'
-import { Card, AvailabilityCell } from './Card'
+import { Card, CardTitle, AvailabilityCell } from './Card'
 import { FaNpm } from 'react-icons/fa'
 
-function NpmPanel({ name }) {
+function Availability({ name }) {
   const response = useFetch(`/availability/npm/${name}`)
 
   if (response.error) {
@@ -15,9 +15,9 @@ function NpmPanel({ name }) {
       <AvailabilityCell
         name={name}
         availability={response.packageAvailability}
-        icon={<FaNpm />}
-        url="https://www.npmjs.com/package/"
+        url={`https://www.npmjs.com/package/${name}`}
         prefix="npmjs.com/package/"
+        icon={<FaNpm />}
       />
       <AvailabilityCell
         name={name}
@@ -32,8 +32,9 @@ function NpmPanel({ name }) {
 
 export default function NpmCard({ name }) {
   return (
-    <Card key={name.toLowerCase()}>
-      <NpmPanel name={name.toLowerCase()} />
+    <Card key={name}>
+      <CardTitle>npm</CardTitle>
+      <Availability name={name.toLowerCase()} />
     </Card>
   )
 }

src/components/TwitterCard.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import useFetch from 'fetch-suspense'
-import { Card, AvailabilityCell } from './Card'
+import { Card, CardTitle, AvailabilityCell } from './Card'
 import { FaTwitter } from 'react-icons/fa'
 
-function TwitterPanel({ name }) {
+function Availability({ name }) {
   const response = useFetch(`/availability/twitter/${name}`)
 
   if (response.error) {
@@ -14,9 +14,9 @@ function TwitterPanel({ name }) {
     <AvailabilityCell
       name={name}
       availability={response.availability}
-      icon={<FaTwitter />}
-      url="https://twitter.com/"
+      url={`https://twitter.com/${name}`}
       prefix="twitter.com/"
+      icon={<FaTwitter />}
     />
   )
 }
@@ -24,7 +24,8 @@ function TwitterPanel({ name }) {
 export default function TwitterCard({ name }) {
   return (
     <Card key={name}>
-      <TwitterPanel name={name} />
+      <CardTitle>Twitter</CardTitle>
+      <Availability name={name} />
     </Card>
   )
 }