1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-16 20:20:38 +09:00

feat: refine footer

This commit is contained in:
uetchy 2020-07-30 13:47:28 +09:00
parent 04725d0a65
commit 0d632a8eb2
7 changed files with 387 additions and 244 deletions

View File

@ -1,206 +1,35 @@
import Tooltip from 'rc-tooltip';
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { IoIosFlash, IoIosRocket } from 'react-icons/io';
import { Redirect, Route, Switch, useParams } from 'react-router-dom';
import styled, { createGlobalStyle } from 'styled-components';
import Cards from './components/cards';
import {
AvailableIcon,
COLORS as ResultColor,
ResultIcon,
ResultItem,
ResultName,
} from './components/cards/core';
import { Redirect, Route, Switch } from 'react-router-dom';
import Footer from './components/Footer';
import Form from './components/Form';
import Welcome from './components/Welcome';
import { useStoreState } from './store';
import { mobile } from './util/css';
import Home from './pages/Home';
import Search from './pages/Search';
import { GlobalStyle } from './theme';
import { useOpenSearch } from './util/hooks';
import { isStandalone } from './util/pwa';
import { sanitize } from './util/text';
export default function App() {
const OpenSearch = useOpenSearch('/opensearch.xml');
return (
<>
<GlobalStyle />
<Helmet>
<link
rel="search"
type="application/opensearchdescription+xml"
title="namae"
href="/opensearch.xml"
/>
</Helmet>
<OpenSearch />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/s/:query">
<Search />
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Switch>
{!isStandalone() && <Footer />}
</>
);
}
function Home() {
const { t } = useTranslation();
return (
<>
<Helmet>
<title>namae {t('title')}</title>
</Helmet>
<Header>
<Form />
</Header>
<Content>
<Welcome />
</Content>
</>
);
}
function Search() {
const { query } = useParams<{ query: string }>();
const currentQuery = sanitize(query);
const { t } = useTranslation();
return (
<>
<Helmet>
<title>Search for &quot;{currentQuery}&quot; namae</title>
</Helmet>
<Header>
<Form initialValue={currentQuery} />
</Header>
<Content>
<Legend>
<Stat />
<ResultItem color={ResultColor.available}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('available')}</ResultName>
<AvailableIcon>
<IoIosFlash />
</AvailableIcon>
</ResultItem>
<ResultItem color={ResultColor.unavailable}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('unavailable')}</ResultName>
</ResultItem>
</Legend>
<Cards query={currentQuery} />
</Content>
</>
);
}
function Stat() {
const totalCount = useStoreState((state) => state.stats.totalCount);
const availableCount = useStoreState((state) => state.stats.availableCount);
const { t } = useTranslation();
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
const uniquenessText = ((n) => {
if (n > 0.7 && n <= 1.0) {
return t('uniqueness.high');
} else if (n > 0.4 && n <= 0.7) {
return t('uniqueness.moderate');
} else {
return t('uniqueness.low');
}
})(uniqueness);
return (
<UniquenessIndicator>
<Tooltip
overlay={t('uniqueness.description')}
placement="top"
trigger={['hover']}>
<span>
{uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ)
</span>
</Tooltip>
</UniquenessIndicator>
);
}
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
line-height: 1.625em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
}
`;
const Content = styled.div`
padding-top: 100px;
${mobile} {
padding-top: 60px;
}
`;
const Header = styled.header`
padding: 0 40px;
background-image: linear-gradient(180deg, #bda2ff 0%, #1b24cc 99%);
${mobile} {
padding: 0 20px;
}
`;
const Legend = styled.div`
margin-top: -100px;
padding: 100px 0 30px;
display: flex;
flex-direction: row;
justify-content: center;
user-select: none;
cursor: default;
background-color: #f6f6fa;
${mobile} {
flex-direction: column;
align-items: center;
margin-top: -80px;
padding: 70px 0 30px;
background-color: none;
}
> * {
margin: 0 10px 0;
}
`;
const UniquenessIndicator = styled.div`
color: #7b7b7b;
`;

View File

@ -2,27 +2,72 @@ 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 { mobile } from '../util/css';
const Footer: React.FC = () => {
const { t } = useTranslation();
return (
<Container>
<LangBox>
<a href="/?lng=en">
<span role="img" aria-label="English">
🇬🇧
</span>
</a>
<a href="/?lng=ja">
<span role="img" aria-label="Japanese">
🇯🇵
</span>
</a>
</LangBox>
<Pane>
<Title>Language</Title>
<LangBox>
<Links>
<a href="/?lng=en">
<span role="img" aria-label="English">
🇬🇧
</span>
</a>
<a href="/?lng=ja">
<span role="img" aria-label="Japanese">
🇯🇵
</span>
</a>
</Links>
</LangBox>
</Pane>
<Box>
<Pane>
<Title>Community</Title>
<ul>
<li>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
GitHub
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://github.com/uetchy/namae/issues"
eventLabel="GitHub Issues"
aria-label="Go to GitHub Issues"
target="_blank"
>
Issues
</OutboundLink>
</li>
<li>
<OutboundLink
to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
eventLabel="Blog article"
aria-label="Go to blog"
target="_blank"
>
Blog Article
</OutboundLink>
</li>
</ul>
</Pane>
<Pane>
<Title>About</Title>
<p>
Made with{' '}
<span role="img" aria-label="coffee">
@ -33,74 +78,109 @@ const Footer: React.FC = () => {
to="https://twitter.com/uechz"
eventLabel="Author Page"
aria-label="Author page"
target="_blank">
target="_blank"
>
<Bold>Yasuaki Uechi</Bold>
</OutboundLink>
</p>
</Box>
<ShareBox>
<Links>
<OutboundLink
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`,
)}&url=${encodeURIComponent('https://namae.dev')}`}
eventLabel="Tweet"
aria-label="Tweet this page"
target="_blank">
<FaTwitter />
</OutboundLink>
<OutboundLink
to="https://www.producthunt.com/posts/namae"
eventLabel="ProductHunt"
aria-label="Go to ProductHunt page"
target="_blank">
<FaProductHunt />
</OutboundLink>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank">
<FaGithub />
</OutboundLink>
</Links>
</ShareBox>
<ShareBox>
<Links>
<OutboundLink
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`,
)}&url=${encodeURIComponent('https://namae.dev')}`}
eventLabel="Tweet"
aria-label="Tweet this page"
target="_blank"
>
<FaTwitter />
</OutboundLink>
<OutboundLink
to="https://www.producthunt.com/posts/namae"
eventLabel="ProductHunt"
aria-label="Go to ProductHunt page"
target="_blank"
>
<FaProductHunt />
</OutboundLink>
<OutboundLink
to="https://github.com/uetchy/namae"
eventLabel="GitHub Repo"
aria-label="Go to GitHub repository"
target="_blank"
>
<FaGithub />
</OutboundLink>
<OutboundLink
to="https://github.com/sponsors/uetchy"
eventLabel="GitHub Sponsors"
aria-label="Go to GitHub Sponsors"
target="_blank"
>
<SponsorBadge>
<GoHeart size="1.3rem" />
<span>Sponsor</span>
</SponsorBadge>
</OutboundLink>
</Links>
</ShareBox>
</Pane>
</Container>
);
};
export default Footer;
const Container = styled.div`
const Container = styled(Section)`
--text: #bdbdbd;
--background: #404040;
display: flex;
flex-direction: column;
align-items: center;
margin: 40px 0;
flex-direction: row;
justify-content: space-around;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: var(--background);
color: var(--text);
a {
color: black;
color: var(--text);
text-decoration: none;
}
ul {
li {
list-style-type: none;
}
}
${mobile} {
flex-direction: column;
}
`;
const Box = styled.footer`
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: center;
const Pane = styled.div`
font-size: 1rem;
${mobile} {
margin-bottom: 50px;
}
`;
const Title = styled.h3`
margin-bottom: 15px;
`;
const LangBox = styled.div`
line-height: 1em;
font-size: 0.8rem;
`;
const LangBox = styled(Box)`
font-size: 2rem;
margin-bottom: 20px;
`;
const ShareBox = styled(Box)`
const ShareBox = styled.div`
margin-top: 15px;
line-height: 1em;
font-size: 1.5rem;
display: flex;
align-items: center;
`;
const Links = styled.div`
@ -108,10 +188,35 @@ const Links = styled.div`
align-items: center;
a {
margin: 0 3px;
margin-right: 10px;
}
`;
const Bold = styled.span`
font-weight: bold;
`;
const SponsorBadge = styled.div`
padding: 5px 13px 5px 10px;
display: flex;
flex-direction: row;
align-items: center;
line-height: 1rem;
font-size: 1rem;
border-radius: 5px;
background-color: #f8f9fa;
color: black;
cursor: pointer;
transition: opacity 200ms ease-out;
:hover {
opacity: 0.8;
}
svg {
color: rgb(236, 69, 171);
margin-right: 5px;
}
`;

26
src/pages/Home.tsx Normal file
View File

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

116
src/pages/Search.tsx Normal file
View File

@ -0,0 +1,116 @@
import Tooltip from 'rc-tooltip';
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { IoIosFlash, IoIosRocket } from 'react-icons/io';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import Cards from '../components/cards';
import {
AvailableIcon,
COLORS as ResultColor,
ResultIcon,
ResultItem,
ResultName,
} from '../components/cards/core';
import Form from '../components/Form';
import { useStoreState } from '../store';
import { Content, Header } from '../theme';
import { mobile } from '../util/css';
import { sanitize } from '../util/text';
export default function Search() {
const { query } = useParams<{ query: string }>();
const currentQuery = sanitize(query);
const { t } = useTranslation();
return (
<>
<Helmet>
<title>Search for &quot;{currentQuery}&quot; namae</title>
</Helmet>
<Header>
<Form initialValue={currentQuery} />
</Header>
<Content>
<Legend>
<Stat />
<ResultItem color={ResultColor.available}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('available')}</ResultName>
<AvailableIcon>
<IoIosFlash />
</AvailableIcon>
</ResultItem>
<ResultItem color={ResultColor.unavailable}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('unavailable')}</ResultName>
</ResultItem>
</Legend>
<Cards query={currentQuery} />
</Content>
</>
);
}
function Stat() {
const totalCount = useStoreState((state) => state.stats.totalCount);
const availableCount = useStoreState((state) => state.stats.availableCount);
const { t } = useTranslation();
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
const uniquenessText = ((n) => {
if (n > 0.7 && n <= 1.0) {
return t('uniqueness.high');
} else if (n > 0.4 && n <= 0.7) {
return t('uniqueness.moderate');
} else {
return t('uniqueness.low');
}
})(uniqueness);
return (
<UniquenessIndicator>
<Tooltip
overlay={t('uniqueness.description')}
placement="top"
trigger={['hover']}
>
<span>
{uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ)
</span>
</Tooltip>
</UniquenessIndicator>
);
}
export const Legend = styled.div`
margin-top: -100px;
padding: 100px 0 30px;
display: flex;
flex-direction: row;
justify-content: center;
user-select: none;
cursor: default;
background-color: #f6f6fa;
${mobile} {
flex-direction: column;
align-items: center;
margin-top: -80px;
padding: 70px 0 30px;
background-color: none;
}
> * {
margin: 0 10px 0;
}
`;
export const UniquenessIndicator = styled.div`
color: #7b7b7b;
`;

53
src/theme/index.tsx Normal file
View File

@ -0,0 +1,53 @@
import styled, { createGlobalStyle } from 'styled-components';
import { mobile } from '../util/css';
export const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
line-height: 1.625em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
}
`;
export const Content = styled.div`
padding-top: 100px;
${mobile} {
padding-top: 60px;
}
`;
export const Header = styled.header`
padding: 0 40px;
background-image: linear-gradient(180deg, #bda2ff 0%, #1b24cc 99%);
${mobile} {
padding: 0 20px;
}
`;
export const Section = styled.div`
padding: 100px 20vw;
${mobile} {
padding: 60px 40px;
}
`;

View File

@ -1,4 +1,5 @@
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
export function useDeferredState<T>(
duration = 1000,
@ -19,3 +20,16 @@ export function useDeferredState<T>(
return [response, setInnerValue];
}
export function useOpenSearch(xmlPath: string) {
return () => (
<Helmet>
<link
rel="search"
type="application/opensearchdescription+xml"
title="namae"
href={xmlPath}
/>
</Helmet>
);
}