Update Gatsby Node API implementations to handle landing page assets

This allows to query for images (raster) and videos for port project landing pages. GH-140
nordtheme · May 4, 2019 · e9795e3 · e9795e3
1 parent d0670fd
commit e9795e3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 5 deletions.
diff --git a/.gatsby/onCreateNode.js b/.gatsby/onCreateNode.js
@@ -16,10 +16,15 @@ const {
   nodeFields,
   optionalBlogPostImages,
   optionalBlogPostVideos,
-  sourceInstanceTypes,
-  requiredBlogPostImages
+  requiredBlogPostImages,
+  sourceInstanceTypes
 } = require("../src/config/internal/nodes");
-const { BASE_DIR_CONTENT, NODE_TYPE_MDX, REGEX_BLOG_POST_DATE } = require("../src/config/internal/constants");
+const {
+  BASE_DIR_CONTENT,
+  NODE_TYPE_IMAGE_SHARP,
+  NODE_TYPE_MDX,
+  REGEX_BLOG_POST_DATE
+} = require("../src/config/internal/constants");
 const { ROUTE_BLOG, ROUTE_DOCS } = require("../src/config/routes/mappings");
 
 /**
@@ -51,6 +56,7 @@ const extractBlogPostDateFromPath = path => {
  */
 const onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
+
   if (node.internal.type === NODE_TYPE_MDX) {
     const contentFileResourceSlug = createFilePath({
       node,
@@ -163,6 +169,52 @@ const onCreateNode = ({ node, getNode, actions }) => {
       });
     }
   }
+
+  if (node.internal.type === NODE_TYPE_IMAGE_SHARP) {
+    const contentFileResourceSlug = createFilePath({
+      node,
+      getNode,
+      basePath: `${BASE_DIR_CONTENT}`,
+      trailingSlash: false
+    });
+    const { relativeDirectory, sourceInstanceName } = getNode(node.parent);
+
+    if (sourceInstanceName === sourceInstanceTypes.images.id) {
+      createNodeField({
+        node,
+        name: `${nodeFields.contentSourceType.name}`,
+        value: `${sourceInstanceTypes.images.id}`
+      });
+      createNodeField({
+        node,
+        name: `${nodeFields.relativeDirectory.name}`,
+        value: `${relativeDirectory}`
+      });
+      createNodeField({
+        node,
+        name: `${nodeFields.slug.name}`,
+        value: contentFileResourceSlug
+      });
+    }
+
+    if (sourceInstanceName === sourceInstanceTypes.videos.id) {
+      createNodeField({
+        node,
+        name: `${nodeFields.contentSourceType.name}`,
+        value: `${sourceInstanceTypes.videos.id}`
+      });
+      createNodeField({
+        node,
+        name: `${nodeFields.relativeDirectory.name}`,
+        value: `${relativeDirectory}`
+      });
+      createNodeField({
+        node,
+        name: `${nodeFields.slug.name}`,
+        value: contentFileResourceSlug
+      });
+    }
+  }
 };
 
 module.exports = onCreateNode;
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -36,6 +36,7 @@ const {
 const {
   BASE_DIR_CONTENT,
   BASE_DIR_ASSETS_IMAGES,
+  BASE_DIR_ASSETS_VIDEOS,
   BASE_DIR_CONFIG,
   BASE_DIR_PAGES
 } = require("./src/config/internal/constants");
@@ -89,10 +90,17 @@ module.exports = {
     {
       resolve: "gatsby-source-filesystem",
       options: {
-        name: "images",
+        name: `${sourceInstanceTypes.images.id}`,
         path: `${__dirname}/${BASE_DIR_ASSETS_IMAGES}`
       }
     },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: `${sourceInstanceTypes.videos.id}`,
+        path: `${__dirname}/${BASE_DIR_ASSETS_VIDEOS}`
+      }
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {

diff --git a/src/config/internal/constants.js b/src/config/internal/constants.js
@@ -46,6 +46,14 @@ const BASE_DIR_ASSETS = `${BASE_DIR_SRC}/assets`;
  */
 const BASE_DIR_ASSETS_IMAGES = `${BASE_DIR_ASSETS}/images`;
 
+/**
+ *  The relative path of the assets directory for videos starting from the project root.
+ *
+ * @constant {string}
+ * @since 0.12.0
+ */
+const BASE_DIR_ASSETS_VIDEOS = `${BASE_DIR_ASSETS}/videos`;
+
 /**
  *  The relative path of the build base directory starting from the project root.
  *
@@ -126,6 +134,17 @@ const BLOG_POST_IMAGE_COVER_MIN_WIDTH = BLOG_POST_IMAGE_MIN_HEIGHT * 0.85;
  */
 const BLOG_POST_IMAGE_HERO_MIN_WIDTH = BLOG_POST_IMAGE_MIN_HEIGHT * 1.8;
 
+/**
+ * The internal type for Gatsby sharp images.
+ *
+ * @constant {string}
+ * @see https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp
+ * @see https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp
+ * @see https://github.com/lovell/sharp
+ * @since 0.12.0
+ */
+const NODE_TYPE_IMAGE_SHARP = "ImageSharp";
+
 /**
  * The internal type for MDX nodes.
  *
@@ -146,6 +165,7 @@ const REGEX_BLOG_POST_DATE = /([0-9]+)\/([0-9]+)\/([0-9]+)\/(.+)/;
 module.exports = {
   BASE_DIR_ASSETS,
   BASE_DIR_ASSETS_IMAGES,
+  BASE_DIR_ASSETS_VIDEOS,
   BASE_DIR_BUILD,
   BASE_DIR_BUILD_REPORTS,
   BASE_DIR_BUILD_REPORTS_COVERAGE,
@@ -157,6 +177,7 @@ module.exports = {
   BLOG_POST_IMAGE_BANNER_MIN_WIDTH,
   BLOG_POST_IMAGE_COVER_MIN_WIDTH,
   BLOG_POST_IMAGE_HERO_MIN_WIDTH,
+  NODE_TYPE_IMAGE_SHARP,
   NODE_TYPE_MDX,
   REGEX_BLOG_POST_DATE
 };
diff --git a/src/config/internal/nodes.js b/src/config/internal/nodes.js
@@ -54,7 +54,9 @@ const requiredBlogPostImages = {
  */
 const sourceInstanceTypes = {
   blog: { id: "blog", path: "blog" },
-  docs: { id: "docs", path: "docs" }
+  docs: { id: "docs", path: "docs" },
+  images: { id: "images", path: "images" },
+  videos: { id: "videos", path: "videos" }
 };
 
 /**

diff --git a/src/data/graphql/fragmentPropTypes.js b/src/data/graphql/fragmentPropTypes.js
@@ -45,6 +45,7 @@ const contentMdxMediaFilePropTypes = {
   extension: PropTypes.string,
   name: PropTypes.string,
   publicURL: PropTypes.string,
+  relativeDirectory: PropTypes.string,
   relativePath: PropTypes.string
 };
 

diff --git a/src/data/graphql/fragments.js b/src/data/graphql/fragments.js
@@ -41,6 +41,7 @@ export const gqlFragmentContentBlogPostMediaFile = graphql`
     extension
     name
     publicURL
+    relativeDirectory
     relativePath
   }
 `;