uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-16 12:10:32 +09:00
Code Issues Releases Activity

style: prettier

Browse Source
This commit is contained in:
uetchy 2020-08-31 08:41:53 +09:00 committed by uetchy
parent 9278b7a2ee
commit f5f7b51fcb
73 changed files with 1014 additions and 5220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc
View File

@ -1,4 +1,3 @@
{
"semi": false,
"singleQuote": true
}

38
api/services/appstore/[query].ts
View File

@ -1,39 +1,39 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
interface App {
trackId: string
trackName: string
kind: string
version: string
price: string
trackViewUrl: string
trackId: string;
trackName: string;
kind: string;
version: string;
price: string;
trackViewUrl: string;
}
interface AppStoreResponse {
results: App[]
results: App[];
}
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query, country } = req.query
const { query, country } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
const term = encodeURIComponent(query)
const countryCode = country || 'us'
const limit = 10
const term = encodeURIComponent(query);
const countryCode = country || 'us';
const limit = 10;
try {
const response = await fetch(
`https://itunes.apple.com/search?media=software&entity=software,iPadSoftware,macSoftware&country=${countryCode}&limit=${limit}&term=${term}`,
'GET'
)
const body: AppStoreResponse = await response.json()
);
const body: AppStoreResponse = await response.json();
const apps = body.results.map((app) => ({
id: app.trackId,
name: app.trackName,
@ -41,9 +41,9 @@ export default async function handler(
version: app.version,
price: app.price,
viewURL: app.trackViewUrl,
}))
send(res, { result: apps || [] })
}));
send(res, { result: apps || [] });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

20
api/services/debian/[query].ts
View File

@ -1,29 +1,29 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
const response = await fetch(
`https://packages.debian.org/buster/${encodeURIComponent(query)}`,
'GET'
)
const body = await response.text()
const availability = body.includes('No such package')
send(res, { availability })
);
const body = await response.text();
const availability = body.includes('No such package');
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

28
api/services/dns/[query].ts
View File

@ -1,34 +1,34 @@
import dns from 'dns'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import dns from 'dns';
import { send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
function resolvePromise(hostname: string): Promise<string[]> {
return new Promise((resolve, reject) => {
dns.resolve4(hostname, function (err, addresses) {
if (err) return reject(err)
resolve(addresses)
})
})
if (err) return reject(err);
resolve(addresses);
});
});
}
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
try {
const response = await resolvePromise(query)
const availability = response && response.length > 0 ? false : true
send(res, { availability })
const response = await resolvePromise(query);
const availability = response && response.length > 0 ? false : true;
send(res, { availability });
} catch (err) {
if (err.code === 'ENODATA' || err.code === 'ENOTFOUND') {
return send(res, { availability: true })
return send(res, { availability: true });
}
sendError(res, err)
sendError(res, err);
}
}

18
api/services/domain/[query].ts
View File

@ -1,22 +1,22 @@
import whois from 'whois-json'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import whois from 'whois-json';
import { send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
try {
const response = await whois(query, { follow: 3, verbose: true })
const availability = response[0].data.domainName ? false : true
send(res, { availability })
const response = await whois(query, { follow: 3, verbose: true });
const availability = response[0].data.domainName ? false : true;
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

24
api/services/existence/[query].ts
View File

@ -1,30 +1,30 @@
import isURL from 'validator/lib/isURL'
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import isURL from 'validator/lib/isURL';
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('no query given'))
return sendError(res, new Error('no query given'));
}
if (!isURL(query)) {
return sendError(res, new Error('Invalid URL: ' + query))
return sendError(res, new Error('Invalid URL: ' + query));
}
try {
const response = await fetch(`https://${query}`)
const availability = response.status === 404
send(res, { availability })
const response = await fetch(`https://${query}`);
const availability = response.status === 404;
send(res, { availability });
} catch (err) {
console.log(err.code)
console.log(err.code);
if (err.code === 'ENOTFOUND') {
return send(res, { availability: true })
return send(res, { availability: true });
}
sendError(res, err)
sendError(res, err);
}
}

20
api/services/gitlab/[query].ts
View File

@ -1,28 +1,28 @@
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import nodeFetch from 'node-fetch'
import { send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
import nodeFetch from 'node-fetch';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
const response = await nodeFetch(`https://gitlab.com/${query}`, {
redirect: 'manual',
})
const availability = response.status === 302
send(res, { availability })
});
const availability = response.status === 302;
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

18
api/services/launchpad/[query].ts
View File

@ -1,18 +1,18 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
@ -21,10 +21,10 @@ export default async function handler(
query
)}`,
'GET'
)
const availability = response.status !== 200
send(res, { availability })
);
const availability = response.status !== 200;
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

18
api/services/npm-org/[query].ts
View File

@ -1,24 +1,24 @@
import npmName from 'npm-name'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import npmName from 'npm-name';
import { send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
try {
const availability = await npmName(`@${query}`)
send(res, { availability })
const availability = await npmName(`@${query}`);
send(res, { availability });
} catch (err) {
if (err.code === 'ENOTFOUND') {
return send(res, { availability: true })
return send(res, { availability: true });
}
sendError(res, err)
sendError(res, err);
}
}

16
api/services/npm/[query].ts
View File

@ -1,21 +1,21 @@
import npmName from 'npm-name'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import npmName from 'npm-name';
import { send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
try {
const availability = await npmName(query)
send(res, { availability })
const availability = await npmName(query);
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

28
api/services/nta/[query].ts
View File

@ -1,32 +1,32 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
const APPLICATION_ID = process.env.NTA_APPLICATION_ID
const APPLICATION_ID = process.env.NTA_APPLICATION_ID;
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
const encodedQuery = encodeURIComponent(
query.replace(/[A-Za-z0-9]/g, (str) =>
String.fromCharCode(str.charCodeAt(0) + 0xfee0)
)
)
);
try {
const response = await fetch(
`https://api.houjin-bangou.nta.go.jp/4/name?id=${APPLICATION_ID}&name=${encodedQuery}&mode=1&target=1&type=02`,
'GET'
)
const body: string[] = (await response.text()).split('\n').slice(0, -1)
);
const body: string[] = (await response.text()).split('\n').slice(0, -1);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const header = body.shift()!.split(',')
const header = body.shift()!.split(',');
const result = body.map((csv) => {
const entry = csv.split(',').map((item) =>
item
@ -36,7 +36,7 @@ export default async function handler(
)
// eslint-disable-next-line no-irregular-whitespace
.replace(/　/g, ' ')
)
);
return {
index: entry[0],
@ -73,8 +73,8 @@ export default async function handler(
excluded: entry[29],
processSection: entry[2],
modifiedSection: entry[3],
}
})
};
});
send(res, {
meta: {
@ -91,8 +91,8 @@ export default async function handler(
englishName: entry.englishName,
}))
.slice(10) || [],
})
});
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

18
api/services/slack/[query].ts
View File

@ -1,27 +1,27 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
const response = await fetch(
`https://${encodeURIComponent(query)}.slack.com`
)
const availability = response.status !== 200
send(res, { availability })
);
const availability = response.status !== 200;
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

20
api/services/spectrum/[query].ts
View File

@ -1,31 +1,31 @@
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import { send, sendError, fetch } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
const response = await fetch(
`https://spectrum.chat/${encodeURIComponent(query)}`,
'GET'
)
const body = await response.text()
);
const body = await response.text();
const availability = body.includes(
'You may be trying to view something that is deleted'
)
send(res, { availability })
);
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

18
api/services/twitter/[query].ts
View File

@ -1,28 +1,28 @@
import { NowRequest, NowResponse } from '@vercel/node'
import { fetch, send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node';
import { fetch, send, sendError } from '../../../util/http';
export default async function handler(
req: NowRequest,
res: NowResponse
): Promise<void> {
const { query } = req.query
const { query } = req.query;
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'))
return sendError(res, new Error('No query given'));
}
if (/[^a-zA-Z0-9_]/.test(query)) {
return sendError(res, new Error('Invalid characters'))
return sendError(res, new Error('Invalid characters'));
}
try {
const response = await fetch(
`https://api.twitter.com/i/users/username_available.json?username=${query}`,
'GET'
).then((res) => res.json())
const availability = response.valid
send(res, { availability })
).then((res) => res.json());
const availability = response.valid;
send(res, { availability });
} catch (err) {
sendError(res, err)
sendError(res, err);
}
}

4223
api/yarn.lock
View File

File diff suppressed because it is too large Load Diff

18
src/App.test.tsx
View File

@ -1,8 +1,8 @@
import { render } from '@testing-library/react'
import 'mutationobserver-shim'
import React, { Suspense } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import { render } from '@testing-library/react';
import 'mutationobserver-shim';
import React, { Suspense } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
it('renders welcome message', async () => {
const { findByText } = render(
@ -11,7 +11,7 @@ it('renders welcome message', async () => {
<App />
</Router>
</Suspense>
)
const text = await findByText('Grab a slick name for your new app')
expect(text).toBeTruthy()
})
);
const text = await findByText('Grab a slick name for your new app');
expect(text).toBeTruthy();
});

20
src/App.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import Footer from './components/Footer'
import Home from './pages/Home'
import Search from './pages/Search'
import { GlobalStyle } from './theme'
import { useOpenSearch } from './util/hooks'
import { isStandalone } from './util/pwa'
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import Footer from './components/Footer';
import Home from './pages/Home';
import Search from './pages/Search';
import { GlobalStyle } from './theme';
import { useOpenSearch } from './util/hooks';
import { isStandalone } from './util/pwa';
export default function App() {
const OpenSearch = useOpenSearch('/opensearch.xml')
const OpenSearch = useOpenSearch('/opensearch.xml');
return (
<>
@ -31,5 +31,5 @@ export default function App() {
{!isStandalone() && <Footer />}
</>
)
);
}

