dev: initial attempt

components/cards/core.tsx

@@ -0,0 +1,386 @@
+import useFetch from 'fetch-suspense';
+import Tooltip from 'rc-tooltip';
+import React, { Suspense, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GoInfo } from 'react-icons/go';
+import { IoIosFlash } from 'react-icons/io';
+import BarLoader from 'react-spinners/BarLoader';
+import styled from '@emotion/styled';
+import { useStoreActions } from '../../store';
+import { sendError, sendExpandEvent } from '../../util/analytics';
+import { mobile } from '../../util/css';
+
+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 ? (
+              <a href={link} target="_blank" rel="noreferrer">
+                {content}
+              </a>
+            ) : (
+              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: 30px 50px;
+  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;
+`;

components/cards/index.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { mobile } from '../../util/css';
+import AppStoreCard from './providers/AppStore';
+import ChromeWebStoreCard from './providers/ChromeWebStore';
+import CloudflareCard from './providers/Cloudflare';
+import CratesioCard from './providers/Cratesio';
+import DomainCard from './providers/Domains';
+import FirebaseCard from './providers/Firebase';
+import FirefoxAddonsCard from './providers/FirefoxAddons';
+import FlyIoCard from './providers/FlyIo';
+import GithubCard from './providers/GitHubOrganization';
+import GithubSearchCard from './providers/GitHubSearch';
+import GitLabCard from './providers/GitLab';
+import HerokuCard from './providers/Heroku';
+import HexPmCard from './providers/HexPm';
+import HomebrewCard from './providers/Homebrew';
+import JsOrgCard from './providers/JsOrg';
+import LinuxCard from './providers/Linux';
+import ModLandCard from './providers/ModLand';
+import NetlifyCard from './providers/Netlify';
+import NpmCard from './providers/Npm';
+import NtaCard from './providers/Nta';
+import OcamlCard from './providers/Ocaml';
+import PlayStoreCard from './providers/PlayStore';
+import ProductHuntCard from './providers/ProductHunt';
+import PypiCard from './providers/PyPI';
+import RubyGemsCard from './providers/RubyGems';
+import S3Card from './providers/S3';
+import SlackCard from './providers/Slack';
+import SubredditCard from './providers/Subreddit';
+import TwitterCard from './providers/Twitter';
+import VercelCard from './providers/Vercel';
+import YouTubeCard from './providers/YouTube';
+// import InstagramCard from './providers/Instagram';
+
+const Index: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Section>
+        {/* <Title>{t('section.starter')}</Title> */}
+        <Cards>
+          <DomainCard query={query} />
+          <GithubCard query={query} />
+          <GitLabCard query={query} />
+          <SlackCard query={query} />
+          <ProductHuntCard query={query} />
+          <GithubSearchCard query={query} />
+          <NtaCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.social')}</Title>
+        <Cards>
+          <TwitterCard query={query} />
+          <SubredditCard query={query} />
+          <YouTubeCard query={query} />
+          {/* <InstagramCard query={query} /> */}
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.package')}</Title>
+        <Cards>
+          <HomebrewCard query={query} />
+          <LinuxCard query={query} />
+          <NpmCard query={query} />
+          <PypiCard query={query} />
+          <CratesioCard query={query} />
+          <RubyGemsCard query={query} />
+          <HexPmCard query={query} />
+          <OcamlCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.web')}</Title>
+        <Cards>
+          <FlyIoCard query={query} />
+          <VercelCard query={query} />
+          <HerokuCard query={query} />
+          <NetlifyCard query={query} />
+          <CloudflareCard query={query} />
+          <S3Card query={query} />
+          <FirebaseCard query={query} />
+          <JsOrgCard query={query} />
+          <ModLandCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.app')}</Title>
+        <Cards>
+          <AppStoreCard query={query} />
+          {/* <PlayStoreCard query={query} /> */}
+          <FirefoxAddonsCard query={query} />
+          <ChromeWebStoreCard query={query} />
+        </Cards>
+      </Section>
+    </>
+  );
+};
+
+export default Index;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 0 40px;
+`;
+
+const Title = styled.h1`
+  margin: 20px 0 10px;
+  text-align: center;
+  font-size: 3rem;
+
+  ${mobile} {
+    margin: 0;
+    text-align: left;
+    font-size: 2rem;
+    padding: 0 20px;
+  }
+`;
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 20px;
+
+  ${mobile} {
+    flex-direction: column;
+    margin-top: 40px;
+  }
+`;

components/cards/providers/AppStore.tsx

@@ -0,0 +1,57 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { SiAppstore } from 'react-icons/si';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/appstore/${encodeURIComponent(query)}?country=${t(
+      'countryCode'
+    )}`
+  ) as {
+    result: Array<{
+      name: string;
+      viewURL: string;
+      author: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/[－–—\-:]/)[0]}
+            message={`By ${app.author}`}
+            link={app.viewURL}
+            icon={<SiAppstore />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={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;

components/cards/providers/ChromeWebStore.tsx

@@ -0,0 +1,54 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiChromeFill } from 'react-icons/ri';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/chrome-web-store/${encodeURIComponent(query)}`
+  ) as {
+    result: Array<{
+      name: string;
+      url: string;
+      description: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name}
+            message={app.description}
+            link={app.url}
+            icon={<RiChromeFill />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<RiChromeFill />}
+        />
+      )}
+    </>
+  );
+};
+
+const ChromeWebStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.chromeWebStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default ChromeWebStoreCard;

components/cards/providers/Cloudflare.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaCloudflare } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const CloudflareCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+  const moreNames = [
+    `${lowerCase}-web`,
+    `${lowerCase}-webapp`,
+    `${lowerCase}-site`,
+  ];
+
+  return (
+    <Card title={t('providers.cloudflare')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.pages.dev`}
+            service="dns"
+            message={`Go to ${name}.pages.dev`}
+            link={`https://${name}.pages.dev`}
+            icon={<FaCloudflare />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default CloudflareCard;

components/cards/providers/Cratesio.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiRust } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.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={<SiRust />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default CratesioCard;

components/cards/providers/Domains.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MdDomain } from 'react-icons/md';
+import { normalize } from '../../../util/text';
+import { zones } from '../../../util/zones';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+export interface DomainrResponse {
+  results: {
+    domain: string;
+    host: string;
+    subdomain: string;
+    zone: string;
+    path: string;
+    registerURL: string;
+  }[];
+}
+
+// function fetcher(url: string) {
+//   return fetch(url, {}).then((res) => res.json());
+// }
+
+const DomainCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.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 { data } = useSWR<DomainrResponse>(
+  //   `/api/list/domain/${encodeURIComponent(query)}`,
+  //   fetcher
+  // );
+
+  // const cctldSuggestions =
+  //   data?.results
+  //     ?.filter((res) => res.subdomain !== '' && res.path === '')
+  //     ?.map((res) => res.domain) ?? [];
+
+  const names =
+    // use Set() to eliminate dupes
+    new Set([
+      ...['com', 'org', 'app', 'io'].map((tld) => lowerCase + '.' + tld),
+      ...domainHackSuggestions,
+    ]);
+
+  const moreNames = new Set([
+    `${lowerCase}app.com`,
+    `get${lowerCase}.com`,
+    `join${lowerCase}.com`,
+    ...[
+      'dev',
+      'co',
+      'ai',
+      'sh',
+      'rs',
+      'cloud',
+      'tools',
+      'build',
+      'run',
+      'design',
+      'directory',
+      'guru',
+      'ninja',
+      'info',
+      'biz',
+      'eu',
+    ].map((tld) => lowerCase + '.' + tld),
+  ]);
+
+  for (const name of moreNames) {
+    if (names.has(name)) {
+      moreNames.delete(name);
+    }
+  }
+
+  return (
+    <Card title={t('providers.domains')}>
+      <Repeater items={Array.from(names)} moreItems={Array.from(moreNames)}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            message={`Go to ${name}`}
+            service="domain"
+            link={'http://' + name}
+            icon={<MdDomain />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default DomainCard;

components/cards/providers/Firebase.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiFirebase } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.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={<SiFirebase />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default FirebaseCard;

components/cards/providers/FirefoxAddons.tsx

@@ -0,0 +1,55 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFirefoxBrowser } from 'react-icons/fa';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/firefox-addons/${encodeURIComponent(query)}`
+  ) as {
+    result: Array<{
+      name: string;
+      url: string;
+      author: string;
+      description: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/\s[－–—\-:]\s/)[0]}
+            message={`${app.author}: ${app.description}`}
+            link={app.url}
+            icon={<FaFirefoxBrowser />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaFirefoxBrowser />}
+        />
+      )}
+    </>
+  );
+};
+
+const FirefoxAddonsCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.firefoxAddons')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default FirefoxAddonsCard;

components/cards/providers/FlyIo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFly } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const FlyIoCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.fly')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.fly.dev`}
+            service="dns"
+            message={`Go to ${name}.fly.dev`}
+            link={`https://${name}.fly.dev`}
+            icon={<FaFly />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default FlyIoCard;

components/cards/providers/GitHubOrganization.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaGithub } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const GithubCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {});
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}-dev`,
+    `${lowerCase}-org`,
+    `${lowerCase}-team`,
+    `${lowerCase}hq`,
+  ];
+  const moreNames = [`${lowerCase}js`, `${lowerCase}-rs`];
+
+  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;

components/cards/providers/GitHubSearch.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import { useTranslation } from 'react-i18next';
+import { FaGithubAlt, FaInfoCircle } from 'react-icons/fa';
+
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const searchQuery = `${query} in:name`;
+  const limit = 5;
+  const response = useFetch(
+    `https://api.github.com/search/repositories?q=${encodeURIComponent(
+      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={<FaGithubAlt />}
+            key={repo.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={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;

components/cards/providers/GitLab.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaGitlab } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const GitLabCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}-dev`,
+    `${lowerCase}-org`,
+    `${lowerCase}-team`,
+    `${lowerCase}hq`,
+  ];
+
+  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;

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 { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.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;

components/cards/providers/HexPm.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiElixir } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const HexPmCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}-ex`];
+
+  return (
+    <Card title={t('providers.hexpm')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`hex.pm/packages/${name}`}
+            service="existence"
+            message="Go to Hex"
+            link={`https://hex.pm/packages/${name}`}
+            icon={<SiElixir />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default HexPmCard;

components/cards/providers/Homebrew.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoIosBeer } from 'react-icons/io';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, ExistentialAvailability } from '../core';
+
+const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.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;

