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>
2021-08-15 20:47:59 +02:00
parent 5834504dd9
commit 754300465a
8 changed files with 778 additions and 204 deletions
--- a/site/src/components/Header.tsx
+++ b/site/src/components/Header.tsx
@@ -1,21 +1,20 @@
-import { Button, Flex, Link, WrapItem, Text, Wrap } from "@chakra-ui/react";
-import download from "downloadjs";
-import JSZip from "jszip";
+import { Button, Flex, Link, WrapItem, Text, Wrap } from '@chakra-ui/react';
+import download from 'downloadjs';
+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
-        marginTop={3}
-        marginBottom={10}
-        spacing="15px"
-        justify="center"
-      >
+      <Wrap marginTop={3} marginBottom={10} spacing="15px" justify="center">
        <WrapItem>
-          <Button
-            leftIcon={<Download/>}
-            size="lg"
-            onClick={downloadAllIcons}
-          >
+          <Button leftIcon={<Download />} size="lg" onClick={downloadAllIcons}>
            Download all
          </Button>
        </WrapItem>
        <WrapItem>
-        <IconCustomizerDrawer/>
+          <IconCustomizerDrawer />
        </WrapItem>
        <WrapItem>
-        <Button
-          as="a"
-          leftIcon={<Github/>}
-          size="lg"
-          href={repositoryUrl}
-          target="__blank"
-          onClick={downloadAllIcons}
-        >
-          Github
-        </Button>
+          <Button
+            as="a"
+            leftIcon={<Github />}
+            size="lg"
+            href={repositoryUrl}
+            target="__blank"
+            onClick={downloadAllIcons}
+          >
+            Github
+          </Button>
        </WrapItem>
      </Wrap>
    </Flex>
-  )
+  );
 };

 export default Header;
--- a/site/src/components/Layout.tsx
+++ b/site/src/components/Layout.tsx
@@ -1,26 +1,38 @@
-import { Box, Divider, 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 {
+  Box,
+  Divider,
+  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 text = useColorModeValue('dark', 'light')
+  const { toggleColorMode } = useColorMode();
+  const text = useColorModeValue('dark', 'light');
  const ColorModeToggle = useColorModeValue(Moon, Sun);

-  function setQuery(query){
-    router.push({
-      pathname: '/',
-      query: { query: query }
-    }).then();
+  function setQuery(query) {
+    router
+      .push({
+        pathname: '/',
+        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
-                  fontSize="40px"
-                  lineHeight="48px"
-                >
+                <Text fontSize="40px" lineHeight="48px">
                  Lucide
                </Text>
              </Link>
            </NextLink>
          </Flex>
          <Flex justifyContent="center" alignItems="center">
-          <Link
-            href="https://github.com/lucide-icons/lucide"
-            isExternal
-            marginRight={6}
-            fontSize="xl"
-          >
-            Github
-          </Link>
-          <IconButton
-            size="md"
-            fontSize="lg"
-            aria-label={`Switch to ${text} mode`}
-            variant="ghost"
-            color="current"
-            ml="3"
-            onClick={toggleColorMode}
-            icon={<ColorModeToggle />}
-          />
+            <Link
+              href="https://github.com/lucide-icons/lucide"
+              isExternal
+              marginRight={6}
+              fontSize="xl"
+            >
+              Github
+            </Link>
+            <IconButton
+              size="md"
+              fontSize="lg"
+              aria-label={`Switch to ${text} mode`}
+              variant="ghost"
+              color="current"
+              ml="3"
+              onClick={toggleColorMode}
+              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>
--- a/site/src/pages/icon/[iconName].tsx
+++ b/site/src/pages/icon/[iconName].tsx
@@ -1,47 +1,48 @@
-import { useRouter } from 'next/router'
-import IconDetailOverlay from '../../components/IconDetailOverlay'
+import { useRouter } from 'next/router';
+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({
-      pathname: '/',
-      query,
-    })
-  }
+    router.push(
+      {
+        pathname: '/',
+        query,
+      },
+      undefined,
+      { scroll: false },
+    );
+  };

  return (
    <Layout>
-      <IconDetailOverlay
-        key={icon.name}
-        icon={icon}
-        close={onClose}
-      />
-      <Header {...{data}}/>
-      <IconOverview {...{data}}/>
+      <IconDetailOverlay key={icon.name} icon={icon} 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,
-  }
+  };
 }