chore: cosmetic changes

2025-08-20 18:08:11 +09:00 · 2019-09-17 14:30:26 +09:00
parent 2438518e3c
commit 6c84493360
56 changed files with 724 additions and 729 deletions
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'react-i18next'
-import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+import {FaTwitter, FaGithubAlt} from 'react-icons/fa';

-import { ExternalLink } from './Links'
+import {ExternalLink} from './Links';

 export default function Footer() {
-  const { t } = useTranslation()
+  const {t} = useTranslation();

  return (
    <Container>
@@ -30,7 +30,7 @@ export default function Footer() {
          <ExternalLink
            aria-label="Tweet this page"
            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
-              `namae — ${t('title')}`
+              `namae — ${t('title')}`,
            )}&url=${encodeURIComponent('https://namae.dev')}`}>
            <FaTwitter />
          </ExternalLink>
@@ -50,7 +50,7 @@ export default function Footer() {
        </a>
      </Box>
    </Container>
-  )
+  );
 }

 const Container = styled.div`
@@ -66,7 +66,7 @@ const Container = styled.div`
    color: black;
    text-decoration: none;
  }
-`
+`;

 const Box = styled.footer`
  margin-bottom: 10px;
@@ -74,7 +74,7 @@ const Box = styled.footer`
  flex-direction: row;
  justify-content: center;
  line-height: 1em;
-`
+`;

 const Links = styled.div`
  margin-left: 15px;
@@ -84,8 +84,8 @@ const Links = styled.div`
  ${ExternalLink} {
    margin-right: 5px;
  }
-`
+`;

 const Bold = styled.span`
  font-weight: bold;
-`
+`;
--- a/web/src/components/Form.tsx
+++ b/web/src/components/Form.tsx
@@ -1,50 +1,50 @@
-import React, { useState, useRef, useEffect } from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'react-i18next'
+import React, {useState, useRef, useEffect} from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';

-import { useDeferredState } from '../util/hooks'
-import { mobile } from '../util/css'
+import {useDeferredState} from '../util/hooks';
+import {mobile} from '../util/css';

-import Suggestion from './Suggestion'
+import Suggestion from './Suggestion';

-const Form: React.FC<{ onQuery: (query: string) => void }> = ({ onQuery }) => {
-  const [query, setQuery] = useDeferredState(800, '')
-  const [inputValue, setInputValue] = useState('')
-  const [suggested, setSuggested] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const { t } = useTranslation()
+const Form: React.FC<{onQuery: (query: string) => void}> = ({onQuery}) => {
+  const [query, setQuery] = useDeferredState(800, '');
+  const [inputValue, setInputValue] = useState('');
+  const [suggested, setSuggested] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {t} = useTranslation();

  // set input value
  function onInputChange(e: React.FormEvent<HTMLInputElement>) {
-    const value = e.currentTarget.value
-    setInputValue(value)
+    const value = e.currentTarget.value;
+    setInputValue(value);
  }

  // clear input form and focus on it
  function onLogoClick(e: React.MouseEvent<HTMLDivElement>) {
-    setInputValue('')
-    inputRef.current!.focus()
+    setInputValue('');
+    inputRef.current!.focus();
  }

  // invoke when user clicked one of the suggested items
  function onSuggestionCompleted(name: string) {
-    setInputValue(name)
-    setSuggested(true)
+    setInputValue(name);
+    setSuggested(true);
  }

-  const queryGiven = query && query.length > 0
+  const queryGiven = query && query.length > 0;

  useEffect(() => {
    if (query.length === 0) {
-      setSuggested(false)
+      setSuggested(false);
    }
-    onQuery(query)
-  }, [query, onQuery])
+    onQuery(query);
+  }, [query, onQuery]);

  useEffect(() => {
-    const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '')
-    setQuery(modifiedValue)
-  }, [inputValue, setQuery])
+    const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '');
+    setQuery(modifiedValue);
+  }, [inputValue, setQuery]);

  return (
    <InputContainer>
@@ -60,10 +60,10 @@ const Form: React.FC<{ onQuery: (query: string) => void }> = ({ onQuery }) => {
        <Suggestion onSubmit={onSuggestionCompleted} query={query} />
      ) : null}
    </InputContainer>
