feat: Heroku and Now

web/src/App.js

@@ -3,21 +3,23 @@ import styled, { createGlobalStyle } from 'styled-components'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
-import DomainCard from './components/cards/DomainCard'
-import GithubCard from './components/cards/GithubCard'
-import NpmCard from './components/cards/NpmCard'
-import PypiCard from './components/cards/PypiCard'
-import RubyGemsCard from './components/cards/RubyGemsCard'
-import CratesioCard from './components/cards/CratesioCard'
-import HomebrewCard from './components/cards/HomebrewCard'
-import LinuxCard from './components/cards/LinuxCard'
-import TwitterCard from './components/cards/TwitterCard'
-import SpectrumCard from './components/cards/SpectrumCard'
-import SlackCard from './components/cards/SlackCard'
-import S3Card from './components/cards/S3Card'
-import JsOrgCard from './components/cards/JsOrgCard'
-import GithubSearchCard from './components/cards/GithubSearchCard'
-import AppStoreCard from './components/cards/AppStoreCard'
+import DomainCard from './components/cards/domains'
+import GithubCard from './components/cards/github-repository'
+import NpmCard from './components/cards/npm'
+import PypiCard from './components/cards/pypi'
+import RubyGemsCard from './components/cards/rubygems'
+import CratesioCard from './components/cards/cratesio'
+import HomebrewCard from './components/cards/homebrew'
+import LinuxCard from './components/cards/linux'
+import TwitterCard from './components/cards/twitter'
+import SpectrumCard from './components/cards/spectrum'
+import SlackCard from './components/cards/slack'
+import S3Card from './components/cards/s3'
+import JsOrgCard from './components/cards/jsorg'
+import GithubSearchCard from './components/cards/github-search'
+import AppStoreCard from './components/cards/appstore'
+import HerokuCard from './components/cards/heroku'
+import NowCard from './components/cards/now'
 
 import Welcome from './components/Welcome'
 import Footer from './components/Footer'
