fix: support new vercel style

2025-08-21 10:18:12 +09:00 · 2020-06-19 16:15:53 +09:00
parent a5f9074303
commit f95f8ef551
106 changed files with 4523 additions and 1390 deletions
--- a/src/components/cards/core.tsx
+++ b/src/components/cards/core.tsx
@@ -0,0 +1,393 @@
+import React, {useState, useEffect, Suspense} from 'react';
+import styled from 'styled-components';
+import useFetch from 'fetch-suspense';
+import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.css';
+import BarLoader from 'react-spinners/BarLoader';
+import {GoInfo} from 'react-icons/go';
+import {IoIosFlash} from 'react-icons/io';
+import {useTranslation} from 'react-i18next';
+import {OutboundLink} from 'react-ga';
+
+import {sendError, sendExpandEvent} from '../../util/analytics';
+import {mobile} from '../../util/css';
+import {useStoreActions} from '../../store';
+
+export const COLORS = {
+  available: '#6e00ff',
+  unavailable: 'darkgrey',
+  error: '#ff388b',
+};
+
+export const Card: React.FC<{title: string}> = ({title, children}) => {
+  return (
+    <CardContainer>
+      <CardTitle>{title}</CardTitle>
+      <CardContent>
+        <ErrorHandler>{children}</ErrorHandler>
+      </CardContent>
+    </CardContainer>
+  );
+};
+
+export const Repeater: React.FC<{
+  items: string[];
+  moreItems?: string[];
+  children: (name: string) => React.ReactNode;
+}> = ({items = [], moreItems = [], children}) => {
+  const [revealAlternatives, setRevealAlternatives] = useState(false);
+  const {t} = useTranslation();
+
+  function onClick() {
+    sendExpandEvent();
+    setRevealAlternatives(true);
+  }
+
+  useEffect(() => {
+    setRevealAlternatives(false);
+  }, [items, moreItems]);
+
+  return (
+    <>
+      {items.map((name) => (
+        <ErrorHandler key={name}>{children(name)}</ErrorHandler>
+      ))}
+
+      {revealAlternatives
+        ? moreItems.map((name) => (
+            <ErrorHandler key={name}>{children(name)}</ErrorHandler>
+          ))
+        : null}
+      {moreItems.length > 0 && !revealAlternatives ? (
+        <Button onClick={onClick}>{t('showMore')}</Button>
+      ) : null}
+    </>
+  );
+};
+
+interface Response {
+  error?: string;
+  availability: boolean;
+}
+
+class APIError extends Error {
+  constructor(message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, APIError.prototype);
+  }
+}
+class NotFoundError extends Error {
+  constructor(message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, NotFoundError.prototype);
+  }
+}
+
+export const DedicatedAvailability: React.FC<{
+  name: string;
+  query?: string;
+  message?: string;
+  messageIfTaken?: string;
+  service: string;
+  link: string;
+  linkIfTaken?: string;
+  prefix?: string;
+  suffix?: string;
+  icon: React.ReactNode;
+}> = ({
+  name,
+  query = undefined,
+  message = '',
+  messageIfTaken = undefined,
+  service,
+  link,
+  linkIfTaken = undefined,
+  prefix = '',
+  suffix = '',
+  icon,
+}) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
+  const response = useFetch(
+    `/api/services/${service}/${encodeURIComponent(query || name)}`,
+  ) as Response;
+
+  if (response.error) {
+    throw new APIError(`${service}: ${response.error}`);
+  }
+
+  useEffect(() => {
+    increaseCounter(response.availability);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <Result
+      title={name}
+      message={response.availability ? message : messageIfTaken || message}
+      link={response.availability ? link : linkIfTaken || link}
+      icon={icon}
+      prefix={prefix}
+      suffix={suffix}
+      availability={response.availability}
+    />
+  );
+};
+
+export const ExistentialAvailability: React.FC<{
+  name: string;
+  target: string;
+  message?: string;
+  messageIfTaken?: string;
+  link: string;
+  linkIfTaken?: string;
+  prefix?: string;
+  suffix?: string;
+  icon: React.ReactNode;
+}> = ({
+  name,
+  message = '',
+  messageIfTaken = undefined,
+  target,
+  link,
+  linkIfTaken = undefined,
+  prefix = '',
+  suffix = '',
+  icon,
+}) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
+  const response = useFetch(target, undefined, {metadata: true});
+
+  if (response.status !== 404 && response.status !== 200) {
+    throw new NotFoundError(`${name}: ${response.status}`);
+  }
+
+  const availability = response.status === 404;
+
+  useEffect(() => {
+    increaseCounter(availability);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <Result
+      title={name}
+      message={availability ? message : messageIfTaken || message}
+      link={availability ? link : linkIfTaken || link}
+      icon={icon}
+      prefix={prefix}
+      suffix={suffix}
+      availability={availability}
+    />
+  );
+};
+
+export const Result: React.FC<{
+  title: string;
+  message?: string;
+  link?: string;
+  icon: React.ReactNode;
+  prefix?: string;
+  suffix?: string;
+  availability?: boolean;
+}> = ({
+  title,
+  message = '',
+  link,
+  icon,
+  prefix = '',
+  suffix = '',
+  availability,
+}) => {
+  const content = (
+    <>
+      {prefix}
+      {title}
+      {suffix}
+    </>
+  );
+  const itemColor =
+    availability === undefined
+      ? 'inherit'
+      : availability
+      ? COLORS.available
+      : COLORS.unavailable;
+  return (
+    <ResultContainer>
+      <Tooltip overlay={message} placement="top" trigger={['hover']}>
+        <ResultItem color={itemColor}>
+          <ResultIcon>{icon}</ResultIcon>
+          <ResultName>
+            {link ? (
+              <OutboundLink
+                to={link}
+                eventLabel={link.split('/')[2]}
+                target="_blank"
+              >
+                {content}
+              </OutboundLink>
+            ) : (
+              content
+            )}
+          </ResultName>
+          {availability === true ? (
+            <AvailableIcon>
+              <IoIosFlash />{' '}
+            </AvailableIcon>
+          ) : null}
+        </ResultItem>
+      </Tooltip>
+    </ResultContainer>
+  );
+};
+
+// 1. getDerivedStateFromError
+// 2. render()
+// 3. componentDidCatch() send errorInfo to Sentry
+// 4. render(), now with eventId provided from Sentry
+class ErrorBoundary extends React.Component<
+  {},
+  {hasError: boolean; message: string; eventId?: string}
+> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {hasError: false, message: '', eventId: undefined};
+  }
+
+  // used in SSR
+  static getDerivedStateFromError(error: Error) {
+    return {hasError: true, message: error.message};
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentDidCatch(error: Error, errorInfo: any) {
+    if (error instanceof APIError || error instanceof NotFoundError) {
+      return;
+    }
+    sendError(error, errorInfo).then((eventId) => {
+      this.setState({eventId});
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ResultContainer>
+          <Tooltip
+            overlay={`${this.state.message}${
+              this.state.eventId ? ` (${this.state.eventId})` : ''
+            }`}
+            placement="top"
+            trigger={['hover']}
+          >
+            <ResultItem color={COLORS.error}>
+              <ResultIcon>
+                <GoInfo />
+              </ResultIcon>
+              <ResultName>Error</ResultName>
+            </ResultItem>
+          </Tooltip>
+        </ResultContainer>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const ErrorHandler: React.FC = ({children}) => (
+  <ErrorBoundary>
+    <Suspense
+      fallback={
+        <ResultContainer>
+          <BarLoader />
+        </ResultContainer>
+      }
+    >
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+);
+
+const CardContainer = styled.div`
+  padding: 40px;
+  font-size: 1rem;
+  line-height: 1rem;
+
+  ${mobile} {
+    margin-bottom: 40px;
+    padding: 0px;
+  }
+`;
+
+const CardTitle = styled.div`
+  margin-bottom: 15px;
+  font-size: 1em;
+  font-weight: bold;
+
+  ${mobile} {
+    padding: 0 20px;
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+`;
+
+const CardContent = styled.div`
+  border-radius: 2px;
+
+  ${mobile} {
+    padding: 20px;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
+    background: white;
+    border-radius: 0;
+    font-size: 1.2em;
+  }
+`;
+
+const Button = styled.div`
+  margin-top: 5px;
+  display: inline-block;
+  padding: 5px 0;
+  border: none;
+  border-bottom: 1px dashed black;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 0.8em;
+`;
+
+const ResultContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+`;
+
+export const ResultIcon = styled.div`
+  width: 1em;
+`;
+
+export const ResultItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  word-break: break-all;
+  color: ${({color}) => color};
+`;
+
+export const ResultName = styled.div`
+  margin-left: 6px;
+  font-family: monospace;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+
+export const AvailableIcon = styled.div`
+  margin-top: 2px;
+  margin-left: 3px;
+  padding: 0;
+  width: 15px;
+  text-align: center;
+  font-size: 13px;
+  height: 15px;
+`;
--- a/src/components/cards/index.tsx
+++ b/src/components/cards/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import {mobile} from '../../util/css';
+
+import DomainCard from './providers/Domains';
+import GithubCard from './providers/GitHubRepository';
+import GitLabCard from './providers/GitLab';
+import NpmCard from './providers/Npm';
+import PypiCard from './providers/PyPI';
+import RubyGemsCard from './providers/RubyGems';
+import CratesioCard from './providers/Cratesio';
+import HomebrewCard from './providers/Homebrew';
+import LinuxCard from './providers/Linux';
+import TwitterCard from './providers/Twitter';
+import InstagramCard from './providers/Instagram';
+import SpectrumCard from './providers/Spectrum';
+import SlackCard from './providers/Slack';
+import S3Card from './providers/S3';
+import JsOrgCard from './providers/JsOrg';
+import GithubSearchCard from './providers/GitHubSearch';
+import AppStoreCard from './providers/AppStore';
+import HerokuCard from './providers/Heroku';
+import VercelCard from './providers/Vercel';
+import NtaCard from './providers/Nta';
+import NetlifyCard from './providers/Netlify';
+import OcamlCard from './providers/Ocaml';
+import FirebaseCard from './providers/Firebase';
+
+const Index: React.FC<{query: string}> = ({query}) => {
+  const {
+    i18n: {language},
+  } = useTranslation();
+
+  return (
+    <>
+      <Cards>
+        <DomainCard query={query} />
+        <GithubCard query={query} />
+        <TwitterCard query={query} />
+        <NpmCard query={query} />
+        <HomebrewCard query={query} />
+        <GitLabCard query={query} />
+        <PypiCard query={query} />
+        <CratesioCard query={query} />
+        <RubyGemsCard query={query} />
+        <LinuxCard query={query} />
+        <OcamlCard query={query} />
+        <VercelCard query={query} />
+        <HerokuCard query={query} />
+        <NetlifyCard query={query} />
+        <JsOrgCard query={query} />
+        <SlackCard query={query} />
+        <InstagramCard query={query} />
+        <SpectrumCard query={query} />
+        <S3Card query={query} />
+        <FirebaseCard query={query} />
+      </Cards>
+      <Cards>
+        <GithubSearchCard query={query} />
+        <AppStoreCard query={query} />
+        {language === 'ja' ? <NtaCard query={query} /> : null}
+      </Cards>
+    </>
+  );
+};
+
+export default Index;
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  ${mobile} {
+    flex-direction: column;
+  }
+`;
--- a/src/components/cards/providers/AppStore.tsx
+++ b/src/components/cards/providers/AppStore.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import {useTranslation} from 'react-i18next';
+import {FaAppStore, FaInfoCircle} from 'react-icons/fa';
+
+import {Card, Result} from '../core';
+
+const Search: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const term = encodeURIComponent(query);
+  const response = useFetch(
+    `/availability/appstore/${term}?country=${t('countryCode')}`,
+  ) as {
+    result: Array<{name: string; viewURL: string; price: number; id: string}>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/[－–—\-:]/)[0]}
+            message={`Price: ${app.price}`}
+            link={app.viewURL}
+            icon={<FaAppStore />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  );
+};
+
+const AppStoreCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  return (
+    <Card title={t('providers.appStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default AppStoreCard;
--- a/src/components/cards/providers/Cratesio.tsx
+++ b/src/components/cards/providers/Cratesio.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {DiRust} from 'react-icons/di';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const CratesioCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.rust')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`crates.io/api/v1/crates/${name}`}
+            service="existence"
+            link={`https://crates.io/crates/${name}`}
+            message="Go to crates.io"
+            icon={<DiRust />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default CratesioCard;
--- a/src/components/cards/providers/Domains.tsx
+++ b/src/components/cards/providers/Domains.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {MdDomain} from 'react-icons/md';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+import {zones} from '../../../util/zones';
+
+const DomainCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const domainHackSuggestions = zones
+    .map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
+    .filter((s): s is RegExpExecArray => s !== null)
+    .map(
+      (m) =>
+        lowerCase.substring(0, m.index + 1) +
+        '.' +
+        lowerCase.substring(m.index + 1),
+    );
+
+  const names = [
+    `${lowerCase}.com`,
+    `${lowerCase}app.com`,
+    `${lowerCase}.app`,
+    `${lowerCase}.dev`,
+    `${lowerCase}.org`,
+    `${lowerCase}.io`,
+    ...domainHackSuggestions,
+  ];
+  const moreNames = [
+    `${lowerCase}.sh`,
+    `${lowerCase}.tools`,
+    `${lowerCase}.design`,
+    `${lowerCase}.build`,
+    `get${lowerCase}.com`,
+  ];
+
+  return (
+    <Card title={t('providers.domains')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            message="Go to Domainr.com"
+            service="domain"
+            link={`https://domainr.com/?q=${name}`}
+            icon={<MdDomain />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default DomainCard;
--- a/src/components/cards/providers/Firebase.tsx
+++ b/src/components/cards/providers/Firebase.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {DiFirebase} from 'react-icons/di';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const FirebaseCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.firebase')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`${name}.firebaseio.com`}
+            service="existence"
+            message="Go to Firebase"
+            link={`https://${name}.firebaseio.com/`}
+            icon={<DiFirebase />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default FirebaseCard;
--- a/src/components/cards/providers/GitHubRepository.tsx
+++ b/src/components/cards/providers/GitHubRepository.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaGithub} from 'react-icons/fa';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const GithubCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [query, `${lowerCase}-dev`, `${lowerCase}-team`];
+  const moreNames = [`${lowerCase}hq`, `${lowerCase}-org`, `${lowerCase}js`];
+
+  return (
+    <Card title={t('providers.github')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`github.com/${name}`}
+            service="existence"
+            message={`Go to github.com/${name}`}
+            link={`https://github.com/${name}`}
+            prefix="github.com/"
+            icon={<FaGithub />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default GithubCard;
--- a/src/components/cards/providers/GitHubSearch.tsx
+++ b/src/components/cards/providers/GitHubSearch.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import {useTranslation} from 'react-i18next';
+import {FaGithub, FaInfoCircle} from 'react-icons/fa';
+
+import {Card, Result} from '../core';
+
+const Search: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const searchQuery = encodeURIComponent(`${query} in:name`);
+  const limit = 10;
+  const response = useFetch(
+    `https://api.github.com/search/repositories?q=${searchQuery}&per_page=${limit}`,
+  ) as {
+    items: Array<{
+      full_name: string;
+      description: string;
+      stargazers_count: number;
+      html_url: string;
+      id: string;
+    }>;
+  };
+  const repos = response.items || [];
+
+  return (
+    <>
+      {repos.length > 0 ? (
+        repos.map((repo) => (
+          <Result
+            title={repo.full_name}
+            message={`${repo.description || repo.full_name} (🌟${
+              repo.stargazers_count
+            })`}
+            link={repo.html_url}
+            icon={<FaGithub />}
+            key={repo.id}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  );
+};
+
+const GithubSearchCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  return (
+    <Card title={t('providers.githubSearch')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default GithubSearchCard;
--- a/src/components/cards/providers/GitLab.tsx
+++ b/src/components/cards/providers/GitLab.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaGitlab} from 'react-icons/fa';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const GitLabCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.gitlab')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            prefix="gitlab.com/"
+            service="gitlab"
+            message={`Open gitlab.com/${name}`}
+            link={`https://gitlab.com/${name}`}
+            icon={<FaGitlab />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default GitLabCard;
--- a/src/components/cards/providers/Heroku.tsx
+++ b/src/components/cards/providers/Heroku.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {DiHeroku} from 'react-icons/di';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const HerokuCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.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>
+  );
+};
+
+export default HerokuCard;
--- a/src/components/cards/providers/Homebrew.tsx
+++ b/src/components/cards/providers/Homebrew.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {IoIosBeer} from 'react-icons/io';
+
+import {Card, Repeater, ExistentialAvailability} from '../core';
+
+const HomebrewCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.homebrew')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <ExistentialAvailability
+              name={name}
+              target={`https://formulae.brew.sh/api/formula/${name}.json`}
+              message="Go to formula page"
+              link={`https://formulae.brew.sh/formula/${name}`}
+              icon={<IoIosBeer />}
+            />
+            <ExistentialAvailability
+              name={name}
+              target={`https://formulae.brew.sh/api/cask/${name}.json`}
+              message="Go to formula page"
+              link={`https://formulae.brew.sh/cask/${name}`}
+              suffix=" (Cask)"
+              icon={<IoIosBeer />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default HomebrewCard;
--- a/src/components/cards/providers/Instagram.tsx
+++ b/src/components/cards/providers/Instagram.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaInstagram} from 'react-icons/fa';
+
+import {Card, Repeater, ExistentialAvailability} from '../core';
+
+const InstagramCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [query];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
+
+  return (
+    <Card title={t('providers.instagram')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <ExistentialAvailability
+            name={name}
+            target={`https://instagram.com/${name}`}
+            link={`https://instagram.com/${name}`}
+            message="Go to Instagram"
+            icon={<FaInstagram />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default InstagramCard;
--- a/src/components/cards/providers/JsOrg.tsx
+++ b/src/components/cards/providers/JsOrg.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaJsSquare} from 'react-icons/fa';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const JsOrgCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.jsorg')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.js.org`}
+            service="dns"
+            message="Go to js.org repository"
+            link="https://github.com/js-org/js.org"
+            messageIfTaken={`Go to ${name}.js.org`}
+            linkIfTaken={`https://${name}.js.org`}
+            icon={<FaJsSquare />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default JsOrgCard;
--- a/src/components/cards/providers/Linux.tsx
+++ b/src/components/cards/providers/Linux.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {DiUbuntu} from 'react-icons/di';
+import {DiDebian} from 'react-icons/di';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const LinuxCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.linux')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="launchpad"
+              message="Go to Launchpad"
+              link={`https://launchpad.net/ubuntu/+source/${name}`}
+              icon={<DiUbuntu />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="debian"
+              message="Go to debian.org"
+              link={`https://packages.debian.org/buster/${name}`}
+              icon={<DiDebian />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default LinuxCard;
--- a/src/components/cards/providers/Netlify.tsx
+++ b/src/components/cards/providers/Netlify.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {NetlifyIcon} from '../../Icons';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const NetlifyCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.netlify')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.netlify.com`}
+            service="existence"
+            message={`Open ${name}.netlify.com`}
+            link={`https://${name}.netlify.com`}
+            icon={<NetlifyIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NetlifyCard;
--- a/src/components/cards/providers/Npm.tsx
+++ b/src/components/cards/providers/Npm.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaNpm} from 'react-icons/fa';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const NpmCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase, `${lowerCase}-js`];
+  const moreNames = [`${lowerCase}js`];
+
+  return (
+    <Card title={t('providers.npm')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="npm"
+              message={`See ${name}`}
+              link={`https://www.npmjs.com/package/${name}`}
+              messageIfTaken={`See ${name}`}
+              linkIfTaken={`https://www.npmjs.com/package/${name}`}
+              icon={<FaNpm />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="npm-org"
+              message="Create Org"
+              link="https://www.npmjs.com/org/create"
+              messageIfTaken={`See @${name}`}
+              linkIfTaken={`https://www.npmjs.com/org/${name}`}
+              prefix="@"
+              suffix=" (Organization)"
+              icon={<FaNpm />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NpmCard;
--- a/src/components/cards/providers/Nta.tsx
+++ b/src/components/cards/providers/Nta.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import {useTranslation} from 'react-i18next';
+import {FaBuilding, FaInfoCircle} from 'react-icons/fa';
+
+import {Card, Result} from '../core';
+
+const Search: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const term = encodeURIComponent(query);
+  const response = useFetch(`/api/services/nta/${term}`) as {
+    result: Array<{name: string; phoneticName: string}>;
+  };
+
+  const apps = response.result;
+
+  return (
+    <>
+      {apps.length > 0 ? (
+        apps.map((app, i) => (
+          <Result
+            title={app.name}
+            message={`Phonetic: ${app.phoneticName}`}
+            icon={<FaBuilding />}
+            key={i}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  );
+};
+
+const NtaCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  return (
+    <Card title={t('providers.nta')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default NtaCard;
--- a/src/components/cards/providers/Ocaml.tsx
+++ b/src/components/cards/providers/Ocaml.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {OcamlIcon} from '../../Icons';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const OcamlCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.ocaml')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`opam.ocaml.org/packages/${name}/`}
+            service="existence"
+            message="Go to opam"
+            link={`https://opam.ocaml.org/packages/${name}/`}
+            icon={<OcamlIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default OcamlCard;
--- a/src/components/cards/providers/PyPI.tsx
+++ b/src/components/cards/providers/PyPI.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaPython} from 'react-icons/fa';
+
+import {capitalize} from '../../../util/text';
+import {Card, DedicatedAvailability, Repeater} from '../core';
+
+const PypiCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const names = [query];
+  const moreNames = [`Py${capitalize(query)}`];
+
+  return (
+    <Card title={t('providers.pypi')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`pypi.org/pypi/${name}/json`}
+            service="existence"
+            message="Read Python Packaging User Guide"
+            link="https://packaging.python.org/"
+            messageIfTaken="Go to PyPI"
+            linkIfTaken={`https://pypi.org/project/${name}`}
+            icon={<FaPython />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default PypiCard;
--- a/src/components/cards/providers/RubyGems.tsx
+++ b/src/components/cards/providers/RubyGems.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaGem} from 'react-icons/fa';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const RubyGemsCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const names = [query];
+  const moreNames = [`${query.toLowerCase()}-rb`];
+
+  return (
+    <Card title={t('providers.rubygems')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`rubygems.org/gems/${name}`}
+            service="existence"
+            message="Go to RubyGems"
+            link={`https://rubygems.org/gems/${name}`}
+            icon={<FaGem />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default RubyGemsCard;
--- a/src/components/cards/providers/S3.tsx
+++ b/src/components/cards/providers/S3.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaAws} from 'react-icons/fa';
+
+import {Card, DedicatedAvailability, Repeater} from '../core';
+
+const S3Card: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.s3')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`${name}.s3.amazonaws.com`}
+            service="existence"
+            message={`Go to ${name}.s3.amazonaws.com`}
+            link={`https://${name}.s3.amazonaws.com`}
+            suffix=".s3.amazonaws.com"
+            icon={<FaAws />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default S3Card;
--- a/src/components/cards/providers/Slack.tsx
+++ b/src/components/cards/providers/Slack.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaSlack} from 'react-icons/fa';
+
+import {Card, DedicatedAvailability, Repeater} from '../core';
+
+const SlackCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.slack')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="slack"
+            message="Create Slack Team"
+            link="https://slack.com/create"
+            messageIfTaken={`Go to ${name}.slack.com`}
+            linkIfTaken={`https://${name}.slack.com`}
+            suffix=".slack.com"
+            icon={<FaSlack />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default SlackCard;
--- a/src/components/cards/providers/Spectrum.tsx
+++ b/src/components/cards/providers/Spectrum.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {Card, Repeater, DedicatedAvailability} from '../core';
+import {SpectrumIcon} from '../../Icons';
+
+const SpectrumCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const names = [query];
+
+  return (
+    <Card title={t('providers.spectrum')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="spectrum"
+              message="Create Community"
+              link="https://spectrum.chat/new/community"
+              messageIfTaken="See community in Spectrum"
+              linkIfTaken={`https://spectrum.chat/${name}`}
+              icon={<SpectrumIcon />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default SpectrumCard;
--- a/src/components/cards/providers/Twitter.tsx
+++ b/src/components/cards/providers/Twitter.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaTwitter} from 'react-icons/fa';
+
+import {capitalize} from '../../../util/text';
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const TwitterCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/-/g, '_');
+  const lowerCase = sanitizedQuery.toLowerCase();
+  const capitalCase = capitalize(sanitizedQuery);
+
+  const names = [sanitizedQuery, `${capitalCase}App`, `${lowerCase}hq`];
+  const moreNames = [
+    `hey${lowerCase}`,
+    `${capitalCase}Team`,
+    `${lowerCase}_support`,
+    `${lowerCase}_org`,
+    `${lowerCase}_app`,
+    `${capitalCase}JS`,
+  ];
+
+  return (
+    <Card title={t('providers.twitter')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={name}
+            service="twitter"
+            message="Go to Twitter"
+            link={`https://twitter.com/${name}`}
+            icon={<FaTwitter />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default TwitterCard;
--- a/src/components/cards/providers/Vercel.tsx
+++ b/src/components/cards/providers/Vercel.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {NowIcon} from '../../Icons';
+
+import {Card, Repeater, DedicatedAvailability} from '../core';
+
+const VercelCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+
+  const sanitizedQuery = query
+    .replace(/[^0-9a-zA-Z_-]/g, '')
+    .replace(/_/g, '-');
+  const lowerCase = sanitizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.now')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.vercel.app`}
+            service="existence"
+            message={`Open ${name}.vercel.app`}
+            link={`https://${name}.vercel.app`}
+            icon={<NowIcon />}
+          />
+        )}
+      </Repeater>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.now.sh`}
+            service="existence"
+            message={`Open ${name}.now.sh`}
+            link={`https://${name}.now.sh`}
+            icon={<NowIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default VercelCard;