-  )
-}
+  );
+};

-export default Form
+export default Form;

 const InputContainer = styled.div`
  transform: translateY(40px);
@@ -75,7 +75,7 @@ const InputContainer = styled.div`
  ${mobile} {
    transform: translateY(20px);
  }
-`
+`;

 const Logo = styled.div`
  margin-bottom: 5px;
@@ -89,7 +89,7 @@ const Logo = styled.div`
  ${mobile} {
    font-size: 15px;
  }
-`
+`;

 const InputView = styled.input.attrs({
  type: 'text',
@@ -109,4 +109,4 @@ const InputView = styled.input.attrs({
  ${mobile} {
    font-size: 2rem;
  }
-`
+`;
--- a/web/src/components/Icons.tsx
+++ b/web/src/components/Icons.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';

 export const SpectrumIcon = () => (
  <svg
@@ -11,7 +11,7 @@ export const SpectrumIcon = () => (
    xmlns="http://www.w3.org/2000/svg">
    <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 = () => (
  <svg
@@ -26,4 +26,4 @@ export const NowIcon = () => (
      <polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
    </g>
  </svg>
-)
+);
--- a/web/src/components/Links.tsx
+++ b/web/src/components/Links.tsx
@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled from 'styled-components';

 export const ExternalLink = styled.a.attrs({
  target: '_blank',
  rel: 'noopener noreferrer',
-})``
+})``;
--- a/web/src/components/Suggestion.tsx
+++ b/web/src/components/Suggestion.tsx
@@ -1,15 +1,15 @@
-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 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 { capitalize } from '../util/text'
-import { mobile } from '../util/css'
+import {capitalize} from '../util/text';
+import {mobile} from '../util/css';

-type Modifier = (word: string) => string
+type Modifier = (word: string) => string;

-const maximumCount = 3
+const maximumCount = 3;
 const modifiers: Modifier[] = [
  (word) => `${capitalize(word)}ify`,
  (word) => `lib${lower(word)}`,
@@ -43,98 +43,98 @@ const modifiers: Modifier[] = [
  (word) => `In${capitalize(word)}`,
  (word) => `Uni${lower(word)}`,
  (word) => `${capitalize(word)}`,
-]
+];

 function lower(word: string) {
-  return word.toLowerCase()
+  return word.toLowerCase();
 }

 function shuffleArray(array: any[]) {
  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;
 }

 function sampleFromArray(array: any[], maximum: number) {
-  return shuffleArray(array).slice(0, maximum)
+  return shuffleArray(array).slice(0, maximum);
 }

 function modifyWord(word: string) {
-  return modifiers[Math.floor(Math.random() * modifiers.length)](word)
+  return modifiers[Math.floor(Math.random() * modifiers.length)](word);
 }

 function fillArray(array: any[], filler: string, maximum: number) {
-  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;
 }

 async function findSynonyms(word: 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[]
-        )
-      )
-    ).filter((word) => !word.match(/[\s-]/))
-    return synonyms
+          [] as string[],
+        ),
+      ),
+    ).filter((word) => !word.match(/[\s-]/));
+    return synonyms;
  } catch (err) {
-    return []
+    return [];
  }
 }

 const Suggestion: React.FC<{
-  query: string
-  onSubmit: (name: string) => void
-}> = ({ query, onSubmit }) => {
-  const { t } = useTranslation()
-  const synonymRef = useRef<string[]>([])
-  const [bestWords, setBestWords] = useState<string[]>([])
+  query: string;
+  onSubmit: (name: string) => void;
+}> = ({query, onSubmit}) => {
+  const {t} = useTranslation();
+  const synonymRef = useRef<string[]>([]);
+  const [bestWords, setBestWords] = useState<string[]>([]);

  function shuffle() {
    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) {
-    onSubmit(name)
+    onSubmit(name);
  }

  useEffect(() => {
    const fn = async () => {
      if (query && query.length > 0) {
-        const synonyms = await findSynonyms(query)
-        synonymRef.current = synonyms
+        const synonyms = await findSynonyms(query);
+        synonymRef.current = synonyms;
        const best = fillArray(
          sampleFromArray(synonyms, maximumCount),
          query,
-          maximumCount
-        ).map((word) => modifyWord(word))
-        setBestWords(best)
+          maximumCount,
+        ).map((word) => modifyWord(word));
+        setBestWords(best);
      }
-    }
-    fn()
-  }, [query])
+    };
+    fn();
+  }, [query]);

  return (
    <Container>
@@ -151,10 +151,10 @@ const Suggestion: React.FC<{
        </Icon>
      </Items>
    </Container>
-  )
-}
+  );
+};

