#34 Implement netlify CMS abs path issue workaround

jcmnunes · Jul 30, 2018 · be7ed6f · be7ed6f
1 parent 755ddd4
commit be7ed6f
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 20 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -9,5 +9,9 @@
   "rules": {
     "scale-unlimited/declaration-strict-value": "/color/"
   },
-  "ignoreFiles": ["src/assets/styles/vendor/*.css", "src/pages/*.js"]
+  "ignoreFiles": [
+    "src/assets/styles/vendor/*.css",
+    "src/pages/*.js",
+    "src/templates/*.js"
+  ]
 }
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -14,6 +14,17 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
       name: 'slug',
       value: `/works${slug}`,
     });
+
+    if (node.frontmatter.relpath && node.frontmatter.heroImage) {
+      const { relpath, heroImage } = node.frontmatter;
+      const heroImagePath = relpath + heroImage;
+
+      createNodeField({
+        node,
+        name: 'heroImage',
+        value: heroImagePath,
+      });
+    }
   }
 };
 
@@ -28,9 +39,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
               fields {
                 slug
               }
-              frontmatter {
-                thumbnail
-              }
             }
           }
         }

diff --git a/src/templates/WorkSingle.js b/src/templates/WorkSingle.js
@@ -9,15 +9,13 @@ import styles from './WorkSingle.module.css';
 export default class WorkSingle extends Component {
   render() {
     const { data, location } = this.props;
-    if (!data) {
-      return null;
-    }
+    const { heroImage } = data.markdownRemark.fields;
     return (
       <div>
         <Navbar pathname={location.pathname} />
         <div className={styles.headerImage}>
           <Img
-            sizes={data.background.sizes}
+            sizes={heroImage.childImageSharp.sizes}
             style={{
               position: 'absolute',
               left: 0,
@@ -28,15 +26,12 @@ export default class WorkSingle extends Component {
           />
           <div className={styles.backdrop} />
         </div>
-        {/* <span>{data.markdownRemark.frontmatter.date}</span>
-        <h1>{data.markdownRemark.frontmatter.title}</h1> */}
-        <div className="section-wrapper">
-          <div
-            dangerouslySetInnerHTML={{
-              __html: data.markdownRemark.html,
-            }}
-          />
-        </div>
+        <div 
+          className={`section-wrapper ${styles.body}`}
+          dangerouslySetInnerHTML={{
+            __html: data.markdownRemark.html,
+          }}
+        />
       </div>
     );
   }
@@ -49,11 +44,19 @@ export const query = graphql`
       frontmatter {
         title
         date(formatString: "MMMM DD YYYY")
-        thumbnail
+      }
+      fields {
+        heroImage {
+          childImageSharp {
+            sizes(maxWidth: 850) {
+              ...GatsbyImageSharpSizes
+            }
+          }
+        }
       }
     }
 
-    background: imageSharp(id: { regex: "/img1.jpg/" }) {
+    background: imageSharp(id: { regex: "/adi.png/" }) {
       sizes(maxWidth: 1240) {
         ...GatsbyImageSharpSizes
       }

diff --git a/src/works/2018-07-17-cras-justo-odio-dapibus-ac-facilisis-in-egestas-eget-quam.md b/src/works/2018-07-17-cras-justo-odio-dapibus-ac-facilisis-in-egestas-eget-quam.md
@@ -3,6 +3,8 @@ layout: blog
 title: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.'
 date: '2018-07-17T17:26:05+01:00'
 thumbnail: /assets/img1-thumb.jpg
+heroImage: /assets/img1-thumb.jpg
+relpath: ../../static
 images:
   - image: /assets/img1.jpg
   - image: /assets/img2.jpg

diff --git a/src/works/2018-07-17-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit.md b/src/works/2018-07-17-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit.md
@@ -3,6 +3,8 @@ layout: blog
 title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
 date: '2018-07-17T01:49:45+01:00'
 thumbnail: /assets/adi.png
+heroImage: /assets/adi.png
+relpath: ../../static
 images:
   - image: /assets/adidasshoes.jpg
   - image: /assets/adi.png

diff --git a/src/works/2018-07-17-maecenas-faucibus-mollis-interdum.md b/src/works/2018-07-17-maecenas-faucibus-mollis-interdum.md
@@ -3,6 +3,8 @@ layout: blog
 title: Maecenas faucibus mollis interdum.
 date: '2018-07-17T17:12:13+01:00'
 thumbnail: /assets/img1-thumb.jpg
+heroImage: /assets/img1-thumb.jpg
+relpath: ../../static
 images:
   - image: /assets/img1.jpg
   - image: /assets/img2.jpg

diff --git a/src/works/work1.md b/src/works/work1.md
@@ -2,6 +2,8 @@
 title: "Ultricies Commodo Ullamcorper"
 date: "2018-06-13"
 thumbnail: "/assets/img1-thumb.jpg"
+heroImage: "/assets/img1-thumb.jpg"
+relpath: ../../static
 images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg

diff --git a/src/works/work2.md b/src/works/work2.md
@@ -2,6 +2,8 @@
 title: Ligula Aenean Mattis
 date: "2018-05-13"
 thumbnail: "/assets/img2-thumb.jpg"
+heroImage: "/assets/img2-thumb.jpg"
+relpath: ../../static
 images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg

diff --git a/src/works/work3.md b/src/works/work3.md
@@ -2,6 +2,8 @@
 title: Ligula Aenean Mattis
 date: "2017-11-13"
 thumbnail: "/assets/img3-thumb.jpg"
+heroImage: "/assets/img3-thumb.jpg"
+relpath: ../../static
 images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg

diff --git a/static/admin/config.yml b/static/admin/config.yml
@@ -15,9 +15,11 @@ collections:
     create: true
     slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
     fields:
+      - {label: "Relative Path", name: "relpath", widget: "hidden", default: "../../.."}
       - {label: Title, name: title, widget: string}
       - {label: Publish Date, name: date, widget: datetime}
-      - {label: Featured Image, name: thumbnail, widget: image}
+      - {label: Hero image, name: heroImage, widget: image}
+      - {label: Thumbnail, name: thumbnail, widget: image}
       - label: Images
         name: images
         widget: list