From e9795e35726511317448685e11c11d8e3550cc82 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sat, 4 May 2019 21:33:32 +0200 Subject: [PATCH] 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 --- .gatsby/onCreateNode.js | 58 +++++++++++++++++++++++++-- gatsby-config.js | 10 ++++- src/config/internal/constants.js | 21 ++++++++++ src/config/internal/nodes.js | 4 +- src/data/graphql/fragmentPropTypes.js | 1 + src/data/graphql/fragments.js | 1 + 6 files changed, 90 insertions(+), 5 deletions(-) diff --git a/.gatsby/onCreateNode.js b/.gatsby/onCreateNode.js index 7994f0e2..d20a41ec 100644 --- 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 index 6a2edd38..497b21a1 100644 --- 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 index b754f14f..9087fbe9 100644 --- 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 index 16a02adf..ef3f9fef 100644 --- 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 index f09c5215..6fa58777 100644 --- 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 index 1a4f1d87..4e1e0566 100644 --- 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 } `;