add prototype version of blog

components/ArticleImage.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import NextImage from 'next/image';
+import styled from 'styled-components';
+
+export default function ArticleImage({ src, caption, ...rest }) {
+  return (
+    <Wrapper>
+      <ImageWrapper>
+        <NextImage
+          src={src}
+          placeholder="blur"
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkj6+vBwAC4AFuNSmtGAAAAABJRU5ErkJggg=="
+          layout="fill"
+          objectFit="cover"
+          {...rest}
+        />
+      </ImageWrapper>
+      <Caption>{caption}</Caption>
+    </Wrapper>
+  );
+}
+
+const ImageWrapper = styled.div`
+  position: relative;
+  max-width: 90rem;
+
+  &::before {
+    float: left;
+    padding-top: 56.25%;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:not(:last-child) {
+    margin-bottom: 3rem;
+  }
+`;
+
+const Caption = styled.small`
+  display: block;
+  font-size: 1.4rem;
+  text-align: center;
+  margin-bottom: 1.6rem;
+`;

components/Code.js

@@ -0,0 +1,149 @@
+import { useClipboard } from 'hooks/useClipboard';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import React, { useState } 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';
+  const { copy, copied } = useClipboard({
+    copiedTimeout: 600,
+  });
+
+  function handleCopyClick(code) {
+    copy(code);
+  }
+
+  const copyButtonMarkup = <ClientOnly>{/* <CopyButton copied={copied} onClick={() => handleCopyClick(code)} /> */}</ClientOnly>;
+
+  return (
+    <>
+      <Highlight {...defaultProps} theme={null} code={code} language={nullAwareLanguage}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <>
+            <CodeWrapper className="code-wrapper" language={nullAwareLanguage}>
+              {withCopyButton && copyButtonMarkup}
+              <Pre className={className} style={style}>
+                {tokens.map((line, i) => {
+                  const lineNumber = i + 1;
+                  const isSelected = selectedLines.includes(lineNumber);
+                  const lineProps = getLineProps({ line, key: i });
+                  const className = lineProps.className + (isSelected ? ' selected-line' : '');
+
+                  return (
+                    <Line key={i} {...{ ...lineProps, className }}>
+                      {withLineNumbers && <LineNo>{lineNumber}</LineNo>}
+                      <LineContent>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({ token, key })} />
+                        ))}
+                      </LineContent>
+                    </Line>
+                  );
+                })}
+              </Pre>
+            </CodeWrapper>
+            {caption && <Caption>{caption}</Caption>}
+          </>
+        )}
+      </Highlight>
+    </>
+  );
+}
+
+const Caption = styled.small`
+  position: relative;
+  top: -22px;
+  word-break: break-word;
+`;
+
+// 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`
+  position: relative;
+  border-radius: 0.3em;
+  margin-top: 45px;
+  transition: visibility 0.1s;
+
+  &:not(:last-child) {
+    margin-bottom: 30px;
+  }
+
+  &::after {
+    position: absolute;
+    height: 2.2em;
+    content: '${(p) => p.language}';
+    right: 2.4rem;
+    padding: 1.2rem;
+    top: -2em;
+    line-height: 10px;
+    border-radius: 0.3em;
+    font-size: 4.8rem;
+    text-transform: uppercase;
+    background-color: inherit;
+    font-weight: bold;
+    text-align: center;
+  }
+`;
+/* 
+  &:hover { 
+    ${CopyButton} {
+      visibility: visible;
+    }
+  } */
+
+const Pre = styled.pre`
+  text-align: left;
+  margin: 1em 0;
+  padding: 0.5em;
+  overflow: scroll;
+`;
+
+const Line = styled.div`
+  display: flex;
+`;
+
+const LineNo = styled.span`
+  display: table-cell;
+  text-align: right;
+  padding-right: 1em;
+  user-select: none;
+  opacity: 0.5;
+`;
+
+const LineContent = styled.span`
+  display: table-cell;
+`;

components/MDXRichText.tsx

@@ -0,0 +1,115 @@
+import styled from 'styled-components';
+import { MDXRemote } from 'next-mdx-remote';
+import Code from './Code';
+import Quote from './Quote';
+import Link from './Link';
+import ArticleImage from './ArticleImage';
+
+export default function RichText(props) {
+  return (
+    <Container>
+      <MDXRemote {...props} components={components} />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  ${'' /* Opting-out of margin-collapse */}
+
+  flex-direction: column;
+  width: 100%;
+
+  section:not(:last-child) {
+    margin-bottom: 3.8rem;
+  }
+
+  a {
+    word-break: break-word;
+  }
+
+  /* @media (max-width: ${(p) => p.theme.breakpoints.md}) {
+    .remark-highlight {
+      width: 100%;
+      overflow-x: auto;
+    }
+  } */
+
+  & > section,
+  .footnotes {
+    ${'' /* content-visibility: auto; */}
+  }
+
+  ol,
+  ul {
+    font-size: 2.2rem;
+    line-height: 3rem;
+    margin: 0;
+    padding-left: 2.4rem;
+    li {
+      & > * {
+        vertical-align: top;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 3rem;
+    }
+  }
+`;
+
+const Paragraph = styled.p`
+  font-size: 2.2rem;
+  line-height: 3rem;
+  hanging-punctuation: first;
+
+  &:not(:last-child) {
+    margin-bottom: 3rem;
+  }
+
+  & + ul,
+  & + li {
+    margin-top: -1.5rem !important;
+  }
+`;
+
+const SecondHeading = styled.h2`
+  font-size: 3rem;
+  line-height: 3.8rem;
+  margin-bottom: 3.8rem;
+`;
+
+const ThirdHeading = styled.h3`
+  font-size: 2.4rem;
+  line-height: 3.4rem;
+  margin-bottom: 3.4rem;
+`;
+
+const Break = styled.br`
+  display: block;
+  content: '';
+  margin: 0;
+  height: 3rem;
+`;
+
+const TextHighlight = styled.code`
+  display: inline-block;
+  padding: 0 0.6rem;
+  color: rgb(var(--primary));
+  border-radius: 0.4rem;
+  background-color: rgb(var(--text));
+  font-size: 2rem;
+  font-family: inherit;
+`;
+
+const components = {
+  h2: SecondHeading,
+  h3: ThirdHeading,
+  p: Paragraph,
+  br: Break,
+  inlineCode: TextHighlight,
+  Image: ArticleImage,
+  a: Link,
+  Code,
+  Quote,
+};

components/Quote.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function Quote({ content, author, cite }) {
+  return (
+    <Container>
+      <Blockquote {...(cite && { cite })}>{content}</Blockquote>
+      <Caption>— {author}</Caption>
+    </Container>
+  );
+}
+
+const Container = styled.figure`
+  border-left: 1px solid rgb(var(--primary));
+  padding: 30px;
+  quotes: ${`"\\201c" "\\201d" "\\2018" "\\2019"`};
+  color: rgb(var(--primary));
+
+  &::before {
+    content: open-quote;
+    font-size: 8em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+    opacity: 0.6;
+    font-family: arial, sans-serif;
+  }
+`;
+
+const Blockquote = styled.blockquote`
+  color: rgb(var(--text));
+  display: inline;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  font-style: italic;
+  hanging-punctuation: first;
+`;
+
+const Caption = styled.figcaption`
+  color: rgb(var(--text));
+  display: block;
+  margin-top: 3rem;
+`;

components/Spacer.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const Spacer = styled.hr`
+  width: 100%;
+  border-color: currentColor;
+`;
+
+export default Spacer;

hooks/useClipboard.ts

@@ -0,0 +1,3 @@
+import { useClipboard } from 'use-clipboard-copy';
+
+export { useClipboard };