feat: sectioned cards

api/services/appstore/[query].ts

@@ -28,7 +28,7 @@ export default async function handler(
 
   const term = encodeURIComponent(query);
   const countryCode = country || 'us';
-  const limit = 10;
+  const limit = 5;
 
   try {
     const response = await fetch(

api/services/chrome-web-store/[query].ts

@@ -27,7 +27,7 @@ export default async function handler(
       description: item[6],
       url: item[37],
     }));
-    send(res, { result: items.slice(0, 10) });
+    send(res, { result: items.slice(0, 5) });
   } catch (err: any) {
     sendError(res, err);
   }

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

@@ -30,7 +30,7 @@ export default async function handler(
         author: item.authors[0].name,
       };
     });
-    send(res, { result: items.slice(0, 10) });
+    send(res, { result: items.slice(0, 5) });
   } catch (err: any) {
     sendError(res, err);
   }

api/services/nta/[query].ts

@@ -90,7 +90,7 @@ export default async function handler(
             phoneticName: entry.phoneticName,
             englishName: entry.englishName,
           }))
-          .slice(0, 10) || [],
+          .slice(0, 5) || [],
     });
   } catch (err: any) {
     sendError(res, err);

api/services/playstore/[query].ts

@@ -33,7 +33,7 @@ export default async function handler(
       author: entry[4][0][0][0],
       url: 'https://play.google.com' + entry[9][4][2],
     }));
-    send(res, { result: apps.slice(0, 10) });
+    send(res, { result: apps.slice(0, 5) });
   } catch (err: any) {
     sendError(res, err);
   }

public/locales/en/translation.json

@@ -19,7 +19,7 @@
     "archlinux": "Arch Linux",
     "ubuntu": "Ubuntu",
     "debian": "Debian",
-    "domains": "Domains",
+    "domains": "Domain",
     "firebase": "Firebase",
     "github": "GitHub Organization",
     "githubSearch": "GitHub Repository",
@@ -34,7 +34,7 @@
     "netlify": "Netlify",
     "now": "Vercel",
     "npm": "npm",
-    "nta": "Company (JP)",
+    "nta": "Company (Japan)",
     "ocaml": "OCaml",
     "playStore": "Google Play Store",
     "pypi": "PyPI",
@@ -62,5 +62,12 @@
     "low": "Common",
     "moderate": "Rare"
   },
-  "join-us": "Send <1>a pull request</1> and become a contributor!"
+  "join-us": "Send <1>a pull request</1> and become a contributor!",
+  "section": {
+    "starter": "Starter",
+    "social": "Social Network",
+    "package": "Package",
+    "web": "Web Platform",
+    "app": "App & Extension"
+  }
 }

public/locales/ja/translation.json

@@ -30,7 +30,7 @@
     "netlify": "Netlify",
     "now": "Vercel",
     "npm": "npm",
-    "nta": "法人",
+    "nta": "法人 (日本)",
     "ocaml": "OCaml",
     "pypi": "PyPI",
     "rubygems": "RubyGems",
@@ -51,5 +51,12 @@
     "low": "普通",
     "moderate": "そこそこユニーク"
   },
-  "join-us": "<1>プルリクエスト</1>を送ってコントリビューターになりましょう！"
+  "join-us": "<1>プルリクエスト</1>を送ってコントリビューターになりましょう！",
+  "section": {
+    "starter": "基本",
+    "social": "SNS",
+    "package": "パッケージ",
+    "web": "Web",
+    "app": "アプリとエクステンション"
+  }
 }

src/components/cards/core.tsx

