fix: support new vercel style

2025-08-20 09:58:13 +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/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import {FaTwitter, FaGithub, FaProductHunt} from 'react-icons/fa';
+import {OutboundLink} from 'react-ga';
+
+const Footer: React.FC = () => {
+  const {t} = useTranslation();
+
+  return (
+    <Container>
+      <LangBox>
+        <a href="/?lng=en">
+          <span role="img" aria-label="English">
+            🇬🇧
+          </span>
+        </a>
+        <a href="/?lng=ja">
+          <span role="img" aria-label="Japanese">
+            🇯🇵
+          </span>
+        </a>
+      </LangBox>
+
+      <Box>
+        <p>
+          Made with{'  '}
+          <span role="img" aria-label="coffee">
+            ☕️
+          </span>{' '}
+          by{' '}
+          <OutboundLink
+            to="https://twitter.com/uetschy"
+            eventLabel="Author Page"
+            aria-label="Author page"
+            target="_blank"
+          >
+            <Bold>Yasuaki Uechi</Bold>
+          </OutboundLink>
+        </p>
+      </Box>
+
+      <ShareBox>
+        <Links>
+          <OutboundLink
+            to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+              `namae — ${t('title')}`,
+            )}&url=${encodeURIComponent('https://namae.dev')}`}
+            eventLabel="Tweet"
+            aria-label="Tweet this page"
+            target="_blank"
+          >
+            <FaTwitter />
+          </OutboundLink>
+          <OutboundLink
+            to="https://www.producthunt.com/posts/namae"
+            eventLabel="ProductHunt"
+            aria-label="Go to ProductHunt page"
+            target="_blank"
+          >
+            <FaProductHunt />
+          </OutboundLink>
+          <OutboundLink
+            to="https://github.com/uetchy/namae"
+            eventLabel="GitHub Repo"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+          >
+            <FaGithub />
+          </OutboundLink>
+        </Links>
+      </ShareBox>
+    </Container>
+  );
+};
+export default Footer;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 40px 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+`;
+
+const Box = styled.footer`
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  line-height: 1em;
+  font-size: 0.8rem;
+`;
+
+const LangBox = styled(Box)`
+  font-size: 2rem;
+  margin-bottom: 20px;
+`;
+
+const ShareBox = styled(Box)`
+  font-size: 1.5rem;
+`;
+
+const Links = styled.div`
+  display: flex;
+  align-items: center;
+
+  a {
+    margin: 0 3px;
+  }
+`;
+
+const Bold = styled.span`
+  font-weight: bold;
+`;
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -0,0 +1,144 @@
+import React, {useState, useRef, useEffect} from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import {Link, useHistory} from 'react-router-dom';
+import {sanitize} from '../util/text';
+import {sendQueryEvent} from '../util/analytics';
+import {mobile} from '../util/css';
+import Suggestion from './Suggestion';
+import {useDeferredState} from '../util/hooks';
+
+const Form: React.FC<{
+  initialValue?: string;
+}> = ({initialValue = ''}) => {
+  const history = useHistory();
+  const [inputValue, setInputValue] = useState(initialValue);
+  const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
+  const [suggested, setSuggested] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {t} = useTranslation();
+
+  function search(query: string) {
+    sendQueryEvent(sanitize(query));
+    history.push(`/s/${query}`);
+  }
+
+  // set input value
+  function onInputChange(e: React.FormEvent<HTMLInputElement>): void {
+    setInputValue(e.currentTarget.value);
+  }
+
+  // clear input form and focus on it
+  function onLogoClick(): void {
+    setInputValue('');
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    inputRef.current!.focus();
+  }
+
+  // invoke when user clicked one of the suggested items
+  function onSuggestionCompleted(name: string): void {
+    setInputValue(name);
+    search(name);
+    setSuggested(true);
+  }
+
+  function onSubmitQuery(e: React.FormEvent) {
+    e.preventDefault();
+    if (!inputValue || inputValue === '') {
+      return;
+    }
+    search(inputValue);
+  }
+
+  useEffect(() => {
+    const modifiedValue = sanitize(inputValue);
+    setSuggestionQuery(modifiedValue);
+  }, [inputValue, setSuggestionQuery]);
+
+  const queryGiven = suggestionQuery && suggestionQuery !== '';
+
+  return (
+    <InputContainer>
+      <Logo to="/" onClick={onLogoClick}>
+        <LogoImage src="/logo.svg" />
+      </Logo>
+      <form onSubmit={onSubmitQuery} action="/s" role="search">
+        <InputView
+          onChange={onInputChange}
+          value={inputValue}
+          ref={inputRef}
+          placeholder={t('placeholder')}
+          aria-label="Search"
+        />
+      </form>
+      {queryGiven && !suggested ? (
+        <Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
+      ) : null}
+    </InputContainer>
+  );
+};
+
+export default Form;
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  transform: translateY(40px);
+  border-radius: 50px;
+  box-shadow: 0 10px 50px 0 #858efb;
+  background: #ffffff;
+
+  ${mobile} {
+    padding: 20px;
+    transform: translateY(20px);
+    border-radius: 30px;
+  }
+`;
+
+const Logo = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  margin-top: 5px;
+  cursor: pointer;
+
+  ${mobile} {
+    font-size: 15px;
+  }
+`;
+
+const LogoImage = styled.img`
+  width: 140px;
+
+  ${mobile} {
+    width: 90px;
+  }
+`;
+
+const InputView = styled.input.attrs({
+  type: 'search',
+  enterkeyhint: 'search',
+  autocomplete: 'off',
+  autocorrect: 'off',
+  autocapitalize: 'off',
+  spellcheck: 'false',
+})`
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: center;
+  font-family: 'Montserrat', monospace;
+  font-weight: 600;
+  font-size: 6rem;
+  appearance: none;
+
+  ${mobile} {
+    font-size: 2rem;
+  }
+
+  ::placeholder {
+    color: #c8cdda;
+  }
+`;
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+export const SpectrumIcon: React.FC = () => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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: React.FC = () => (
+  <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>
+);
+
+export const NetlifyIcon: React.FC = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    aria-hidden="true"
+    focusable="false"
+    // style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 256 256"
+  >
+    <path d="M185.532 88.839l-.094-.04a.396.396 0 0 1-.154-.087a.734.734 0 0 1-.187-.621l5.167-31.553l24.229 24.209l-25.198 10.709a.555.555 0 0 1-.22.04h-.101a.694.694 0 0 1-.134-.114a11.468 11.468 0 0 0-3.308-2.543zm35.144-1.923l25.906 25.878c5.38 5.381 8.075 8.065 9.057 11.177c.147.46.267.921.361 1.395l-61.913-26.192a4.868 4.868 0 0 0-.1-.04c-.248-.1-.535-.214-.535-.467c0-.254.294-.374.541-.474l.08-.034l26.603-11.243zm34.268 46.756c-1.337 2.51-3.944 5.114-8.355 9.527l-29.209 29.17l-37.777-7.858l-.2-.04c-.335-.054-.689-.114-.689-.414a11.387 11.387 0 0 0-4.378-7.965c-.154-.154-.113-.394-.067-.615c0-.033 0-.066.014-.093l7.105-43.571l.026-.147c.04-.334.1-.721.401-.721a11.566 11.566 0 0 0 7.754-4.44c.06-.067.1-.14.18-.18c.214-.1.468 0 .689.093l64.5 27.254h.006zm-44.28 45.407l-48.031 47.978l8.22-50.475l.014-.067a.905.905 0 0 1 .04-.193c.067-.16.24-.227.408-.294l.08-.034c1.8-.767 3.392-1.95 4.646-3.451c.16-.187.354-.368.601-.401c.064-.01.13-.01.194 0l33.82 6.944l.007-.007zm-58.198 58.133l-5.414 5.408l-59.854-86.408a2.831 2.831 0 0 0-.067-.094c-.093-.127-.194-.253-.173-.4c.006-.107.073-.2.147-.28l.066-.087c.18-.268.335-.535.502-.822l.133-.233l.02-.02c.094-.16.18-.314.341-.401c.14-.067.335-.04.488-.007l66.311 13.66c.186.03.36.105.508.22c.087.088.107.181.127.288a11.735 11.735 0 0 0 6.871 7.845c.187.093.107.3.02.52a1.588 1.588 0 0 0-.1.301c-.835 5.074-8 48.726-9.926 60.51zm-11.309 11.29c-3.99 3.946-6.343 6.035-9.003 6.877a13.382 13.382 0 0 1-8.06 0c-3.115-.989-5.809-3.672-11.19-9.054l-60.108-60.042l15.7-24.323a1 1 0 0 1 .268-.314c.167-.12.408-.066.608 0a16.285 16.285 0 0 0 10.948-.554c.18-.066.361-.113.502.014c.07.064.133.135.187.213l60.148 87.19v-.007zm-94.156-68.008l-13.789-13.773l27.23-11.604a.562.562 0 0 1 .221-.047c.227 0 .361.227.481.434c.274.42.564.83.87 1.229l.086.106c.08.114.027.227-.053.334l-15.04 23.321h-.006zM27.11 160.625L9.665 143.199c-2.968-2.964-5.12-5.114-6.617-6.963l53.043 10.99l.2.033c.328.053.69.113.69.42c0 .334-.395.488-.73.614l-.153.067l-28.988 12.265zM0 127.275a13.34 13.34 0 0 1 .602-3.304c.989-3.112 3.676-5.796 9.063-11.177l22.324-22.3a14524.43 14524.43 0 0 0 30.92 44.647c.18.24.38.507.174.707c-.976 1.075-1.952 2.25-2.64 3.526c-.075.163-.19.306-.335.413c-.087.054-.18.034-.28.014h-.014L0 127.269v.007zm37.965-42.75l30.017-29.984c2.82 1.235 13.087 5.568 22.27 9.44c6.952 2.939 13.288 5.61 15.28 6.477c.2.08.381.16.468.36c.053.12.027.274 0 .401a13.363 13.363 0 0 0 3.496 12.205c.2.2 0 .487-.174.734l-.094.14l-30.478 47.157c-.08.134-.154.247-.288.334c-.16.1-.387.053-.575.007a15.215 15.215 0 0 0-3.629-.494c-1.096 0-2.286.2-3.489.42h-.007c-.133.02-.254.047-.36-.033a1.403 1.403 0 0 1-.301-.34L37.965 84.525zm36.08-36.04l38.86-38.817c5.38-5.375 8.074-8.065 11.188-9.047a13.382 13.382 0 0 1 8.061 0c3.115.982 5.808 3.672 11.189 9.047l8.422 8.413l-27.638 42.756a1.035 1.035 0 0 1-.274.32c-.167.114-.401.067-.602 0a14.028 14.028 0 0 0-12.833 2.471c-.18.187-.448.08-.675-.02c-3.61-1.569-31.682-13.42-35.699-15.122zm83.588-24.542l25.52 25.49l-6.15 38.044v.1a.9.9 0 0 1-.053.254c-.067.133-.201.16-.335.2a12.237 12.237 0 0 0-3.662 1.823a1.029 1.029 0 0 0-.134.113c-.074.08-.147.154-.267.167a.763.763 0 0 1-.288-.047l-38.887-16.504l-.073-.034c-.248-.1-.542-.22-.542-.474a14.664 14.664 0 0 0-2.072-6.109c-.187-.307-.394-.627-.234-.941l27.177-42.082zM131.352 81.4l36.454 15.423c.2.093.421.18.508.387a.707.707 0 0 1 0 .38c-.107.535-.2 1.142-.2 1.757v1.021c0 .254-.261.36-.502.46l-.073.027c-5.775 2.464-81.076 34.538-81.19 34.538c-.113 0-.234 0-.347-.113c-.2-.2 0-.48.18-.735l.094-.133l29.957-46.335l.053-.08c.174-.281.375-.595.696-.595l.3.047c.682.093 1.284.18 1.892.18c4.545 0 8.756-2.21 11.296-5.989c.06-.1.137-.19.227-.267c.18-.133.448-.066.655.027zm-41.748 61.324l82.079-34.965s.12 0 .234.114c.447.447.828.747 1.196 1.028l.18.113c.168.094.335.2.348.374c0 .067 0 .107-.013.167l-7.032 43.144l-.027.174c-.046.333-.093.714-.407.714a11.558 11.558 0 0 0-9.177 5.655l-.034.053c-.093.154-.18.3-.334.38c-.14.068-.32.041-.468.008l-65.455-13.487c-.067-.013-1.016-3.465-1.09-3.472z" />
+  </svg>
+);
+
+export const OcamlIcon: React.FC = () => (
+  <svg
+    x="0px"
+    y="0px"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 165.543 144.277"
+  >
+    <g>
+      <path
+        d="M82.223,134.04c-0.459-0.978-1.853-3.524-2.553-4.34c-1.52-1.779-1.875-1.913-2.322-4.159
+		c-0.777-3.911-2.834-11.004-5.258-15.899c-1.252-2.526-3.334-4.648-5.24-6.48c-1.664-1.607-5.414-4.311-6.068-4.177
+		c-6.125,1.223-8.025,7.23-10.906,11.989c-1.594,2.632-3.283,4.871-4.539,7.671c-1.16,2.575-1.057,5.426-3.043,7.637
+		c-2.037,2.27-3.361,4.684-4.359,7.617c-0.189,0.558-0.727,6.417-1.311,7.798l9.103-0.641c8.483,0.578,6.033,3.829,19.273,3.121
+		l20.906-0.647c-0.648-1.916-1.541-4.135-1.885-4.856C83.438,137.46,82.705,135.084,82.223,134.04z"
+      />
+      <path
+        d="M108.725,90.75c-1.607,1.16-4.748,3.95-11.58,5.005c-3.066,0.474-5.934,0.513-9.082,0.356
+		c-1.541-0.074-2.994-0.153-4.539-0.173c-0.91-0.007-3.963-0.104-3.812,0.188l-0.34,0.848c0.053,0.279,0.164,0.976,0.195,1.145
+		c0.125,0.685,0.16,1.23,0.186,1.86c0.047,1.295-0.107,2.645-0.041,3.952c0.137,2.711,1.143,5.182,1.27,7.917
+		c0.139,3.045,1.645,6.267,3.102,8.754c0.553,0.947,1.395,1.055,1.762,2.221c0.43,1.336,0.023,2.753,0.232,4.177
+		c0.82,5.521,2.41,11.292,4.896,16.275c0.018,0.042,0.037,0.087,0.059,0.125c3.07-0.516,6.146-1.62,10.135-2.21
+		c7.314-1.085,17.486-0.526,24.02-1.138c16.533-1.554,25.506,6.781,40.355,3.365V20.857C165.543,9.339,156.209,0,144.688,0H20.856
+		C9.339,0,0.001,9.339,0.001,20.857v45.507c2.984-1.079,7.276-7.428,8.621-8.972c2.353-2.7,2.78-6.144,3.952-8.313
+		c2.669-4.94,3.128-8.337,9.195-8.337c2.828,0,3.951,0.652,5.864,3.219c1.331,1.785,3.63,5.083,4.706,7.288
+		c1.242,2.544,3.266,5.986,4.156,6.681c0.659,0.516,1.313,0.903,1.923,1.132c0.984,0.369,1.798-0.308,2.456-0.832
+		c0.84-0.669,1.202-2.032,1.98-3.85c1.121-2.623,2.343-5.766,3.038-6.863c1.203-1.896,1.613-4.146,2.912-5.236
+		c1.916-1.607,4.416-1.72,5.104-1.856c3.849-0.76,5.599,1.855,7.495,3.546c1.241,1.108,2.937,3.34,4.141,6.331
+		c0.941,2.336,2.139,4.497,2.64,5.846c0.484,1.302,1.679,3.389,2.387,5.891c0.643,2.272,2.364,4.013,3.018,5.093
+		c0,0,1.001,2.804,7.088,5.367c1.32,0.556,3.988,1.46,5.58,2.039c2.645,0.961,5.207,0.836,8.469,0.445
+		c2.326,0,3.586-3.368,4.643-6.065c0.625-1.594,1.224-6.162,1.632-7.459c0.395-1.262-0.529-2.238,0.258-3.344
+		c0.92-1.291,1.467-1.361,1.998-3.044c1.141-3.604,7.736-3.786,11.443-3.786c3.09,0,2.697,3,7.939,1.974
+		c3.002-0.589,5.895,0.387,9.082,1.231c2.684,0.712,5.207,1.523,6.719,3.293c0.978,1.146,3.406,6.888,0.932,7.133
+		c0.238,0.291,0.412,0.816,0.857,1.104c-0.551,2.166-2.949,0.623-4.281,0.345c-1.795-0.372-3.062,0.056-4.818,0.833
+		c-3.002,1.337-7.393,1.181-10.008,3.359c-2.219,1.846-2.215,5.967-3.25,8.276C117.871,78.832,114.998,86.227,108.725,90.75z"
+      />
+      <path
+        d="M39.35,101.251c-1.428-0.145-2.754-0.308-4.141-0.588c-2.59-0.522-5.42-1.031-7.971-1.642
+		c-1.549-0.375-6.709-2.202-7.83-2.717c-2.629-1.212-4.375-4.505-6.43-4.166c-1.312,0.214-2.59,0.664-3.406,1.987
+		c-0.666,1.079-0.892,2.934-1.353,4.178c-0.535,1.444-1.459,2.792-2.268,4.168c-1.488,2.524-4.166,4.807-5.32,7.266
+		c-0.232,0.506-0.438,1.072-0.631,1.662v9.434v16.321v2.358c1.346,0.23,2.754,0.513,4.33,0.934
+		c11.631,3.103,14.469,3.366,25.877,2.061l1.07-0.142c0.873-1.816,1.547-8.004,2.113-9.919c0.441-1.468,1.047-2.638,1.277-4.137
+		c0.217-1.424-0.02-2.781-0.142-4.075c-0.32-3.242,2.361-4.4,3.641-7.184c1.154-2.519,1.82-5.385,2.775-7.96
+		c0.916-2.471,2.346-5.963,4.785-7.207C45.43,101.538,40.631,101.379,39.35,101.251z"
+      />
+    </g>
+  </svg>
+);
--- a/src/components/Suggestion.tsx
+++ b/src/components/Suggestion.tsx
@@ -0,0 +1,333 @@
+import React, {useEffect, useState, useRef} from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import fetch from 'isomorphic-unfetch';
+import {TiArrowSync} from 'react-icons/ti';
+import {motion} from 'framer-motion';
+
+import {capitalize, stem, germanify, njoin, lower, upper} from '../util/text';
+import {sampleFromArray, fillArray} from '../util/array';
+import {mobile, slideUp} from '../util/css';
+import {sanitize} from '../util/text';
+import {
+  sendShuffleSuggestionEvent,
+  sendAcceptSuggestionEvent,
+} from '../util/analytics';
+
+type Modifier = (word: string) => string;
+
+const maximumCount = 3;
+const modifiers: Modifier[] = [
+  (word): string => `${capitalize(germanify(word))}`,
+  (word): string => `${capitalize(word)}`,
+  (word): string => njoin('Air', capitalize(word), {elision: false}),
+  (word): string => njoin('All', capitalize(word), {elision: false}),
+  (word): string => njoin('Cloud', capitalize(word), {elision: false}),
+  (word): string => njoin('Co', lower(word), {elision: false}),
+  (word): string => njoin('Deep', capitalize(word), {elision: false}),
+  (word): string => njoin('Easy', capitalize(word), {elision: false}),
+  (word): string => njoin('En', lower(word), {elision: false}),
+  (word): string => njoin('Fast', lower(word), {elision: false}),
+  (word): string => njoin('Fire', lower(word), {elision: false}),
+  (word): string => njoin('Fusion', capitalize(word), {elision: false}),
+  (word): string => njoin('Git', capitalize(word), {elision: false}),
+  (word): string => njoin('Go', capitalize(word), {elision: false}),
+  (word): string => njoin('Hyper', capitalize(word), {elision: false}),
+  (word): string => njoin('In', capitalize(word), {elision: false}),
+  (word): string => njoin('Infini', lower(word)),
+  (word): string => njoin('Insta', lower(word), {elision: false}),
+  (word): string => njoin('i', capitalize(word)),
+  (word): string => njoin('Lead', lower(word), {elision: false}),
+  (word): string => njoin('Less', lower(word)),
+  (word): string => njoin('lib', lower(word), {elision: false}),
+  (word): string => njoin('Many', lower(word)),
+  (word): string => njoin('Max', upper(word), {elision: false}),
+  (word): string => njoin('Micro', lower(word), {elision: false}),
+  (word): string => njoin('mini', lower(word)),
+  (word): string => njoin('Mono', lower(word)),
+  (word): string => njoin('Meta', lower(word)),
+  (word): string => njoin('nano', lower(word), {elision: false}),
+  (word): string => njoin('Native', capitalize(word), {elision: false}),
+  (word): string => njoin('Next', lower(word)),
+  (word): string => njoin('No', upper(word), {elision: false}),
+  (word): string => njoin('Octo', capitalize(word)),
+  (word): string => njoin('Omni', capitalize(word), {elision: false}),
+  (word): string => njoin('One', capitalize(word), {elision: false}),
+  (word): string => njoin('Open', capitalize(word), {elision: false}),
+  (word): string => njoin('Pro', capitalize(word), {elision: false}),
+  (word): string => njoin('quick', lower(word), {elision: false}),
+  (word): string => njoin('Semantic', capitalize(word), {elision: false}),
+  (word): string => njoin('Smart', capitalize(word), {elision: false}),
+  (word): string => njoin('Snap', capitalize(word), {elision: false}),
+  (word): string => njoin('Super', lower(word), {elision: false}),
+  (word): string => njoin('Ultra', lower(word)),
+  (word): string => njoin('Un', lower(word), {elision: false}),
+  (word): string => njoin('Uni', lower(word)),
+  (word): string => njoin('unified-', lower(word), {elision: false}),
+  (word): string => njoin('Up', lower(word), {elision: false}),
+  (word): string => njoin('Wunder', lower(germanify(word)), {elision: false}),
+  (word): string => njoin('Zen', capitalize(word), {elision: false}),
+  (word): string => njoin('Zero', capitalize(word), {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'able', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'al', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'el', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'em', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'en', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'er', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ery', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ia', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ible', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ics', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ifier', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ify', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ii', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'in', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'io', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ist', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ity', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ium', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'iverse', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'ory', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'um', {elision: false}),
+  (word): string => njoin(capitalize(stem(word)), 'y'),
+  (word): string => njoin(capitalize(word), 'AI', {elision: false}),
+  (word): string => njoin(capitalize(word), 'API', {elision: false}),
+  (word): string => njoin(capitalize(word), 'App'),
+  (word): string => njoin(capitalize(word), 'base', {elision: false}),
+  (word): string => njoin(capitalize(word), 'book', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Bot', {elision: false}),
+  (word): string => njoin(capitalize(word), 'butler', {elision: false}),
+  (word): string => njoin(capitalize(word), 'byte', {elision: false}),
+  (word): string => njoin(capitalize(word), 'cast', {elision: false}),
+  (word): string => njoin(capitalize(word), 'CDN', {elision: false}),
+  (word): string => njoin(capitalize(word), 'CI', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Club', {elision: false}),
+  (word): string => njoin(capitalize(word), 'DB', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Express', {elision: false}),
+  (word): string => njoin(capitalize(word), 'en'),
+  (word): string => njoin(capitalize(word), 'feed', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Finder', {elision: false}),
+  (word): string => njoin(capitalize(word), 'flow', {elision: false}),
+  (word): string => njoin(capitalize(word), 'form', {elision: false}),
+  (word): string => njoin(capitalize(word), 'ful'),
+  (word): string => njoin(capitalize(word), 'Go', {elision: false}),
+  (word): string => njoin(capitalize(word), 'gram', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Hero', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Hub', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Hunt', {elision: false}),
+  (word): string => njoin(capitalize(word), 'IO', {elision: false}),
+  (word): string => njoin(capitalize(word), 'It', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Kit', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Lab', {elision: false}),
+  (word): string => njoin(capitalize(word), 'let'),
+  (word): string => njoin(capitalize(word), 'less'),
+  (word): string => njoin(capitalize(word), 'Link', {elision: false}),
+  (word): string => njoin(capitalize(word), 'list', {elision: false}),
+  (word): string => njoin(capitalize(word), 'list', {elision: false}),
+  (word): string => njoin(capitalize(word), 'lit', {elision: false}),
+  (word): string => njoin(capitalize(word), 'mind', {elision: false}),
+  (word): string => njoin(capitalize(word), 'ML', {elision: false}),
+  (word): string => njoin(capitalize(word), 'note', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Notes', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Pod', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Pro', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Scan', {elision: false}),
+  (word): string => njoin(capitalize(word), 'shot'),
+  (word): string => njoin(capitalize(word), 'space'),
+  (word): string => njoin(capitalize(word), 'Stack', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Studio', {elision: false}),
+  (word): string => njoin(capitalize(word), 'Sensei', {elision: false}),
+  (word): string => njoin(capitalize(word), 'time'),
+  (word): string => njoin(capitalize(word), 'way'),
+  (word): string => njoin(capitalize(word), 'x', {elision: false}),
+  (word): string => njoin(capitalize(word), 'check', {elision: false}),
+  (word): string => njoin(capitalize(word), 'joy'),
+  (word): string => njoin(lower(word), 'lint', {elision: false}),
+  (word): string => njoin(lower(word), 'ly', {elision: false}),
+];
+
+function modifyWord(word: string): string {
+  return modifiers[Math.floor(Math.random() * modifiers.length)](word);
+}
+
+async function findSynonyms(word: string): Promise<string[]> {
+  try {
+    const response = await fetch(
+      `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
+        word,
+      )}`,
+    );
+    const json: {
+      synsets: Array<{entry: Array<{synonym: string[]}>}>;
+    } = await response.json();
+    const synonyms = Array.from(
+      new Set<string>(
+        json.synsets.reduce(
+          (sum, synset) => [...sum, ...synset.entry.map((e) => e.synonym[0])],
+          [] as string[],
+        ),
+      ),
+    )
+      .filter((word) => !/[\s-]/.exec(word))
+      .map((word) => sanitize(word));
+    return synonyms;
+  } catch (err) {
+    return [];
+  }
+}
+
+const Suggestion: React.FC<{
+  query: string;
+  onSubmit: (name: string) => void;
+}> = ({query, onSubmit}) => {
+  const {t} = useTranslation();
+  const synonymRef = useRef<string[]>([]);
+  const [bestWords, setBestWords] = useState<string[]>([]);
+
+  function shuffle(): void {
+    const best = fillArray(
+      sampleFromArray(synonymRef.current, maximumCount),
+      query,
+      maximumCount,
+    ).map((word) => modifyWord(word));
+    setBestWords(best);
+  }
+
+  function applyQuery(name: string): void {
+    sendAcceptSuggestionEvent();
+    onSubmit(name);
+  }
+
+  function onShuffleButtonClicked() {
+    sendShuffleSuggestionEvent();
+    shuffle();
+  }
+
+  useEffect(() => {
+    let isEffective = true;
+    const fn = async (): Promise<void> => {
+      if (query && query.length > 0) {
+        const synonyms = await findSynonyms(query);
+        if (!isEffective) {
+          return;
+        }
+        synonymRef.current = [query, ...synonyms];
+        shuffle();
+      }
+    };
+    fn();
+    return () => {
+      isEffective = false;
+    };
+    // eslint-disable-next-line
+  }, [query]);
+
+  return (
+    <Container>
+      <Title>{t('try')}</Title>
+      <Items>
+        {bestWords &&
+          bestWords.map((name, i) => (
+            <Item
+              key={name + i}
+              onClick={(): void => applyQuery(name)}
+              delay={i + 1}
+            >
+              <span>{name}</span>
+            </Item>
+          ))}
+      </Items>
+      <Button onClick={onShuffleButtonClicked}>
+        <TiArrowSync />
+      </Button>
+    </Container>
+  );
+};
+
+export default Suggestion;
+
+const Container = styled.div`
+  margin-top: 20px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    margin-top: 15px;
+  }
+`;
+
+const Title = styled.div`
+  padding: 0 10px;
+  color: gray;
+  border: 1px solid gray;
+  border-radius: 2em;
+  text-transform: uppercase;
+  font-size: 12px;
+  user-select: none;
+`;
+
+const Items = styled.div`
+  margin: 5px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+const Item = styled.div<{delay: number}>`
+  margin: 10px 10px 0;
+  cursor: pointer;
+  font-weight: bold;
+  font-family: inherit;
+  font-size: 1.5rem;
+  line-height: 1em;
+  border-bottom: 1px dashed black;
+  color: black;
+  overflow: hidden;
+
+  span {
+    display: block;
+    animation: 0.6s cubic-bezier(0.19, 1, 0.22, 1)
+      ${(props) => `${props.delay * 0.1}s`} 1 normal both running ${slideUp};
+  }
+
+  ${mobile} {
+    margin: 10px 0 0;
+    font-size: 1.3rem;
+  }
+`;
+
+const Button = styled(motion.div).attrs({
+  whileHover: {scale: 1.1},
+  whileTap: {scale: 0.9},
+})`
+  margin: 15px 0 0 0;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  border-bottom: none;
+  color: white;
+  border-radius: 4px;
+  font-size: 1.3rem;
+  user-select: none;
+  background: #5610ff;
+  transition: background 0.1s ease-out;
+  cursor: pointer;
+
+  &:hover {
+    background: #723df3;
+  }
+
+  &:active {
+    background: #a17ff5;
+  }
+`;
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome.tsx
@@ -0,0 +1,242 @@
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import {Link} from 'react-router-dom';
+
+import {
+  FaMapSigns,
+  FaGithub,
+  FaGitlab,
+  FaNpm,
+  FaPython,
+  FaGem,
+  FaLinux,
+  FaAppStore,
+  FaInstagram,
+  FaTwitter,
+  FaSlack,
+  FaAws,
+  FaJsSquare,
+  FaBuilding,
+} from 'react-icons/fa';
+import {IoIosBeer} from 'react-icons/io';
+import {DiRust, DiHeroku, DiFirebase} from 'react-icons/di';
+
+import {SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon} from './Icons';
+import {mobile} from '../util/css';
+import {sendGettingStartedEvent} from '../util/analytics';
+
+const Welcome: React.FC = () => {
+  const {t} = useTranslation();
+
+  return (
+    <Container>
+      <Hero>
+        <HeroTitle>{t('title')}</HeroTitle>
+        <HeroText>{t('description')}</HeroText>
+        <ButtonContainer>
+          <List>
+            <ListButton>
+              <Link to="/s/awesome" onClick={() => sendGettingStartedEvent()}>
+                {t('gettingStarted')}
+              </Link>
+            </ListButton>
+          </List>
+        </ButtonContainer>
+      </Hero>
+      <HighlightedList>
+        <ListItem>
+          <FaMapSigns /> {t('providers.domains')}
+        </ListItem>
+        <ListItem>
+          <FaGithub /> {t('providers.github')}
+        </ListItem>
+        <ListItem>
+          <FaGitlab /> {t('providers.gitlab')}
+        </ListItem>
+        <ListItem>
+          <FaNpm /> {t('providers.npm')}
+        </ListItem>
+        <ListItem>
+          <DiRust /> {t('providers.rust')}
+        </ListItem>
+        <ListItem>
+          <FaPython /> {t('providers.pypi')}
+        </ListItem>
+        <ListItem>
+          <FaGem /> {t('providers.rubygems')}
+        </ListItem>
+        <ListItem>
+          <OcamlIcon /> {t('providers.ocaml')}
+        </ListItem>
+        <ListItem>
+          <IoIosBeer /> {t('providers.homebrew')}
+        </ListItem>
+        <ListItem>
+          <FaLinux /> {t('providers.linux')}
+        </ListItem>
+        <ListItem>
+          <FaTwitter /> {t('providers.twitter')}
+        </ListItem>
+        <ListItem>
+          <FaInstagram /> {t('providers.instagram')}
+        </ListItem>
+        <ListItem>
+          <SpectrumIcon /> {t('providers.spectrum')}
+        </ListItem>
+        <ListItem>
+          <FaSlack /> {t('providers.slack')}
+        </ListItem>
+        <ListItem>
+          <DiHeroku /> {t('providers.heroku')}
+        </ListItem>
+        <ListItem>
+          <NowIcon /> {t('providers.now')}
+        </ListItem>
+        <ListItem>
+          <NetlifyIcon /> {t('providers.netlify')}
+        </ListItem>
+        <ListItem>
+          <FaAws /> {t('providers.s3')}
+        </ListItem>
+        <ListItem>
+          <DiFirebase /> {t('providers.firebase')}
+        </ListItem>
+        <ListItem>
+          <FaJsSquare /> {t('providers.jsorg')}
+        </ListItem>
+        <ListItem>
+          <FaGithub /> {t('providers.githubSearch')}
+        </ListItem>
+        <ListItem>
+          <FaAppStore /> {t('providers.appStore')}
+        </ListItem>
+        <ListItem>
+          <FaBuilding /> {t('providers.nta')}
+        </ListItem>
+      </HighlightedList>
+    </Container>
+  );
+};
+export default Welcome;
+
+const Container = styled.div`
+  margin-top: 30px;
+  padding-bottom: 40px;
+  text-align: center;
+  font-size: 1.5rem;
+
+  ${mobile} {
+    margin-top: 0px;
+    text-align: left;
+    font-size: 1.2rem;
+  }
+`;
+
+const HeroTitle = styled.h1`
+  padding-bottom: 30px;
+  line-height: 1em;
+  font-size: 5rem;
+  font-weight: 700;
+
+  ${mobile} {
+    font-size: 2.5em;
+  }
+`;
+
+const HeroText = styled.p`
+  font-size: 1.2em;
+  font-weight: 400;
+  line-height: 1.3em;
+  color: #3c3c3c;
+`;
+
+const Hero = styled.div`
+  margin-right: 20vw;
+  margin-left: 20vw;
+
+  ${mobile} {
+    margin: inherit;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  margin: 10px 0 0 0;
+`;
+
+const List = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  font-size: 1rem;
+
+  ${mobile} {
+    justify-content: flex-start;
+  }
+`;
+
+const HighlightedList = styled.div`
+  margin-top: 100px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    flex-direction: column;
+    margin-top: 50px;
+    padding: 20px;
+  }
+
+  padding: 50px 20vw 50px 20vw;
+  color: white;
+  /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
+  background: #632bec;
+`;
+
+const ListItem = styled.div`
+  margin: 20px 25px;
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  line-height: 1em;
+
+  ${mobile} {
+    margin: 10px 0;
+    font-size: 1.2rem;
+  }
+
+  svg {
+    margin-right: 5px;
+  }
+`;
+
+const ListButton = styled.div`
+  margin: 10px 5px;
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  line-height: 1em;
+
+  ${mobile} {
+    margin: 10px 10px 0 0;
+  }
+
+  a {
+    color: black;
+    padding: 12px 25px;
+    border: 1px solid black;
+    border-radius: 2px;
+    text-decoration: none;
+
+    &:hover {
+      color: white;
+      background: black;
+    }
+  }
+`;
--- 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;