chore(v1.1): update rendered content from rich text into markdown

hendraaagil · May 27, 2021 · ca56cd3 · ca56cd3
1 parent 5313284
commit ca56cd3
Show file tree

Hide file tree

Showing 7 changed files with 750 additions and 120 deletions.
diff --git a/components/blog/MarkdownComponent.js b/components/blog/MarkdownComponent.js
@@ -0,0 +1,197 @@
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
+import {
+  Box,
+  Code,
+  Divider,
+  Heading,
+  Image,
+  Link,
+  OrderedList,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  UnorderedList,
+} from '@chakra-ui/react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { nord } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+const MarkdownComponent = ({ markdownContent }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[gfm]}
+      children={markdownContent}
+      components={{
+        a: ({ children, href }) => (
+          <Link href={href} isExternal color="brand.blue" textDecor="underline">
+            {children}
+          </Link>
+        ),
+        blockquote: ({ children }) => (
+          <Box
+            as="blockquote"
+            my={3}
+            pl={3}
+            py={0.5}
+            bg="gray.200"
+            borderLeftWidth="4px"
+            borderColor="brand.blue"
+            rounded="sm"
+          >
+            {children}
+          </Box>
+        ),
+        code: ({ inline, className, children }) => {
+          const match = /language-(\w+)/.exec(className || '');
+          return inline ? (
+            <Code
+              py={0.5}
+              px={1.5}
+              bg="gray.200"
+              fontFamily="Fira Code"
+              fontWeight="500"
+              rounded="sm"
+            >
+              {children}
+            </Code>
+          ) : (
+            <SyntaxHighlighter
+              style={nord}
+              language={match[1]}
+              children={String(children).replace(/\n$/, '')}
+              showLineNumbers
+            />
+          );
+        },
+        h1: ({ children }) => (
+          <Heading
+            as="h1"
+            fontSize="4xl"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        h2: ({ children }) => (
+          <Heading
+            as="h2"
+            fontSize="3xl"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        h3: ({ children }) => (
+          <Heading
+            as="h3"
+            fontSize="2xl"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        h4: ({ children }) => (
+          <Heading
+            as="h4"
+            fontSize="xl"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        h5: ({ children }) => (
+          <Heading
+            as="h5"
+            fontSize="lg"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        h6: ({ children }) => (
+          <Heading
+            as="h6"
+            fontSize="md"
+            my={3}
+            fontWeight="600"
+            lineHeight="tall"
+          >
+            {children}
+          </Heading>
+        ),
+        hr: () => <Divider my={3} />,
+        img: ({ alt, src }) => (
+          <>
+            <Image src={src} alt={alt} />
+            <Text as="figcaption" my={2} fontSize="sm">
+              {alt}
+            </Text>
+          </>
+        ),
+        ol: ({ children }) => <OrderedList pl={4}>{children}</OrderedList>,
+        p: ({ node, children }) => {
+          if (node.children[0].tagName === 'img') {
+            return (
+              <Box
+                as="figure"
+                my={3}
+                mx="auto"
+                w="fit-content"
+                bg="gray.200"
+                textAlign="center"
+                rounded="md"
+                overflow="hidden"
+              >
+                {children}
+              </Box>
+            );
+          }
+          return <Text my={3}>{children}</Text>;
+        },
+        ul: ({ children }) => <UnorderedList pl={4}>{children}</UnorderedList>,
+        table: ({ children }) => (
+          <Table bg="gray.200" rounded="md" overflow="hidden">
+            {children}
+          </Table>
+        ),
+        tbody: ({ children }) => <Tbody>{children}</Tbody>,
+        td: ({ children }) => (
+          <Td py={[1.5, 1.5, 3]} px={[3, 3, 6]} fontSize={['sm', 'sm', 'md']}>
+            {children}
+          </Td>
+        ),
+        th: ({ children }) => (
+          <Th
+            py={[1.5, 1.5, 3]}
+            px={[3, 3, 6]}
+            bg="brand.blue"
+            color="brand.light"
+            fontSize={['sm', 'sm', 'md']}
+            fontWeight="600"
+            textTransform="capitalize"
+          >
+            {children}
+          </Th>
+        ),
+        thead: ({ children }) => <Thead>{children}</Thead>,
+        tr: ({ children }) => <Tr>{children}</Tr>,
+      }}
+    />
+  );
+};
+
+export default MarkdownComponent;
diff --git a/lib/renderOptions.js b/lib/renderOptions.js
diff --git a/package.json b/package.json
@@ -9,8 +9,6 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.2",
-    "@contentful/rich-text-react-renderer": "^14.1.3",
-    "@contentful/rich-text-types": "^14.1.2",
     "@emotion/react": "11",
     "@emotion/styled": "11",
     "contentful": "^8.3.5",
@@ -22,6 +20,9 @@
     "nprogress": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-markdown": "^6.0.2",
+    "react-syntax-highlighter": "^15.4.3",
+    "remark-gfm": "^1.0.0"
   }
 }
diff --git a/pages/_document.js b/pages/_document.js
@@ -23,6 +23,10 @@ export default class MyDocument extends NextDocument {
             href="https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700"
             rel="stylesheet"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500"
+            rel="stylesheet"
+          />
         </Head>
 
         <body>

diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -1,11 +1,10 @@
 import Image from 'next/image';
 import { NextSeo } from 'next-seo';
 import { createClient } from 'contentful';
-import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import { Badge, Box, Divider, Heading, HStack, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
 
-import { renderOptions } from '../../lib/renderOptions';
+import MarkdownComponent from '../../components/blog/MarkdownComponent';
 import Disqus from '../../components/blog/Disqus';
 
 const client = createClient({
@@ -35,7 +34,7 @@ export const getStaticProps = async ({ params }) => {
 };
 
 const DetailBlog = ({ blog }) => {
-  const { content, slug, summary, thumbnail, title } = blog.fields;
+  const { markdownContent, slug, summary, thumbnail, title } = blog.fields;
   const { tags } = blog.metadata;
   const { createdAt, id, updatedAt } = blog.sys;
   const { width, height } = thumbnail.fields.file.details.image;
@@ -103,7 +102,7 @@ const DetailBlog = ({ blog }) => {
       </HStack>
       <Divider mt={4} mb={2} />
       <Box as="article" lineHeight="tall">
-        {documentToReactComponents(content, renderOptions)}
+        <MarkdownComponent markdownContent={markdownContent} />
       </Box>
       <Divider my={4} />
       <Disqus url={url} identifier={id} title={title} />

diff --git a/styles/GlobalStyle.js b/styles/GlobalStyle.js
@@ -27,7 +27,8 @@ export const GlobalStyle = ({ children }) => (
           scoll-behavior: smooth;
           cursor: default;
         }
-        b {
+        b,
+        strong {
           font-weight: 600;
         }
         #__next {