1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-16 20:20:38 +09:00

feat: sectioned cards

This commit is contained in:
uetchy 2022-06-04 18:25:58 +09:00
parent 218ee2889b
commit c05ee42473
15 changed files with 124 additions and 63 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -33,7 +33,7 @@ export default async function handler(
author: entry[4][0][0][0], author: entry[4][0][0][0],
url: 'https://play.google.com' + entry[9][4][2], 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) { } catch (err: any) {
sendError(res, err); sendError(res, err);
} }

View File

@ -19,7 +19,7 @@
"archlinux": "Arch Linux", "archlinux": "Arch Linux",
"ubuntu": "Ubuntu", "ubuntu": "Ubuntu",
"debian": "Debian", "debian": "Debian",
"domains": "Domains", "domains": "Domain",
"firebase": "Firebase", "firebase": "Firebase",
"github": "GitHub Organization", "github": "GitHub Organization",
"githubSearch": "GitHub Repository", "githubSearch": "GitHub Repository",
@ -34,7 +34,7 @@
"netlify": "Netlify", "netlify": "Netlify",
"now": "Vercel", "now": "Vercel",
"npm": "npm", "npm": "npm",
"nta": "Company (JP)", "nta": "Company (Japan)",
"ocaml": "OCaml", "ocaml": "OCaml",
"playStore": "Google Play Store", "playStore": "Google Play Store",
"pypi": "PyPI", "pypi": "PyPI",
@ -62,5 +62,12 @@
"low": "Common", "low": "Common",
"moderate": "Rare" "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"
}
} }

View File

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

View File

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

View File

@ -9,21 +9,22 @@ import CratesioCard from './providers/Cratesio';
import DomainCard from './providers/Domains'; import DomainCard from './providers/Domains';
import FirebaseCard from './providers/Firebase'; import FirebaseCard from './providers/Firebase';
import FirefoxAddonsCard from './providers/FirefoxAddons'; import FirefoxAddonsCard from './providers/FirefoxAddons';
import FlyIoCard from './providers/FlyIo';
import GithubCard from './providers/GitHubOrganization'; import GithubCard from './providers/GitHubOrganization';
import GithubSearchCard from './providers/GitHubSearch'; import GithubSearchCard from './providers/GitHubSearch';
import GitLabCard from './providers/GitLab'; import GitLabCard from './providers/GitLab';
import HerokuCard from './providers/Heroku'; import HerokuCard from './providers/Heroku';
import HexPmCard from './providers/HexPm'; import HexPmCard from './providers/HexPm';
import HomebrewCard from './providers/Homebrew'; import HomebrewCard from './providers/Homebrew';
// import InstagramCard from './providers/Instagram';
import JsOrgCard from './providers/JsOrg'; import JsOrgCard from './providers/JsOrg';
import ModLandCard from './providers/ModLand';
import LinuxCard from './providers/Linux'; import LinuxCard from './providers/Linux';
import ModLandCard from './providers/ModLand';
import NetlifyCard from './providers/Netlify'; import NetlifyCard from './providers/Netlify';
import NpmCard from './providers/Npm'; import NpmCard from './providers/Npm';
import NtaCard from './providers/Nta'; import NtaCard from './providers/Nta';
import OcamlCard from './providers/Ocaml'; import OcamlCard from './providers/Ocaml';
import PlayStoreCard from './providers/PlayStore'; import PlayStoreCard from './providers/PlayStore';
import ProductHuntCard from './providers/ProductHunt';
import PypiCard from './providers/PyPI'; import PypiCard from './providers/PyPI';
import RubyGemsCard from './providers/RubyGems'; import RubyGemsCard from './providers/RubyGems';
import S3Card from './providers/S3'; import S3Card from './providers/S3';
@ -32,65 +33,105 @@ import SubredditCard from './providers/Subreddit';
import TwitterCard from './providers/Twitter'; import TwitterCard from './providers/Twitter';
import VercelCard from './providers/Vercel'; import VercelCard from './providers/Vercel';
import YouTubeCard from './providers/YouTube'; import YouTubeCard from './providers/YouTube';
import FlyIoCard from './providers/FlyIo'; // import InstagramCard from './providers/Instagram';
import ProductHuntCard from './providers/ProductHunt';
const Index: React.FC<{ query: string }> = ({ query }) => { const Index: React.FC<{ query: string }> = ({ query }) => {
const { const { t } = useTranslation();
i18n: { language },
} = useTranslation();
return ( return (
<> <>
<Cards> <Section>
<DomainCard query={query} /> {/* <Title>{t('section.starter')}</Title> */}
<GithubCard query={query} /> <Cards>
<TwitterCard query={query} /> <DomainCard query={query} />
<YouTubeCard query={query} /> <GithubCard query={query} />
<NpmCard query={query} /> <GitLabCard query={query} />
<HomebrewCard query={query} /> <SlackCard query={query} />
<GitLabCard query={query} /> <ProductHuntCard query={query} />
<PypiCard query={query} /> <GithubSearchCard query={query} />
<CratesioCard query={query} /> <NtaCard query={query} />
<RubyGemsCard query={query} /> </Cards>
<HexPmCard query={query} /> </Section>
<LinuxCard query={query} /> <Section>
<OcamlCard query={query} /> <Title>{t('section.social')}</Title>
<FlyIoCard query={query} /> <Cards>
<VercelCard query={query} /> <TwitterCard query={query} />
<HerokuCard query={query} /> <SubredditCard query={query} />
<NetlifyCard query={query} /> <YouTubeCard query={query} />
<CloudflareCard query={query} /> {/* <InstagramCard query={query} /> */}
<JsOrgCard query={query} /> </Cards>
<ModLandCard query={query} /> </Section>
<SlackCard query={query} /> <Section>
{/* <InstagramCard query={query} /> */} <Title>{t('section.package')}</Title>
<SubredditCard query={query} /> <Cards>
<S3Card query={query} /> <HomebrewCard query={query} />
<FirebaseCard query={query} /> <LinuxCard query={query} />
</Cards> <NpmCard query={query} />
<Cards> <PypiCard query={query} />
<ProductHuntCard query={query} /> <CratesioCard query={query} />
<GithubSearchCard query={query} /> <RubyGemsCard query={query} />
<AppStoreCard query={query} /> <HexPmCard query={query} />
<PlayStoreCard query={query} /> <OcamlCard query={query} />
<FirefoxAddonsCard query={query} /> </Cards>
<ChromeWebStoreCard query={query} /> </Section>
{language === 'ja' ? <NtaCard query={query} /> : null} <Section>
</Cards> <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; 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` const Cards = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 20px;
${mobile} { ${mobile} {
flex-direction: column; flex-direction: column;
margin-top: 40px;
} }
`; `;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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