-export default Suggestion
+export default Suggestion;

 const Container = styled.div`
  margin-bottom: 10px;
@@ -163,7 +163,7 @@ const Container = styled.div`
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
-`
+`;

 const Title = styled.div`
  margin-top: 15px;
@@ -171,7 +171,7 @@ const Title = styled.div`
  color: gray;
  border: 1px solid gray;
  border-radius: 2em;
-`
+`;

 const Items = styled.div`
  margin-top: 2px;
@@ -184,7 +184,7 @@ const Items = styled.div`
    flex-direction: column;
    align-items: center;
  }
-`
+`;

 const Item = styled.div`
  margin-top: 8px;
@@ -198,10 +198,10 @@ const Item = styled.div`
  ${mobile} {
    margin-right: 0;
  }
-`
+`;

 const Icon = styled(Item)`
  display: flex;
  align-items: center;
  border-bottom: none;
-`
+`;
--- a/web/src/components/Welcome.tsx
+++ b/web/src/components/Welcome.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'react-i18next'
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';

 import {
  FaMapSigns,
@@ -15,15 +15,15 @@ import {
  FaAws,
  FaJsSquare,
  FaBuilding,
-} from 'react-icons/fa'
-import { IoIosBeer } from 'react-icons/io'
-import { DiRust, DiHeroku } from 'react-icons/di'
+} from 'react-icons/fa';
+import {IoIosBeer} from 'react-icons/io';
+import {DiRust, DiHeroku} from 'react-icons/di';

-import { SpectrumIcon, NowIcon } from './Icons'
-import { mobile } from '../util/css'
+import {SpectrumIcon, NowIcon} from './Icons';
+import {mobile} from '../util/css';

 export default function Welcome() {
-  const { t } = useTranslation()
+  const {t} = useTranslation();

  return (
    <Container>
@@ -88,7 +88,7 @@ export default function Welcome() {
        </ListItem>
      </List>
    </Container>
-  )
+  );
 }

 const Container = styled.div`
@@ -105,7 +105,7 @@ const Container = styled.div`
    padding-left: 40px;
    font-size: 1.2rem;
  }
-`
+`;

 const Header = styled.h1`
  font-size: 3.5em;
@@ -115,14 +115,14 @@ const Header = styled.h1`
  ${mobile} {
    font-size: 3em;
  }
-`
+`;

 const Text = styled.p`
  font-size: 1.2em;
  color: #3c3c3c;
-`
+`;

-const Hero = styled.div``
+const Hero = styled.div``;

 const List = styled.div`
  margin-top: 50px;
@@ -139,7 +139,7 @@ const List = styled.div`
  ${mobile} {
    flex-direction: column;
  }
-`
+`;

 const ListItem = styled.div`
  margin: 15px;
@@ -155,4 +155,4 @@ const ListItem = styled.div`
  svg {
    margin-right: 5px;
  }