58
src/components/Contributors.tsx
View File

@ -1,38 +1,38 @@
import React from 'react'
import styled from 'styled-components'
import useSWR from 'swr'
import React from 'react';
import styled from 'styled-components';
import useSWR from 'swr';
export interface Contributors {
projectName: string
projectOwner: string
repoType: string
repoHost: string
files: string[]
imageSize: number
commit: boolean
commitConvention: string
contributors: Contributor[]
contributorsPerLine: number
skipCi: boolean
projectName: string;
projectOwner: string;
repoType: string;
repoHost: string;
files: string[];
imageSize: number;
commit: boolean;
commitConvention: string;
contributors: Contributor[];
contributorsPerLine: number;
skipCi: boolean;
}
export interface Contributor {
login: string
name: string
avatar_url: string
profile: string
contributions: string[]
login: string;
name: string;
avatar_url: string;
profile: string;
contributions: string[];
}
const fetcher = (url: string) => fetch(url).then((r) => r.json())
const fetcher = (url: string) => fetch(url).then((r) => r.json());
const Contributors: React.FC = () => {
const { data } = useSWR<Contributors>(
'https://raw.githubusercontent.com/uetchy/namae/master/.all-contributorsrc',
fetcher
)
);
if (!data) return <Container>Loading</Container>
if (!data) return <Container>Loading</Container>;
return (
<Container>
@ -48,24 +48,24 @@ const Contributors: React.FC = () => {
</Item>
))}
</Container>
)
}
);
};
const Container = styled.div`
display: flex;
flex-direction: row;
`
`;
const Item = styled.div`
margin-left: 10px;
:first-child {
margin-left: 0;
}
`
`;
const avatarSize = 32
const avatarSize = 32;
const Avatar = styled.img.attrs({ width: avatarSize, height: avatarSize })`
border-radius: ${avatarSize}px;
`
`;
export default Contributors
export default Contributors;

60
src/components/Footer.tsx
View File

@ -1,12 +1,12 @@
import React from 'react'
import { OutboundLink } from 'react-ga'
import { useTranslation } from 'react-i18next'
import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa'
import { GoHeart } from 'react-icons/go'
import styled from 'styled-components'
import { Section } from '../theme'
import { tablet } from '../util/css'
import Contributors from '../components/Contributors'
import React from 'react';
import { OutboundLink } from 'react-ga';
import { useTranslation } from 'react-i18next';
import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa';
import { GoHeart } from 'react-icons/go';
import styled from 'styled-components';
import { Section } from '../theme';
import { tablet } from '../util/css';
import Contributors from '../components/Contributors';
const Footer: React.FC = () => {
return (
@ -15,12 +15,12 @@ const Footer: React.FC = () => {
<Community />
<About />
</Container>
)
}
export default Footer
);
};
export default Footer;
const Languages = () => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Pane>
@ -46,11 +46,11 @@ const Languages = () => {
</li>
</ul>
</Pane>
)
}
);
};
const Community = () => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Pane>
@ -92,11 +92,11 @@ const Community = () => {
<Contributors />
</Box>
</Pane>
)
}
);
};
const About = () => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Pane>
@ -158,8 +158,8 @@ const About = () => {
</Links>
</ShareBox>
</Pane>
)
}
);
};
const Container = styled(Section)`
--text: #bdbdbd;
@ -187,7 +187,7 @@ const Container = styled(Section)`
${tablet} {
flex-direction: column;
}
`
`;
const Pane = styled.div`
font-size: 1rem;
@ -195,19 +195,19 @@ const Pane = styled.div`
${tablet} {
margin-bottom: 50px;
}
`
`;
const Box = styled.div`
margin: 15px 0;
`
`;
const Title = styled.h3`
margin-bottom: 15px;
`
`;
const Subtitle = styled.h4`
margin-bottom: 12px;
`
`;
const Links = styled.div`
display: flex;
@ -216,7 +216,7 @@ const Links = styled.div`
a {
margin-right: 10px;
}
`
`;
const ShareBox = styled.div`
margin-top: 15px;
@ -224,10 +224,10 @@ const ShareBox = styled.div`
font-size: 1.5rem;
display: flex;
align-items: center;
`
`;
const Bold = styled.span`
font-weight: bold;
`
`;
const SponsorBadge = styled.div`
padding: 5px 13px 5px 10px;
@ -252,4 +252,4 @@ const SponsorBadge = styled.div`
color: rgb(236, 69, 171);
margin-right: 5px;
}
`
`;

76
src/components/Form.tsx
View File

@ -1,55 +1,55 @@
import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import { Link, useHistory } from 'react-router-dom'
import { sanitize } from '../util/text'
import { sendQueryEvent } from '../util/analytics'
import { mobile } from '../util/css'
import Suggestion from './Suggestion'
import { useDeferredState } from '../util/hooks'
import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import { Link, useHistory } from 'react-router-dom';
import { sanitize } from '../util/text';
import { sendQueryEvent } from '../util/analytics';
import { mobile } from '../util/css';
import Suggestion from './Suggestion';
import { useDeferredState } from '../util/hooks';
const Form: React.FC<{
initialValue?: string
initialValue?: string;
}> = ({ initialValue = '' }) => {
const history = useHistory()
const [inputValue, setInputValue] = useState(initialValue)
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '')
const [suggested, setSuggested] = useState(false)
const inputRef = useRef<HTMLInputElement>(null)
const { t } = useTranslation()
const history = useHistory();
const [inputValue, setInputValue] = useState(initialValue);
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
const [suggested, setSuggested] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
function search(query: string) {
sendQueryEvent(sanitize(query))
history.push(`/s/${query}`)
sendQueryEvent(sanitize(query));
history.push(`/s/${query}`);
}
// set input value
function onInputChange(e: React.FormEvent<HTMLInputElement>): void {
setInputValue(e.currentTarget.value)
setInputValue(e.currentTarget.value);
}
// invoke when user clicked one of the suggested items
function onSuggestionCompleted(name: string): void {
setInputValue(name)
search(name)
setSuggested(true)
setInputValue(name);
search(name);
setSuggested(true);
}
function onSubmitQuery(e: React.FormEvent) {
e.preventDefault()
inputRef.current!.blur()
e.preventDefault();
inputRef.current!.blur();
if (!inputValue || inputValue === '') {
return
return;
}
search(inputValue)
search(inputValue);
}
useEffect(() => {
const modifiedValue = sanitize(inputValue)
setSuggestionQuery(modifiedValue)
}, [inputValue, setSuggestionQuery])
const modifiedValue = sanitize(inputValue);
setSuggestionQuery(modifiedValue);
}, [inputValue, setSuggestionQuery]);
const queryGiven = suggestionQuery && suggestionQuery !== ''
const queryGiven = suggestionQuery && suggestionQuery !== '';
return (
<InputContainer>
@ -71,10 +71,10 @@ const Form: React.FC<{
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
) : null}
</InputContainer>
)
}
);
};
export default Form
export default Form;
const InputContainer = styled.div`
display: flex;
@ -91,7 +91,7 @@ const InputContainer = styled.div`
transform: translateY(20px);
border-radius: 30px;
}
`
`;
const InputHeader = styled.div`
display: flex;
@ -99,7 +99,7 @@ const InputHeader = styled.div`
align-items: center;
justify-content: center;
margin: 12px 0 5px 0;
`
`;
const Logo = styled(Link)`
cursor: pointer;
@ -107,7 +107,7 @@ const Logo = styled(Link)`
${mobile} {
font-size: 15px;
}
`
`;
const LogoImage = styled.img`
width: 140px;
@ -115,7 +115,7 @@ const LogoImage = styled.img`
${mobile} {
width: 90px;
}
`
`;
const InputView = styled.input.attrs({
type: 'search',
@ -141,4 +141,4 @@ const InputView = styled.input.attrs({
::placeholder {
color: #c8cdda;
}
`
`;

10
src/components/Icons.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React from 'react';
export const SpectrumIcon: React.FC = () => (
<svg
@ -12,7 +12,7 @@ export const SpectrumIcon: React.FC = () => (
>
<path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
</svg>
)
);
export const NowIcon: React.FC = () => (
<svg
@ -28,7 +28,7 @@ export const NowIcon: React.FC = () => (
<polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
</g>
</svg>
)
);
export const NetlifyIcon: React.FC = () => (
<svg
@ -45,7 +45,7 @@ export const NetlifyIcon: React.FC = () => (
>
<path d="M185.532 88.839l-.094-.04a.396.396 0 0 1-.154-.087a.734.734 0 0 1-.187-.621l5.167-31.553l24.229 24.209l-25.198 10.709a.555.555 0 0 1-.22.04h-.101a.694.694 0 0 1-.134-.114a11.468 11.468 0 0 0-3.308-2.543zm35.144-1.923l25.906 25.878c5.38 5.381 8.075 8.065 9.057 11.177c.147.46.267.921.361 1.395l-61.913-26.192a4.868 4.868 0 0 0-.1-.04c-.248-.1-.535-.214-.535-.467c0-.254.294-.374.541-.474l.08-.034l26.603-11.243zm34.268 46.756c-1.337 2.51-3.944 5.114-8.355 9.527l-29.209 29.17l-37.777-7.858l-.2-.04c-.335-.054-.689-.114-.689-.414a11.387 11.387 0 0 0-4.378-7.965c-.154-.154-.113-.394-.067-.615c0-.033 0-.066.014-.093l7.105-43.571l.026-.147c.04-.334.1-.721.401-.721a11.566 11.566 0 0 0 7.754-4.44c.06-.067.1-.14.18-.18c.214-.1.468 0 .689.093l64.5 27.254h.006zm-44.28 45.407l-48.031 47.978l8.22-50.475l.014-.067a.905.905 0 0 1 .04-.193c.067-.16.24-.227.408-.294l.08-.034c1.8-.767 3.392-1.95 4.646-3.451c.16-.187.354-.368.601-.401c.064-.01.13-.01.194 0l33.82 6.944l.007-.007zm-58.198 58.133l-5.414 5.408l-59.854-86.408a2.831 2.831 0 0 0-.067-.094c-.093-.127-.194-.253-.173-.4c.006-.107.073-.2.147-.28l.066-.087c.18-.268.335-.535.502-.822l.133-.233l.02-.02c.094-.16.18-.314.341-.401c.14-.067.335-.04.488-.007l66.311 13.66c.186.03.36.105.508.22c.087.088.107.181.127.288a11.735 11.735 0 0 0 6.871 7.845c.187.093.107.3.02.52a1.588 1.588 0 0 0-.1.301c-.835 5.074-8 48.726-9.926 60.51zm-11.309 11.29c-3.99 3.946-6.343 6.035-9.003 6.877a13.382 13.382 0 0 1-8.06 0c-3.115-.989-5.809-3.672-11.19-9.054l-60.108-60.042l15.7-24.323a1 1 0 0 1 .268-.314c.167-.12.408-.066.608 0a16.285 16.285 0 0 0 10.948-.554c.18-.066.361-.113.502.014c.07.064.133.135.187.213l60.148 87.19v-.007zm-94.156-68.008l-13.789-13.773l27.23-11.604a.562.562 0 0 1 .221-.047c.227 0 .361.227.481.434c.274.42.564.83.87 1.229l.086.106c.08.114.027.227-.053.334l-15.04 23.321h-.006zM27.11 160.625L9.665 143.199c-2.968-2.964-5.12-5.114-6.617-6.963l53.043 10.99l.2.033c.328.053.69.113.69.42c0 .334-.395.488-.73.614l-.153.067l-28.988 12.265zM0 127.275a13.34 13.34 0 0 1 .602-3.304c.989-3.112 3.676-5.796 9.063-11.177l22.324-22.3a14524.43 14524.43 0 0 0 30.92 44.647c.18.24.38.507.174.707c-.976 1.075-1.952 2.25-2.64 3.526c-.075.163-.19.306-.335.413c-.087.054-.18.034-.28.014h-.014L0 127.269v.007zm37.965-42.75l30.017-29.984c2.82 1.235 13.087 5.568 22.27 9.44c6.952 2.939 13.288 5.61 15.28 6.477c.2.08.381.16.468.36c.053.12.027.274 0 .401a13.363 13.363 0 0 0 3.496 12.205c.2.2 0 .487-.174.734l-.094.14l-30.478 47.157c-.08.134-.154.247-.288.334c-.16.1-.387.053-.575.007a15.215 15.215 0 0 0-3.629-.494c-1.096 0-2.286.2-3.489.42h-.007c-.133.02-.254.047-.36-.033a1.403 1.403 0 0 1-.301-.34L37.965 84.525zm36.08-36.04l38.86-38.817c5.38-5.375 8.074-8.065 11.188-9.047a13.382 13.382 0 0 1 8.061 0c3.115.982 5.808 3.672 11.189 9.047l8.422 8.413l-27.638 42.756a1.035 1.035 0 0 1-.274.32c-.167.114-.401.067-.602 0a14.028 14.028 0 0 0-12.833 2.471c-.18.187-.448.08-.675-.02c-3.61-1.569-31.682-13.42-35.699-15.122zm83.588-24.542l25.52 25.49l-6.15 38.044v.1a.9.9 0 0 1-.053.254c-.067.133-.201.16-.335.2a12.237 12.237 0 0 0-3.662 1.823a1.029 1.029 0 0 0-.134.113c-.074.08-.147.154-.267.167a.763.763 0 0 1-.288-.047l-38.887-16.504l-.073-.034c-.248-.1-.542-.22-.542-.474a14.664 14.664 0 0 0-2.072-6.109c-.187-.307-.394-.627-.234-.941l27.177-42.082zM131.352 81.4l36.454 15.423c.2.093.421.18.508.387a.707.707 0 0 1 0 .38c-.107.535-.2 1.142-.2 1.757v1.021c0 .254-.261.36-.502.46l-.073.027c-5.775 2.464-81.076 34.538-81.19 34.538c-.113 0-.234 0-.347-.113c-.2-.2 0-.48.18-.735l.094-.133l29.957-46.335l.053-.08c.174-.281.375-.595.696-.595l.3.047c.682.093 1.284.18 1.892.18c4.545 0 8.756-2.21 11.296-5.989c.06-.1.137-.19.227-.267c.18-.133.448-.066.655.027zm-41.748 61.324l82.079-34.965s.12 0 .234.114c.447.447.828.747 1.196 1.028l.18.113c.168.094.335.2.348.374c0 .067 0 .107-.013.167l-7.032 43.144l-.027.174c-.046.333-.093.714-.407.714a11.558 11.558 0 0 0-9.177 5.655l-.034.053c-.093.154-.18.3-.334.38c-.14.068-.32.041-.468.008l-65.455-13.487c-.067-.013-1.016-3.465-1.09-3.472z" />
</svg>
)
);
export const OcamlIcon: React.FC = () => (
<svg
@ -96,4 +96,4 @@ export const OcamlIcon: React.FC = () => (
/>
</g>
</svg>
)
);

100
src/components/Suggestion.tsx
View File

@ -1,22 +1,22 @@
import React, { useEffect, useState, useRef } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import fetch from 'isomorphic-unfetch'
import { TiArrowSync } from 'react-icons/ti'
import { motion } from 'framer-motion'
import React, { useEffect, useState, useRef } from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import fetch from 'isomorphic-unfetch';
import { TiArrowSync } from 'react-icons/ti';
import { motion } from 'framer-motion';
import { capitalize, stem, germanify, njoin, lower, upper } from '../util/text'
import { sampleFromArray, fillArray } from '../util/array'
import { mobile, slideUp } from '../util/css'
import { sanitize } from '../util/text'
import { capitalize, stem, germanify, njoin, lower, upper } from '../util/text';
import { sampleFromArray, fillArray } from '../util/array';
import { mobile, slideUp } from '../util/css';
import { sanitize } from '../util/text';
import {
sendShuffleSuggestionEvent,
sendAcceptSuggestionEvent,
} from '../util/analytics'
} from '../util/analytics';
type Modifier = (word: string) => string
type Modifier = (word: string) => string;
const maximumCount = 3
const maximumCount = 3;
const modifiers: Modifier[] = [
(word): string => `${capitalize(germanify(word))}`,
(word): string => `${capitalize(word)}`,
@ -144,10 +144,10 @@ const modifiers: Modifier[] = [
(word): string => njoin(capitalize(word), 'joy'),
(word): string => njoin(lower(word), 'lint', { elision: false }),
(word): string => njoin(lower(word), 'ly', { elision: false }),
]
];
function modifyWord(word: string): string {
return modifiers[Math.floor(Math.random() * modifiers.length)](word)
return modifiers[Math.floor(Math.random() * modifiers.length)](word);
}
async function findSynonyms(word: string): Promise<string[]> {
@ -156,10 +156,10 @@ async function findSynonyms(word: string): Promise<string[]> {
`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
word
)}`
)
);
const json: {
synsets: Array<{ entry: Array<{ synonym: string[] }> }>
} = await response.json()
synsets: Array<{ entry: Array<{ synonym: string[] }> }>;
} = await response.json();
const synonyms = Array.from(
new Set<string>(
json.synsets.reduce(
@ -169,58 +169,58 @@ async function findSynonyms(word: string): Promise<string[]> {
)
)
.filter((word) => !/[\s-]/.exec(word))
.map((word) => sanitize(word))
return synonyms
.map((word) => sanitize(word));
return synonyms;
} catch (err) {
return []
return [];
}
}
const Suggestion: React.FC<{
query: string
onSubmit: (name: string) => void
query: string;
onSubmit: (name: string) => void;
}> = ({ query, onSubmit }) => {
const { t } = useTranslation()
const synonymRef = useRef<string[]>([])
const [bestWords, setBestWords] = useState<string[]>([])
const { t } = useTranslation();
const synonymRef = useRef<string[]>([]);
const [bestWords, setBestWords] = useState<string[]>([]);
function shuffle(): void {
const best = fillArray(
sampleFromArray(synonymRef.current, maximumCount),
query,
maximumCount
).map((word) => modifyWord(word))
setBestWords(best)
).map((word) => modifyWord(word));
setBestWords(best);
}
function applyQuery(name: string): void {
sendAcceptSuggestionEvent()
onSubmit(name)
sendAcceptSuggestionEvent();
onSubmit(name);
}
function onShuffleButtonClicked() {
sendShuffleSuggestionEvent()
shuffle()
sendShuffleSuggestionEvent();
shuffle();
}
useEffect(() => {
let isEffective = true
let isEffective = true;
const fn = async (): Promise<void> => {
if (query && query.length > 0) {
const synonyms = await findSynonyms(query)
const synonyms = await findSynonyms(query);
if (!isEffective) {
return
return;
}
synonymRef.current = [query, ...synonyms]
shuffle()
synonymRef.current = [query, ...synonyms];
shuffle();
}
}
fn()
};
fn();
return () => {
isEffective = false
}
isEffective = false;
};
// eslint-disable-next-line
}, [query])
}, [query]);
return (
<Container>
@ -241,10 +241,10 @@ const Suggestion: React.FC<{
<TiArrowSync />
</Button>
</Container>
)
}
);
};
export default Suggestion
export default Suggestion;
const Container = styled.div`
margin-top: 20px;
@ -258,7 +258,7 @@ const Container = styled.div`
${mobile} {
margin-top: 15px;
}
`
`;
const Title = styled.div`
padding: 0 10px;
@ -268,7 +268,7 @@ const Title = styled.div`
text-transform: uppercase;
font-size: 12px;
user-select: none;
`
`;
const Items = styled.div`
margin: 5px 0;
@ -281,7 +281,7 @@ const Items = styled.div`
flex-direction: column;
align-items: center;
}
`
`;
const Item = styled.div<{ delay: number }>`
margin: 10px 10px 0;
@ -305,7 +305,7 @@ const Item = styled.div<{ delay: number }>`
padding-bottom: 0;
font-size: 1rem;
}
`
`;
const Button = styled(motion.div).attrs({
whileHover: { scale: 1.1 },
@ -331,4 +331,4 @@ const Button = styled(motion.div).attrs({
&:active {
background: #a17ff5;
}
`
`;

50
src/components/Welcome.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import React from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
FaMapSigns,
@ -18,13 +18,13 @@ import {
FaAws,
FaJsSquare,
FaBuilding,
} from 'react-icons/fa'
import { IoIosBeer } from 'react-icons/io'
import { DiRust, DiHeroku, DiFirebase } from 'react-icons/di'
} from 'react-icons/fa';
import { IoIosBeer } from 'react-icons/io';
import { DiRust, DiHeroku, DiFirebase } from 'react-icons/di';
import { SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon } from './Icons'
import { mobile } from '../util/css'
import { sendGettingStartedEvent } from '../util/analytics'
import { SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon } from './Icons';
import { mobile } from '../util/css';
import { sendGettingStartedEvent } from '../util/analytics';
const supportedProviders: Record<string, React.ReactNode> = {
domains: <FaMapSigns />,
@ -50,10 +50,10 @@ const supportedProviders: Record<string, React.ReactNode> = {
githubSearch: <FaGithub />,
appStore: <FaAppStore />,
nta: <FaBuilding />,
}
};
const Welcome: React.FC = () => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Container>
@ -82,10 +82,10 @@ const Welcome: React.FC = () => {
<blockquote>Soon</blockquote>
</Section>
</Container>
)
}
);
};
export default Welcome
export default Welcome;
const Container = styled.div`
padding-bottom: 40px;
@ -97,7 +97,7 @@ const Container = styled.div`
text-align: left;
font-size: 1.1rem;
}
`
`;
const Section = styled.div`
padding: 100px 20vw;
@ -105,7 +105,7 @@ const Section = styled.div`
${mobile} {
padding: 60px 40px;
}
`
`;
const HighlightSection = styled.div`
padding: 100px 20vw;
@ -123,7 +123,7 @@ const HighlightSection = styled.div`
color: white;
/* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
background: #632bec;
`
`;
const Title = styled.h1`
line-height: 1.6em;
@ -133,23 +133,23 @@ const Title = styled.h1`
${mobile} {
font-size: 2.5em;
}
`
`;
const HeroTitle = styled(Title)`
padding-bottom: 30px;
line-height: 1em;
`
`;
const HeroText = styled.p`
font-size: 1.2em;
font-weight: 400;
line-height: 1.3em;
color: #3c3c3c;
`
`;
const ButtonContainer = styled.div`
margin: 10px 0 0 0;
`
`;
const List = styled.div`
display: flex;
@ -162,7 +162,7 @@ const List = styled.div`
${mobile} {
justify-content: flex-start;
}
`
`;
const ListItem = styled.div`
margin: 20px 25px;
@ -179,7 +179,7 @@ const ListItem = styled.div`
svg {
margin-right: 5px;
}
`
`;
const ListButton = styled.div`
margin: 10px 5px;
@ -204,4 +204,4 @@ const ListButton = styled.div`
background: black;
}
}
`
`;

