2023-01-11 19:08:14 +01:00
|
|
|
|
import { downloads as npmDownloads } from '@nodesecure/npm-registry-sdk';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import type { NextPage } from 'next';
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import { AvailableFor } from '../components/AvailableFor';
|
|
|
|
|
import { LargeButton } from '../components/Button';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { REPO, SUPPORT_LINK } from '../lib/constants';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { Explore } from '../components/Explore';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { Footer } from '../components/Footer';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { Header } from '../components/Header';
|
|
|
|
|
import { HeaderBackground } from '../components/HeaderBackground';
|
|
|
|
|
import { Icon } from '../components/IconList';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { Layout } from '../components/Layout';
|
|
|
|
|
import { media } from '../lib/responsive';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { SEO } from '../components/SEO';
|
|
|
|
|
import { Stat, StatsContainer } from '../components/Stats';
|
2023-10-21 13:07:50 +02:00
|
|
|
|
import { Text18, Text15 } from '../components/Typography';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { getHeaderProps } from '../lib/getHeaderProps';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { getAllIcons } from '../lib/getIcons';
|
2023-01-09 21:01:41 +01:00
|
|
|
|
import { octokit } from '../lib/octokit';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
|
|
|
|
|
interface HomeProps {
|
|
|
|
|
allIcons: Icon[];
|
|
|
|
|
currentVersion: string;
|
|
|
|
|
numStars: number;
|
|
|
|
|
numDownloads: number;
|
|
|
|
|
}
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
const Home: NextPage<HomeProps> = ({
|
|
|
|
|
allIcons,
|
|
|
|
|
currentVersion,
|
|
|
|
|
numStars,
|
|
|
|
|
numDownloads,
|
|
|
|
|
}) => {
|
|
|
|
|
return (
|
2023-09-26 00:21:30 +02:00
|
|
|
|
<>
|
|
|
|
|
<Layout>
|
|
|
|
|
<SEO />
|
|
|
|
|
<Header currentVersion={currentVersion} />
|
|
|
|
|
<HeaderBackground>
|
|
|
|
|
<HeroHead>
|
|
|
|
|
<HeroText>Say hello</HeroText>
|
|
|
|
|
<HeroTextSecondary>to your new icon library.</HeroTextSecondary>
|
|
|
|
|
</HeroHead>
|
|
|
|
|
</HeaderBackground>
|
|
|
|
|
<HeroDescription>
|
|
|
|
|
A high-quality selection of free icons. No premium options or
|
|
|
|
|
sign-ups. Your new alternative to Noun Project, Flaticon, and all
|
|
|
|
|
Figma resources. Available in SVG, Font, React, React Native, Flutter,
|
|
|
|
|
Figma and Framer.
|
|
|
|
|
</HeroDescription>
|
|
|
|
|
<StatsContainer>
|
|
|
|
|
<Stat
|
|
|
|
|
value={new Intl.NumberFormat('en-US').format(allIcons.length)}
|
|
|
|
|
description={
|
|
|
|
|
'icons available in this very moment, and they’re growing fast!'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<Stat
|
|
|
|
|
value={'100%'}
|
|
|
|
|
description={
|
|
|
|
|
'free icons. Iconoir is open source and we’re ready for your help.'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<Stat
|
|
|
|
|
value={new Intl.NumberFormat('en-US', {
|
|
|
|
|
notation: 'compact',
|
|
|
|
|
}).format(numDownloads)}
|
|
|
|
|
description={
|
|
|
|
|
'downloads/month on React only. Iconoir also supports React Native, Flutter and CSS.'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<Stat
|
|
|
|
|
value={new Intl.NumberFormat('en-US', {
|
|
|
|
|
notation: 'compact',
|
|
|
|
|
}).format(numStars)}
|
|
|
|
|
description={
|
|
|
|
|
'people who starred the project on GitHub. Show your support and be one of them.'
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</StatsContainer>
|
|
|
|
|
<AvailableFor />
|
|
|
|
|
<SupportContainer>
|
|
|
|
|
<LargeButton
|
|
|
|
|
as={'a'}
|
|
|
|
|
href={SUPPORT_LINK}
|
|
|
|
|
target={'_blank'}
|
|
|
|
|
rel={'noreferrer'}
|
|
|
|
|
>
|
|
|
|
|
<span>Donate</span>
|
|
|
|
|
</LargeButton>
|
2023-10-21 12:08:03 +02:00
|
|
|
|
<Supporters>
|
2023-10-21 12:37:52 +02:00
|
|
|
|
<Supporter
|
2023-10-21 12:50:12 +02:00
|
|
|
|
data-tooltip="Pierre Olivier Marec"
|
2023-10-21 12:37:52 +02:00
|
|
|
|
as={'a'}
|
|
|
|
|
href={'https://github.com/pomarec'}
|
|
|
|
|
src={'https://avatars.githubusercontent.com/u/802933?v=4'}
|
|
|
|
|
/>
|
|
|
|
|
<Supporter
|
2023-10-21 12:50:12 +02:00
|
|
|
|
data-tooltip="Tuan Hiep"
|
2023-10-21 12:37:52 +02:00
|
|
|
|
as={'a'}
|
|
|
|
|
href={'https://opencollective.com/iconoir/contribute'}
|
2023-10-21 12:50:12 +02:00
|
|
|
|
src={
|
|
|
|
|
'https://images.opencollective.com/tuan-hiep/17b1ef2/avatar.png?height=80'
|
|
|
|
|
}
|
2023-10-21 12:37:52 +02:00
|
|
|
|
/>
|
|
|
|
|
<Supporter
|
2023-10-21 12:50:12 +02:00
|
|
|
|
data-tooltip="Justin Kendrick"
|
2023-10-21 12:37:52 +02:00
|
|
|
|
as={'a'}
|
|
|
|
|
href={'https://opencollective.com/iconoir/contribute'}
|
2023-10-21 12:50:12 +02:00
|
|
|
|
src={
|
|
|
|
|
'https://images.opencollective.com/guest-39c79745/avatar.png?height=80'
|
|
|
|
|
}
|
2023-10-21 12:37:52 +02:00
|
|
|
|
/>
|
|
|
|
|
<Supporter
|
2023-10-21 12:50:12 +02:00
|
|
|
|
data-tooltip="Anon"
|
2023-10-21 12:37:52 +02:00
|
|
|
|
as={'a'}
|
|
|
|
|
href={'https://opencollective.com/iconoir/contribute'}
|
2023-10-21 12:50:12 +02:00
|
|
|
|
src={
|
|
|
|
|
'https://opencollective.com/static/images/default-guest-logo.svg'
|
|
|
|
|
}
|
2023-10-21 12:37:52 +02:00
|
|
|
|
/>
|
|
|
|
|
<Supporter
|
2023-10-21 12:50:12 +02:00
|
|
|
|
data-tooltip="Luca Burgio"
|
|
|
|
|
as={'a'}
|
|
|
|
|
href={'https://twitter.com/burgioluca'}
|
|
|
|
|
src={'https://lucaburgio.com/images/profile2.png'}
|
2023-10-21 12:37:52 +02:00
|
|
|
|
/>
|
2023-10-21 12:08:03 +02:00
|
|
|
|
</Supporters>
|
|
|
|
|
<Text15>
|
2023-10-21 12:50:12 +02:00
|
|
|
|
Join here our monthly supporters and help us continue developing
|
|
|
|
|
Iconoir.
|
2023-10-21 12:08:03 +02:00
|
|
|
|
</Text15>
|
2023-09-26 00:21:30 +02:00
|
|
|
|
</SupportContainer>
|
|
|
|
|
<Explore allIcons={allIcons} />
|
|
|
|
|
</Layout>
|
2022-08-28 20:12:09 +02:00
|
|
|
|
<Footer />
|
2023-09-26 00:21:30 +02:00
|
|
|
|
</>
|
2022-08-28 20:12:09 +02:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2023-03-19 21:23:43 +01:00
|
|
|
|
export const HeroHead = styled.div`
|
|
|
|
|
margin: 60px auto 40px auto;
|
|
|
|
|
${media.md} {
|
|
|
|
|
margin: 160px auto 80px auto;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
export const HeroText = styled.h1`
|
|
|
|
|
font-size: 50px;
|
|
|
|
|
font-weight: 700;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
color: var(--g0);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
letter-spacing: -0.035em;
|
|
|
|
|
line-height: 1;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
text-align: center;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
transition: 0.3s;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
${media.md} {
|
|
|
|
|
font-size: 90px;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
padding: 0 20px;
|
|
|
|
|
letter-spacing: -0.045em;
|
|
|
|
|
-webkit-text-stroke: 2.5px;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
|
&:hover {
|
2023-09-25 00:31:45 +02:00
|
|
|
|
transform: scale(1.04);
|
|
|
|
|
transition: 0.3s;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
export const HeroTextSecondary = styled(HeroText)`
|
|
|
|
|
color: var(--g4);
|
|
|
|
|
max-width: 1000px;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
`;
|
|
|
|
|
export const HeroDescription = styled(Text18)<{ topMargin?: number }>`
|
|
|
|
|
display: block;
|
|
|
|
|
max-width: 750px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
${media.lg} {
|
|
|
|
|
margin-top: ${(props) => props.topMargin || 0}px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2023-10-21 12:08:03 +02:00
|
|
|
|
const Supporters = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
2023-10-21 13:07:50 +02:00
|
|
|
|
margin-bottom: 8px !important;
|
2023-10-21 12:08:03 +02:00
|
|
|
|
`;
|
|
|
|
|
const Supporter = styled.div<{ src?: string }>`
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: #000;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
background-image: url(${(props) => props.src});
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center;
|
|
|
|
|
border: 2px solid white;
|
|
|
|
|
margin: 0 -4px;
|
|
|
|
|
transition: 0.2s;
|
|
|
|
|
&:hover {
|
|
|
|
|
scale: 1.1;
|
|
|
|
|
transition: 0.2s;
|
|
|
|
|
&:before {
|
|
|
|
|
content: attr(data-tooltip);
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
background-color: black;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
const SupportContainer = styled.div`
|
|
|
|
|
text-align: center;
|
|
|
|
|
> * {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
max-width: 750px;
|
|
|
|
|
}
|
|
|
|
|
> :not(:last-child) {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
margin-bottom: 50px;
|
|
|
|
|
${media.sm} {
|
2023-03-19 21:23:43 +01:00
|
|
|
|
margin-bottom: 110px;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export default Home;
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps() {
|
|
|
|
|
const headerProps = getHeaderProps();
|
2023-01-11 19:08:14 +01:00
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
data: { stargazers_count: numStars },
|
|
|
|
|
} = await octokit.rest.repos.get({
|
2023-01-09 21:01:41 +01:00
|
|
|
|
...REPO,
|
|
|
|
|
});
|
2023-01-11 19:08:14 +01:00
|
|
|
|
if (!numStars) throw new Error('Could not find GitHub stars');
|
|
|
|
|
|
|
|
|
|
const { downloads: numDownloads } = await npmDownloads(
|
|
|
|
|
'iconoir-react',
|
2023-09-25 00:31:45 +02:00
|
|
|
|
'last-month',
|
2023-01-11 19:08:14 +01:00
|
|
|
|
);
|
2022-08-28 20:12:09 +02:00
|
|
|
|
if (!numDownloads) throw new Error('Could not find NPM downloads');
|
2023-01-11 19:08:14 +01:00
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
...headerProps,
|
|
|
|
|
allIcons: await getAllIcons(),
|
2023-01-11 19:08:14 +01:00
|
|
|
|
numStars,
|
2022-08-28 20:12:09 +02:00
|
|
|
|
numDownloads,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|