fix: clean-up website (#227)

iconoir.com/.eslintrc.json

@@ -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
+      }
+    }
+  ]
 }

iconoir.com/components/AnimatedSvg.tsx

@@ -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;

iconoir.com/components/AvailableFor.tsx

@@ -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'}>

iconoir.com/components/CategoryRow.tsx

@@ -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 {

iconoir.com/components/ChangelogEntry.tsx

@@ -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)}>

iconoir.com/components/CurrentVersion.tsx

@@ -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>

iconoir.com/components/CustomizationEditor.tsx

@@ -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;

iconoir.com/components/DocumentationNavigation.tsx

@@ -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 ? (

iconoir.com/components/Explore.tsx

@@ -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 {

iconoir.com/components/Footer.tsx

@@ -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';
 

iconoir.com/components/GA.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Script from 'next/script';
 
 export function GA() {

iconoir.com/components/Header.tsx

@@ -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>
+          <LogoContainer>
+            <LogoIcon>
+              <AnimatedSvg />
+            </LogoIcon>
+            <Logo src={'/iconoir-logo.svg'} alt={'Iconoir Logo'} />
+          </LogoContainer>
         </Link>
         <CurrentVersion version={currentVersion} color={currentVersionColor} />
       </HeaderLeft>

iconoir.com/components/HeaderBackground.tsx

@@ -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;

iconoir.com/components/Icon.tsx

@@ -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(

iconoir.com/components/IconList.tsx

@@ -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;

iconoir.com/components/IconListEmpty.tsx

@@ -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>

iconoir.com/components/IconsRow.tsx

@@ -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[];

iconoir.com/components/MDXRemote.tsx

@@ -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 (

iconoir.com/components/NavigationItem.tsx

@@ -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={

iconoir.com/components/Praise.tsx

@@ -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() {

iconoir.com/components/PraiseItem.tsx

@@ -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 {

iconoir.com/components/ReactWindowScroller.tsx

@@ -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]);
+  // We are purposefully doing nothing here in order to support momentum scroll on iOS.
+  const onScroll = () => {};
 
   React.useEffect(() => {
     // We have to get rid of the scroll handlers here, because they will cause the list

iconoir.com/components/ReadOnGitHub.tsx

@@ -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'}
         >

iconoir.com/components/SEO.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 
 const TITLE_SUFFIX = 'Iconoir | Free Icons';

iconoir.com/components/Slider.tsx

@@ -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';
 

iconoir.com/components/Stats.tsx

@@ -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;

iconoir.com/components/SuggestLibrary.tsx

@@ -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>

iconoir.com/components/Table.tsx

@@ -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%;

iconoir.com/components/Typography.tsx

@@ -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;

iconoir.com/components/constants.ts

@@ -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',
-};

iconoir.com/lib/constants.ts

@@ -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',
+};

iconoir.com/lib/getIcons.ts

@@ -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 = '|';

iconoir.com/next.config.js

@@ -1,20 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
   compiler: {
     styledComponents: true,
   },
-  experimental: {
-    images: {
-      unoptimized: true,
-    },
+  images: {
+    unoptimized: true,
   },
   async redirects() {
     return [
-      { source: '/docs', destination: '/docs/introduction', permanent: true }
-    ]
-  }
+      { source: '/docs', destination: '/docs/introduction', permanent: true },
+    ];
+  },
 };
 
 module.exports = nextConfig;

iconoir.com/package.json

@@ -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"
   }
 }

iconoir.com/pages/_app.tsx

@@ -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;

iconoir.com/pages/_document.tsx

@@ -1,10 +1,10 @@
 import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
   DocumentContext,
   DocumentInitialProps,
+  Head,
+  Html,
+  Main,
+  NextScript,
 } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 

iconoir.com/pages/docs/[...slug].tsx

@@ -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,
         },
       ],
     },

iconoir.com/pages/docs/changelog.tsx

@@ -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,11 +65,14 @@ 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 || '', {
-        mdxOptions: {
-          remarkPlugins: [require('remark-prism'), remarkGfm],
-        },
+      ...(release.body && {
+        body: await serialize(release.body, {
+          mdxOptions: {
+            remarkPlugins: [require('remark-prism'), remarkGfm],
+          },
+        }),
       }),
     });
   }

iconoir.com/pages/docs/index.tsx

@@ -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;
 }

iconoir.com/pages/index.tsx

@@ -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,
     },
   };

iconoir.com/pages/support.tsx

@@ -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 }) => {

iconoir.com/tsconfig.json

@@ -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"]
 }