@@ -301,7 +301,7 @@ const ErrorHandler: React.FC = ({ children }) => (
 );
 
 const CardContainer = styled.div`
-  padding: 40px;
+  padding: 30px 50px;
   font-size: 1rem;
   line-height: 1rem;
 

src/components/cards/index.tsx

@@ -9,21 +9,22 @@ 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 InstagramCard from './providers/Instagram';
 import JsOrgCard from './providers/JsOrg';
-import ModLandCard from './providers/ModLand';
 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';
@@ -32,65 +33,105 @@ import SubredditCard from './providers/Subreddit';
 import TwitterCard from './providers/Twitter';
 import VercelCard from './providers/Vercel';
 import YouTubeCard from './providers/YouTube';
-import FlyIoCard from './providers/FlyIo';
-import ProductHuntCard from './providers/ProductHunt';
+// import InstagramCard from './providers/Instagram';
 
 const Index: React.FC<{ query: string }> = ({ query }) => {
-  const {
-    i18n: { language },
-  } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <>
-      <Cards>
-        <DomainCard query={query} />
-        <GithubCard query={query} />
-        <TwitterCard query={query} />
-        <YouTubeCard query={query} />
-        <NpmCard query={query} />
-        <HomebrewCard query={query} />
-        <GitLabCard query={query} />
-        <PypiCard query={query} />
-        <CratesioCard query={query} />
-        <RubyGemsCard query={query} />
-        <HexPmCard query={query} />
-        <LinuxCard query={query} />
-        <OcamlCard query={query} />
-        <FlyIoCard query={query} />
-        <VercelCard query={query} />
-        <HerokuCard query={query} />
-        <NetlifyCard query={query} />
-        <CloudflareCard query={query} />
-        <JsOrgCard query={query} />
-        <ModLandCard query={query} />
-        <SlackCard query={query} />
-        {/* <InstagramCard query={query} /> */}
-        <SubredditCard query={query} />
-        <S3Card query={query} />
-        <FirebaseCard query={query} />
-      </Cards>
-      <Cards>
-        <ProductHuntCard query={query} />
-        <GithubSearchCard query={query} />
-        <AppStoreCard query={query} />
-        <PlayStoreCard query={query} />
-        <FirefoxAddonsCard query={query} />
-        <ChromeWebStoreCard query={query} />
-        {language === 'ja' ? <NtaCard query={query} /> : null}
-      </Cards>
+      <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;
   }
 `;

src/components/cards/providers/Cloudflare.tsx

@@ -13,7 +13,7 @@ const CloudflareCard: React.FC<{ query: string }> = ({ query }) => {
   });
   const lowerCase = normalizedQuery.toLowerCase();
 
-  const names = [normalizedQuery];
+  const names = [lowerCase];
   const moreNames = [
     `${lowerCase}-web`,
     `${lowerCase}-webapp`,
@@ -26,7 +26,7 @@ const CloudflareCard: React.FC<{ query: string }> = ({ query }) => {
         {(name) => (
           <DedicatedAvailability
             name={`${name}.pages.dev`}
-            service="existence"
+            service="dns"
             message={`Go to ${name}.pages.dev`}
             link={`https://${name}.pages.dev`}
             icon={<FaCloudflare />}

src/components/cards/providers/GitHubSearch.tsx

@@ -8,7 +8,7 @@ import { Card, Result } from '../core';
 const Search: React.FC<{ query: string }> = ({ query }) => {
   const { t } = useTranslation();
   const searchQuery = `${query} in:name`;
-  const limit = 10;
+  const limit = 5;
   const response = useFetch(
     `https://api.github.com/search/repositories?q=${encodeURIComponent(
       searchQuery

src/components/cards/providers/GitLab.tsx

@@ -12,7 +12,13 @@ const GitLabCard: React.FC<{ query: string }> = ({ query }) => {
   });
   const lowerCase = normalizedQuery.toLowerCase();
 
-  const names = [lowerCase];
+  const names = [
+    normalizedQuery,
+    `${lowerCase}-dev`,
+    `${lowerCase}-org`,
+    `${lowerCase}-team`,
+    `${lowerCase}hq`,
+  ];
 
   return (
     <Card title={t('providers.gitlab')}>

src/components/cards/providers/ProductHunt.tsx

@@ -24,7 +24,7 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
     <>
       {hits.length > 0 ? (
         hits
-          .slice(0, 10)
+          .slice(0, 5)
           .map((hit) => (
             <Result
               title={hit.name}

src/components/cards/providers/Twitter.tsx

@@ -14,13 +14,13 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
 
   const names = [
     normalizedQuery,
+    `${lowerCase}hq`,
     `${capitalCase}App`,
     `${lowerCase}_team`,
-    `${capitalCase}HQ`,
-    `hey${lowerCase}`,
+    `${lowerCase}_support`,
   ];
   const moreNames = [
-    `${lowerCase}_support`,
+    `hey${lowerCase}`,
     `${lowerCase}_org`,
     `${lowerCase}_app`,
     `${capitalCase}JS`,

src/util/i18n.ts

@@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-const TRANSLATION_VERSION = '18';
+const TRANSLATION_VERSION = '19';
 
 i18n
   .use(Backend)