fix blog components types

Blazity · Oct 10, 2021 · 95dfe24 · 95dfe24
1 parent 2618dbd
commit 95dfe24
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 196 deletions.
diff --git 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 (
     <Wrapper>
       <ImageWrapper>

diff --git a/components/Code.js → components/Code.tsx b/components/Code.js → 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 = <ClientOnly>{/* <CopyButton copied={copied} onClick={() => handleCopyClick(code)} /> */}</ClientOnly>;
+  const copyButtonMarkup = (
+    <ClientOnly>
+      <CopyButton copied={copied} onClick={() => handleCopyClick(code)}>
+        <CopyIcon />
+      </CopyButton>
+    </ClientOnly>
+  );
 
   return (
     <>
-      <Highlight {...defaultProps} theme={null} code={code} language={nullAwareLanguage}>
+      <Highlight {...defaultProps} theme={undefined} code={code} language={language}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <>
-            <CodeWrapper className="code-wrapper" language={nullAwareLanguage}>
+            <CodeWrapper className="code-wrapper" language={language}>
               {withCopyButton && copyButtonMarkup}
               <Pre className={className} style={style}>
                 {tokens.map((line, i) => {
@@ -53,53 +72,70 @@ export default function Code({ code, language, selectedLines = [], withCopyButto
   );
 }
 
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 24 24" focusable="false" className="chakra-icon css-onkibi">
+      <path
+        fill="currentColor"
+        d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      ></path>
+    </svg>
+  );
+}
+
 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
@@ -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<HTMLButtonElement> & { _ref?: Ref<HTMLButtonElement> }
+export type IconProps = HTMLProps<HTMLButtonElement> & { _ref?: Ref<HTMLButtonElement> };
 
-// 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 <IconWrapper {...rest} {...(_ref && { ref: _ref })} />
+  return <IconWrapper {...rest} {...(_ref && { ref: _ref })} />;
 }
 
 const IconWrapper = styled.button`
   border: none;
   background-color: transparent;
   width: 4rem;
-`
+`;
diff --git 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 (
     <Container>
       <MDXRemote {...props} components={components} />
@@ -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
@@ -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 (
     <Container>
       <Blockquote {...(cite && { cite })}>{content}</Blockquote>
@@ -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
@@ -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
@@ -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",