-`
+`;
--- a/web/src/components/cards/AppStore.tsx
+++ b/web/src/components/cards/AppStore.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
-import useFetch from 'fetch-suspense'
-import { useTranslation } from 'react-i18next'
-import { FaAppStore, FaInfoCircle } from 'react-icons/fa'
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import {useTranslation} from 'react-i18next';
+import {FaAppStore, 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(
-    `/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 (
    <>
@@ -31,17 +31,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 AppStoreCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();

  return (
    <Card title={t('providers.appStore')}>
      <Search query={query} />
    </Card>
-  )
-}
+  );
+};

-export default AppStoreCard
+export default AppStoreCard;
--- a/web/src/components/cards/Cratesio.tsx
+++ b/web/src/components/cards/Cratesio.tsx
@@ -1,14 +1,14 @@
-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, Repeater, DedicatedAvailability } 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')}>
@@ -24,7 +24,7 @@ const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default CratesioCard
+export default CratesioCard;
--- a/web/src/components/cards/Domains.tsx
+++ b/web/src/components/cards/Domains.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { FaMapSigns } from 'react-icons/fa'
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaMapSigns} from 'react-icons/fa';

-import { Card, Repeater, DedicatedAvailability } from './core'
+import {Card, Repeater, DedicatedAvailability} from './core';

-const DomainCard: React.FC<{ query: string }> = ({ query }) => {
-  const { t } = useTranslation()
-  const lowerCase = query.toLowerCase()
+const DomainCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [`${lowerCase}.com`, `${lowerCase}.app`]
+  const names = [`${lowerCase}.com`, `${lowerCase}.app`];
  const moreNames = [
    `${lowerCase}app.com`,
    `get${lowerCase}.com`,
    `${lowerCase}.dev`,
    `${lowerCase}.io`,
    `${lowerCase}.tools`,
-  ]
+  ];

  return (
    <Card title={t('providers.domains')}>
@@ -31,7 +31,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default DomainCard
+export default DomainCard;
--- a/web/src/components/cards/GitHubRepository.tsx
+++ b/web/src/components/cards/GitHubRepository.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { FaGithub } from 'react-icons/fa'
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaGithub} from 'react-icons/fa';

-import { Card, Repeater, DedicatedAvailability } from './core'
+import {Card, Repeater, DedicatedAvailability} from './core';

-const GithubCard: React.FC<{ query: string }> = ({ query }) => {
-  const { t } = useTranslation()
-  const lowerCase = query.toLowerCase()
+const GithubCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [query]
+  const names = [query];
  const moreNames = [
    `${lowerCase}hq`,
    `${lowerCase}-team`,
    `${lowerCase}-org`,
    `${lowerCase}-js`,
-  ]
+  ];

  return (
    <Card title={t('providers.github')}>
@@ -34,7 +34,7 @@ const GithubCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default GithubCard
+export default GithubCard;
--- a/web/src/components/cards/GitHubSearch.tsx
+++ b/web/src/components/cards/GitHubSearch.tsx
@@ -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;
--- a/web/src/components/cards/Heroku.tsx
+++ b/web/src/components/cards/Heroku.tsx
@@ -1,14 +1,14 @@
-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 lowerCase = query.toLowerCase()
+const HerokuCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [lowerCase]
+  const names = [lowerCase];

  return (
    <Card title={t('providers.heroku')}>
@@ -24,7 +24,7 @@ const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default HerokuCard
+export default HerokuCard;
--- a/web/src/components/cards/Homebrew.tsx
+++ b/web/src/components/cards/Homebrew.tsx
@@ -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')}>
@@ -38,7 +38,7 @@ const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default HomebrewCard
+export default HomebrewCard;
--- a/web/src/components/cards/JsOrg.tsx
+++ b/web/src/components/cards/JsOrg.tsx
@@ -1,14 +1,14 @@
-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 lowerCase = query.toLowerCase()
+const JsOrgCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [lowerCase]
+  const names = [lowerCase];

  return (
    <Card title={t('providers.jsorg')}>
@@ -26,7 +26,7 @@ const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default JsOrgCard
+export default JsOrgCard;
--- a/web/src/components/cards/Linux.tsx
+++ b/web/src/components/cards/Linux.tsx
@@ -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')}>
@@ -32,7 +32,7 @@ const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default LinuxCard
+export default LinuxCard;
--- a/web/src/components/cards/Now.tsx
+++ b/web/src/components/cards/Now.tsx
@@ -1,14 +1,14 @@
-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 NowCard: React.FC<{ query: string }> = ({ query }) => {
-  const { t } = useTranslation()
-  const lowerCase = query.toLowerCase()
+const NowCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [lowerCase]
+  const names = [lowerCase];

  return (
    <Card title={t('providers.now')}>
@@ -24,7 +24,7 @@ const NowCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default NowCard
+export default NowCard;
--- a/web/src/components/cards/Npm.tsx
+++ b/web/src/components/cards/Npm.tsx
@@ -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]
-  const moreNames = [`${lowerCase}-js`]
+  const names = [lowerCase];
+  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;
--- a/web/src/components/cards/Nta.tsx
+++ b/web/src/components/cards/Nta.tsx
@@ -1,17 +1,17 @@
-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(`/availability/nta/${term}`) as {
-    result: Array<{ name: string; phoneticName: string }>
-  }
-  const apps = response.result
+    result: Array<{name: string; phoneticName: string}>;
+  };
+  const apps = response.result;

  return (
    <>
@@ -28,17 +28,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;
--- a/web/src/components/cards/RubyGems.tsx
+++ b/web/src/components/cards/RubyGems.tsx
@@ -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')}>
@@ -27,7 +27,7 @@ const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default RubyGemsCard
+export default RubyGemsCard;
--- a/web/src/components/cards/S3.tsx
+++ b/web/src/components/cards/S3.tsx
@@ -1,14 +1,14 @@
-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 lowerCase = query.toLowerCase()
+const S3Card: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [lowerCase]
+  const names = [lowerCase];

  return (
    <Card title={t('providers.s3')}>
@@ -28,7 +28,7 @@ const S3Card: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default S3Card
+export default S3Card;
--- a/web/src/components/cards/Slack.tsx
+++ b/web/src/components/cards/Slack.tsx
@@ -1,14 +1,14 @@
-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 lowerCase = query.toLowerCase()
+const SlackCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();

-  const names = [lowerCase]
+  const names = [lowerCase];

  return (
    <Card title={t('providers.slack')}>
@@ -27,7 +27,7 @@ const SlackCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default SlackCard
+export default SlackCard;
--- a/web/src/components/cards/Spectrum.tsx
+++ b/web/src/components/cards/Spectrum.tsx
@@ -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;
--- a/web/src/components/cards/Twitter.tsx
+++ b/web/src/components/cards/Twitter.tsx
@@ -1,16 +1,16 @@
-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 lowerCase = query.toLowerCase()
-  const capitalCase = capitalize(query)
+const TwitterCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+  const capitalCase = capitalize(query);

-  const names = [query]
+  const names = [query];
  const moreNames = [
    `${lowerCase}app`,
    `hey${lowerCase}`,
@@ -18,7 +18,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
    `${capitalCase}HQ`,
    `${lowerCase}_official`,
    `${lowerCase}-support`,
-  ]
+  ];

  return (
    <Card title={t('providers.twitter')}>
@@ -36,7 +36,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
        )}
      </Repeater>
    </Card>
-  )
-}
+  );
+};

-export default TwitterCard
+export default TwitterCard;
--- a/web/src/components/cards/core.tsx
+++ b/web/src/components/cards/core.tsx
@@ -1,22 +1,22 @@
-import React, { useState, useEffect, Suspense } from 'react'
-import styled from 'styled-components'
-import useFetch from 'fetch-suspense'
-import { Tooltip } from 'react-tippy'
-import 'react-tippy/dist/tippy.css'
-import BarLoader from 'react-spinners/BarLoader'
-import { GoInfo } from 'react-icons/go'
-import { useTranslation } from 'react-i18next'
+import React, {useState, useEffect, Suspense} from 'react';
+import styled from 'styled-components';
+import useFetch from 'fetch-suspense';
+import {Tooltip} from 'react-tippy';
+import 'react-tippy/dist/tippy.css';
+import BarLoader from 'react-spinners/BarLoader';
+import {GoInfo} from 'react-icons/go';
+import {useTranslation} from 'react-i18next';

-import { mobile } from '../../util/css'
-import { ExternalLink } from '../Links'
+import {mobile} from '../../util/css';
+import {ExternalLink} from '../Links';

 const COLORS = {
  available: '#6e00ff',
  unavailable: 'darkgrey',
  error: '#ff388b',
-}
+};

-export const Card: React.FC<{ title: string }> = ({ title, children }) => {
+export const Card: React.FC<{title: string}> = ({title, children}) => {
  return (
    <CardContainer>
      <CardTitle>{title}</CardTitle>
@@ -33,24 +33,24 @@ export const Card: React.FC<{ title: string }> = ({ title, children }) => {
        </ErrorBoundary>
      </CardContent>
    </CardContainer>
-  )
-}
+  );
+};

 export const Repeater: React.FC<{
-  items: string[]
-  moreItems?: string[]
-  children: (name: string) => React.ReactNode
-}> = ({ items = [], moreItems = [], children }) => {
-  const [revealAlternatives, setRevealAlternatives] = useState(false)
-  const { t } = useTranslation()
+  items: string[];
+  moreItems?: string[];
+  children: (name: string) => React.ReactNode;
+}> = ({items = [], moreItems = [], children}) => {
+  const [revealAlternatives, setRevealAlternatives] = useState(false);
+  const {t} = useTranslation();

  function onClick() {
-    setRevealAlternatives(true)
+    setRevealAlternatives(true);
  }

  useEffect(() => {
-    setRevealAlternatives(false)
-  }, [items, moreItems])
+    setRevealAlternatives(false);
+  }, [items, moreItems]);

  return (
    <>
@@ -67,25 +67,25 @@ export const Repeater: React.FC<{
        <Button onClick={onClick}>{t('showMore')}</Button>
      ) : null}
    </>
-  )
-}
+  );
+};

 interface Response {
-  error?: string
-  availability: boolean
+  error?: string;
+  availability: boolean;
 }

 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,
@@ -99,11 +99,11 @@ export const DedicatedAvailability: React.FC<{
  icon,
 }) => {
  const response = useFetch(
-    `/availability/${service}/${encodeURIComponent(query || name)}`
-  ) as Response
+    `/availability/${service}/${encodeURIComponent(query || name)}`,
+  ) as Response;

  if (response.error) {
-    throw new Error(`${service}: ${response.error}`)
+    throw new Error(`${service}: ${response.error}`);
  }

  return (
@@ -116,19 +116,19 @@ export const DedicatedAvailability: React.FC<{
      prefix={prefix}
      suffix={suffix}
    />
-  )
-}
+  );
+};

 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 = '',
@@ -140,13 +140,13 @@ export const ExistentialAvailability: React.FC<{
  suffix = '',
  icon,
 }) => {
-  const response = useFetch(target, undefined, { metadata: true })
+  const response = useFetch(target, undefined, {metadata: true});

  if (response.status !== 404 && response.status !== 200) {
-    throw new Error(`${name}: ${response.status}`)
+    throw new Error(`${name}: ${response.status}`);
  }

-  const availability = response.status === 404
+  const availability = response.status === 404;

  return (
    <Result
@@ -158,17 +158,17 @@ export const ExistentialAvailability: React.FC<{
      prefix={prefix}
      suffix={suffix}
    />
-  )
-}
+  );
+};

 export const Result: React.FC<{
-  title: string
-  message?: string
-  link?: string
-  icon: React.ReactNode
-  color?: string
-  prefix?: string
-  suffix?: string
+  title: string;
+  message?: string;
+  link?: string;
+  icon: React.ReactNode;
+  color?: string;
+  prefix?: string;
+  suffix?: string;
 }> = ({
  title,
  message = '',
@@ -184,7 +184,7 @@ export const Result: React.FC<{
      {title}
      {suffix}
    </>
-  )
+  );
  return (
    <ResultContainer>
      <Tooltip
@@ -205,20 +205,20 @@ export const Result: React.FC<{
        </ResultItem>
      </Tooltip>
    </ResultContainer>
-  )
-}
+  );
+};

 class ErrorBoundary extends React.Component<
  {},
-  { hasError: boolean; message: string }
+  {hasError: boolean; message: string}
 > {
  constructor(props: {}) {
-    super(props)
-    this.state = { hasError: false, message: '' }
+    super(props);
+    this.state = {hasError: false, message: ''};
  }

  static getDerivedStateFromError(error: Error) {
-    return { hasError: true, message: error.message }
+    return {hasError: true, message: error.message};
  }

  render() {
@@ -239,13 +239,13 @@ class ErrorBoundary extends React.Component<
            </ResultItem>
          </ResultContainer>
        </Tooltip>
-      )
+      );
    }
-    return this.props.children
+    return this.props.children;
  }
 }

-const CellError: React.FC = ({ children }) => (
+const CellError: React.FC = ({children}) => (
  <ErrorBoundary>
    <Suspense
      fallback={
@@ -256,7 +256,7 @@ const CellError: React.FC = ({ children }) => (
      {children}
    </Suspense>
  </ErrorBoundary>
-)
+);

 const CardContainer = styled.div`
  padding: 40px;
@@ -265,7 +265,7 @@ const CardContainer = styled.div`
    margin-bottom: 40px;
    padding: 0px;
  }
-`
+`;

 const CardTitle = styled.div`
  margin-bottom: 15px;
@@ -275,7 +275,7 @@ const CardTitle = styled.div`
  ${mobile} {
    padding-left: 20px;
  }
-`
+`;

 const CardContent = styled.div`
  border-radius: 2px;
@@ -286,7 +286,7 @@ const CardContent = styled.div`
    background: white;
    border-radius: 0;
  }
-`
+`;

 const Button = styled.div`
  margin-top: 5px;
@@ -297,25 +297,25 @@ const Button = styled.div`
  cursor: pointer;
  font-family: monospace;
  font-size: 0.8em;
-`
+`;

 const ResultContainer = styled.div`
  display: flex;
  align-items: center;
  margin-top: 8px;
-`
+`;

 const ResultIcon = styled.div`
  width: 1em;
-`
+`;

 const ResultItem = styled.div`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  word-break: break-all;
-  color: ${({ color }) => color};
-`
+  color: ${({color}) => color};
+`;

 const ResultName = styled.div`
  margin-left: 6px;
@@ -327,4 +327,4 @@ const ResultName = styled.div`
    text-decoration: none;
    color: inherit;
  }
-`
+`;
--- a/web/src/components/cards/index.tsx
+++ b/web/src/components/cards/index.tsx
@@ -1,31 +1,31 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'react-i18next'
+import React from 'react';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';

-import { mobile } from '../../util/css'
-import DomainCard from './Domains'
-import GithubCard from './GitHubRepository'
-import NpmCard from './Npm'
-import PypiCard from './PyPI'
-import RubyGemsCard from './RubyGems'
-import CratesioCard from './Cratesio'
-import HomebrewCard from './Homebrew'
-import LinuxCard from './Linux'
-import TwitterCard from './Twitter'
-import SpectrumCard from './Spectrum'
-import SlackCard from './Slack'
-import S3Card from './S3'
-import JsOrgCard from './JsOrg'
-import GithubSearchCard from './GitHubSearch'
-import AppStoreCard from './AppStore'
-import HerokuCard from './Heroku'
-import NowCard from './Now'
-import NtaCard from './Nta'
+import {mobile} from '../../util/css';
+import DomainCard from './Domains';
+import GithubCard from './GitHubRepository';
+import NpmCard from './Npm';
+import PypiCard from './PyPI';
+import RubyGemsCard from './RubyGems';
+import CratesioCard from './Cratesio';
+import HomebrewCard from './Homebrew';
+import LinuxCard from './Linux';
+import TwitterCard from './Twitter';
+import SpectrumCard from './Spectrum';
+import SlackCard from './Slack';
+import S3Card from './S3';
+import JsOrgCard from './JsOrg';
+import GithubSearchCard from './GitHubSearch';
+import AppStoreCard from './AppStore';
+import HerokuCard from './Heroku';
+import NowCard from './Now';
+import NtaCard from './Nta';

-const Index: React.FC<{ query: string }> = ({ query }) => {
+const Index: React.FC<{query: string}> = ({query}) => {
  const {
-    i18n: { language },
-  } = useTranslation()
+    i18n: {language},
+  } = useTranslation();

  return (
    <>
@@ -52,10 +52,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;
@@ -66,4 +66,4 @@ const Cards = styled.div`
  ${mobile} {
    flex-direction: column;
  }
-`
+`;