components/cards/providers/Instagram.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInstagram } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const InstagramCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, { allowHyphens: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
+
+  return (
+    <Card title={t('providers.instagram')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="instagram"
+            link={`https://www.instagram.com/${name}/`}
+            message="Go to Instagram"
+            icon={<FaInstagram />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default InstagramCard;

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 { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.jsorg')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.js.org`}
+            service="jsorg"
+            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;

components/cards/providers/Linux.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiDebian, SiUbuntu, SiArchlinux } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.linux')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="archlinux"
+              message="Go to ArchLinux.org"
+              link={`https://archlinux.org/packages/?sort=&q=${name}`}
+              icon={<SiArchlinux />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="launchpad"
+              message="Go to Launchpad"
+              link={`https://launchpad.net/ubuntu/+source/${name}`}
+              icon={<SiUbuntu />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="debian"
+              message="Go to debian.org"
+              link={`https://packages.debian.org/buster/${name}`}
+              icon={<SiDebian />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default LinuxCard;

components/cards/providers/ModLand.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiDeno } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const ModLandCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.modland')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.mod.land`}
+            service="dns"
+            message="Go to mod.land repository"
+            link="https://github.com/denosaurs/mod.land"
+            messageIfTaken={`Go to ${name}.mod.land`}
+            linkIfTaken={`https://${name}.mod.land`}
+            icon={<SiDeno />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default ModLandCard;

components/cards/providers/Netlify.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { NetlifyIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.netlify')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.netlify.com`}
+            service="existence"
+            message={`Go to ${name}.netlify.com`}
+            link={`https://${name}.netlify.com`}
+            icon={<NetlifyIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NetlifyCard;

components/cards/providers/Npm.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiNpmjsFill, RiNpmjsLine } from 'react-icons/ri';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const NpmCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+  const moreNames = [`${lowerCase}-js`, `${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} in npmjs.com`}
+              linkIfTaken={`https://www.npmjs.com/package/${name}`}
+              icon={<RiNpmjsFill />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="npm-org"
+              message="Create Org"
+              link="https://www.npmjs.com/org/create"
+              messageIfTaken={`See @${name} in npmjs.com`}
+              linkIfTaken={`https://www.npmjs.com/org/${name}`}
+              prefix="@"
+              suffix=" (Organization)"
+              icon={<RiNpmjsLine />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NpmCard;

components/cards/providers/Nta.tsx

@@ -0,0 +1,45 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { RiBuilding2Fill } from 'react-icons/ri';
+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={<RiBuilding2Fill />}
+            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;

components/cards/providers/Ocaml.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { OcamlIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const OcamlCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, { allowUnderscore: false });
+  const lowerCase = normalizedQuery.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;

components/cards/providers/PlayStore.tsx

@@ -0,0 +1,56 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { IoMdAppstore } from 'react-icons/io';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/playstore/${encodeURIComponent(query)}}`
+  ) as {
+    result: Array<{
+      id: string;
+      name: string;
+      description: string;
+      author: string;
+      url: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/\s[－–—\-:]\s/)[0]}
+            message={`${app.author}: ${app.description}`}
+            link={app.url}
+            icon={<IoMdAppstore />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaInfoCircle />}
+        />
+      )}
+    </>
+  );
+};
+
+const PlayStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.playStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default PlayStoreCard;

components/cards/providers/ProductHunt.tsx

@@ -0,0 +1,192 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaProductHunt } from 'react-icons/fa';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `https://0h4smabbsg-dsn.algolia.net/1/indexes/Post_production?query=${encodeURIComponent(
+      query
+    )}`,
+    {
+      headers: {
+        'X-Algolia-API-Key': '9670d2d619b9d07859448d7628eea5f3',
+        'X-Algolia-Application-Id': '0H4SMABBSG',
+      },
+    }
+  ) as Response;
+
+  const hits = response.hits;
+
+  return (
+    <>
+      {hits.length > 0 ? (
+        hits
+          .slice(0, 5)
+          .map((hit) => (
+            <Result
+              title={hit.name}
+              message={`${hit.tagline} (⬆️ ${hit.vote_count})`}
+              link={`https://www.producthunt.com${hit.url}`}
+              icon={<FaProductHunt />}
+              key={hit.id}
+            />
+          ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaProductHunt />}
+        />
+      )}
+    </>
+  );
+};
+
+const ProductHuntCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.productHunt')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default ProductHuntCard;
+
+interface Response {
+  hits: Hit[];
+  nbHits: number;
+  page: number;
+  nbPages: number;
+  hitsPerPage: number;
+  exhaustiveNbHits: boolean;
+  exhaustiveTypo: boolean;
+  query: Query;
+  params: string;
+  processingTimeMS: number;
+}
+
+interface Hit {
+  comments_count: number;
+  name: string;
+  slug: string;
+  tagline: string;
+  topics: Topic[];
+  id: number;
+  user_id: number;
+  thumbnail_image_uuid?: string;
+  created_at: string;
+  featured_at: null | string;
+  exclusive: null;
+  is_featured: boolean;
+  media: Media[];
+  posted_date: number;
+  product_links: ProductLink[];
+  product_state: ProductState;
+  shortened_url: string;
+  text_content: any[];
+  url: string;
+  user: User;
+  vote_count: number;
+  objectID: string;
+  _highlightResult: HighlightResult;
+  thumbnail?: Thumbnail;
+}
+
+interface HighlightResult {
+  name: Name;
+  tagline: Name;
+}
+
+interface Name {
+  value: string;
+  matchLevel: MatchLevel;
+  fullyHighlighted?: boolean;
+  matchedWords: Query[];
+}
+
+export enum MatchLevel {
+  Full = 'full',
+  None = 'none',
+}
+
+export enum Query {
+  Namae = 'namae',
+}
+
+interface Media {
+  id: number;
+  metadata: MediaMetadata;
+  original_height: number;
+  original_width: number;
+  image_url: string;
+  image_uuid: string;
+  media_type: MediaType;
+}
+
+export enum MediaType {
+  Image = 'image',
+  Video = 'video',
+}
+
+interface MediaMetadata {
+  video_id?: null | string;
+  url?: null | string;
+  kindle_asin?: null;
+  platform?: null;
+}
+
+interface ProductLink {
+  store_name: StoreName;
+  id: number;
+  url: string;
+}
+
+export enum StoreName {
+  AppStore = 'App Store',
+  Chrome = 'Chrome',
+  PlayStore = 'Play Store',
+  Website = 'Website',
+}
+
+export enum ProductState {
+  Default = 'default',
+  NoLongerOnline = 'no_longer_online',
+}
+
+interface Thumbnail {
+  image_uuid: string;
+  media_type: MediaType;
+  metadata: ThumbnailMetadata;
+  original_height: number;
+  id: number;
+  original_width: number;
+  image_url: string;
+}
+
+interface ThumbnailMetadata {}
+
+interface Topic {
+  id: number;
+  name: string;
+  description: string;
+  slug: string;
+  followers_count: number;
+  image_uuid: string;
+}
+
+interface User {
+  username: string;
+  id: number;
+  twitter_username: null | string;
+  name: string;
+  headline: null | string;
+  image_urls: { [key: string]: string };
+  link: string;
+  avatar_url: string;
+  is_maker: boolean;
+}

components/cards/providers/PyPI.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaPython } from 'react-icons/fa';
+
+import { capitalize, normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const PypiCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const capitalCase = capitalize(normalizedQuery);
+  const names = [normalizedQuery];
+  const moreNames = [`Py${capitalCase}`];
+
+  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;

components/cards/providers/RubyGems.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiRubygems } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}-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={<SiRubygems />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default RubyGemsCard;

components/cards/providers/S3.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaAws } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const S3Card: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.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;

