Merge pull request #92 from jcmnunes/#34-Create-a-template-for-the-wo…

…rk-single-page

#34 create a template for the work single page

.gitignore

@@ -6,3 +6,5 @@ node_modules
 public/
 .DS_Store
 yarn-error.log
+.idea
+

.stylelintrc

@@ -9,5 +9,10 @@
   "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/components/*.js",
+    "src/templates/*.js"
+  ]
 }

gatsby-config.js

@@ -5,9 +5,29 @@ module.exports = {
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-react-next',
-    'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
-    'gatsby-transformer-remark',
+    'gatsby-transformer-sharp',
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          'gatsby-remark-prismjs',
+          {
+            resolve: 'gatsby-remark-relative-images',
+          },
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 700,
+              // wrapperStyle: 'margin: 15px -30px !important',
+            },
+          },
+        ],
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {

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,
+      });
+    }
   }
 };
 
@@ -36,7 +47,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       result.data.allMarkdownRemark.edges.forEach(({ node }) => {
         createPage({
           path: node.fields.slug,
-          component: path.resolve('./src/layouts/WorkSingle.js'),
+          component: path.resolve('./src/templates/WorkSingle.js'),
           context: {
             slug: node.fields.slug,
           },