feat: support for Firefox Add-ons

api/services/firefox-addons/[query].ts

@@ -0,0 +1,37 @@
+import { send, sendError, fetch } from '../../../util/http';
+import { VercelRequest, VercelResponse } from '@vercel/node';
+
+export default async function handler(
+  req: VercelRequest,
+  res: VercelResponse
+): Promise<void> {
+  const { query } = req.query;
+
+  if (!query || typeof query !== 'string') {
+    return sendError(res, new Error('No query given'));
+  }
+
+  const term = encodeURIComponent(query);
+
+  try {
+    const response = await fetch(
+      `https://addons.mozilla.org/api/v5/addons/search/?app=firefox&appversion=100.0&type=extension&lang=en-US&q=${term}`,
+      'GET'
+    );
+    const json = await response.json();
+    console.log(json.results.map((i: any) => i.name));
+    const items = json.results.map((item: any) => {
+      const locale = item.name._default || 'en-US';
+      return {
+        id: item.id,
+        name: item.name[locale],
+        description: item.summary[locale],
+        url: item.url,
+        author: item.authors[0].name,
+      };
+    });
+    send(res, { result: items.slice(0, 10) });
+  } catch (err: any) {
+    sendError(res, err);
+  }
+}

public/locales/en/translation.json

@@ -44,7 +44,8 @@
     "reddit": "Reddit",
     "twitter": "Twitter",
     "cloudflare": "Cloudflare Pages",
-    "chromeWebStore": "Chrome Web Store"
+    "chromeWebStore": "Chrome Web Store",
+    "firefoxAddons": "Firefox Add-ons"
   },
   "showMore": "show more",
   "title": "Grab a slick name for your new app",

src/components/Welcome.tsx

@@ -13,6 +13,7 @@ import {
   FaSlack,
   FaTwitter,
   FaCloudflare,
+  FaFirefoxBrowser,
 } from 'react-icons/fa';
 import { IoIosBeer, IoMdAppstore } from 'react-icons/io';
 import { MdDomain } from 'react-icons/md';
@@ -60,6 +61,7 @@ const supportedProviders: Record<string, React.ReactNode> = {
   githubSearch: <FaGithubAlt />,
   appStore: <SiAppstore />,
   playStore: <IoMdAppstore />,
+  firefoxAddons: <FaFirefoxBrowser />,
   chromeWebStore: <RiChromeFill />,
   nta: <RiBuilding2Fill />,
 };

src/components/cards/index.tsx

@@ -8,6 +8,7 @@ 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 GithubCard from './providers/GitHubOrganization';
 import GithubSearchCard from './providers/GitHubSearch';
 import GitLabCard from './providers/GitLab';
@@ -65,6 +66,7 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
         <GithubSearchCard query={query} />
         <AppStoreCard query={query} />
         <PlayStoreCard query={query} />
+        <FirefoxAddonsCard query={query} />
         <ChromeWebStoreCard query={query} />
         {language === 'ja' ? <NtaCard query={query} /> : null}
       </Cards>

src/components/cards/providers/FirefoxAddons.tsx

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

src/components/cards/providers/PlayStore.tsx

@@ -25,7 +25,7 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
       {apps && apps.length > 0 ? (
         apps.map((app) => (
           <Result
-            title={app.name}
+            title={app.name.split(/\s[－–—\-:]\s/)[0]}
             message={`${app.author}: ${app.description}`}
             link={app.url}
             icon={<IoMdAppstore />}