190
src/components/cards/core.tsx
View File

@ -1,21 +1,21 @@
import useFetch from 'fetch-suspense'
import Tooltip from 'rc-tooltip'
import React, { Suspense, useEffect, useState } from 'react'
import { OutboundLink } from 'react-ga'
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 'styled-components'
import { useStoreActions } from '../../store'
import { sendError, sendExpandEvent } from '../../util/analytics'
import { mobile } from '../../util/css'
import useFetch from 'fetch-suspense';
import Tooltip from 'rc-tooltip';
import React, { Suspense, useEffect, useState } from 'react';
import { OutboundLink } from 'react-ga';
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 'styled-components';
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 (
@ -25,25 +25,25 @@ export const Card: React.FC<{ title: string }> = ({ title, children }) => {
<ErrorHandler>{children}</ErrorHandler>
</CardContent>
</CardContainer>
)
}
);
};
export const Repeater: React.FC<{
items: string[]
moreItems?: string[]
children: (name: string) => React.ReactNode
items: string[];
moreItems?: string[];
children: (name: string) => React.ReactNode;
}> = ({ items = [], moreItems = [], children }) => {
const [revealAlternatives, setRevealAlternatives] = useState(false)
const { t } = useTranslation()
const [revealAlternatives, setRevealAlternatives] = useState(false);
const { t } = useTranslation();
function onClick() {
sendExpandEvent()
setRevealAlternatives(true)
sendExpandEvent();
setRevealAlternatives(true);
}
useEffect(() => {
setRevealAlternatives(false)
}, [items, moreItems])
setRevealAlternatives(false);
}, [items, moreItems]);
return (
<>
@ -60,38 +60,38 @@ export const Repeater: React.FC<{
<Button onClick={onClick}>{t('showMore')}</Button>
) : null}
</>
)
}
);
};
interface Response {
error?: string
availability: boolean
error?: string;
availability: boolean;
}
class APIError extends Error {
constructor(message?: string) {
super(message)
Object.setPrototypeOf(this, APIError.prototype)
super(message);
Object.setPrototypeOf(this, APIError.prototype);
}
}
class NotFoundError extends Error {
constructor(message?: string) {
super(message)
Object.setPrototypeOf(this, NotFoundError.prototype)
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: string;
query?: string;
message?: string;
messageIfTaken?: string;
service: string;
link: string;
linkIfTaken?: string;
prefix?: string;
suffix?: string;
icon: React.ReactNode;
}> = ({
name,
query = undefined,
@ -104,19 +104,19 @@ export const DedicatedAvailability: React.FC<{
suffix = '',
icon,
}) => {
const increaseCounter = useStoreActions((actions) => actions.stats.add)
const increaseCounter = useStoreActions((actions) => actions.stats.add);
const response = useFetch(
`/api/services/${service}/${encodeURIComponent(query || name)}`
) as Response
) as Response;
if (response.error) {
throw new APIError(`${service}: ${response.error}`)
throw new APIError(`${service}: ${response.error}`);
}
useEffect(() => {
increaseCounter(response.availability)
increaseCounter(response.availability);
// eslint-disable-next-line
}, [])
}, []);
return (
<Result
@ -128,19 +128,19 @@ export const DedicatedAvailability: React.FC<{
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: string;
target: string;
message?: string;
messageIfTaken?: string;
link: string;
linkIfTaken?: string;
prefix?: string;
suffix?: string;
icon: React.ReactNode;
}> = ({
name,
message = '',
@ -152,19 +152,19 @@ export const ExistentialAvailability: React.FC<{
suffix = '',
icon,
}) => {
const increaseCounter = useStoreActions((actions) => actions.stats.add)
const response = useFetch(target, undefined, { metadata: true })
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}`)
throw new NotFoundError(`${name}: ${response.status}`);
}
const availability = response.status === 404
const availability = response.status === 404;
useEffect(() => {
increaseCounter(availability)
increaseCounter(availability);
// eslint-disable-next-line
}, [])
}, []);
return (
<Result
@ -176,17 +176,17 @@ export const ExistentialAvailability: React.FC<{
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: string;
message?: string;
link?: string;
icon: React.ReactNode;
prefix?: string;
suffix?: string;
availability?: boolean;
}> = ({
title,
message = '',
@ -202,13 +202,13 @@ export const Result: React.FC<{
{title}
{suffix}
</>
)
);
const itemColor =
availability === undefined
? 'inherit'
: availability
? COLORS.available
: COLORS.unavailable
: COLORS.unavailable;
return (
<ResultContainer>
<Tooltip overlay={message} placement="top" trigger={['hover']}>
@ -235,8 +235,8 @@ export const Result: React.FC<{
</ResultItem>
</Tooltip>
</ResultContainer>
)
}
);
};
// 1. getDerivedStateFromError
// 2. render()
@ -247,23 +247,23 @@ class ErrorBoundary extends React.Component<
{ hasError: boolean; message: string; eventId?: string }
> {
constructor(props: {}) {
super(props)
this.state = { hasError: false, message: '', eventId: undefined }
super(props);
this.state = { hasError: false, message: '', eventId: undefined };
}
// used in SSR
static getDerivedStateFromError(error: Error) {
return { hasError: true, message: error.message }
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
return;
}
sendError(error, errorInfo).then((eventId) => {
this.setState({ eventId })
})
this.setState({ eventId });
});
}
render() {
@ -285,9 +285,9 @@ class ErrorBoundary extends React.Component<
</ResultItem>
</Tooltip>
</ResultContainer>
)
);
}
return this.props.children
return this.props.children;
}
}
@ -303,7 +303,7 @@ const ErrorHandler: React.FC = ({ children }) => (
{children}
</Suspense>
</ErrorBoundary>
)
);
const CardContainer = styled.div`
padding: 40px;
@ -314,7 +314,7 @@ const CardContainer = styled.div`
margin-bottom: 40px;
padding: 0px;
}
`
`;
const CardTitle = styled.div`
margin-bottom: 15px;
@ -327,7 +327,7 @@ const CardTitle = styled.div`
font-size: 1.2rem;
font-weight: 600;
}
`
`;
const CardContent = styled.div`
border-radius: 2px;
@ -339,7 +339,7 @@ const CardContent = styled.div`
border-radius: 0;
font-size: 1.2em;
}
`
`;
const Button = styled.div`
margin-top: 5px;
@ -350,17 +350,17 @@ const Button = styled.div`
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;
@ -368,7 +368,7 @@ export const ResultItem = styled.div`
align-items: flex-start;
word-break: break-all;
color: ${({ color }) => color};
`
`;
export const ResultName = styled.div`
margin-left: 6px;
@ -378,7 +378,7 @@ export const ResultName = styled.div`
text-decoration: none;
color: inherit;
}
`
`;
export const AvailableIcon = styled.div`
margin-top: 2px;
@ -388,4 +388,4 @@ export const AvailableIcon = styled.div`
text-align: center;
font-size: 13px;
height: 15px;
`
`;

64
src/components/cards/index.tsx
View File

@ -1,35 +1,35 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { mobile } from '../../util/css'
import AppStoreCard from './providers/AppStore'
import CratesioCard from './providers/Cratesio'
import DomainCard from './providers/Domains'
import FirebaseCard from './providers/Firebase'
import GithubCard from './providers/GitHubRepository'
import GithubSearchCard from './providers/GitHubSearch'
import GitLabCard from './providers/GitLab'
import HerokuCard from './providers/Heroku'
import HomebrewCard from './providers/Homebrew'
import InstagramCard from './providers/Instagram'
import JsOrgCard from './providers/JsOrg'
import LinuxCard from './providers/Linux'
import NetlifyCard from './providers/Netlify'
import NpmCard from './providers/Npm'
import NtaCard from './providers/Nta'
import OcamlCard from './providers/Ocaml'
import PypiCard from './providers/PyPI'
import RubyGemsCard from './providers/RubyGems'
import S3Card from './providers/S3'
import SlackCard from './providers/Slack'
import SpectrumCard from './providers/Spectrum'
import TwitterCard from './providers/Twitter'
import VercelCard from './providers/Vercel'
import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { mobile } from '../../util/css';
import AppStoreCard from './providers/AppStore';
import CratesioCard from './providers/Cratesio';
import DomainCard from './providers/Domains';
import FirebaseCard from './providers/Firebase';
import GithubCard from './providers/GitHubRepository';
import GithubSearchCard from './providers/GitHubSearch';
import GitLabCard from './providers/GitLab';
import HerokuCard from './providers/Heroku';
import HomebrewCard from './providers/Homebrew';
import InstagramCard from './providers/Instagram';
import JsOrgCard from './providers/JsOrg';
import LinuxCard from './providers/Linux';
import NetlifyCard from './providers/Netlify';
import NpmCard from './providers/Npm';
import NtaCard from './providers/Nta';
import OcamlCard from './providers/Ocaml';
import PypiCard from './providers/PyPI';
import RubyGemsCard from './providers/RubyGems';
import S3Card from './providers/S3';
import SlackCard from './providers/Slack';
import SpectrumCard from './providers/Spectrum';
import TwitterCard from './providers/Twitter';
import VercelCard from './providers/Vercel';
const Index: React.FC<{ query: string }> = ({ query }) => {
const {
i18n: { language },
} = useTranslation()
} = useTranslation();
return (
<>
@ -61,10 +61,10 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
{language === 'ja' ? <NtaCard query={query} /> : null}
</Cards>
</>
)
}
);
};
export default Index
export default Index;
const Cards = styled.div`
display: flex;
@ -75,4 +75,4 @@ const Cards = styled.div`
${mobile} {
flex-direction: column;
}
`
`;