components/cards/providers/Slack.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaSlack } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const SlackCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, { allowUnderscore: false });
+  const lowerCase = normalizedQuery.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;

components/cards/providers/Subreddit.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaReddit } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const SubredditCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: true,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`get${lowerCase}`, `${lowerCase}_team`];
+
+  return (
+    <Card title={t('providers.reddit')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="reddit" // route to http://namae.dev/api/services/reddit/<query> which is /api/services/reddit/[query].ts on GitHub
+            message={`Go to reddit.com/r/${name}`}
+            link={`https://reddit.com/r/${name}`}
+            prefix="reddit.com/r/"
+            icon={<FaReddit />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default SubredditCard;

components/cards/providers/Twitter.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaTwitter } from 'react-icons/fa';
+
+import { capitalize, normalize } from '../../../util/text';
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, { allowHyphens: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const capitalCase = capitalize(normalizedQuery);
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}hq`,
+    `${capitalCase}App`,
+    `${lowerCase}_team`,
+    `${lowerCase}_support`,
+  ];
+  const moreNames = [
+    `hey${lowerCase}`,
+    `${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.com/${name}`}
+            link={`https://twitter.com/${name}`}
+            icon={<FaTwitter />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default TwitterCard;

components/cards/providers/Vercel.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { NowIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const VercelCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.now')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.vercel.app`}
+            service="existence"
+            message={`Go to ${name}.vercel.app`}
+            link={`https://${name}.vercel.app`}
+            icon={<NowIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default VercelCard;

components/cards/providers/YouTube.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaYoutube } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const YouTubeCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+    allowHyphens: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}team`, `${lowerCase}hq`];
+
+  return (
+    <Card title={t('providers.youtube')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`youtube.com/c/${name}`}
+            service="existence"
+            message={`Go to youtube.com/c/${name}`}
+            link={`https://www.youtube.com/c/${name}`}
+            icon={<FaYoutube />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default YouTubeCard;