mirror of
https://github.com/uetchy/namae.git
synced 2025-07-01 22:10:04 +09:00
feat: new uniqueness indicator
This commit is contained in:
parent
8f3716b4d5
commit
2bb631ee7e
@ -31,7 +31,8 @@
|
||||
"uniqueness": {
|
||||
"high": "Pretty unique",
|
||||
"moderate": "Moderately unique",
|
||||
"low": "Not so unique"
|
||||
"low": "Typical",
|
||||
"description": "UNIQ shows how unique the name is (0 to 100)"
|
||||
},
|
||||
"countryCode": "us",
|
||||
"try": "How about this?",
|
||||
|
||||
@ -29,9 +29,10 @@
|
||||
"firebase": "Firebase"
|
||||
},
|
||||
"uniqueness": {
|
||||
"high": "とてもユニーク",
|
||||
"high": "超ユニーク",
|
||||
"moderate": "そこそこユニーク",
|
||||
"low": "あまりユニークではない"
|
||||
"low": "普通",
|
||||
"description": "UNIQ は名前がどれくらいユニークかを示しています（0から100）"
|
||||
},
|
||||
"countryCode": "jp",
|
||||
"try": "これはどう？",
|
||||
|
||||
13
src/App.tsx
13
src/App.tsx
@ -4,6 +4,7 @@ import {Helmet} from 'react-helmet';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {Switch, Route, useParams, Redirect} from 'react-router-dom';
|
||||
import {IoIosRocket, IoIosFlash} from 'react-icons/io';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
|
||||
import Welcome from './components/Welcome';
|
||||
import Form from './components/Form';
|
||||
@ -110,7 +111,7 @@ function Stat() {
|
||||
const availableCount = useStoreState((state) => state.stats.availableCount);
|
||||
const {t} = useTranslation();
|
||||
|
||||
const uniqueness = availableCount / totalCount;
|
||||
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
|
||||
const uniquenessText = ((n) => {
|
||||
if (n > 0.7 && n <= 1.0) {
|
||||
return t('uniqueness.high');
|
||||
@ -123,7 +124,15 @@ function Stat() {
|
||||
|
||||
return (
|
||||
<UniquenessIndicator>
|
||||
{uniquenessText} ({uniqueness.toFixed(2)})
|
||||
<Tooltip
|
||||
overlay={t('uniqueness.description')}
|
||||
placement="top"
|
||||
trigger={['hover']}
|
||||
>
|
||||
<span>
|
||||
{uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ)
|
||||
</span>
|
||||
</Tooltip>
|
||||
</UniquenessIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
@ -129,7 +129,7 @@ const InputView = styled.input.attrs({
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
font-family: 'Montserrat', monospace;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 6rem;
|
||||
appearance: none;
|
||||
|
||||
@ -285,11 +285,11 @@ const Items = styled.div`
|
||||
|
||||
const Item = styled.div<{delay: number}>`
|
||||
margin: 10px 10px 0;
|
||||
padding-bottom: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-family: inherit;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1em;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px dashed black;
|
||||
color: black;
|
||||
overflow: hidden;
|
||||
|
||||
@ -26,6 +26,32 @@ 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 />,
|
||||
github: <FaGithub />,
|
||||
gitlab: <FaGitlab />,
|
||||
npm: <FaNpm />,
|
||||
rust: <DiRust />,
|
||||
pypi: <FaPython />,
|
||||
rubygems: <FaGem />,
|
||||
ocaml: <OcamlIcon />,
|
||||
homebrew: <IoIosBeer />,
|
||||
linux: <FaLinux />,
|
||||
twitter: <FaTwitter />,
|
||||
instagram: <FaInstagram />,
|
||||
spectrum: <SpectrumIcon />,
|
||||
slack: <FaSlack />,
|
||||
heroku: <DiHeroku />,
|
||||
now: <NowIcon />,
|
||||
netlify: <NetlifyIcon />,
|
||||
s3: <FaAws />,
|
||||
firebase: <DiFirebase />,
|
||||
jsorg: <FaJsSquare />,
|
||||
githubSearch: <FaGithub />,
|
||||
appStore: <FaAppStore />,
|
||||
nta: <FaBuilding />,
|
||||
};
|
||||
|
||||
const Welcome: React.FC = () => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
@ -45,75 +71,11 @@ const Welcome: React.FC = () => {
|
||||
</ButtonContainer>
|
||||
</Hero>
|
||||
<HighlightedList>
|
||||
<ListItem>
|
||||
<FaMapSigns /> {t('providers.domains')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaGithub /> {t('providers.github')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaGitlab /> {t('providers.gitlab')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaNpm /> {t('providers.npm')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<DiRust /> {t('providers.rust')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaPython /> {t('providers.pypi')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaGem /> {t('providers.rubygems')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<OcamlIcon /> {t('providers.ocaml')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<IoIosBeer /> {t('providers.homebrew')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaLinux /> {t('providers.linux')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaTwitter /> {t('providers.twitter')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaInstagram /> {t('providers.instagram')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<SpectrumIcon /> {t('providers.spectrum')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaSlack /> {t('providers.slack')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<DiHeroku /> {t('providers.heroku')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<NowIcon /> {t('providers.now')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<NetlifyIcon /> {t('providers.netlify')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaAws /> {t('providers.s3')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<DiFirebase /> {t('providers.firebase')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaJsSquare /> {t('providers.jsorg')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaGithub /> {t('providers.githubSearch')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaAppStore /> {t('providers.appStore')}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<FaBuilding /> {t('providers.nta')}
|
||||
{Object.keys(supportedProviders).map((key) => (
|
||||
<ListItem key={key}>
|
||||
{supportedProviders[key]} {t(`providers.${key}`)}
|
||||
</ListItem>
|
||||
))}
|
||||
</HighlightedList>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@ -2,7 +2,6 @@ import React, {useState, useEffect, Suspense} from 'react';
|
||||
import styled from 'styled-components';
|
||||
import useFetch from 'fetch-suspense';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
import 'rc-tooltip/assets/bootstrap.css';
|
||||
import BarLoader from 'react-spinners/BarLoader';
|
||||
import {GoInfo} from 'react-icons/go';
|
||||
import {IoIosFlash} from 'react-icons/io';
|
||||
|
||||
@ -4,7 +4,9 @@ import {Router} from 'react-router-dom';
|
||||
import {StoreProvider} from 'easy-peasy';
|
||||
import {createBrowserHistory} from 'history';
|
||||
import {ToastContainer, toast} from 'react-toastify';
|
||||
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import 'rc-tooltip/assets/bootstrap.css';
|
||||
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
@ -4,7 +4,7 @@ export const mobile = '@media screen and (max-width: 800px)';
|
||||
|
||||
export const slideUp = keyframes`
|
||||
from {
|
||||
transform: translateY(150%) skewY(10deg);
|
||||
transform: translateY(200%) skewY(10deg);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) skewY(0);
|
||||
|
||||
@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
import {initReactI18next} from 'react-i18next';
|
||||
|
||||
const TRANSLATION_VERSION = '1.16';
|
||||
const TRANSLATION_VERSION = '1.17';
|
||||
|
||||
i18n
|
||||
.use(Backend)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user