dev: initial attempt

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;