32
src/components/cards/providers/AppStore.tsx
View File

@ -1,18 +1,18 @@
import useFetch from 'fetch-suspense'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaAppStore, FaInfoCircle } from 'react-icons/fa'
import { Card, Result } from '../core'
import useFetch from 'fetch-suspense';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaAppStore, FaInfoCircle } from 'react-icons/fa';
import { Card, Result } from '../core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const term = encodeURIComponent(query)
const { t } = useTranslation();
const term = encodeURIComponent(query);
const response = useFetch(
`/availability/appstore/${term}?country=${t('countryCode')}`
) as {
result: Array<{ name: string; viewURL: string; price: number; id: string }>
}
const apps = response.result
result: Array<{ name: string; viewURL: string; price: number; id: string }>;
};
const apps = response.result;
return (
<>
@ -30,17 +30,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const AppStoreCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Card title={t('providers.appStore')}>
<Search query={query} />
</Card>
)
}
);
};
export default AppStoreCard
export default AppStoreCard;

20
src/components/cards/providers/Cratesio.tsx
View File

@ -1,13 +1,13 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiRust } from 'react-icons/di'
import { Card, DedicatedAvailability, Repeater } from '../core'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { DiRust } from 'react-icons/di';
import { Card, DedicatedAvailability, Repeater } from '../core';
const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.rust')}>
@ -24,7 +24,7 @@ const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default CratesioCard
export default CratesioCard;

