mirror of
https://github.com/uetchy/namae.git
synced 2025-08-20 09:58:13 +09:00
style: prettier
This commit is contained in:
@@ -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,
|
||||
);
|
||||
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
|
||||
|
||||
@@ -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>
|
||||
@@ -120,7 +120,7 @@ const About = () => {
|
||||
<Links>
|
||||
<OutboundLink
|
||||
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
||||
`namae — ${t('title')}`,
|
||||
`namae — ${t('title')}`
|
||||
)}&url=${encodeURIComponent('https://namae.dev')}`}
|
||||
eventLabel="Tweet"
|
||||
aria-label="Tweet this page"
|
||||
@@ -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;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
)
|
||||
|
||||
@@ -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,83 +144,83 @@ 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[]> {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
|
||||
word,
|
||||
)}`,
|
||||
);
|
||||
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(
|
||||
(sum, synset) => [...sum, ...synset.entry.map((e) => e.synonym[0])],
|
||||
[] as string[],
|
||||
),
|
||||
),
|
||||
[] as 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);
|
||||
maximumCount
|
||||
).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;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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;
|
||||
`/api/services/${service}/${encodeURIComponent(query || name)}`
|
||||
) 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;
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
||||
@@ -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')}`,
|
||||
`/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
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {DiRust} from 'react-icons/di';
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { DiRust } from 'react-icons/di'
|
||||
import { Card, DedicatedAvailability, Repeater } from '../core'
|
||||
|
||||
import {Card, Repeater, DedicatedAvailability} from '../core';
|
||||
const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
const { t } = useTranslation()
|
||||
const lowerCase = query.toLowerCase()
|
||||
|
||||
const CratesioCard: React.FC<{query: string}> = ({query}) => {
|
||||
const {t} = useTranslation();
|
||||
const lowerCase = query.toLowerCase();
|
||||
|
||||
const names = [lowerCase];
|
||||
const names = [lowerCase]
|
||||
|
||||
return (
|
||||
<Card title={t('providers.rust')}>
|
||||
@@ -25,7 +24,7 @@ const CratesioCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default CratesioCard;
|
||||
export default CratesioCard
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
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 DomainCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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)))
|
||||
@@ -20,8 +18,8 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
|
||||
(m) =>
|
||||
lowerCase.substring(0, m.index + 1) +
|
||||
'.' +
|
||||
lowerCase.substring(m.index + 1),
|
||||
);
|
||||
lowerCase.substring(m.index + 1)
|
||||
)
|
||||
|
||||
const names = [
|
||||
`${lowerCase}.com`,
|
||||
@@ -31,7 +29,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
|
||||
`${lowerCase}.org`,
|
||||
`${lowerCase}.io`,
|
||||
...domainHackSuggestions,
|
||||
];
|
||||
]
|
||||
const moreNames = [
|
||||
`${lowerCase}.sh`,
|
||||
`${lowerCase}.tools`,
|
||||
@@ -44,7 +42,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
|
||||
`${lowerCase}.info`,
|
||||
`${lowerCase}.biz`,
|
||||
`${lowerCase}.website`,
|
||||
];
|
||||
]
|
||||
|
||||
return (
|
||||
<Card title={t('providers.domains')}>
|
||||
@@ -60,7 +58,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainCard;
|
||||
export default DomainCard
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -29,7 +27,7 @@ const FirebaseCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default FirebaseCard;
|
||||
export default FirebaseCard
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {FaGithub} from 'react-icons/fa';
|
||||
|
||||
import {Card, Repeater, DedicatedAvailability} 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 moreNames = [
|
||||
@@ -32,7 +31,7 @@ const GithubCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default GithubCard;
|
||||
export default GithubCard
|
||||
|
||||
@@ -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 Search: React.FC<{ query: string }> = ({ query }) => {
|
||||
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}`,
|
||||
`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 GithubSearchCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Card title={t('providers.githubSearch')}>
|
||||
<Search query={query} />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default GithubSearchCard;
|
||||
export default GithubSearchCard
|
||||
|
||||
@@ -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 GitLabCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 HerokuCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -28,7 +26,7 @@ const HerokuCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default HerokuCard;
|
||||
export default HerokuCard
|
||||
|
||||
@@ -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 HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -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 InstagramCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -30,7 +28,7 @@ const JsOrgCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default JsOrgCard;
|
||||
export default JsOrgCard
|
||||
|
||||
@@ -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 LinuxCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -28,7 +26,7 @@ const NetlifyCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default NetlifyCard;
|
||||
export default NetlifyCard
|
||||
|
||||
@@ -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 NpmCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -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 Search: React.FC<{ query: string }> = ({ query }) => {
|
||||
const { t } = useTranslation()
|
||||
const term = encodeURIComponent(query)
|
||||
const response = useFetch(`/api/services/nta/${term}`) as {
|
||||
result: Array<{name: string; phoneticName: string}>;
|
||||
};
|
||||
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 NtaCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Card title={t('providers.nta')}>
|
||||
<Search query={query} />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default NtaCard;
|
||||
export default NtaCard
|
||||
|
||||
@@ -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 OcamlCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -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 PypiCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -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 RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 S3Card: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -30,7 +28,7 @@ const S3Card: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default S3Card;
|
||||
export default S3Card
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 SlackCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -31,7 +29,7 @@ const SlackCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default SlackCard;
|
||||
export default SlackCard
|
||||
|
||||
@@ -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 SpectrumCard: React.FC<{ query: string }> = ({ 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
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
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 TwitterCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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`,
|
||||
@@ -22,7 +20,7 @@ const TwitterCard: React.FC<{query: string}> = ({query}) => {
|
||||
`${lowerCase}_org`,
|
||||
`${lowerCase}_app`,
|
||||
`${capitalCase}JS`,
|
||||
];
|
||||
]
|
||||
|
||||
return (
|
||||
<Card title={t('providers.twitter')}>
|
||||
@@ -39,7 +37,7 @@ const TwitterCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default TwitterCard;
|
||||
export default TwitterCard
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
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 VercelCard: React.FC<{ query: string }> = ({ query }) => {
|
||||
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')}>
|
||||
@@ -39,7 +37,7 @@ const VercelCard: React.FC<{query: string}> = ({query}) => {
|
||||
)}
|
||||
</Repeater>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default VercelCard;
|
||||
export default VercelCard
|
||||
|
||||
Reference in New Issue
Block a user