modifying the way the site shows markdown and adding the bundle analyzer

_styles.scss

@@ -171,13 +171,14 @@ body {
         justify-content: center;
         align-items: center;
         max-width: 800px;
+        margin: 20px;
     }
 
     &__image--container {
         display: flex;
         align-items: center;
         max-width: 400px;
-        height: 400px;
+        height: 100%;
 
         @media (max-width: $mobile-query) {
             height: 100%;

components/Post.js

@@ -1,4 +1,3 @@
-import ReactMarkdown from 'react-markdown';
 import PostImage from './PostImage';
 
 const Post = ({ post }) => {
@@ -7,9 +6,10 @@ const Post = ({ post }) => {
             <div className="post__title">{post.title}</div>
             <div className="post__date">{post.date}</div>
             {post.coverImage && <PostImage coverImage={post.coverImage} />}
-            <article className="post__content">
-                <ReactMarkdown source={post.content} />
-            </article>
+            <article
+                className="post__content"
+                dangerouslySetInnerHTML={{ __html: post.content }}
+            />
         </section>
     );
 };

lib/markdownToHtml.js

@@ -0,0 +1,18 @@
+import remark from 'remark';
+import html from 'remark-html';
+
+// this was originally copied from the React.js blog starter here
+// https://github.com/zeit/next.js/blob/canary/examples/blog-starter/lib/markdownToHtml.js
+
+// the "content" of this site's posts are just raw text for the most part, but using
+// remark and remark-html here enables support if I want to use additional Markdown syntax
+
+// if you get a terminal message like
+// "mdast-util-to-hast: deprecation: `allowDangerousHTML` is nonstandard, use `allowDangerousHtml` instead"
+// this is in the "mdast-util-to-hast project and is already being fixed by the PR here
+// https://github.com/remarkjs/remark-html/pull/29
+
+export default async function markdownToHtml(markdown) {
+    const result = await remark().use(html).process(markdown);
+    return result.toString();
+}

next.config.js

@@ -0,0 +1,4 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+    enabled: process.env.ANALYZE === 'true',
+});
+module.exports = withBundleAnalyzer({});