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