From 95dfe24f5b354b72b74b2194df08a35341500822 Mon Sep 17 00:00:00 2001 From: Bart Stefanski Date: Sun, 10 Oct 2021 15:38:03 +0200 Subject: [PATCH] fix blog components types --- components/ArticleImage.tsx | 9 +- components/{Code.js => Code.tsx} | 142 +++++++++++++++++++------------ components/Icon.tsx | 11 ++- components/MDXRichText.tsx | 31 +++---- components/Quote.tsx | 10 ++- next.config.js | 8 -- package.json | 2 +- pages/blog/[slug].tsx | 57 +++++++------ posts/test-article.mdx | 1 + tsconfig.json | 5 +- utils/formatDate.ts | 2 +- utils/readTime.ts | 4 +- yarn.lock | 128 +++++++++++----------------- 13 files changed, 214 insertions(+), 196 deletions(-) rename components/{Code.js => Code.tsx} (51%) diff --git a/components/ArticleImage.tsx b/components/ArticleImage.tsx index 024e7ea7c..d6f0069f9 100644 --- a/components/ArticleImage.tsx +++ b/components/ArticleImage.tsx @@ -1,8 +1,13 @@ import React from 'react'; -import NextImage from 'next/image'; +import NextImage, { ImageProps } from 'next/image'; import styled from 'styled-components'; -export default function ArticleImage({ src, caption, ...rest }) { +interface ArticleImageProps extends ImageProps { + src: string; + caption: string; +} + +export default function ArticleImage({ src, caption, ...rest }: ArticleImageProps) { return ( diff --git a/components/Code.js b/components/Code.tsx similarity index 51% rename from components/Code.js rename to components/Code.tsx index 2f6407bf4..89868cccc 100644 --- a/components/Code.js +++ b/components/Code.tsx @@ -1,29 +1,48 @@ import { useClipboard } from 'hooks/useClipboard'; -import Highlight, { defaultProps } from 'prism-react-renderer'; -import React, { useState } from 'react'; +import Highlight, { defaultProps, Language } from 'prism-react-renderer'; +import React from 'react'; import styled from 'styled-components'; -// import Icon from 'components/icons/Icon'; -// import CopyIcon from './icons/CopyIcon'; import ClientOnly from 'components/ClientOnly'; -export default function Code({ code, language, selectedLines = [], withCopyButton = true, withLineNumbers, caption }) { - const nullAwareLanguage = language || 'js'; +export interface CodeProps { + code: string; + language?: Language; + selectedLines?: number[]; + withCopyButton?: boolean; + withLineNumbers?: boolean; + caption?: string; +} + +export default function Code({ + code, + language = 'javascript', + selectedLines = [], + withCopyButton = true, + withLineNumbers, + caption, +}: CodeProps) { const { copy, copied } = useClipboard({ copiedTimeout: 600, }); - function handleCopyClick(code) { + function handleCopyClick(code: string) { copy(code); } - const copyButtonMarkup = {/* handleCopyClick(code)} /> */}; + const copyButtonMarkup = ( + + handleCopyClick(code)}> + + + + ); return ( <> - + {({ className, style, tokens, getLineProps, getTokenProps }) => ( <> - + {withCopyButton && copyButtonMarkup} 
                 {tokens.map((line, i) => {
@@ -53,53 +72,70 @@ export default function Code({ code, language, selectedLines = [], withCopyButto
   );
 }
 
+function CopyIcon() {
+  return (
+    
+      
+    
+  );
+}
+
 const Caption = styled.small`
   position: relative;
-  top: -22px;
+  top: -2.2rem;
   word-break: break-word;
+  font-size: 1.2rem;
+`;
+
+const CopyButton = styled.button<{ copied: boolean }>`
+  position: absolute;
+  border: none;
+  top: 2.4rem;
+  right: 2.4rem;
+  visibility: hidden;
+  background-color: rgba(var(--secondary), 0.1);
+  cursor: pointer;
+  width: 3rem;
+  height: 3rem;
+  line-height: normal;
+  border-radius: 0.3rem;
+  color: rgb(var(--text));
+  z-index: 1;
+  line-height: 1;
+
+  &::after {
+    position: absolute;
+    content: 'Copied';
+    visibility: ${(p) => (p.copied ? 'visible' : 'hidden')};
+    top: 0;
+    left: -4rem;
+    height: 3rem;
+    font-weight: bold;
+    border-radius: 0.3rem;
+    line-height: 1.5;
+    font-size: 1.4rem;
+    padding: 0.5rem 1rem;
+    color: rgb(var(--primary));
+    background-color: rgb(var(--secondary));
+  }
+
+  &:hover {
+    background-color: rgba(var(--secondary), 0.2);
+  }
 `;
 
-// const CopyButton = styled(CopyIcon)`
-//   position: absolute;
-//   top: ${(p) => p.theme.spacings.sm}px;
-//   right: ${(p) => p.theme.spacings.sm}px;
-//   visibility: hidden;
-//   background-color: var(--overlay);
-//   cursor: pointer;
-//   width: 30px;
-//   height: 30px;
-//   opacity: 0.7;
-//   line-height: normal;
-//   border-radius: 3px;
-//   color: var(--text);
-//   z-index: 1;
-
-//   &::after {
-//     position: absolute;
-//     content: 'Copied';
-//     visibility: ${(p) => (p.copied ? 'visible' : 'hidden')};
-//     top: 0;
-//     left: -25px;
-//     height: 30px;
-//     border-radius: 3px;
-//     padding: 5px;
-//     color: inherit;
-//     background-color: var(--overlay);
-//   }
-
-//   &:hover {
-//     background-color: var(--overlay-lighter);
-//   }
-// `;
-
-const CodeWrapper = styled.div`
+const CodeWrapper = styled.div<{ language: string }>`
   position: relative;
   border-radius: 0.3em;
-  margin-top: 45px;
+  margin-top: 4.5rem;
   transition: visibility 0.1s;
+  font-size: 1.6rem;
 
   &:not(:last-child) {
-    margin-bottom: 30px;
+    margin-bottom: 3rem;
   }
 
   &::after {
@@ -109,21 +145,21 @@ const CodeWrapper = styled.div`
     right: 2.4rem;
     padding: 1.2rem;
     top: -2em;
-    line-height: 10px;
+    line-height: 1rem;
     border-radius: 0.3em;
-    font-size: 4.8rem;
+    font-size: 1.5rem;
     text-transform: uppercase;
     background-color: inherit;
     font-weight: bold;
     text-align: center;
   }
-`;
-/* 
-  &:hover { 
+
+  &:hover {
     ${CopyButton} {
       visibility: visible;
     }
-  } */
+  }
+`;
 
 const Pre = styled.pre`
   text-align: left;
diff --git a/components/Icon.tsx b/components/Icon.tsx
index 4c0e45416..4decdf21c 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -1,15 +1,14 @@
-import React, { HTMLProps, Ref } from 'react'
-import styled from 'styled-components'
+import React, { HTMLProps, Ref } from 'react';
+import styled from 'styled-components';
 
-export type IconProps = HTMLProps & { _ref?: Ref }
+export type IconProps = HTMLProps & { _ref?: Ref };
 
-// TODO any because styled-component still has children prop type bug and I won't waste my time on it #sigma #grindset
 export default function Icon({ _ref, ...rest }: any) {
-  return 
+  return ;
 }
 
 const IconWrapper = styled.button`
   border: none;
   background-color: transparent;
   width: 4rem;
-`
+`;
diff --git a/components/MDXRichText.tsx b/components/MDXRichText.tsx
index 9c1ea7e48..d699255d4 100644
--- a/components/MDXRichText.tsx
+++ b/components/MDXRichText.tsx
@@ -1,11 +1,12 @@
 import styled from 'styled-components';
-import { MDXRemote } from 'next-mdx-remote';
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import Code from './Code';
 import Quote from './Quote';
 import Link from './Link';
 import ArticleImage from './ArticleImage';
+import { media } from 'utils/media';
 
-export default function RichText(props) {
+export default function RichText(props: MDXRemoteSerializeResult) {
   return (
     
       
@@ -28,12 +29,12 @@ const Container = styled.div`
     word-break: break-word;
   }
 
-  /* @media (max-width: ${(p) => p.theme.breakpoints.md}) {
+  ${media('<=desktop')} {
     .remark-highlight {
       width: 100%;
       overflow-x: auto;
     }
-  } */
+  }
 
   & > section,
   .footnotes {
@@ -42,8 +43,8 @@ const Container = styled.div`
 
   ol,
   ul {
-    font-size: 2.2rem;
-    line-height: 3rem;
+    font-size: 1.8rem;
+    line-height: 2.7rem;
     margin: 0;
     padding-left: 2.4rem;
     li {
@@ -53,18 +54,18 @@ const Container = styled.div`
     }
 
     &:not(:last-child) {
-      margin-bottom: 3rem;
+      margin-bottom: 2.7rem;
     }
   }
 `;
 
 const Paragraph = styled.p`
-  font-size: 2.2rem;
-  line-height: 3rem;
+  font-size: 1.8rem;
+  line-height: 2.7rem;
   hanging-punctuation: first;
 
   &:not(:last-child) {
-    margin-bottom: 3rem;
+    margin-bottom: 2.7rem;
   }
 
   & + ul,
@@ -74,13 +75,13 @@ const Paragraph = styled.p`
 `;
 
 const SecondHeading = styled.h2`
-  font-size: 3rem;
-  line-height: 3.8rem;
-  margin-bottom: 3.8rem;
+  font-size: 2.5rem;
+  line-height: 3.75rem;
+  margin-bottom: 3.75rem;
 `;
 
 const ThirdHeading = styled.h3`
-  font-size: 2.4rem;
+  font-size: 2.2rem;
   line-height: 3.4rem;
   margin-bottom: 3.4rem;
 `;
@@ -98,7 +99,7 @@ const TextHighlight = styled.code`
   color: rgb(var(--primary));
   border-radius: 0.4rem;
   background-color: rgb(var(--text));
-  font-size: 2rem;
+  font-size: 1.6rem;
   font-family: inherit;
 `;
 
diff --git a/components/Quote.tsx b/components/Quote.tsx
index 4eade4742..aafcf2ef7 100644
--- a/components/Quote.tsx
+++ b/components/Quote.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export default function Quote({ content, author, cite }) {
+interface QuoteProps {
+  content: string;
+  author: string;
+  cite: string;
+}
+
+export default function Quote({ content, author, cite }: QuoteProps) {
   return (
     
       
{content}

@@ -12,7 +18,7 @@ export default function Quote({ content, author, cite }) {
 
 const Container = styled.figure`
   border-left: 1px solid rgb(var(--primary));
-  padding: 30px;
+  padding: 3rem;
   quotes: ${`"\\201c" "\\201d" "\\2018" "\\2019"`};
   color: rgb(var(--primary));
 
diff --git a/next.config.js b/next.config.js
index ef00d2975..8357eb917 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,14 +12,6 @@ module.exports = withBundleAnalyzer({
     deviceSizes: [320, 640, 1080, 1200],
     imageSizes: [64, 128],
   },
-  typescript: {
-    // TODO: remove xd
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    ignoreBuildErrors: true,
-  },
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     if (!dev) {
       config.plugins.push(new CopyPlugin({ patterns: [{ from: 'posts', to: 'posts' }] }));
diff --git a/package.json b/package.json
index 0601d303f..428ec7127 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "css-in-js-media": "^2.0.1",
     "date-fns": "^2.24.0",
     "gray-matter": "^4.0.3",
-    "next": "11.1.2",
+    "next": "11.1.3-canary.54",
     "polished": "^4.1.3",
     "prism-react-renderer": "^1.2.1",
     "react": "17.0.2",
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index 7c87036d4..ae4813a13 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -10,28 +10,33 @@ import Head from 'next/head';
 import { getAllPostsSlugs, getSinglePost } from 'utils/postsFetcher';
 import React, { useEffect } from 'react';
 import { getReadTime } from 'utils/readTime';
-import Spacer from 'components/Spacer';
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
+import Container from 'components/Container';
 // import AuthorInfo from 'components/AuthorInfo';
 
-export default function SingleArticlePage(props) {
+export default function SingleArticlePage(props: InferGetStaticPropsType) {
   const { slug, content, meta, readTime } = props;
   const { title, description, date } = meta;
 
   const formattedDate = formatDate(new Date(date));
 
   useEffect(() => {
-    const prismThemeLinkEl = document.querySelector('link[data-id="prism-theme"]');
+    lazyLoadPrismTheme();
 
-    if (!prismThemeLinkEl) {
-      const headEl = document.querySelector('head');
-      if (headEl) {
-        const newEl = document.createElement('link');
-        newEl.setAttribute('data-id', 'prism-theme');
-        newEl.setAttribute('rel', 'stylesheet');
-        newEl.setAttribute('href', '/prism-theme.css');
-        newEl.setAttribute('media', 'print');
-        newEl.setAttribute('onload', "this.media='all'; this.onload=null;");
-        headEl.appendChild(newEl);
+    function lazyLoadPrismTheme() {
+      const prismThemeLinkEl = document.querySelector('link[data-id="prism-theme"]');
+
+      if (!prismThemeLinkEl) {
+        const headEl = document.querySelector('head');
+        if (headEl) {
+          const newEl = document.createElement('link');
+          newEl.setAttribute('data-id', 'prism-theme');
+          newEl.setAttribute('rel', 'stylesheet');
+          newEl.setAttribute('href', '/prism-theme.css');
+          newEl.setAttribute('media', 'print');
+          newEl.setAttribute('onload', "this.media='all'; this.onload=null;");
+          headEl.appendChild(newEl);
+        }
       }
     }
   }, []);
@@ -46,11 +51,11 @@ export default function SingleArticlePage(props) {
       {/*  */}
       {/*  */}
       {/*  */}
-      
+      
         {/* 
 */}
         
         {/*  */}
-      
+      
     
   );
 }
@@ -63,17 +68,20 @@ export async function getStaticPaths() {
   };
 }
 
-export async function getStaticProps({ params }) {
-  const { slug, content, meta } = await getSinglePost(params.slug);
-  const serializedContent = await serializeContent(content, meta);
-  return { props: { slug, content: serializedContent, meta, readTime: getReadTime(content) } };
+export async function getStaticProps({ params }: GetStaticPropsContext<{ slug: string }>) {
+  if (params) {
+    const { slug, content, meta } = await getSinglePost(params.slug);
+    const serializedContent = await serializeContent(content, meta);
+    return { props: { slug, content: serializedContent, meta, readTime: getReadTime(content) } };
+  }
 
-  async function serializeContent(content, meta) {
+  async function serializeContent(content: string, meta: Record) {
     const { serialize } = await import('next-mdx-remote/serialize');
     return serialize(content, {
       scope: meta,
       mdxOptions: {
         remarkPlugins: [
+          // @ts-ignore
           await import('@fec/remark-a11y-emoji'),
           await import('remark-breaks'),
           await import('remark-gfm'),
@@ -81,6 +89,7 @@ export async function getStaticProps({ params }) {
           await import('remark-external-links'),
           [await import('remark-toc'), { ordered: true, tight: true, maxDepth: 3 }],
           await import('remark-slug'),
+          // @ts-ignore
           await import('remark-sectionize'),
         ],
         rehypePlugins: [],
@@ -89,12 +98,6 @@ export async function getStaticProps({ params }) {
   }
 }
 
-const Container = styled.main`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+const CustomContainer = styled(Container)`
   max-width: 90rem;
-  padding: 0 1.2rem;
-  margin: 0 auto;
-  margin-bottom: 3.8rem;
 `;
diff --git a/posts/test-article.mdx b/posts/test-article.mdx
index 0af301495..f61b0a702 100644
--- a/posts/test-article.mdx
+++ b/posts/test-article.mdx
@@ -130,6 +130,7 @@ function check_webp_feature(feature, callback) {
     };
     img.src = "data:image/webp;base64," + kTestImages[feature];
 }`}
+  withLineNumbers
   caption="Source: https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp"
 />
 
diff --git a/tsconfig.json b/tsconfig.json
index ff676550e..8376a7f2d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/Code.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }
diff --git a/utils/formatDate.ts b/utils/formatDate.ts
index 9aa56a9f0..1f028c6e0 100644
--- a/utils/formatDate.ts
+++ b/utils/formatDate.ts
@@ -1,5 +1,5 @@
 import format from 'date-fns/format';
 
-export function formatDate(date) {
+export function formatDate(date: number | Date) {
   return format(date, 'do MMMM yyyy');
 }
diff --git a/utils/readTime.ts b/utils/readTime.ts
index b66cf7b14..47430d661 100644
--- a/utils/readTime.ts
+++ b/utils/readTime.ts
@@ -1,6 +1,6 @@
 import * as readingTime from 'reading-time';
 
-export function getReadTime(text) {
-  const readTime = Math.round(readingTime(text).minutes);
+export function getReadTime(text: string) {
+  const readTime = Math.round(readingTime.default(text).minutes);
   return `${readTime < 1 ? '< 1' : Math.round(readTime)}min read`;
 }
diff --git a/yarn.lock b/yarn.lock
index ce0a398ea..3849e455e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -297,14 +297,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@7.15.3":
-  version "7.15.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
-  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.0":
+"@babel/runtime@7.15.4", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.0":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -484,10 +477,10 @@
   dependencies:
     webpack-bundle-analyzer "4.3.0"
 
-"@next/env@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-11.1.2.tgz#27996efbbc54c5f949f5e8c0a156e3aa48369b99"
-  integrity sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA==
+"@next/env@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-11.1.3-canary.54.tgz#af9d7db10a7aa7eca01b6c71deff6ca1c66a586f"
+  integrity sha512-p90+S8dr61L+Oadb+mpga+MmTBUhLBTETVwjz1N4/NmpDyBTvi9luwvSP26De2I23fMvS+9LwYZPOJx308xNhg==
 
 "@next/eslint-plugin-next@11.1.2":
   version "11.1.2"
@@ -496,15 +489,15 @@
   dependencies:
     glob "7.1.7"
 
-"@next/polyfill-module@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.1.2.tgz#1fe92c364fdc81add775a16c678f5057c6aace98"
-  integrity sha512-xZmixqADM3xxtqBV0TpAwSFzWJP0MOQzRfzItHXf1LdQHWb0yofHHC+7eOrPFic8+ZGz5y7BdPkkgR1S25OymA==
+"@next/polyfill-module@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.1.3-canary.54.tgz#7f2e8656e05d46407e70fa222e23e91b026780b0"
+  integrity sha512-2U2cZeMQukDauKU4K2ZQkNd8w2MPU+J0VM4vWsgSSCVlQ+DW0FiguquLcobxAaMCumaLtM/dQp5aDjm+2TuYHA==
 
-"@next/react-dev-overlay@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.1.2.tgz#73795dc5454b7af168bac93df7099965ebb603be"
-  integrity sha512-rDF/mGY2NC69mMg2vDqzVpCOlWqnwPUXB2zkARhvknUHyS6QJphPYv9ozoPJuoT/QBs49JJd9KWaAzVBvq920A==
+"@next/react-dev-overlay@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.1.3-canary.54.tgz#0c66c80a735789698e20c0b9b30adc4a22f0a274"
+  integrity sha512-J6ajNrd79QlhWxvxQP1oIFpSq6oO4QncCuDyiBjpHqvNTnx/9hkm3/7GsDEy6QyIBSx6D13tC/uxpB27c/KPvQ==
   dependencies:
     "@babel/code-frame" "7.12.11"
     anser "1.4.9"
@@ -518,30 +511,30 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz#44ea40d8e773e4b77bad85e24f6ac041d5e4b4a5"
-  integrity sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==
+"@next/react-refresh-utils@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.1.3-canary.54.tgz#6e094aa53c2b0623d40ca4a960267360aaae3177"
+  integrity sha512-jXBfzp854HU3+N44laYNxnvFGJvhA0TXz24VLS6d30r+0pDHtMi9X+zSfNfPmHpXabDjBKpnPDouMv+Sg6MGJQ==
 
-"@next/swc-darwin-arm64@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.2.tgz#93226c38db488c4b62b30a53b530e87c969b8251"
-  integrity sha512-hZuwOlGOwBZADA8EyDYyjx3+4JGIGjSHDHWrmpI7g5rFmQNltjlbaefAbiU5Kk7j3BUSDwt30quJRFv3nyJQ0w==
+"@next/swc-darwin-arm64@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.3-canary.54.tgz#75b63e0d2a1a3c0a72991106c8160ddb58ba8385"
+  integrity sha512-SAPPI7N1K/XX54abiGolI5BZjJ7bRndZGSDVN0SBlcz1MzBGSFQ6AN959ATI6WKoC/IVnSta9x9OPXTjLrZj5g==
 
-"@next/swc-darwin-x64@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.2.tgz#792003989f560c00677b5daeff360b35b510db83"
-  integrity sha512-PGOp0E1GisU+EJJlsmJVGE+aPYD0Uh7zqgsrpD3F/Y3766Ptfbe1lEPPWnRDl+OzSSrSrX1lkyM/Jlmh5OwNvA==
+"@next/swc-darwin-x64@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.3-canary.54.tgz#c0eae5d1db96e2447c4b6ec566266f6f335c5769"
+  integrity sha512-ZuGu0AfS+iExYfhg8MiNSvDCGqMkGNNSQHn+CT75Q2iRtq7/40CEIS5/SLDHKrSPv1Tsq6JxRgSueTrv22zdUA==
 
-"@next/swc-linux-x64-gnu@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.2.tgz#8216b2ae1f21f0112958735c39dd861088108f37"
-  integrity sha512-YcDHTJjn/8RqvyJVB6pvEKXihDcdrOwga3GfMv/QtVeLphTouY4BIcEUfrG5+26Nf37MP1ywN3RRl1TxpurAsQ==
+"@next/swc-linux-x64-gnu@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.3-canary.54.tgz#06d98bc4518c1ab680addb5b6be271789869e2e0"
+  integrity sha512-prZ7sHyQA4MyNDuQBjZrhpnlifnQwN8k5TGOLdp8M2sNDW/VlEwLkxs5NwhpzywVlS19+Dc0Kz0dcQfvHPezJw==
 
-"@next/swc-win32-x64-msvc@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.2.tgz#e15824405df137129918205e43cb5e9339589745"
-  integrity sha512-e/pIKVdB+tGQYa1cW3sAeHm8gzEri/HYLZHT4WZojrUxgWXqx8pk7S7Xs47uBcFTqBDRvK3EcQpPLf3XdVsDdg==
+"@next/swc-win32-x64-msvc@11.1.3-canary.54":
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.3-canary.54.tgz#b6a35156a6b601f497f1303c7fd65f70dfcada97"
+  integrity sha512-zmf3SMYXyEzH55mgjgoi2R9FD0ogd2hGN2YOMktVxvS+v6fQT/Gar8BrQJTDd7k07RTxQ72ncPTHhb1PO/aNdw==
 
 "@node-rs/helper@1.2.1":
   version "1.2.1"
@@ -995,11 +988,6 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
-ast-types@0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
-  integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
-
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -3649,20 +3637,19 @@ next-mdx-remote@^3.0.5:
     esbuild "^0.12.9"
     pkg-dir "^5.0.0"
 
-next@11.1.2:
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/next/-/next-11.1.2.tgz#527475787a9a362f1bc916962b0c0655cc05bc91"
-  integrity sha512-azEYL0L+wFjv8lstLru3bgvrzPvK0P7/bz6B/4EJ9sYkXeW8r5Bjh78D/Ol7VOg0EIPz0CXoe72hzAlSAXo9hw==
+next@11.1.3-canary.54:
+  version "11.1.3-canary.54"
+  resolved "https://registry.yarnpkg.com/next/-/next-11.1.3-canary.54.tgz#b14278208b40d06621f13153522cc803640a7a39"
+  integrity sha512-96pZTH7+i2LBdJnNNVlR+pETyvMjNu/WnhVC5Dgpszxv0qzqkIaQKhPJTWNQakjdoMHzeMXdCkY6Uq9ZECHqkg==
   dependencies:
-    "@babel/runtime" "7.15.3"
+    "@babel/runtime" "7.15.4"
     "@hapi/accept" "5.0.2"
-    "@next/env" "11.1.2"
-    "@next/polyfill-module" "11.1.2"
-    "@next/react-dev-overlay" "11.1.2"
-    "@next/react-refresh-utils" "11.1.2"
+    "@next/env" "11.1.3-canary.54"
+    "@next/polyfill-module" "11.1.3-canary.54"
+    "@next/react-dev-overlay" "11.1.3-canary.54"
+    "@next/react-refresh-utils" "11.1.3-canary.54"
     "@node-rs/helper" "1.2.1"
     assert "2.0.0"
-    ast-types "0.13.2"
     browserify-zlib "0.2.0"
     browserslist "4.16.6"
     buffer "5.6.0"
@@ -3687,7 +3674,6 @@ next@11.1.2:
     os-browserify "0.3.0"
     p-limit "3.1.0"
     path-browserify "1.0.1"
-    pnp-webpack-plugin "1.6.4"
     postcss "8.2.15"
     process "0.11.10"
     querystring-es3 "0.2.1"
@@ -3697,7 +3683,7 @@ next@11.1.2:
     stream-browserify "3.0.0"
     stream-http "3.1.1"
     string_decoder "1.3.0"
-    styled-jsx "4.0.1"
+    styled-jsx "5.0.0-beta.2"
     timers-browserify "2.0.12"
     tty-browserify "0.0.1"
     use-subscription "1.5.1"
@@ -3705,10 +3691,10 @@ next@11.1.2:
     vm-browserify "1.1.2"
     watchpack "2.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "11.1.2"
-    "@next/swc-darwin-x64" "11.1.2"
-    "@next/swc-linux-x64-gnu" "11.1.2"
-    "@next/swc-win32-x64-msvc" "11.1.2"
+    "@next/swc-darwin-arm64" "11.1.3-canary.54"
+    "@next/swc-darwin-x64" "11.1.3-canary.54"
+    "@next/swc-linux-x64-gnu" "11.1.3-canary.54"
+    "@next/swc-win32-x64-msvc" "11.1.3-canary.54"
 
 node-fetch@2.6.1:
   version "2.6.1"
@@ -4088,13 +4074,6 @@ platform@1.3.6:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-pnp-webpack-plugin@1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
-  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
-  dependencies:
-    ts-pnp "^1.1.6"
-
 polished@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
@@ -5019,10 +4998,10 @@ styled-components@^5.3.1:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-jsx@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.1.tgz#ae3f716eacc0792f7050389de88add6d5245b9e9"
-  integrity sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==
+styled-jsx@5.0.0-beta.2:
+  version "5.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.2.tgz#a4696a0979b0efbea572cf9149e83bbd3085e600"
+  integrity sha512-yDVSNs7o2TK1w2S+S1zMuAn2x7nuodg3jtcalfCIJasVtGMx3pziOEI2GR5OY2qrA6C9RaAAPQWl8DR7BvHcHg==
   dependencies:
     "@babel/plugin-syntax-jsx" "7.14.5"
     "@babel/types" "7.15.0"
@@ -5155,11 +5134,6 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.0.2.tgz#94a3aa9d5ce379fc561f6244905b3f36b7458d96"
   integrity sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w==
 
-ts-pnp@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
-  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
-
 tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz#954c1fe973da6339c78e06b03ce2e48810b65f36"