feat: add js.org and homebrew provider

src/App.js

@@ -5,6 +5,8 @@ import { CardHolder } from './components/Card'
 import GithubCard from './components/GithubCard'
 import TwitterCard from './components/TwitterCard'
 import NpmCard from './components/NpmCard'
+import JsOrgCard from './components/JsOrgCard'
+import HomebrewCard from './components/HomebrewCard'
 import './App.css'
 
 const GlobalStyle = createGlobalStyle`
@@ -36,14 +38,16 @@ export default function App() {
         />
       </header>
       {query && query.length > 0 ? (
-        <SearchResult>
+        <Result>
           <ResultHeader>Result for {query}</ResultHeader>
           <CardHolder>
             <GithubCard name={query} />
             <TwitterCard name={query} />
             <NpmCard name={query} />
+            <JsOrgCard name={query} />
+            <HomebrewCard name={query} />
           </CardHolder>
-        </SearchResult>
+        </Result>
       ) : null}
     </>
   )
@@ -61,11 +65,13 @@ const Input = styled.input`
   }
 `
 
-const SearchResult = styled.div`
+const Result = styled.div`
   margin-top: 40px;
 `
 
-const ResultHeader = styled.h4`
+const ResultHeader = styled.div`
   padding-left: 20px;
   margin-bottom: 20px;
+  font-size: 1.2rem;
+  font-weight: bold;
 `

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 }) {
+const CardWrapper = styled.div`
-  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`
   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/${name}`}
-      url="https://github.com/"
       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/${name}`}
-        url="https://www.npmjs.com/package/"
         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()}>
+    <Card key={name}>
-      <NpmPanel name={name.toLowerCase()} />
+      <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/${name}`}
-      url="https://twitter.com/"
       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>
   )
 }

src/services/github.js

@@ -1,9 +1,8 @@
 const fetch = require('isomorphic-unfetch')
 
-async function getGitHubAvailability(name) {
+async function getAvailability(name) {
-  const githubURL = 'https://github.com'
+  const response = await fetch(`https://github.com/${encodeURIComponent(name)}`)
-  const response = await fetch(`${githubURL}/${encodeURIComponent(name)}`)
+  return response.status !== 200
-  return response.status === 404
 }
 
 module.exports = async (req, res) => {
@@ -14,7 +13,7 @@ module.exports = async (req, res) => {
   }
 
   try {
-    const availability = await getGitHubAvailability(name)
+    const availability = await getAvailability(name)
     res.json({ availability })
   } catch (err) {
     res.status(400).json({ error: err.message })

src/services/jsorg.js

@@ -0,0 +1,29 @@
+const fetch = require('isomorphic-unfetch')
+
+async function getAvailability(name) {
+  try {
+    const response = await fetch(`https://${encodeURIComponent(name)}.js.org`)
+    return response.status !== 200
+  } catch (err) {
+    if (err.code === 'ENOTFOUND') {
+      return true
+    } else {
+      throw new Error(err.message)
+    }
+  }
+}
+
+module.exports = async (req, res) => {
+  const name = req.query.name
+
+  if (!name) {
+    return res.status(400).json({ error: 'no query given' })
+  }
+
+  try {
+    const availability = await getAvailability(name)
+    res.json({ availability })
+  } catch (err) {
+    res.status(400).json({ error: err.message })
+  }
+}

src/services/twitter.js

@@ -1,9 +1,10 @@
 const fetch = require('isomorphic-unfetch')
 
-async function getTwitterAvailability(name) {
+async function getAvailability(name) {
-  const twitterURL = 'https://twitter.com'
+  const response = await fetch(
-  const response = await fetch(`${twitterURL}/${encodeURIComponent(name)}`)
+    `https://twitter.com/${encodeURIComponent(name)}`
-  return response.status === 404
+  )
+  return response.status !== 200
 }
 
 module.exports = async (req, res) => {
@@ -14,7 +15,7 @@ module.exports = async (req, res) => {
   }
 
   try {
-    const availability = await getTwitterAvailability(name)
+    const availability = await getAvailability(name)
     res.json({ availability })
   } catch (err) {
     res.status(400).json({ error: err.message })