@@ -104,8 +106,10 @@ export default function App() {
               <TwitterCard query={query} />
               <SpectrumCard query={query} />
               <SlackCard query={query} />
-              <S3Card query={query} />
+              <HerokuCard query={query} />
+              <NowCard query={query} />
               <JsOrgCard query={query} />
+              <S3Card query={query} />
             </Cards>
             <Cards>
               <GithubSearchCard query={query} />

web/src/components/Cards.js

@@ -66,6 +66,7 @@ export function Repeater({ items = [], moreItems = [], children }) {
 
 export function DedicatedAvailability({
   name,
+  query = undefined,
   message = '',
   messageIfTaken = undefined,
   service,
@@ -75,7 +76,9 @@ export function DedicatedAvailability({
   suffix = '',
   icon,
 }) {
-  const response = useFetch(`/availability/${service}/${name}`)
+  const response = useFetch(
+    `/availability/${service}/${encodeURIComponent(query || name)}`
+  )
 
   if (response.error) {
     throw new Error(`${service}: ${response.error}`)

web/src/components/Icons.js

@@ -12,3 +12,18 @@ export const SpectrumIcon = () => (
     <path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
   </svg>
 )
+
+export const NowIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 114 100"
+    xmlns="http://www.w3.org/2000/svg">
+    <g id="Black-Triangle" transform="translate(-293.000000, -150.000000)">
+      <polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
+    </g>
+  </svg>
+)

web/src/components/cards/GoogleCard.js

@@ -1,40 +0,0 @@
-import React from 'react'
-import useFetch from 'fetch-suspense'
-import { useTranslation } from 'react-i18next'
-import { FaGoogle, FaInfoCircle } from 'react-icons/fa'
-
-import { Card, Result } from '../Cards'
-
-function Search({ query }) {
-  const term = `intitle:"${query}" app -site:dictionary.cambridge.org -site:weblio.jp`
-  const response = useFetch(`/availability/google/${encodeURIComponent(term)}`)
-  const items = response.result
-
-  return (
-    <>
-      {items.length > 0 ? (
-        items.map((item, i) => (
-          <Result
-            title={item.title}
-            message={item.link}
-            link={item.link}
-            icon={<FaGoogle />}
-            key={i}
-          />
-        ))
-      ) : (
-        <Result title="No Result" icon={<FaInfoCircle />} />
-      )}
-    </>
-  )
-}
-
-export default function GoogleCard({ query }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card title={t('providers.google')}>
-      <Search query={query} />
-    </Card>
-  )
-}

web/src/components/cards/cratesio.js

@@ -16,7 +16,8 @@ export default function CratesioCard({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="cratesio"
+            query={`crates.io/api/v1/crates/${name}`}
+            service="existence"
             link={`https://crates.io/crates/${name}`}
             icon={<DiRust />}
           />

web/src/components/cards/github-repository.js

@@ -22,7 +22,8 @@ export default function GithubCard({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="github"
+            query={`github.com/${name}`}
+            service="existence"
             message="Create GitHub Organization"
             link="https://github.com/organizations/new"
             messageIfTaken={`Go to github.com/${name}`}

web/src/components/cards/heroku.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { DiHeroku } from 'react-icons/di'
+
+import { Card, Repeater, DedicatedAvailability } from '../Cards'
+
+export default function HerokuCard({ query }) {
+  const { t } = useTranslation()
+  const lowerCase = query.toLowerCase()
+
+  const names = [lowerCase]
+
+  return (
+    <Card title={t('providers.heroku')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.herokuapp.com`}
+            service="existence"
+            message="Go to Heroku"
+            link={`https://${name}.herokuapp.com`}
+            icon={<DiHeroku />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  )
+}

web/src/components/cards/now.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { NowIcon } from '../Icons'
+
+import { Card, Repeater, DedicatedAvailability } from '../Cards'
+
+export default function NowCard({ query }) {
+  const { t } = useTranslation()
+  const lowerCase = query.toLowerCase()
+
+  const names = [lowerCase]
+
+  return (
+    <Card title={t('providers.now')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.now.sh`}
+            service="existence"
+            message="Go to Now"
+            link={`https://${name}.now.sh`}
+            icon={<NowIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  )
+}

web/src/components/cards/pypi.js

@@ -17,7 +17,8 @@ export default function PypiCard({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="pypi"
+            query={`pypi.org/pypi/${name}/json`}
+            service="existence"
             message="Read Python Packaging User Guide"
             link="https://packaging.python.org/"
             messageIfTaken="Go to PyPI"

web/src/components/cards/rubygems.js

@@ -16,7 +16,8 @@ export default function RubyGemsCard({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="rubygems"
+            query={`rubygems.org/gems/${name}`}
+            service="existence"
             message="Read Publishing Guide"
             link="https://guides.rubygems.org/publishing/"
             messageIfTaken="Go to RubyGems"

web/src/components/cards/s3.js

@@ -16,7 +16,8 @@ export default function S3Card({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="s3"
+            query={`${name}.s3.amazonaws.com`}
+            service="existence"
             message="Go to S3 console"
             link="https://s3.console.aws.amazon.com"
             messageIfTaken={`Go to ${name}.s3.amazonaws.com`}

web/src/components/cards/twitter.js

@@ -26,7 +26,8 @@ export default function TwitterCard({ query }) {
         {(name) => (
           <DedicatedAvailability
             name={name}
-            service="twitter"
+            query={`twitter.com/${name}`}
+            service="existence"
             message="Go to Twitter"
             link={`https://twitter.com/${name}`}
             prefix="twitter.com/"

web/src/i18n.js

@@ -14,7 +14,7 @@ i18n
       backends: [LocalStorageBackend, XHR],
       backendOptions: [
         {
-          versions: { en: '1.1', ja: '1.1' },
+          versions: { en: '1.2', ja: '1.2' },
         },
       ],
     },