30
src/components/cards/providers/Domains.tsx
View File

@ -1,15 +1,17 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { MdDomain } from 'react-icons/md'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { MdDomain } from 'react-icons/md';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { zones } from '../../../util/zones'
import { Card, Repeater, DedicatedAvailability } from '../core';
import { zones } from '../../../util/zones';
const DomainCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const domainHackSuggestions = zones
.map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
@ -19,7 +21,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
lowerCase.substring(0, m.index + 1) +
'.' +
lowerCase.substring(m.index + 1)
)
);
const names = [
`${lowerCase}.com`,
@ -29,7 +31,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
`${lowerCase}.org`,
`${lowerCase}.io`,
...domainHackSuggestions,
]
];
const moreNames = [
`${lowerCase}.sh`,
`${lowerCase}.tools`,
@ -42,7 +44,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
`${lowerCase}.info`,
`${lowerCase}.biz`,
`${lowerCase}.website`,
]
];
return (
<Card title={t('providers.domains')}>
@ -58,7 +60,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default DomainCard
export default DomainCard;

24
src/components/cards/providers/Firebase.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiFirebase } from 'react-icons/di'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { DiFirebase } from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.firebase')}>
@ -27,7 +29,7 @@ const FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default FirebaseCard
export default FirebaseCard;

22
src/components/cards/providers/GitHubRepository.tsx
View File

@ -1,19 +1,19 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGithub } from 'react-icons/fa'
import { Card, DedicatedAvailability, Repeater } from '../core'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaGithub } from 'react-icons/fa';
import { Card, DedicatedAvailability, Repeater } from '../core';
const GithubCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [query, `${lowerCase}-dev`, `${lowerCase}-org`]
const names = [query, `${lowerCase}-dev`, `${lowerCase}-org`];
const moreNames = [
`${lowerCase}hq`,
`${lowerCase}-team`,
`${lowerCase}js`,
`${lowerCase}-rs`,
]
];
return (
<Card title={t('providers.github')}>
@ -31,7 +31,7 @@ const GithubCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default GithubCard
export default GithubCard;

44
src/components/cards/providers/GitHubSearch.tsx
View File

@ -1,26 +1,26 @@
import React from 'react'
import useFetch from 'fetch-suspense'
import { useTranslation } from 'react-i18next'
import { FaGithub, FaInfoCircle } from 'react-icons/fa'
import React from 'react';
import useFetch from 'fetch-suspense';
import { useTranslation } from 'react-i18next';
import { FaGithub, FaInfoCircle } from 'react-icons/fa';
import { Card, Result } from '../core'
import { Card, Result } from '../core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const searchQuery = encodeURIComponent(`${query} in:name`)
const limit = 10
const { t } = useTranslation();
const searchQuery = encodeURIComponent(`${query} in:name`);
const limit = 10;
const response = useFetch(
`https://api.github.com/search/repositories?q=${searchQuery}&per_page=${limit}`
) as {
items: Array<{
full_name: string
description: string
stargazers_count: number
html_url: string
id: string
}>
}
const repos = response.items || []
full_name: string;
description: string;
stargazers_count: number;
html_url: string;
id: string;
}>;
};
const repos = response.items || [];
return (
<>
@ -40,17 +40,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const GithubSearchCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Card title={t('providers.githubSearch')}>
<Search query={query} />
</Card>
)
}
);
};
export default GithubSearchCard
export default GithubSearchCard;

20
src/components/cards/providers/GitLab.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGitlab } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaGitlab } from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const GitLabCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.gitlab')}>
@ -25,7 +25,7 @@ const GitLabCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default GitLabCard
export default GitLabCard;

24
src/components/cards/providers/Heroku.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiHeroku } from 'react-icons/di'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { DiHeroku } from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.heroku')}>
@ -26,7 +28,7 @@ const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default HerokuCard
export default HerokuCard;

20
src/components/cards/providers/Homebrew.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { IoIosBeer } from 'react-icons/io'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { IoIosBeer } from 'react-icons/io';
import { Card, Repeater, ExistentialAvailability } from '../core'
import { Card, Repeater, ExistentialAvailability } from '../core';
const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.homebrew')}>
@ -34,7 +34,7 @@ const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default HomebrewCard
export default HomebrewCard;

