tidy up getStaticProps by creating @utils and test image uploading

Author: hkennyv

content/hello.md

@@ -2,7 +2,7 @@
 title: "Hello Friend"
 date: "2019-01-25"
 author: "Lorem Ipsum"
-cover: "hello.jpg"
+cover: "/images/uploads/hello.jpg"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante."
 ---
 

jsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@components/*": ["components/*"]
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"]
     }
   }
 }

pages/index.js

@@ -1,5 +1,7 @@
 import matter from "gray-matter";
 
+import { parseMarkdownFiles } from "@utils/utils";
+
 import Layout from "@components/Layout";
 import PostList from "@components/PostList";
 
@@ -24,24 +26,7 @@ export async function getStaticProps() {
   // collect all of the markdown files in /content and transform them using
   // gray-matter to parse the YAML header and the markdown body
   let ctx = require.context("../content", true, /\.md$/);
-  const posts = ((context) => {
-    const keys = context.keys();
-    const values = keys.map(context);
-
-    const data = keys.map((key, idx) => {
-      const slug = key.replace(/^.*[\\\/]/, "").slice(0, -3);
-      const value = values[idx];
-      const document = matter(value.default);
-
-      return {
-        frontmatter: document.data,
-        markdownBody: document.content,
-        slug,
-      };
-    });
-
-    return data;
-  })(ctx);
+  const posts = parseMarkdownFiles(ctx);
 
   return {
     props: {

public/images/uploads/hello.jpg

@@ -0,0 +1,28 @@
+import matter from "gray-matter";
+
+/*
+ * inputs a webpack.context object of markdown files and returns an array of
+ * objects, each containing the frontmatter, markdownBody, and slug for the
+ * corresponding markdown file
+ */
+export function parseMarkdownFiles(context) {
+  // keys are the name(s) of the files and values are the contents of the file
+  const keys = context.keys();
+  const values = keys.map(context);
+
+  // construct slug from the filename (key)
+  // pass the file contents through matter to parse frontmatter and markdownBody
+  const data = keys.map((key, idx) => {
+    const slug = key.replace(/^.*[\\\/]/, "").slice(0, -3);
+    const value = values[idx];
+    const document = matter(value.default);
+
+    return {
+      frontmatter: document.data,
+      markdownBody: document.content,
+      slug,
+    };
+  });
+
+  return data;
+}