media folder

Author: Taylor Griffith

package.json

@@ -14,9 +14,11 @@
     "gray-matter": "^3.1.1",
     "klaw": "^2.1.1",
     "marked": "^0.3.12",
+    "moment": "^2.20.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^4.0.0-beta.21",
+    "react-moment": "^0.7.0",
     "react-router": "^4.2.0",
     "react-static": "^5.1.10"
   },

public/admin/config.yml

@@ -2,7 +2,7 @@ backend:
   name: git-gateway
   branch: master # Branch to update (optional; defaults to master)
 
-media_folder: "src/images/uploads" # Media files will be stored in the repo under images/uploads
+media_folder: "public/images/uploads" # Media files will be stored in the repo under public/images/uploads
 
 collections:
   - name: "blog" # Used in routes, e.g., /admin/collections/blog

src/containers/Post.js

@@ -1,12 +1,20 @@
 import React from 'react'
 import { withRouteData, Link } from 'react-static'
+import Moment from 'react-moment';
 //
 
-export default withRouteData(({ post }) => (
-  <div>
-    <Link to="/blog/">{'<'} Back</Link>
-    <br />
-    {/* <h3>{post.data.title}</h3> */}
-    {/* <p>{post.content}</p> */}
-  </div>
-))
+export default withRouteData(({ post }) => {
+  // var image = require(`${post.data.thumbnail}`)
+  // ../images/uploads/image.jpg
+  return (
+    <div>
+      {console.log(`${post.data.thumbnail}`)}
+      <Link to="/blog/">{'<'} Back</Link>
+      <br />
+      <h3>{post.data.title}</h3>
+      <Moment format="MMMM Do, YYYY">{post.data.date}</Moment>
+      <img src={require(`${post.data.thumbnail}`)} alt="" />
+      <p dangerouslySetInnerHTML={{ __html: post.content }}></p>
+    </div>
+  )
+})

static.config.js

@@ -4,38 +4,40 @@ const klaw = require('klaw')
 const marked = require('marked');
 const path = require('path')
 const matter = require('gray-matter');
+const moment = require('moment');
 
+function getPosts() {
+  const items = []
 
-      // Walk ("klaw") through posts directory and push file paths into posts array //
-
-      // Filter function to retrieve .md files //
+  // Filter function to retrieve .md files //
 
+  let filterFn = function (item) {
+    return path.extname(item) === ".md";
+  }
 
-    function getPosts() {
-      const items = []    
-      
-      let filterFn = function (item) {
-        return path.extname(item) === ".md";
-      }
+  // Walk ("klaw") through posts directory and push file paths into posts array //
 
-      return new Promise(resolve => { klaw('./src/posts')
+  return new Promise(resolve => {
+    klaw('./src/posts')
       .on('data', item => {
         if (filterFn(item.path)) {
           // If markdown file, read contents //
           let data = fs.readFileSync(item.path, 'utf8')
           // Convert to frontmatter object and markdown content //
           let dataObj = matter(data)
           dataObj.content = marked(dataObj.content)
-          // Create slug for URL //
+          // Create slug for URL, date and title //
           dataObj.data.slug = dataObj.data.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '')
+          dataObj.data.thumbnail = dataObj.data.thumbnail.replace('/src', '..')
+          // console.log(dataObj)
           items.push(dataObj)
         }
       })
       .on('end', () => {
-       resolve(items)         
+        resolve(items)
       })
-    })
-  }
+  })
+}
 
 
 
@@ -48,7 +50,6 @@ export default {
   getRoutes: async () => {
 
     var posts = await getPosts()
-    console.log(posts)
 
     return [
       {

yarn.lock

@@ -3476,14 +3476,23 @@ got@^6.3.0, got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
+graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+gray-matter@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-3.1.1.tgz#101f80d9e69eeca6765cdce437705b18f40876ac"
+  dependencies:
+    extend-shallow "^2.0.1"
+    js-yaml "^3.10.0"
+    kind-of "^5.0.2"
+    strip-bom-string "^1.0.0"
+
 gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -4265,7 +4274,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.9.1:
+js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
@@ -4378,6 +4387,12 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
+klaw@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-2.1.1.tgz#42b76894701169cc910fd0d19ce677b5fb378af1"
+  dependencies:
+    graceful-fs "^4.1.9"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -4550,6 +4565,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.3.12:
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.14.tgz#42375c23e206b95fdd497dd1d2f33ae4d1cf3d6c"
+
 match-sorter@^2.0.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-2.2.0.tgz#3e88661aab7b8320836f67731cf7f9d3cb889761"
@@ -4742,6 +4761,10 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
+moment@^2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
 mri@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.0.tgz#5c0a3f29c8ccffbbb1ec941dcec09d71fa32f36a"
@@ -5869,6 +5892,10 @@ react-hot-loader@^4.0.0-beta.21:
     prop-types "^15.6.0"
     shallowequal "^1.0.2"
 
+react-moment@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.7.0.tgz#9ccb5c87be683d08c253b48469167443f09c3d89"
+
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -6790,6 +6817,10 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"