22
src/components/cards/providers/Instagram.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaInstagram } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaInstagram } from 'react-icons/fa';
import { Card, Repeater, ExistentialAvailability } from '../core'
import { Card, Repeater, ExistentialAvailability } from '../core';
const InstagramCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [query]
const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`]
const names = [query];
const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
return (
<Card title={t('providers.instagram')}>
@ -25,7 +25,7 @@ const InstagramCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default InstagramCard
export default InstagramCard;

24
src/components/cards/providers/JsOrg.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaJsSquare } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaJsSquare } from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.jsorg')}>
@ -28,7 +30,7 @@ const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default JsOrgCard
export default JsOrgCard;

22
src/components/cards/providers/Linux.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiUbuntu } from 'react-icons/di'
import { DiDebian } from 'react-icons/di'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { DiUbuntu } from 'react-icons/di';
import { DiDebian } from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.linux')}>
@ -34,7 +34,7 @@ const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default LinuxCard
export default LinuxCard;

24
src/components/cards/providers/Netlify.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { NetlifyIcon } from '../../Icons'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { NetlifyIcon } from '../../Icons';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.netlify')}>
@ -26,7 +28,7 @@ const NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default NetlifyCard
export default NetlifyCard;

22
src/components/cards/providers/Npm.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaNpm } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaNpm } from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const NpmCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase, `${lowerCase}-js`]
const moreNames = [`${lowerCase}js`]
const names = [lowerCase, `${lowerCase}-js`];
const moreNames = [`${lowerCase}js`];
return (
<Card title={t('providers.npm')}>
@ -40,7 +40,7 @@ const NpmCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default NpmCard
export default NpmCard;

32
src/components/cards/providers/Nta.tsx
View File

@ -1,18 +1,18 @@
import React from 'react'
import useFetch from 'fetch-suspense'
import { useTranslation } from 'react-i18next'
import { FaBuilding, FaInfoCircle } from 'react-icons/fa'
import React from 'react';
import useFetch from 'fetch-suspense';
import { useTranslation } from 'react-i18next';
import { FaBuilding, FaInfoCircle } from 'react-icons/fa';
import { Card, Result } from '../core'
import { Card, Result } from '../core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const term = encodeURIComponent(query)
const { t } = useTranslation();
const term = encodeURIComponent(query);
const response = useFetch(`/api/services/nta/${term}`) as {
result: Array<{ name: string; phoneticName: string }>
}
result: Array<{ name: string; phoneticName: string }>;
};
const apps = response.result
const apps = response.result;
return (
<>
@ -29,17 +29,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const NtaCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<Card title={t('providers.nta')}>
<Search query={query} />
</Card>
)
}
);
};
export default NtaCard
export default NtaCard;

20
src/components/cards/providers/Ocaml.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { OcamlIcon } from '../../Icons'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { OcamlIcon } from '../../Icons';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const OcamlCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const { t } = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.ocaml')}>
@ -25,7 +25,7 @@ const OcamlCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default OcamlCard
export default OcamlCard;

22
src/components/cards/providers/PyPI.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaPython } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaPython } from 'react-icons/fa';
import { capitalize } from '../../../util/text'
import { Card, DedicatedAvailability, Repeater } from '../core'
import { capitalize } from '../../../util/text';
import { Card, DedicatedAvailability, Repeater } from '../core';
const PypiCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const names = [query]
const moreNames = [`Py${capitalize(query)}`]
const names = [query];
const moreNames = [`Py${capitalize(query)}`];
return (
<Card title={t('providers.pypi')}>
@ -28,7 +28,7 @@ const PypiCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default PypiCard
export default PypiCard;

20
src/components/cards/providers/RubyGems.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGem } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaGem } from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const names = [query]
const moreNames = [`${query.toLowerCase()}-rb`]
const names = [query];
const moreNames = [`${query.toLowerCase()}-rb`];
return (
<Card title={t('providers.rubygems')}>
@ -25,7 +25,7 @@ const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default RubyGemsCard
export default RubyGemsCard;

24
src/components/cards/providers/S3.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaAws } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaAws } from 'react-icons/fa';
import { Card, DedicatedAvailability, Repeater } from '../core'
import { Card, DedicatedAvailability, Repeater } from '../core';
const S3Card: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.s3')}>
@ -28,7 +30,7 @@ const S3Card: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default S3Card
export default S3Card;

24
src/components/cards/providers/Slack.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaSlack } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaSlack } from 'react-icons/fa';
import { Card, DedicatedAvailability, Repeater } from '../core'
import { Card, DedicatedAvailability, Repeater } from '../core';
const SlackCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.slack')}>
@ -29,7 +31,7 @@ const SlackCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default SlackCard
export default SlackCard;

18
src/components/cards/providers/Spectrum.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Card, Repeater, DedicatedAvailability } from '../core'
import { SpectrumIcon } from '../../Icons'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Card, Repeater, DedicatedAvailability } from '../core';
import { SpectrumIcon } from '../../Icons';
const SpectrumCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const names = [query]
const { t } = useTranslation();
const names = [query];
return (
<Card title={t('providers.spectrum')}>
@ -25,7 +25,7 @@ const SpectrumCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default SpectrumCard
export default SpectrumCard;

30
src/components/cards/providers/Twitter.tsx
View File

@ -1,18 +1,20 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaTwitter } from 'react-icons/fa'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaTwitter } from 'react-icons/fa';
import { capitalize } from '../../../util/text'
import { Card, Repeater, DedicatedAvailability } from '../core'
import { capitalize } from '../../../util/text';
import { Card, Repeater, DedicatedAvailability } from '../core';
const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/-/g, '_')
const lowerCase = sanitizedQuery.toLowerCase()
const capitalCase = capitalize(sanitizedQuery)
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/-/g, '_');
const lowerCase = sanitizedQuery.toLowerCase();
const capitalCase = capitalize(sanitizedQuery);
const names = [sanitizedQuery, `${capitalCase}App`, `${lowerCase}hq`]
const names = [sanitizedQuery, `${capitalCase}App`, `${lowerCase}hq`];
const moreNames = [
`hey${lowerCase}`,
`${capitalCase}Team`,
@ -20,7 +22,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
`${lowerCase}_org`,
`${lowerCase}_app`,
`${capitalCase}JS`,
]
];
return (
<Card title={t('providers.twitter')}>
@ -37,7 +39,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default TwitterCard
export default TwitterCard;

24
src/components/cards/providers/Vercel.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { NowIcon } from '../../Icons'
import React from 'react';
import { useTranslation } from 'react-i18next';
import { NowIcon } from '../../Icons';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { Card, Repeater, DedicatedAvailability } from '../core';
const VercelCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const { t } = useTranslation();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.now')}>
@ -37,7 +39,7 @@ const VercelCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default VercelCard
export default VercelCard;

50
src/index.tsx
View File

@ -1,28 +1,28 @@
import { StoreProvider } from 'easy-peasy'
import { createBrowserHistory } from 'history'
import 'rc-tooltip/assets/bootstrap.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { toast, ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { store, wrapHistoryWithStoreHandler } from './store'
import { initSentry, wrapHistoryWithGA } from './util/analytics'
import { compose } from './util/array'
import { initCrisp } from './util/crisp'
import './util/i18n'
import { FullScreenSuspense } from './util/suspense'
import { StoreProvider } from 'easy-peasy';
import { createBrowserHistory } from 'history';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { store, wrapHistoryWithStoreHandler } from './store';
import { initSentry, wrapHistoryWithGA } from './util/analytics';
import { compose } from './util/array';
import { initCrisp } from './util/crisp';
import './util/i18n';
import { FullScreenSuspense } from './util/suspense';
initSentry()
initCrisp()
initSentry();
initCrisp();
const history = compose(
createBrowserHistory(),
wrapHistoryWithStoreHandler,
wrapHistoryWithGA
)
);
ReactDOM.render(
<StoreProvider store={store}>
@ -34,24 +34,24 @@ ReactDOM.render(
<ToastContainer />
</StoreProvider>,
document.getElementById('root')
)
);
serviceWorker.register({
onUpdate: (registration) => {
console.log('Update available')
console.log('Update available');
toast.dark('New version available! Click here to update.', {
onClose: () => {
window.location.reload()
window.location.reload();
},
position: 'top-right',
autoClose: false,
closeButton: false,
closeOnClick: true,
})
});
if (registration && registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' })
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
},
})
});

16
src/pages/Home.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Content, Header } from '../theme'
import Form from '../components/Form'
import Welcome from '../components/Welcome'
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { Content, Header } from '../theme';
import Form from '../components/Form';
import Welcome from '../components/Welcome';
export default function Home() {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<>
@ -21,5 +21,5 @@ export default function Home() {
<Welcome />
</Content>
</>
)
);
}

58
src/pages/Search.tsx
View File

@ -1,28 +1,28 @@
import Tooltip from 'rc-tooltip'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { IoIosFlash, IoIosRocket } from 'react-icons/io'
import { useParams } from 'react-router-dom'
import styled from 'styled-components'
import Cards from '../components/cards'
import Tooltip from 'rc-tooltip';
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { IoIosFlash, IoIosRocket } from 'react-icons/io';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import Cards from '../components/cards';
import {
AvailableIcon,
COLORS as ResultColor,
ResultIcon,
ResultItem,
ResultName,
} from '../components/cards/core'
import Form from '../components/Form'
import { useStoreState } from '../store'
import { Content, Header } from '../theme'
import { mobile } from '../util/css'
import { sanitize } from '../util/text'
} from '../components/cards/core';
import Form from '../components/Form';
import { useStoreState } from '../store';
import { Content, Header } from '../theme';
import { mobile } from '../util/css';
import { sanitize } from '../util/text';
export default function Search() {
const { query } = useParams<{ query: string }>()
const currentQuery = sanitize(query)
const { t } = useTranslation()
const { query } = useParams<{ query: string }>();
const currentQuery = sanitize(query);
const { t } = useTranslation();
return (
<>
@ -54,24 +54,24 @@ export default function Search() {
<Cards query={currentQuery} />
</Content>
</>
)
);
}
function Stat() {
const totalCount = useStoreState((state) => state.stats.totalCount)
const availableCount = useStoreState((state) => state.stats.availableCount)
const { t } = useTranslation()
const totalCount = useStoreState((state) => state.stats.totalCount);
const availableCount = useStoreState((state) => state.stats.availableCount);
const { t } = useTranslation();
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
const uniquenessText = ((n) => {
if (n > 0.7 && n <= 1.0) {
return t('uniqueness.high')
return t('uniqueness.high');
} else if (n > 0.4 && n <= 0.7) {
return t('uniqueness.moderate')
return t('uniqueness.moderate');
} else {
return t('uniqueness.low')
return t('uniqueness.low');
}
})(uniqueness)
})(uniqueness);
return (
<UniquenessIndicator>
@ -85,7 +85,7 @@ function Stat() {
</span>
</Tooltip>
</UniquenessIndicator>
)
);
}
export const Legend = styled.div`
@ -109,8 +109,8 @@ export const Legend = styled.div`
> * {
margin: 0 10px 0;
}
`
`;
export const UniquenessIndicator = styled.div`
color: #7b7b7b;
`
`;

