mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-13 03:12:24 +02:00
fix: clean-up website (#227)
This commit is contained in:
parent
450fed6ac8
commit
6c780cc9e9
12
iconoir.com/.eslintrc.json
Executable file → Normal file
12
iconoir.com/.eslintrc.json
Executable file → Normal file
|
@ -1,6 +1,16 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals",
|
||||
"root": true,
|
||||
"extends": ["next/core-web-vitals"],
|
||||
"rules": {
|
||||
"react/no-unescaped-entities": ["off"]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.js"],
|
||||
"parser": "espree",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
0
iconoir.com/.gitignore
vendored
Executable file → Normal file
0
iconoir.com/.gitignore
vendored
Executable file → Normal file
0
iconoir.com/README.md
Executable file → Normal file
0
iconoir.com/README.md
Executable file → Normal file
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import anime from 'animejs';
|
||||
import React from 'react';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
type SetInstances = (instances: anime.AnimeInstance[]) => void;
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
import React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import useResizeObserver from 'use-resize-observer';
|
||||
import { FEEDBACK_LINK, LIBRARY_LINKS, SUGGEST_LIBRARY } from './constants';
|
||||
import { media } from './responsive';
|
||||
import {
|
||||
FEEDBACK_LINK,
|
||||
LIBRARY_LINKS,
|
||||
SUGGEST_LIBRARY_LINK,
|
||||
} from '../lib/constants';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Text14 } from './Typography';
|
||||
|
||||
export function AvailableFor() {
|
||||
|
@ -53,7 +56,7 @@ export function AvailableFor() {
|
|||
/>
|
||||
</a>
|
||||
<AreYouUsing>
|
||||
<a href={SUGGEST_LIBRARY} target={'_blank'} rel={'noreferrer'}>
|
||||
<a href={SUGGEST_LIBRARY_LINK} target={'_blank'} rel={'noreferrer'}>
|
||||
<Text14>More?</Text14>
|
||||
</a>
|
||||
<a href={FEEDBACK_LINK} target={'_blank'} rel={'noreferrer'}>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Text15 } from './Typography';
|
||||
|
||||
export interface CategoryRowProps {
|
||||
|
|
|
@ -1,22 +1,23 @@
|
|||
import { BoxIso } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Code, CopyButton, Text15, Text18 } from './Typography';
|
||||
import moment from 'moment';
|
||||
import { MDXRemoteSerializeResult } from 'next-mdx-remote';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { MDXRemote } from './MDXRemote';
|
||||
import { FILE_PREFIX } from './constants';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Code, CopyButton, Text15, Text18 } from './Typography';
|
||||
|
||||
const EXPAND_HEIGHT = 400;
|
||||
|
||||
export interface ChangelogEntryProps {
|
||||
name: string;
|
||||
body: MDXRemoteSerializeResult;
|
||||
url: string;
|
||||
created_at: string;
|
||||
body?: MDXRemoteSerializeResult;
|
||||
}
|
||||
export function ChangelogEntry({
|
||||
name,
|
||||
url,
|
||||
body,
|
||||
created_at,
|
||||
}: ChangelogEntryProps) {
|
||||
|
@ -39,7 +40,7 @@ export function ChangelogEntry({
|
|||
</ContainerIcon>
|
||||
<TitleContainer>
|
||||
<a
|
||||
href={`${FILE_PREFIX}/../../releases/tag/${name}`}
|
||||
href={url}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
style={{ textDecoration: 'none' }}
|
||||
|
@ -50,7 +51,7 @@ export function ChangelogEntry({
|
|||
</TitleContainer>
|
||||
</ContainerLeft>
|
||||
<EntryBody expanded={expanded}>
|
||||
<MDXRemote {...body} />
|
||||
{body ? <MDXRemote {...body} /> : 'No changelog'}
|
||||
{shouldExpand ? (
|
||||
<ExpandContainer>
|
||||
<CopyButton onClick={() => setExpanded((e) => !e)}>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Text13 } from './Typography';
|
||||
|
||||
|
@ -9,7 +8,7 @@ export interface CurrentVersionProps {
|
|||
}
|
||||
export function CurrentVersion({ version, color }: CurrentVersionProps) {
|
||||
return (
|
||||
<Link href={'/docs/changelog'} passHref>
|
||||
<Link href={'/docs/changelog'} passHref legacyBehavior>
|
||||
<Container as={'a'} style={color ? { background: color } : undefined}>
|
||||
{version}
|
||||
</Container>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
|
||||
import styled from 'styled-components';
|
||||
import { Text13, Text18 } from './Typography';
|
||||
import { Button } from './Button';
|
||||
import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
|
||||
import { ColorInput } from './Input';
|
||||
import { Slider } from './Slider';
|
||||
import { Text13, Text18 } from './Typography';
|
||||
|
||||
export interface CustomizationEditorProps {
|
||||
customizations: IconListCustomizations;
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { DocumentationItem } from '../pages/docs/[...slug]';
|
||||
import styled from 'styled-components';
|
||||
import { NavArrowUp } from 'iconoir-react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { media } from './responsive';
|
||||
import { NavArrowUp } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { DocumentationItem } from '../pages/docs/[...slug]';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
export interface DocumentationNavigationProps {
|
||||
documentationItems: DocumentationItem[];
|
||||
|
@ -69,7 +69,12 @@ export function DocumentationNavigation({
|
|||
);
|
||||
} else {
|
||||
return (
|
||||
<Link href={`/docs/${path}`} passHref key={documentationItem.path}>
|
||||
<Link
|
||||
href={`/docs/${path}`}
|
||||
passHref
|
||||
legacyBehavior
|
||||
key={documentationItem.path}
|
||||
>
|
||||
<NavigationItem as={'a'} active={activePath === path}>
|
||||
<span>{documentationItem.title}</span>
|
||||
{documentationItem.label ? (
|
||||
|
|
|
@ -5,7 +5,7 @@ import { Ad } from './Ad';
|
|||
import { CustomizationEditor } from './CustomizationEditor';
|
||||
import { FiltersEditor } from './FiltersEditor';
|
||||
import { Icon, IconList, IconListFilters } from './IconList';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
import { useCustomizationPersistence } from './useCustomizationPersistence';
|
||||
|
||||
export interface ExploreProps {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { PeaceHand } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { LICENSE_LINK } from './constants';
|
||||
import { LICENSE_LINK } from '../lib/constants';
|
||||
import { Logo, LogoContainer, LogoIcon } from './Header';
|
||||
import { NavigationItemContainer } from './NavigationItem';
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react';
|
||||
import Script from 'next/script';
|
||||
|
||||
export function GA() {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { Cancel, Heart, Menu } from 'iconoir-react';
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { AUTHOR_LINKS } from './constants';
|
||||
import { Cancel, Heart, Menu } from 'iconoir-react';
|
||||
import { CurrentVersion } from './CurrentVersion';
|
||||
import { media } from './responsive';
|
||||
import { ResetButton } from './Button';
|
||||
import { AnimatedSvg } from './AnimatedSvg';
|
||||
import { ResetButton } from './Button';
|
||||
import { AUTHOR_LINKS } from '../lib/constants';
|
||||
import { CurrentVersion } from './CurrentVersion';
|
||||
import { NavigationItem, NavigationItemContainer } from './NavigationItem';
|
||||
import Link from 'next/link';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
export interface HeaderProps {
|
||||
currentVersion: string;
|
||||
|
@ -19,14 +19,12 @@ export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
|
|||
<Container>
|
||||
<HeaderLeft>
|
||||
<Link href={'/'}>
|
||||
<a>
|
||||
<LogoContainer>
|
||||
<LogoIcon>
|
||||
<AnimatedSvg />
|
||||
</LogoIcon>
|
||||
<Logo src={'/iconoir-logo.svg'} alt={'Iconoir Logo'} />
|
||||
</LogoContainer>
|
||||
</a>
|
||||
</Link>
|
||||
<CurrentVersion version={currentVersion} color={currentVersionColor} />
|
||||
</HeaderLeft>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
export interface HeaderBackgroundProps {
|
||||
children: React.ReactElement;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import { DEFAULT_CUSTOMIZATIONS, Icon as IconType } from './IconList';
|
||||
import styled from 'styled-components';
|
||||
import * as AllIcons from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { showNotification } from '../lib/showNotification';
|
||||
import { ResetButton } from './Button';
|
||||
import { showNotification } from '../helpers/showNotification';
|
||||
import { DEFAULT_CUSTOMIZATIONS, Icon as IconType } from './IconList';
|
||||
|
||||
const HEADER = '<?xml version="1.0" encoding="UTF-8"?>';
|
||||
function bakeSvg(
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
import { chunk } from 'lodash';
|
||||
import React from 'react';
|
||||
import {
|
||||
VariableSizeList as List,
|
||||
ListChildComponentProps,
|
||||
areEqual,
|
||||
ListChildComponentProps,
|
||||
VariableSizeList as List,
|
||||
} from 'react-window';
|
||||
import { chunk } from 'lodash';
|
||||
import styled from 'styled-components';
|
||||
import useResizeObserver from 'use-resize-observer';
|
||||
import { ICON_SPACE, ICON_WIDTH } from './constants';
|
||||
import { CategoryRow } from './CategoryRow';
|
||||
import { ICON_SPACE, ICON_WIDTH } from '../lib/constants';
|
||||
import { IconListEmpty } from './IconListEmpty';
|
||||
import { IconsRow } from './IconsRow';
|
||||
import { ReactWindowScroller } from './ReactWindowScroller';
|
||||
import styled from 'styled-components';
|
||||
import { IconListEmpty } from './IconListEmpty';
|
||||
|
||||
export interface IconListFilters {
|
||||
search?: string;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { SpockHandGesture } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { SUGGEST_ICON } from './constants';
|
||||
import { SUGGEST_ICON_LINK } from '../lib/constants';
|
||||
import { Text18 } from './Typography';
|
||||
|
||||
export interface IconListEmptyProps {
|
||||
|
@ -19,7 +18,7 @@ export function IconListEmpty({ searchTerm }: IconListEmptyProps) {
|
|||
<Text18 style={{ color: 'var(--black-60)' }}>
|
||||
{"If you can't find the icon, you can make a"}
|
||||
<br />
|
||||
<a href={SUGGEST_ICON} target={'_blank'} rel={'noreferrer'}>
|
||||
<a href={SUGGEST_ICON_LINK} target={'_blank'} rel={'noreferrer'}>
|
||||
suggestion on GitHub.
|
||||
</a>
|
||||
</Text18>
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import { ICON_SPACE } from './constants';
|
||||
import { Icon } from './IconList';
|
||||
import styled from 'styled-components';
|
||||
import { ICON_SPACE } from '../lib/constants';
|
||||
import { Icon as IconC } from './Icon';
|
||||
import { Icon } from './IconList';
|
||||
|
||||
export interface IconsRowProps {
|
||||
icons: Icon[];
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import { MDXRemote as CoreMDXRemote, MDXRemoteProps } from 'next-mdx-remote';
|
||||
import { SuggestLibrary } from './SuggestLibrary';
|
||||
import { Pre, Body, H1, H2, H3, Code } from './Typography';
|
||||
import { Table } from './Table';
|
||||
import { Body, Code, H1, H2, H3, Pre } from './Typography';
|
||||
|
||||
export function MDXRemote(props: MDXRemoteProps) {
|
||||
return (
|
||||
|
|
|
@ -2,7 +2,7 @@ import Link from 'next/link';
|
|||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Text15 } from './Typography';
|
||||
|
||||
export interface NavigationItemProps {
|
||||
|
@ -13,7 +13,7 @@ export interface NavigationItemProps {
|
|||
export function NavigationItem({ href, children, style }: NavigationItemProps) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<Link href={href} passHref legacyBehavior>
|
||||
<NavigationItemContainer
|
||||
as={'a'}
|
||||
isActive={
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { PraiseItem } from './PraiseItem';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
const NUM_PRAISE_ITEMS = 3;
|
||||
export function Praise() {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Text14, Text18 } from './Typography';
|
||||
|
||||
export interface PraiseItemProps {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
// in this implementation anyway.
|
||||
|
||||
import { throttle } from 'lodash';
|
||||
import React, { useRef, useEffect, useCallback } from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { GridProps, ListProps } from 'react-window';
|
||||
|
||||
function isHtmlElement(
|
||||
|
@ -89,11 +89,10 @@ export function ReactWindowScroller<
|
|||
handleWindowScroll.cancel();
|
||||
targetElement.removeEventListener('scroll', handleWindowScroll);
|
||||
};
|
||||
}, [isGrid, targetElement]);
|
||||
}, [throttleTime, isGrid, targetElement]);
|
||||
|
||||
const onScroll = useCallback(() => {
|
||||
// We are purposefully doing nothing here in order to support momentum scroll on iOS.
|
||||
}, [isGrid, targetElement]);
|
||||
const onScroll = () => {};
|
||||
|
||||
React.useEffect(() => {
|
||||
// We have to get rid of the scroll handlers here, because they will cause the list
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { ArrowRight } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
DonateButton,
|
||||
|
@ -7,25 +6,31 @@ import {
|
|||
DonateHeader,
|
||||
DonateRight,
|
||||
} from '../pages/support';
|
||||
import { FILE_PREFIX } from './constants';
|
||||
import { GITHUB_TREE_PREFIX } from '../lib/constants';
|
||||
import { Text18 } from './Typography';
|
||||
|
||||
export interface ReadOnGitHubProps {
|
||||
path: string;
|
||||
resource?: string;
|
||||
}
|
||||
export function ReadOnGitHub({ path }: ReadOnGitHubProps) {
|
||||
export function ReadOnGitHub({
|
||||
path,
|
||||
resource = 'our documentation',
|
||||
}: ReadOnGitHubProps) {
|
||||
return (
|
||||
<DonateContainer style={{ marginTop: 88 }}>
|
||||
<div>
|
||||
<DonateHeader>Read it on GitHub</DonateHeader>
|
||||
<Text18>
|
||||
If you prefer, you can take a look at our documentation on our Github
|
||||
If you prefer, you can take a look at {resource} on our GitHub
|
||||
repository.
|
||||
</Text18>
|
||||
</div>
|
||||
<DonateRight>
|
||||
<a
|
||||
href={`${FILE_PREFIX}/${path.startsWith('/') ? path.slice(1) : path}`}
|
||||
href={`${GITHUB_TREE_PREFIX}/${
|
||||
path.startsWith('/') ? path.slice(1) : path
|
||||
}`}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
|
||||
const TITLE_SUFFIX = 'Iconoir | Free Icons';
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { useSlider, useSliderThumb } from '@react-aria/slider';
|
||||
import { SliderState, useSliderState } from '@react-stately/slider';
|
||||
import { useFocusRing } from '@react-aria/focus';
|
||||
import { VisuallyHidden } from '@react-aria/visually-hidden';
|
||||
import { mergeProps } from '@react-aria/utils';
|
||||
import { useNumberFormatter } from '@react-aria/i18n';
|
||||
import { SliderProps as ReactSliderProps } from '@react-types/slider';
|
||||
import { NumberFormatOptions } from '@internationalized/number';
|
||||
import { useFocusRing } from '@react-aria/focus';
|
||||
import { useNumberFormatter } from '@react-aria/i18n';
|
||||
import { useSlider, useSliderThumb } from '@react-aria/slider';
|
||||
import { mergeProps } from '@react-aria/utils';
|
||||
import { VisuallyHidden } from '@react-aria/visually-hidden';
|
||||
import { SliderState, useSliderState } from '@react-stately/slider';
|
||||
import { SliderProps as ReactSliderProps } from '@react-types/slider';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Text13 } from './Typography';
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { media } from '../lib/responsive';
|
||||
import { Text15 } from './Typography';
|
||||
import { media } from './responsive';
|
||||
|
||||
export interface StatProps {
|
||||
value: string;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { ArrowRight } from 'iconoir-react';
|
||||
import React from 'react';
|
||||
import { DonateContainer, DonateHeader, DonateRight } from '../pages/support';
|
||||
import { SUGGEST_LIBRARY } from './constants';
|
||||
import { SUGGEST_LIBRARY_LINK } from '../lib/constants';
|
||||
import { DonateIconButton } from './ReadOnGitHub';
|
||||
import { Text18 } from './Typography';
|
||||
|
||||
|
@ -17,7 +16,7 @@ export function SuggestLibrary() {
|
|||
</Text18>
|
||||
</div>
|
||||
<DonateRight>
|
||||
<a href={SUGGEST_LIBRARY} target={'_blank'} rel={'noreferrer'}>
|
||||
<a href={SUGGEST_LIBRARY_LINK} target={'_blank'} rel={'noreferrer'}>
|
||||
<DonateIconButton>
|
||||
<ArrowRight />
|
||||
</DonateIconButton>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
export const Table = styled.table`
|
||||
width: 100%;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { showNotification } from '../helpers/showNotification';
|
||||
import { showNotification } from '../lib/showNotification';
|
||||
import { Button } from './Button';
|
||||
import { media } from './responsive';
|
||||
import { media } from '../lib/responsive';
|
||||
|
||||
export const Text15 = styled.div`
|
||||
font-size: 15px;
|
||||
|
|
|
@ -1,34 +0,0 @@
|
|||
export const REPO = {
|
||||
owner: 'iconoir-icons',
|
||||
repo: 'iconoir',
|
||||
};
|
||||
export const GITHUB = `https://github.com/${REPO.owner}/${REPO.repo}`;
|
||||
export const SUGGEST_ICON =
|
||||
'https://github.com/iconoir-icons/iconoir/issues/new?assignees=lucaburgio&labels=icon+request&template=icon_request.md&title=%5BICON%5D';
|
||||
export const SUPPORT_LINK = 'https://opencollective.com/iconoir/donate';
|
||||
export const DISCORD_LINK = 'https://discord.gg/c3uzjx6k';
|
||||
export const LICENSE_LINK =
|
||||
'https://github.com/iconoir-icons/iconoir/blob/main/LICENSE';
|
||||
export const ICON_WIDTH = 140;
|
||||
export const ICON_SPACE = 20;
|
||||
|
||||
export const SUGGEST_LIBRARY =
|
||||
'https://github.com/iconoir-icons/iconoir/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D';
|
||||
export const FEEDBACK_LINK = 'https://forms.gle/3HvwVYow7D6T8zad7';
|
||||
|
||||
export const FILE_PREFIX = 'https://github.com/iconoir-icons/iconoir/tree/main';
|
||||
export const LIBRARY_LINKS = {
|
||||
React:
|
||||
'https://github.com/iconoir-icons/iconoir/tree/main/packages/iconoir-react',
|
||||
ReactNative:
|
||||
'https://github.com/iconoir-icons/iconoir/tree/main/packages/iconoir-react-native',
|
||||
Flutter:
|
||||
'https://github.com/iconoir-icons/iconoir/tree/main/packages/iconoir-flutter',
|
||||
Framer: 'https://framer.com/',
|
||||
Figma: 'https://www.figma.com/community/file/983248991460488027/Iconoir-Pack',
|
||||
};
|
||||
|
||||
export const AUTHOR_LINKS = {
|
||||
Luca: 'https://twitter.com/burgioluca',
|
||||
Sam: 'https://twitter.com/therealsammarks',
|
||||
};
|
29
iconoir.com/lib/constants.ts
Normal file
29
iconoir.com/lib/constants.ts
Normal file
|
@ -0,0 +1,29 @@
|
|||
export const REPO = {
|
||||
owner: 'iconoir-icons',
|
||||
repo: 'iconoir',
|
||||
};
|
||||
export const GITHUB_LINK = `https://github.com/${REPO.owner}/${REPO.repo}`;
|
||||
export const SUGGEST_ICON_LINK = `${GITHUB_LINK}/issues/new?assignees=lucaburgio&labels=icon+request&template=icon_request.md&title=%5BICON%5D`;
|
||||
export const SUPPORT_LINK = 'https://opencollective.com/iconoir/donate';
|
||||
export const DISCORD_LINK = 'https://discord.gg/c3uzjx6k';
|
||||
export const LICENSE_LINK = `${GITHUB_LINK}/blob/main/LICENSE`;
|
||||
export const ICON_WIDTH = 140;
|
||||
export const ICON_SPACE = 20;
|
||||
|
||||
export const SUGGEST_LIBRARY_LINK = `${GITHUB_LINK}/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D`;
|
||||
export const FEEDBACK_LINK = 'https://forms.gle/3HvwVYow7D6T8zad7';
|
||||
|
||||
export const GITHUB_TREE_PREFIX =
|
||||
'https://github.com/iconoir-icons/iconoir/tree/main';
|
||||
export const LIBRARY_LINKS = {
|
||||
React: `${GITHUB_TREE_PREFIX}/packages/iconoir-react`,
|
||||
ReactNative: `${GITHUB_TREE_PREFIX}/packages/iconoir-react-native`,
|
||||
Flutter: `${GITHUB_TREE_PREFIX}/packages/iconoir-flutter`,
|
||||
Framer: 'https://framer.com/',
|
||||
Figma: 'https://www.figma.com/community/file/983248991460488027/Iconoir-Pack',
|
||||
};
|
||||
|
||||
export const AUTHOR_LINKS = {
|
||||
Luca: 'https://twitter.com/burgioluca',
|
||||
Sam: 'https://twitter.com/therealsammarks',
|
||||
};
|
|
@ -1,8 +1,8 @@
|
|||
import { Icon } from '../components/IconList';
|
||||
import csv from 'csvtojson';
|
||||
import { incompatibleNames } from '../../constants';
|
||||
import Case from 'case';
|
||||
import csv from 'csvtojson';
|
||||
import * as AllIcons from 'iconoir-react';
|
||||
import { incompatibleNames } from '../../constants';
|
||||
import { Icon } from '../components/IconList';
|
||||
|
||||
const ICONS_PATH = 'icons.csv';
|
||||
const TAG_SEPARATOR = '|';
|
||||
|
|
0
iconoir.com/next-env.d.ts
vendored
Executable file → Normal file
0
iconoir.com/next-env.d.ts
vendored
Executable file → Normal file
9
iconoir.com/next.config.js
Executable file → Normal file
9
iconoir.com/next.config.js
Executable file → Normal file
|
@ -1,20 +1,17 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
experimental: {
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
},
|
||||
async redirects() {
|
||||
return [
|
||||
{ source: '/docs', destination: '/docs/introduction', permanent: true }
|
||||
]
|
||||
}
|
||||
{ source: '/docs', destination: '/docs/introduction', permanent: true },
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
|
|
|
@ -8,44 +8,43 @@
|
|||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-aria/focus": "^3.6.1",
|
||||
"@react-aria/i18n": "^3.4.1",
|
||||
"@react-aria/slider": "^3.1.1",
|
||||
"@react-aria/utils": "^3.13.1",
|
||||
"@react-aria/visually-hidden": "^3.3.1",
|
||||
"@react-stately/slider": "^3.1.1",
|
||||
"devDependencies": {
|
||||
"@internationalized/number": "^3.1.2",
|
||||
"@nodesecure/npm-registry-sdk": "^1.4.1",
|
||||
"@octokit/rest": "^19.0.5",
|
||||
"@react-aria/focus": "^3.10.1",
|
||||
"@react-aria/i18n": "^3.6.3",
|
||||
"@react-aria/slider": "^3.2.4",
|
||||
"@react-aria/ssr": "^3.4.1",
|
||||
"@react-aria/utils": "^3.14.2",
|
||||
"@react-aria/visually-hidden": "^3.6.1",
|
||||
"@react-stately/slider": "^3.2.4",
|
||||
"@react-types/slider": "^3.3.1",
|
||||
"@types/animejs": "^3.1.6",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/react": "^17.0.52",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@types/react-window": "^1.8.5",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"animejs": "^3.2.1",
|
||||
"case": "^1.6.3",
|
||||
"csvtojson": "^2.0.10",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-config-next": "^13.1.1",
|
||||
"iconoir-react": "workspace:*",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
"next": "12.2.2",
|
||||
"next-mdx-remote": "^4.1.0",
|
||||
"numbro": "^2.3.6",
|
||||
"next": "^13.1.1",
|
||||
"next-mdx-remote": "^4.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-window": "^1.8.7",
|
||||
"react-is": "^18.2.0",
|
||||
"react-window": "^1.8.8",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-prism": "^1.3.6",
|
||||
"styled-components": "^5.3.5",
|
||||
"use-resize-observer": "^9.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internationalized/number": "^3.1.1",
|
||||
"@octokit/rest": "^19.0.5",
|
||||
"@react-types/slider": "^3.1.1",
|
||||
"@types/animejs": "^3.1.5",
|
||||
"@types/lodash": "^4.14.182",
|
||||
"@types/node": "18.0.5",
|
||||
"@types/react": "^17.0.29",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-window": "^1.8.5",
|
||||
"@types/styled-components": "^5.1.25",
|
||||
"csvtojson": "^2.0.10",
|
||||
"download-stats": "^0.3.4",
|
||||
"eslint": "^8.0.0",
|
||||
"eslint-config-next": "12.2.2",
|
||||
"typescript": "^4.4.4"
|
||||
"styled-components": "^5.3.6",
|
||||
"typescript": "^4.9.4",
|
||||
"use-resize-observer": "^9.1.0"
|
||||
}
|
||||
}
|
||||
|
|
7
iconoir.com/pages/_app.tsx
Executable file → Normal file
7
iconoir.com/pages/_app.tsx
Executable file → Normal file
|
@ -1,9 +1,14 @@
|
|||
import { SSRProvider } from '@react-aria/ssr';
|
||||
import type { AppProps } from 'next/app';
|
||||
import '../styles/prism-theme.css';
|
||||
import '../styles/theme.css';
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />;
|
||||
return (
|
||||
<SSRProvider>
|
||||
<Component {...pageProps} />
|
||||
</SSRProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import Document, {
|
||||
Html,
|
||||
Head,
|
||||
Main,
|
||||
NextScript,
|
||||
DocumentContext,
|
||||
DocumentInitialProps,
|
||||
Head,
|
||||
Html,
|
||||
Main,
|
||||
NextScript,
|
||||
} from 'next/document';
|
||||
import { ServerStyleSheet } from 'styled-components';
|
||||
|
||||
|
|
|
@ -1,23 +1,23 @@
|
|||
import { GetStaticPathsResult, GetStaticPropsContext } from 'next';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import { MDXRemoteSerializeResult } from 'next-mdx-remote';
|
||||
import { MDXRemote } from '../../components/MDXRemote';
|
||||
import fs from 'fs';
|
||||
import { Layout } from '../../components/Layout';
|
||||
import { SEO } from '../../components/SEO';
|
||||
import { Header, HeaderProps } from '../../components/Header';
|
||||
import { getHeaderProps } from '../../lib/getHeaderProps';
|
||||
import styled from 'styled-components';
|
||||
import { media } from '../../components/responsive';
|
||||
import { Footer } from '../../components/Footer';
|
||||
import { GetStaticPathsResult, GetStaticPropsContext } from 'next';
|
||||
import { MDXRemoteSerializeResult } from 'next-mdx-remote';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import path from 'path';
|
||||
import { ParsedUrlQuery } from 'querystring';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
DocumentationNavigation,
|
||||
DocumentationNavigationProps,
|
||||
} from '../../components/DocumentationNavigation';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { Footer } from '../../components/Footer';
|
||||
import { Header, HeaderProps } from '../../components/Header';
|
||||
import { Layout } from '../../components/Layout';
|
||||
import { MDXRemote } from '../../components/MDXRemote';
|
||||
import { ReadOnGitHub } from '../../components/ReadOnGitHub';
|
||||
import { media } from '../../lib/responsive';
|
||||
import { SEO } from '../../components/SEO';
|
||||
import { getHeaderProps } from '../../lib/getHeaderProps';
|
||||
|
||||
interface DocumentationPageProps extends HeaderProps {
|
||||
source: MDXRemoteSerializeResult;
|
||||
|
@ -43,7 +43,7 @@ export default function DocumentationPage({
|
|||
<ContentContainer>
|
||||
<InnerContentContainer>
|
||||
<MDXRemote {...source} />
|
||||
{navigationItem.noReadOnGithub ||
|
||||
{navigationItem.noReadOnGitHub ||
|
||||
!navigationItem.filepath ? null : (
|
||||
<ReadOnGitHub path={navigationItem.filepath} />
|
||||
)}
|
||||
|
@ -98,7 +98,7 @@ export interface DocumentationItem {
|
|||
children?: DocumentationItem[];
|
||||
title: string;
|
||||
label?: string;
|
||||
noReadOnGithub?: boolean;
|
||||
noReadOnGitHub?: boolean;
|
||||
skip?: boolean;
|
||||
}
|
||||
export function getDocumentationStructure(): DocumentationItem[] {
|
||||
|
@ -123,32 +123,32 @@ export function getDocumentationStructure(): DocumentationItem[] {
|
|||
path: 'iconoir-react',
|
||||
filepath: 'packages/iconoir-react/README.md',
|
||||
title: 'React',
|
||||
noReadOnGithub: true,
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
{
|
||||
path: 'iconoir-react-native',
|
||||
filepath: 'packages/iconoir-react-native/README.md',
|
||||
title: 'React Native',
|
||||
noReadOnGithub: true,
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
{
|
||||
path: 'flutter',
|
||||
filepath: 'packages/iconoir-flutter/README.md',
|
||||
title: 'Flutter',
|
||||
label: 'New',
|
||||
noReadOnGithub: true,
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
{
|
||||
path: 'framer',
|
||||
filepath: 'docs/framer.md',
|
||||
title: 'Framer',
|
||||
noReadOnGithub: true,
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
{
|
||||
path: 'css',
|
||||
filepath: 'css/README.md',
|
||||
title: 'CSS',
|
||||
noReadOnGithub: true,
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { octokit } from '../../lib/octokit';
|
||||
import React from 'react';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import {
|
||||
ChangelogEntry,
|
||||
ChangelogEntryProps,
|
||||
} from '../../components/ChangelogEntry';
|
||||
import { REPO } from '../../components/constants';
|
||||
import { REPO } from '../../lib/constants';
|
||||
import {
|
||||
DocumentationNavigation,
|
||||
DocumentationNavigationProps,
|
||||
|
@ -12,10 +12,11 @@ import {
|
|||
import { Footer } from '../../components/Footer';
|
||||
import { Header, HeaderProps } from '../../components/Header';
|
||||
import { Layout } from '../../components/Layout';
|
||||
import { ReadOnGitHub } from '../../components/ReadOnGitHub';
|
||||
import { SEO } from '../../components/SEO';
|
||||
import { H1 } from '../../components/Typography';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { getHeaderProps } from '../../lib/getHeaderProps';
|
||||
import { octokit } from '../../lib/octokit';
|
||||
import {
|
||||
Container,
|
||||
ContentContainer,
|
||||
|
@ -23,8 +24,6 @@ import {
|
|||
InnerContentContainer,
|
||||
NavigationContainer,
|
||||
} from './[...slug]';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import { ReadOnGitHub } from '../../components/ReadOnGitHub';
|
||||
|
||||
export interface ChangelogProps extends HeaderProps {
|
||||
documentationProps: DocumentationNavigationProps;
|
||||
|
@ -49,7 +48,7 @@ export default function Changelog({
|
|||
{entries.map((entry) => (
|
||||
<ChangelogEntry key={entry.name} {...entry} />
|
||||
))}
|
||||
<ReadOnGitHub path={'../../releases'} />
|
||||
<ReadOnGitHub path={'../../releases'} resource="the releases" />
|
||||
</InnerContentContainer>
|
||||
</ContentContainer>
|
||||
</Container>
|
||||
|
@ -66,12 +65,15 @@ export async function getStaticProps() {
|
|||
for (const release of releases) {
|
||||
entries.push({
|
||||
name: release.name || release.tag_name,
|
||||
url: release.html_url,
|
||||
created_at: release.created_at,
|
||||
body: await serialize(release.body || '', {
|
||||
...(release.body && {
|
||||
body: await serialize(release.body, {
|
||||
mdxOptions: {
|
||||
remarkPlugins: [require('remark-prism'), remarkGfm],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
});
|
||||
}
|
||||
const items = getDocumentationStructure();
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
|
||||
export default function Index() {
|
||||
const router = useRouter();
|
||||
React.useEffect(() => {
|
||||
router.replace('/docs/introduction');
|
||||
}, []);
|
||||
}, [router]);
|
||||
return null;
|
||||
}
|
||||
|
|
56
iconoir.com/pages/index.tsx
Executable file → Normal file
56
iconoir.com/pages/index.tsx
Executable file → Normal file
|
@ -1,26 +1,24 @@
|
|||
import { downloads as npmDownloads } from '@nodesecure/npm-registry-sdk';
|
||||
import { PeaceHand } from 'iconoir-react';
|
||||
import type { NextPage } from 'next';
|
||||
import styled from 'styled-components';
|
||||
import { AvailableFor } from '../components/AvailableFor';
|
||||
import { LargeButton } from '../components/Button';
|
||||
import { REPO, SUPPORT_LINK } from '../components/constants';
|
||||
import { REPO, SUPPORT_LINK } from '../lib/constants';
|
||||
import { Explore } from '../components/Explore';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { Header } from '../components/Header';
|
||||
import { HeaderBackground } from '../components/HeaderBackground';
|
||||
import { Icon } from '../components/IconList';
|
||||
import { Layout } from '../components/Layout';
|
||||
import { Praise } from '../components/Praise';
|
||||
import { media } from '../lib/responsive';
|
||||
import { SEO } from '../components/SEO';
|
||||
import { Stat, StatsContainer } from '../components/Stats';
|
||||
import { Text18 } from '../components/Typography';
|
||||
import { getHeaderProps } from '../lib/getHeaderProps';
|
||||
import { getAllIcons } from '../lib/getIcons';
|
||||
import { octokit } from '../lib/octokit';
|
||||
import numbro from 'numbro';
|
||||
// @ts-ignore no types
|
||||
import * as downloadStats from 'download-stats';
|
||||
import { media } from '../components/responsive';
|
||||
import { Praise } from '../components/Praise';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { getHeaderProps } from '../lib/getHeaderProps';
|
||||
import { Layout } from '../components/Layout';
|
||||
|
||||
interface HomeProps {
|
||||
allIcons: Icon[];
|
||||
|
@ -48,7 +46,7 @@ const Home: NextPage<HomeProps> = ({
|
|||
</HeroDescription>
|
||||
<StatsContainer>
|
||||
<Stat
|
||||
value={allIcons.length.toString()}
|
||||
value={new Intl.NumberFormat('en-US').format(allIcons.length)}
|
||||
description={
|
||||
'icons available in this very moment, and they’re growing fast!'
|
||||
}
|
||||
|
@ -60,21 +58,19 @@ const Home: NextPage<HomeProps> = ({
|
|||
}
|
||||
/>
|
||||
<Stat
|
||||
value={numbro(numDownloads).format({
|
||||
average: true,
|
||||
mantissa: 1,
|
||||
})}
|
||||
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={numbro(numStars).format({
|
||||
average: true,
|
||||
mantissa: 1,
|
||||
})}
|
||||
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.'
|
||||
'people who starred the project on GitHub. Show your support and be one of them.'
|
||||
}
|
||||
/>
|
||||
</StatsContainer>
|
||||
|
@ -154,23 +150,25 @@ export default Home;
|
|||
|
||||
export async function getStaticProps() {
|
||||
const headerProps = getHeaderProps();
|
||||
const { data: repo } = await octokit.rest.repos.get({
|
||||
|
||||
const {
|
||||
data: { stargazers_count: numStars },
|
||||
} = await octokit.rest.repos.get({
|
||||
...REPO,
|
||||
});
|
||||
const stars = repo.stargazers_count;
|
||||
if (!stars) throw new Error('Could not find GitHub stars');
|
||||
const numDownloads = await new Promise<number>((resolve, reject) => {
|
||||
downloadStats.get.lastMonth('iconoir-react', (err: any, results: any) => {
|
||||
if (err) return reject(err);
|
||||
resolve(results.downloads);
|
||||
});
|
||||
});
|
||||
if (!numStars) throw new Error('Could not find GitHub stars');
|
||||
|
||||
const { downloads: numDownloads } = await npmDownloads(
|
||||
'iconoir-react',
|
||||
'last-month'
|
||||
);
|
||||
if (!numDownloads) throw new Error('Could not find NPM downloads');
|
||||
|
||||
return {
|
||||
props: {
|
||||
...headerProps,
|
||||
allIcons: await getAllIcons(),
|
||||
numStars: stars,
|
||||
numStars,
|
||||
numDownloads,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
import { ArrowRight } from 'iconoir-react';
|
||||
import { NextPage } from 'next';
|
||||
import Image from 'next/image';
|
||||
import styled from 'styled-components';
|
||||
import { HeroText } from '.';
|
||||
import { LargeButton } from '../components/Button';
|
||||
import { DISCORD_LINK, SUPPORT_LINK } from '../lib/constants';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { Header, HeaderProps } from '../components/Header';
|
||||
import { HeaderBackground } from '../components/HeaderBackground';
|
||||
import { Layout } from '../components/Layout';
|
||||
import { media } from '../lib/responsive';
|
||||
import { SEO } from '../components/SEO';
|
||||
import { Code, Heading2, Text18 } from '../components/Typography';
|
||||
import { getHeaderProps } from '../lib/getHeaderProps';
|
||||
import Image from 'next/image';
|
||||
import { ArrowRight } from 'iconoir-react';
|
||||
import { DISCORD_LINK, SUPPORT_LINK } from '../components/constants';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { media } from '../components/responsive';
|
||||
|
||||
interface SupportProps extends HeaderProps {}
|
||||
const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
|
||||
|
|
0
iconoir.com/public/vercel.svg
Executable file → Normal file
0
iconoir.com/public/vercel.svg
Executable file → Normal file
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
13
iconoir.com/tsconfig.json
Executable file → Normal file
13
iconoir.com/tsconfig.json
Executable file → Normal file
|
@ -13,17 +13,8 @@
|
|||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"types"
|
||||
]
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../packages/iconoir-react"
|
||||
}
|
||||
]
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
3062
pnpm-lock.yaml
3062
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue