feat: rubygems

api/services/rubygems.js

@@ -0,0 +1,20 @@
+const fetch = require('isomorphic-unfetch')
+const { send, sendError } = require('../util/http')
+
+module.exports = async (req, res) => {
+  const name = req.query.name
+
+  if (!name) {
+    return res.status(400).json({ error: 'no query given' })
+  }
+
+  try {
+    const response = await fetch(
+      `https://rubygems.org/gems/${encodeURIComponent(name)}`
+    )
+    const availability = response.status !== 200
+    send(res, availability)
+  } catch (err) {
+    sendError(res, err)
+  }
+}

web/src/App.js

@@ -17,6 +17,7 @@ import JsOrgCard from './components/cards/JsOrgCard'
 import PypiCard from './components/cards/PypiCard'
 import S3Card from './components/cards/S3Card'
 import CratesioCard from './components/cards/CratesioCard'
+import RubyGemsCard from './components/cards/RubyGemsCard'
 import { EventReporter } from './components/Analytics'
 
 export default function App() {
@@ -47,6 +48,7 @@ export default function App() {
               <JsOrgCard name={query} />
               <PypiCard name={query} />
               <CratesioCard name={query} />
+              <RubyGemsCard name={query} />
               <HomebrewCard name={query} />
               <TwitterCard name={query} />
               <SlackCard name={query} />
@@ -88,7 +90,7 @@ body {
 `
 
 const Content = styled.div`
-  padding-top: 80px;
+  padding-top: 100px;
 
   ${mobile} {
     padding-top: 60px;

web/src/components/Availability.js

@@ -130,6 +130,30 @@ export function ExistentialAvailability({
   )
 }
 
+export function CustomAvailability({
+  name,
+  target,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+  children,
+}) {
+  const response = useFetch(target, null, { metadata: true })
+  const availability = children(response)
+
+  return (
+    <Result
+      name={name}
+      availability={availability}
+      link={link}
+      prefix={prefix}
+      suffix={suffix}
+      icon={icon}
+    />
+  )
+}
+
 const Container = styled.div`
   min-height: 1em;
   display: flex;

web/src/components/Cards.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { AvailabilityContainer } from './Availability'
 import { mobile } from '../util/css'
 
-export function Card({ title, nameList, alternativeList = [], children }) {
+export function Card({ title, nameList = [], alternativeList = [], children }) {
   const [revealAlternatives, setRevealAlternatives] = useState(false)
 
   function onClick() {
@@ -77,11 +77,10 @@ const CardList = styled.div`
 
 const ShowAlternativesButton = styled.div`
   display: inline-block;
-  margin-top: 10px;
   padding: 5px 0;
   border: none;
   border-bottom: 1px dashed black;
   cursor: pointer;
   font-family: monospace;
-  font-size: 1rem;
+  font-size: 0.8em;
 `

web/src/components/cards/RubyGemsCard.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FaGem } from 'react-icons/fa'
+import { Card } from '../Cards'
+import { DedicatedAvailability } from '../Availability'
+
+export default function RubyGemsCard({ name }) {
+  return (
+    <Card
+      title="RubyGems"
+      key={name}
+      nameList={[name]}
+      alternativeList={[`${name.toLowerCase()}-rb`]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          service="rubygems"
+          link={`https://rubygems.org/gems/${name}`}
+          icon={<FaGem />}
+        />
+      )}
+    </Card>
+  )
+}