64
src/serviceWorker.ts
View File

@ -20,21 +20,21 @@ const isLocalhost = Boolean(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/.exec(
window.location.hostname
)
)
);
type Config = {
onSuccess?: (registration: ServiceWorkerRegistration) => void
onUpdate?: (registration: ServiceWorkerRegistration) => void
}
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
function registerValidSW(swUrl: string, config?: Config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing
const installingWorker = registration.installing;
if (installingWorker == null) {
return
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
@ -45,30 +45,30 @@ function registerValidSW(swUrl: string, config?: Config) {
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
)
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration)
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.')
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration)
}
}
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error('Error during service worker registration:', error)
})
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl: string, config?: Config) {
@ -78,7 +78,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
})
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type')
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && !contentType.includes('javascript'))
@ -86,38 +86,38 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload()
})
})
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config)
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
)
})
);
});
}
export function register(config?: Config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config)
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
@ -125,13 +125,13 @@ export function register(config?: Config) {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
)
})
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config)
registerValidSW(swUrl, config);
}
})
});
}
}
@ -139,10 +139,10 @@ export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister()
registration.unregister();
})
.catch((error) => {
console.error(error.message)
})
console.error(error.message);
});
}
}

14
src/setupTests.ts
View File

@ -1,12 +1,12 @@
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'
import '@testing-library/jest-dom/extend-expect';
// i18next
import { join } from 'path'
import i18n from 'i18next'
import Backend from 'i18next-node-fs-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import { join } from 'path';
import i18n from 'i18next';
import Backend from 'i18next-node-fs-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
i18n
.use(Backend)
@ -23,4 +23,4 @@ i18n
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
})
});

42
src/store.tsx
View File

@ -1,47 +1,47 @@
import { action, Action, createStore, createTypedHooks } from 'easy-peasy'
import { History } from 'history'
import { action, Action, createStore, createTypedHooks } from 'easy-peasy';
import { History } from 'history';
interface StatsModel {
availableCount: number
totalCount: number
add: Action<StatsModel, boolean>
reset: Action<StatsModel, void>
availableCount: number;
totalCount: number;
add: Action<StatsModel, boolean>;
reset: Action<StatsModel, void>;
}
interface StoreModel {
stats: StatsModel
stats: StatsModel;
}
const statsModel: StatsModel = {
availableCount: 0,
totalCount: 0,
add: action((state, isAvailable) => {
state.totalCount += 1
state.totalCount += 1;
if (isAvailable) {
state.availableCount += 1
state.availableCount += 1;
}
}),
reset: action((state) => {
state.totalCount = 0
state.availableCount = 0
state.totalCount = 0;
state.availableCount = 0;
}),
}
};
const storeModel: StoreModel = {
stats: statsModel,
}
};
export const store = createStore(storeModel)
export const store = createStore(storeModel);
export function wrapHistoryWithStoreHandler(history: History) {
history.listen(() => {
// reset stats counter
store.getActions().stats.reset()
})
return history
store.getActions().stats.reset();
});
return history;
}
const typedHooks = createTypedHooks<StoreModel>()
export const useStoreActions = typedHooks.useStoreActions
export const useStoreDispatch = typedHooks.useStoreDispatch
export const useStoreState = typedHooks.useStoreState
const typedHooks = createTypedHooks<StoreModel>();
export const useStoreActions = typedHooks.useStoreActions;
export const useStoreDispatch = typedHooks.useStoreDispatch;
export const useStoreState = typedHooks.useStoreState;

12
src/theme/index.tsx
View File

@ -1,5 +1,5 @@
import styled, { createGlobalStyle } from 'styled-components'
import { mobile } from '../util/css'
import styled, { createGlobalStyle } from 'styled-components';
import { mobile } from '../util/css';
export const GlobalStyle = createGlobalStyle`
* {
@ -25,7 +25,7 @@ body {
background: #f5f5f5;
}
}
`
`;
export const Content = styled.div`
padding-top: 100px;
@ -33,7 +33,7 @@ export const Content = styled.div`
${mobile} {
padding-top: 60px;
}
`
`;
export const Header = styled.header`
padding: 0 40px;
@ -42,7 +42,7 @@ export const Header = styled.header`
${mobile} {
padding: 0 20px;
}
`
`;
export const Section = styled.div`
padding: 100px 20vw;
@ -50,4 +50,4 @@ export const Section = styled.div`
${mobile} {
padding: 60px 40px;
}
`
`;

52
src/util/analytics.ts
View File

@ -1,18 +1,18 @@
import ReactGA from 'react-ga'
import * as Sentry from '@sentry/browser'
import { History } from 'history'
import ReactGA from 'react-ga';
import * as Sentry from '@sentry/browser';
import { History } from 'history';
const isProduction = process.env.NODE_ENV !== 'development'
const isProduction = process.env.NODE_ENV !== 'development';
export function wrapHistoryWithGA(history: History) {
if (isProduction) {
ReactGA.initialize('UA-28919359-15')
ReactGA.pageview(window.location.pathname + window.location.search)
ReactGA.initialize('UA-28919359-15');
ReactGA.pageview(window.location.pathname + window.location.search);
history.listen((location) => {
ReactGA.pageview(location.pathname + location.search)
})
ReactGA.pageview(location.pathname + location.search);
});
}
return history
return history;
}
export function trackEvent({
@ -21,10 +21,10 @@ export function trackEvent({
label = undefined,
value = undefined,
}: {
category: string
action: string
label?: string
value?: number
category: string;
action: string;
label?: string;
value?: number;
}) {
if (isProduction) {
ReactGA.event({
@ -32,35 +32,35 @@ export function trackEvent({
action,
label,
value,
})
});
}
}
export function sendQueryEvent(query: string): void {
trackEvent({ category: 'Search', action: 'Invoke New Search', label: query })
trackEvent({ category: 'Search', action: 'Invoke New Search', label: query });
}
export function sendGettingStartedEvent(): void {
trackEvent({ category: 'Search', action: 'Getting Started' })
trackEvent({ category: 'Search', action: 'Getting Started' });
}
export function sendExpandEvent(): void {
trackEvent({ category: 'Result', action: 'Expand Card' })
trackEvent({ category: 'Result', action: 'Expand Card' });
}
export function sendAcceptSuggestionEvent(): void {
trackEvent({ category: 'Suggestion', action: 'Accept' })
trackEvent({ category: 'Suggestion', action: 'Accept' });
}
export function sendShuffleSuggestionEvent(): void {
trackEvent({ category: 'Suggestion', action: 'Shuffle' })
trackEvent({ category: 'Suggestion', action: 'Shuffle' });
}
export function initSentry(): void {
if (isProduction) {
Sentry.init({
dsn: 'https://7ab2df74aead499b950ebef190cc40b7@sentry.io/1759299',
})
});
}
}
@ -68,16 +68,16 @@ export function sendError(
error: Error,
errorInfo: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any
[key: string]: any;
}
): Promise<string> {
return new Promise((resolve) => {
if (isProduction) {
Sentry.withScope((scope) => {
scope.setExtras(errorInfo)
const eventId = Sentry.captureException(error)
resolve(eventId)
})
scope.setExtras(errorInfo);
const eventId = Sentry.captureException(error);
resolve(eventId);
});
}
})
});
}

20
src/util/array.ts
View File

@ -1,25 +1,25 @@
export function shuffleArray<T>(array: T[]): T[] {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = array[i]
array[i] = array[j]
array[j] = temp
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array
return array;
}
export function sampleFromArray<T>(array: T[], maximum: number): T[] {
return shuffleArray(array).slice(0, maximum)
return shuffleArray(array).slice(0, maximum);
}
export function fillArray<T>(array: T[], filler: string, maximum: number): T[] {
const deficit = maximum - array.length
const deficit = maximum - array.length;
if (deficit > 0) {
array = [...array, ...Array(deficit).fill(filler)]
array = [...array, ...Array(deficit).fill(filler)];
}
return array
return array;
}
export function compose<T>(arg: T, ...fn: ((arg: T) => T)[]): T {
return fn.reduce((arg, f) => f(arg), arg)
return fn.reduce((arg, f) => f(arg), arg);
}

18
src/util/crisp.ts
View File

@ -1,14 +1,14 @@
interface CrispWindow extends Window {
$crisp: unknown[]
CRISP_WEBSITE_ID: string
$crisp: unknown[];
CRISP_WEBSITE_ID: string;
}
declare let window: CrispWindow
declare let window: CrispWindow;
export function initCrisp(): void {
window.$crisp = []
window.CRISP_WEBSITE_ID = '92b2e096-6892-47dc-bf4a-057bad52d82e'
const s = document.createElement('script')
s.src = 'https://client.crisp.chat/l.js'
s.async = true
document.getElementsByTagName('head')[0].appendChild(s)
window.$crisp = [];
window.CRISP_WEBSITE_ID = '92b2e096-6892-47dc-bf4a-057bad52d82e';
const s = document.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = true;
document.getElementsByTagName('head')[0].appendChild(s);
}

8
src/util/css.ts
View File

@ -1,7 +1,7 @@
import { keyframes } from 'styled-components'
import { keyframes } from 'styled-components';
export const mobile = '@media screen and (max-width: 800px)'
export const tablet = '@media screen and (max-width: 1200px)'
export const mobile = '@media screen and (max-width: 800px)';
export const tablet = '@media screen and (max-width: 1200px)';
export const slideUp = keyframes`
from {
@ -10,4 +10,4 @@ from {
to {
transform: translateY(0) skewY(0);
}
`
`;

32
src/util/hooks.test.tsx
View File

@ -1,22 +1,22 @@
import { render, waitFor } from '@testing-library/react'
import 'mutationobserver-shim'
import React from 'react'
import { useDeferredState } from './hooks'
import { render, waitFor } from '@testing-library/react';
import 'mutationobserver-shim';
import React from 'react';
import { useDeferredState } from './hooks';
const App: React.FC = () => {
const [value, setValue] = useDeferredState(500, 0)
const [value, setValue] = useDeferredState(500, 0);
React.useEffect(() => {
setValue(1)
setValue(2)
setValue(3)
}, [setValue])
return <div data-testid="root">{value}</div>
}
setValue(1);
setValue(2);
setValue(3);
}, [setValue]);
return <div data-testid="root">{value}</div>;
};
it('provoke state flow after certain time passed', async () => {
const { getByTestId } = render(<App />)
expect(getByTestId('root').textContent).toBe('0')
const { getByTestId } = render(<App />);
expect(getByTestId('root').textContent).toBe('0');
await waitFor(() => {
expect(getByTestId('root').textContent).toBe('3')
})
})
expect(getByTestId('root').textContent).toBe('3');
});
});

