diff --git a/api/services/rubygems.js b/api/services/rubygems.js
new file mode 100644
index 0000000..34dd1fa
--- /dev/null
+++ b/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)
+ }
+}
diff --git a/web/src/App.js b/web/src/App.js
index 1c5a98a..935754e 100644
--- a/web/src/App.js
+++ b/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() {
+
@@ -88,7 +90,7 @@ body {
`
const Content = styled.div`
- padding-top: 80px;
+ padding-top: 100px;
${mobile} {
padding-top: 60px;
diff --git a/web/src/components/Availability.js b/web/src/components/Availability.js
index 9c0bddf..99561c6 100644
--- a/web/src/components/Availability.js
+++ b/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 (
+
+ )
+}
+
const Container = styled.div`
min-height: 1em;
display: flex;
diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js
index 12141ae..36984b2 100644
--- a/web/src/components/Cards.js
+++ b/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;
`
diff --git a/web/src/components/cards/RubyGemsCard.js b/web/src/components/cards/RubyGemsCard.js
new file mode 100644
index 0000000..5b4567b
--- /dev/null
+++ b/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 (
+
+ {(name) => (
+ }
+ />
+ )}
+
+ )
+}