feat: new uniqueness indicator

public/locales/en/translation.json

@@ -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?",

public/locales/ja/translation.json

@@ -29,9 +29,10 @@
     "firebase": "Firebase"
   },
   "uniqueness": {
-    "high": "とてもユニーク",
+    "high": "超ユニーク",
     "moderate": "そこそこユニーク",
-    "low": "あまりユニークではない"
+    "low": "普通",
+    "description": "UNIQ は名前がどれくらいユニークかを示しています（0から100）"
   },
   "countryCode": "jp",
   "try": "これはどう？",

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>
   );
 }

src/components/Form.tsx

@@ -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;

src/components/Suggestion.tsx

@@ -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: 'Montserrat', sans-serif;
-  font-family: inherit;
+  font-weight: 600;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
-  line-height: 1em;
   border-bottom: 1px dashed black;
   color: black;
   overflow: hidden;

src/components/Welcome.tsx

@@ -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>
+        {Object.keys(supportedProviders).map((key) => (
-          <FaMapSigns /> {t('providers.domains')}
+          <ListItem key={key}>
-        </ListItem>
+            {supportedProviders[key]} {t(`providers.${key}`)}
-        <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')}
           </ListItem>
+        ))}
       </HighlightedList>
     </Container>
   );

src/components/cards/core.tsx

@@ -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';

src/index.tsx

@@ -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';

src/util/css.ts

@@ -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);

src/util/i18n.ts

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