22
src/util/hooks.tsx
View File

@ -1,24 +1,24 @@
import React, { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
export function useDeferredState<T>(
duration = 1000,
initialValue: T
): [T, React.Dispatch<React.SetStateAction<T>>] {
const [response, setResponse] = useState(initialValue)
const [innerValue, setInnerValue] = useState(initialValue)
const [response, setResponse] = useState(initialValue);
const [innerValue, setInnerValue] = useState(initialValue);
useEffect(() => {
const fn = setTimeout(() => {
setResponse(innerValue)
}, duration)
setResponse(innerValue);
}, duration);
return (): void => {
clearTimeout(fn)
}
}, [duration, innerValue])
clearTimeout(fn);
};
}, [duration, innerValue]);
return [response, setInnerValue]
return [response, setInnerValue];
}
export function useOpenSearch(xmlPath: string) {
@ -31,5 +31,5 @@ export function useOpenSearch(xmlPath: string) {
href={xmlPath}
/>
</Helmet>
)
);
}

18
src/util/i18n.ts
View File

@ -1,11 +1,11 @@
import i18n from 'i18next'
import Backend from 'i18next-chained-backend'
import LocalStorageBackend from 'i18next-localstorage-backend'
import XHR from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import i18n from 'i18next';
import Backend from 'i18next-chained-backend';
import LocalStorageBackend from 'i18next-localstorage-backend';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
const TRANSLATION_VERSION = '3'
const TRANSLATION_VERSION = '3';
i18n
.use(Backend)
@ -32,6 +32,6 @@ i18n
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
})
});
export default i18n
export default i18n;

6
src/util/pwa.test.ts
View File

@ -1,5 +1,5 @@
import { isStandalone } from './pwa'
import { isStandalone } from './pwa';
it('recognize standalone mode', () => {
expect(isStandalone()).toEqual(false)
})
expect(isStandalone()).toEqual(false);
});

6
src/util/pwa.ts
View File

@ -1,8 +1,8 @@
interface CustomNavigator extends Navigator {
standalone?: boolean
standalone?: boolean;
}
export function isStandalone(): boolean {
const navigator: CustomNavigator = window.navigator
return 'standalone' in navigator && navigator.standalone === true
const navigator: CustomNavigator = window.navigator;
return 'standalone' in navigator && navigator.standalone === true;
}

14
src/util/suspense.tsx
View File

@ -1,10 +1,10 @@
import React, { Suspense } from 'react'
import styled from 'styled-components'
import BarLoader from 'react-spinners/BarLoader'
import React, { Suspense } from 'react';
import styled from 'styled-components';
import BarLoader from 'react-spinners/BarLoader';
export const FullScreenSuspense: React.FC = ({ children }) => {
return <Suspense fallback={<Fallback />}>{children}</Suspense>
}
return <Suspense fallback={<Fallback />}>{children}</Suspense>;
};
const Container = styled.div`
width: 100vw;
@ -13,10 +13,10 @@ const Container = styled.div`
flex-direction: column;
justify-content: center;
align-items: center;
`
`;
const Fallback: React.FC = () => (
<Container>
<BarLoader />
</Container>
)
);

14
src/util/text.test.ts
View File

@ -1,9 +1,9 @@
import { capitalize } from './text'
import { capitalize } from './text';
it('capitalize text', () => {
expect(capitalize('test')).toEqual('Test')
expect(capitalize('Test')).toEqual('Test')
expect(capitalize('tEST')).toEqual('Test')
expect(capitalize('TEST')).toEqual('Test')
expect(capitalize('')).toEqual('')
})
expect(capitalize('test')).toEqual('Test');
expect(capitalize('Test')).toEqual('Test');
expect(capitalize('tEST')).toEqual('Test');
expect(capitalize('TEST')).toEqual('Test');
expect(capitalize('')).toEqual('');
});

16
src/util/text.ts
View File

@ -1,29 +1,29 @@
export function capitalize(text: string): string {
if (text.length === 0) return ''
return text[0].toUpperCase() + text.slice(1).toLowerCase()
if (text.length === 0) return '';
return text[0].toUpperCase() + text.slice(1).toLowerCase();
}
export function sanitize(text: string): string {
return text
.replace(/[\s@+!#$%^&*()[\]./<>{}]/g, '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/[\u0300-\u036f]/g, '');
}
export function upper(word: string): string {
return word.toUpperCase()
return word.toUpperCase();
}
export function lower(word: string): string {
return word.toLowerCase()
return word.toLowerCase();
}
export function stem(word: string): string {
return word.replace(/[aiueo]$/, '')
return word.replace(/[aiueo]$/, '');
}
export function germanify(word: string): string {
return word.replace('c', 'k').replace('C', 'K')
return word.replace('c', 'k').replace('C', 'K');
}
export function njoin(
@ -33,5 +33,5 @@ export function njoin(
): string {
return elision
? lhs + rhs.replace(new RegExp(`^${lhs[-1]}`, 'i'), '')
: lhs + rhs
: lhs + rhs;
}

2
src/util/zones.ts
View File

@ -1753,4 +1753,4 @@ export const zones = [
'삼성',
'테스트',
'한국',
]
];

24
tests/existense.test.ts
View File

@ -1,18 +1,18 @@
import nock from 'nock'
import provider from '../api/services/existence/[query]'
import { mockProvider } from '../util/testHelpers'
import nock from 'nock';
import provider from '../api/services/existence/[query]';
import { mockProvider } from '../util/testHelpers';
test('return false if name is taken', async () => {
const result = await mockProvider(provider, { query: 'github.com/uetchy' })
expect(result).toStrictEqual({ availability: false })
})
const result = await mockProvider(provider, { query: 'github.com/uetchy' });
expect(result).toStrictEqual({ availability: false });
});
test('return true if name is not taken', async () => {
const result = await mockProvider(provider, {
query: 'github.com/uetchyasdf',
})
expect(result).toStrictEqual({ availability: true })
})
});
expect(result).toStrictEqual({ availability: true });
});
beforeEach(() => {
nock('https://github.com:443', { encodedQueryParams: true })
@ -44,7 +44,7 @@ beforeEach(() => {
"default-src 'none'; base-uri 'self'; connect-src 'self'; form-action 'self'; img-src 'self' data:; script-src,'self'; style-src 'unsafe-inline'",
'Content-Encoding': 'gzip',
'X-GitHub-Request-Id': 'BA06:51D6:125A0F:1A9B4A:5D53E806',
})
});
nock('https://github.com:443', { encodedQueryParams: true })
.head('/uetchy')
.reply(200, [], {
@ -76,5 +76,5 @@ beforeEach(() => {
"default-src 'none'; base-uri 'self'; block-all-mixed-content; connect-src 'self' uploads.github.com www.githubstatus.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; frame-src render.githubusercontent.com; img-src 'self' data: github.githubassets.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; manifest-src 'self'; media-src 'none'; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com",
'Content-Encoding': 'gzip',
'X-GitHub-Request-Id': 'A922:19B1:AD411:FB69F:5D53E5BC',
})
})
});
});

2
types/react-tippy.d.ts vendored
View File

@ -1 +1 @@
declare module 'react-tippy'
declare module 'react-tippy';

2
types/whois-json.d.ts vendored
View File

@ -1 +1 @@
declare module 'whois-json'
declare module 'whois-json';

2
util/http.ts
View File

@ -13,7 +13,7 @@ export type HttpMethod =
export function fetch(
url: string,
method: HttpMethod = 'HEAD',
method: HttpMethod = 'HEAD'
): Promise<Response> {
return nodeFetch(url, { method: method });
}

2
util/testHelpers.ts
View File

@ -1,6 +1,6 @@
export async function mockProvider(
provider: any,
query: unknown,
query: unknown
): Promise<string> {
const req = {
query,