Bump next from 10.2.3 to 11.1.0 in /site (#384)

* Bump next from 10.2.3 to 11.1.0 in /site

Bumps [next](https://github.com/vercel/next.js) from 10.2.3 to 11.1.0.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v10.2.3...v11.1.0)

---
updated-dependencies:
- dependency-name: next
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

* Fix eslint

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

site/.eslintrc.js

@@ -1,4 +1,21 @@
-const { builtinModules } = require('module')
+/* eslint-disable no-undef */
-const rootConfig = require('../.eslintrc.js')
+module.exports = {
-
+  root: true,
-module.exports = rootConfig;
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'import', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@next/next/recommended',
+    'prettier',
+  ],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+      },
+    ],
+  },
+};

site/next-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
 
-declare module "*.svg" {
+// NOTE: This file should not be edited
-  const content: any;
+// see https://nextjs.org/docs/basic-features/typescript for more information.
-  export default content;
-}

site/next.config.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-undef */
+module.exports = {
+  webpack: (config, options) => {
+    config.module.rules.push({
+      test: /\.svg/,
+      use: [
+        {
+          loader: 'babel-loader',
+        },
+        {
+          loader: 'react-svg-loader',
+          options: {
+            jsx: true,
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};

site/package.json

@@ -8,6 +8,7 @@
     "build": "next build",
     "export": "next export -o build",
     "deploy": "yarn build && yarn export",
+    "lint": "eslint .",
     "test": "jest"
   },
   "dependencies": {
@@ -19,13 +20,14 @@
     "jszip": "^3.4.0",
     "lodash": "^4.17.20",
     "lucide-react": "0.14.0",
-    "next": "^10.0.4",
+    "next": "^11.1.0",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-svg-loader": "^3.0.3"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^11.1.0",
     "@testing-library/dom": "^7.24.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -33,10 +35,14 @@
     "@types/node": "^14.0.11",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "cheerio": "^1.0.0-rc.3",
+    "eslint": "^7.32.0",
     "jest": "^26.5.2",
-    "typescript": "^4.2.4"
+    "prettier": "^2.3.2",
+    "typescript": "^4.3.5"
   }
 }

site/src/components/Header.tsx

@@ -1,21 +1,20 @@
-import { Button, Flex, Link, WrapItem, Text, Wrap } from "@chakra-ui/react";
+import { Button, Flex, Link, WrapItem, Text, Wrap } from '@chakra-ui/react';
-import download from "downloadjs";
+import download from 'downloadjs';
-import JSZip from "jszip";
+import JSZip from 'jszip';
 import { Download, Github } from 'lucide-react';
-import { IconCustomizerDrawer } from "./IconCustomizerDrawer";
+import { IconCustomizerDrawer } from './IconCustomizerDrawer';
 
 function generateZip(icons) {
   const zip = new JSZip();
-  Object.values(icons).forEach((icon) =>
+  Object.values(icons).forEach(icon =>
     // @ts-ignore
-    zip.file(`${icon.name}.svg`, icon.src)
+    zip.file(`${icon.name}.svg`, icon.src),
   );
   return zip.generateAsync({ type: 'blob' });
 }
 
 const Header = ({ data }) => {
   const downloadAllIcons = async () => {
-
     const zip = await generateZip(data);
     download(zip, 'lucide.zip');
   };
@@ -28,41 +27,41 @@ const Header = ({ data }) => {
         Simply beautiful open source icons, community-sourced
       </Text>
       <Text fontSize="lg" as="p" textAlign="center" mb="8">
-        An open-source icon library, a fork of <Link href="https://github.com/feathericons/feather" isExternal>Feather Icons</Link>. <br/>We're expanding the icon set as much as possible while keeping it nice-looking - <Link href={repositoryUrl} isExternal>join us</Link>!
+        An open-source icon library, a fork of{' '}
+        <Link href="https://github.com/feathericons/feather" isExternal>
+          Feather Icons
+        </Link>
+        . <br />
+        We're expanding the icon set as much as possible while keeping it nice-looking -{' '}
+        <Link href={repositoryUrl} isExternal>
+          join us
+        </Link>
+        !
       </Text>
-      <Wrap
+      <Wrap marginTop={3} marginBottom={10} spacing="15px" justify="center">
-        marginTop={3}
-        marginBottom={10}
-        spacing="15px"
-        justify="center"
-      >
         <WrapItem>
-          <Button
+          <Button leftIcon={<Download />} size="lg" onClick={downloadAllIcons}>
-            leftIcon={<Download/>}
-            size="lg"
-            onClick={downloadAllIcons}
-          >
             Download all
           </Button>
         </WrapItem>
         <WrapItem>
-        <IconCustomizerDrawer/>
+          <IconCustomizerDrawer />
         </WrapItem>
         <WrapItem>
-        <Button
+          <Button
-          as="a"
+            as="a"
-          leftIcon={<Github/>}
+            leftIcon={<Github />}
-          size="lg"
+            size="lg"
-          href={repositoryUrl}
+            href={repositoryUrl}
-          target="__blank"
+            target="__blank"
-          onClick={downloadAllIcons}
+            onClick={downloadAllIcons}
-        >
+          >
-          Github
+            Github
-        </Button>
+          </Button>
         </WrapItem>
       </Wrap>
     </Flex>
-  )
+  );
 };
 
 export default Header;

site/src/components/Layout.tsx

@@ -1,26 +1,38 @@
-import { Box, Divider, Flex, Text, Link, Icon, useColorMode, useColorModeValue, IconButton } from "@chakra-ui/react";
+import {
-import { useKeyBindings } from "../lib/key";
+  Box,
-import { useRouter } from "next/router";
+  Divider,
-import NextLink from "next/link"
+  Flex,
+  Text,
+  Link,
+  Icon,
+  useColorMode,
+  useColorModeValue,
+  IconButton,
+} from '@chakra-ui/react';
+import { useKeyBindings } from '../lib/key';
+import { useRouter } from 'next/router';
+import NextLink from 'next/link';
 import { Moon, Sun } from 'lucide-react';
-import Logo from 'babel-loader!react-svg-loader?jsx=true!../../public/logo.svg';
+import Logo from '../../public/logo.svg';
 
 const Layout = ({ children }) => {
   const router = useRouter();
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { toggleColorMode } = useColorMode();
-  const text = useColorModeValue('dark', 'light')
+  const text = useColorModeValue('dark', 'light');
   const ColorModeToggle = useColorModeValue(Moon, Sun);
 
-  function setQuery(query){
+  function setQuery(query) {
-    router.push({
+    router
-      pathname: '/',
+      .push({
-      query: { query: query }
+        pathname: '/',
-    }).then();
+        query: { query: query },
+      })
+      .then();
   }
 
   useKeyBindings({
     Escape: {
-      fn: () => setQuery(""),
+      fn: () => setQuery(''),
     },
     KeyT: {
       fn: () => toggleColorMode(),
@@ -42,45 +54,42 @@ const Layout = ({ children }) => {
         >
           <Flex justifyContent="center" alignItems="center">
             <NextLink href="/" passHref>
-              <Link display="flex" _hover={{textDecoration: 'none'}}>
+              <Link display="flex" _hover={{ textDecoration: 'none' }}>
                 <Icon boxSize={12} marginRight="8px">
-                  <Logo/>
+                  <Logo />
                 </Icon>
-                <Text
+                <Text fontSize="40px" lineHeight="48px">
-                  fontSize="40px"
-                  lineHeight="48px"
-                >
                   Lucide
                 </Text>
               </Link>
             </NextLink>
           </Flex>
           <Flex justifyContent="center" alignItems="center">
-          <Link
+            <Link
-            href="https://github.com/lucide-icons/lucide"
+              href="https://github.com/lucide-icons/lucide"
-            isExternal
+              isExternal
-            marginRight={6}
+              marginRight={6}
-            fontSize="xl"
+              fontSize="xl"
-          >
+            >
-            Github
+              Github
-          </Link>
+            </Link>
-          <IconButton
+            <IconButton
-            size="md"
+              size="md"
-            fontSize="lg"
+              fontSize="lg"
-            aria-label={`Switch to ${text} mode`}
+              aria-label={`Switch to ${text} mode`}
-            variant="ghost"
+              variant="ghost"
-            color="current"
+              color="current"
-            ml="3"
+              ml="3"
-            onClick={toggleColorMode}
+              onClick={toggleColorMode}
-            icon={<ColorModeToggle />}
+              icon={<ColorModeToggle />}
-          />
+            />
           </Flex>
         </Flex>
       </Flex>
       <Flex margin="0 auto" direction="column" maxW="1250px" px={5}>
         {children}
         <Divider marginBottom={8} />
-        <p style={{ alignSelf: "center" }}>
+        <p style={{ alignSelf: 'center' }}>
           <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
             <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
           </a>

site/src/pages/icon/[iconName].tsx

@@ -1,47 +1,48 @@
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/router';
-import IconDetailOverlay from '../../components/IconDetailOverlay'
+import IconDetailOverlay from '../../components/IconDetailOverlay';
 import { getAllData, getData } from '../../lib/icons';
 import IconOverview from '../../components/IconOverview';
 import Layout from '../../components/Layout';
 import Header from '../../components/Header';
 
 const IconPage = ({ icon, data }) => {
-  const router = useRouter()
+  const router = useRouter();
 
   const onClose = () => {
     let query = {};
 
-    if(router.query.search) {
+    if (router.query.search) {
       query = {
-        search: router.query.search
+        search: router.query.search,
       };
     }
+    console.log('CLOSE');
 
-    router.push({
+    router.push(
-      pathname: '/',
+      {
-      query,
+        pathname: '/',
-    })
+        query,
-  }
+      },
+      undefined,
+      { scroll: false },
+    );
+  };
 
   return (
     <Layout>
-      <IconDetailOverlay
+      <IconDetailOverlay key={icon.name} icon={icon} close={onClose} />
-        key={icon.name}
+      <Header {...{ data }} />
-        icon={icon}
+      <IconOverview {...{ data }} />
-        close={onClose}
-      />
-      <Header {...{data}}/>
-      <IconOverview {...{data}}/>
     </Layout>
-  )
+  );
-}
+};
 
-export default IconPage
+export default IconPage;
 
 export async function getStaticProps({ params: { iconName } }) {
   const data = await getAllData();
   const icon = await getData(iconName);
-  return { props: { icon, data } }
+  return { props: { icon, data } };
 }
 
 export async function getStaticPaths() {
@@ -52,5 +53,5 @@ export async function getStaticPaths() {
       params: { iconName },
     })),
     fallback: false,
-  }
+  };
 }