From 5a4d4d4c6162bfd181d2eec895fea6e3ef986578 Mon Sep 17 00:00:00 2001 From: Nico Schett <52858351+schettn@users.noreply.github.com> Date: Sat, 11 Sep 2021 23:02:02 +0000 Subject: [PATCH] fix: enable image creation for none jaen pages --- examples/my-gatsby-site/jaen-pages.json | 100 +++++++++++++- packages/jaen-pages/gatsby-node.js | 159 +++++++---------------- packages/jaen-pages/src/create-images.ts | 86 ++++++++++++ 3 files changed, 230 insertions(+), 115 deletions(-) create mode 100644 packages/jaen-pages/src/create-images.ts diff --git a/examples/my-gatsby-site/jaen-pages.json b/examples/my-gatsby-site/jaen-pages.json index 8636d7ec..ce8173c8 100644 --- a/examples/my-gatsby-site/jaen-pages.json +++ b/examples/my-gatsby-site/jaen-pages.json @@ -34,20 +34,24 @@ }, "SitePage /766d83f0-628d-45f3-9cb8-8e0c4db2f8db": { "context": { - "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmfCn5y5LuMc9qw8era5F2eYiWVxzU1K3YZ8UyRf34ktm4", - "createdAt": "2021-09-10T14:22:04.577Z" + "createdAt": "2021-09-11T21:37:42.747Z", + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmVURH8bgKaoiHE2Pj8SY4iv3HCi52aSYwJoumpAdC8sgV" }, "migrations": [ { "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmfCn5y5LuMc9qw8era5F2eYiWVxzU1K3YZ8UyRf34ktm4", "createdAt": "2021-09-10T14:22:04.577Z" + }, + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmehWGNWHoXHvWqfKMkY24ZxCCiF7A36eDSQ5UPvXWjbi4", + "createdAt": "2021-09-11T21:37:42.747Z" } ] }, "SitePage /": { "context": { - "createdAt": "2021-09-11T12:24:43.945Z", - "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmX8gnESkV4vwU91eLQbKTGUEgYUvb4SyHAxffAUG2U9hg" + "createdAt": "2021-09-11T21:47:12.493Z", + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmUzx1s2ohZ4Sb4mXgVmacWbP1aR43m2dhM4eqF8rFAggC" }, "migrations": [ { @@ -61,14 +65,90 @@ { "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmV4temnVQ86fmhQZrw8wd5zVdDGcsquQyrM8Z1neVh6R7", "createdAt": "2021-09-11T12:24:43.945Z" + }, + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmT8zaavKyQsSC6tEmP5Ny723eW8rUgrvGmz7BtkBvhjpx", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /7704532b-b3c7-42d1-9d08-86aece9f376e": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmXFB861CZrSLGSYzpWM8op3zxQsiGZfcR4yRYaPvqVsYp", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmXFB861CZrSLGSYzpWM8op3zxQsiGZfcR4yRYaPvqVsYp", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /835dfd0e-f07d-4d45-9370-2e2c58de6afe": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmX92DqUN1rPYbhH5w3A5LJYv4WQsUVN8enTMmMFTUJRzg", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmX92DqUN1rPYbhH5w3A5LJYv4WQsUVN8enTMmMFTUJRzg", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /56964184-5f37-4f30-9b26-3c9b978ba25f": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmPGyS5K4qBWiGKt5Do8ftquSA6bcGUGwVPtB6oCtieGDt", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmPGyS5K4qBWiGKt5Do8ftquSA6bcGUGwVPtB6oCtieGDt", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /149a8495-f972-4ee3-ac21-fa10fda51d06": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmSQ4nJg9rQMvc4VGmRFXzJuC2JYk5TEjnHHFZPhVS7f7b", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmSQ4nJg9rQMvc4VGmRFXzJuC2JYk5TEjnHHFZPhVS7f7b", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /094a3bf7-6943-46a4-a654-fe523efb3392": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmNfCpF7vgDBqpwdJP1j1RNhxcg5mqsc6imWYoS8x78sHS", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmNfCpF7vgDBqpwdJP1j1RNhxcg5mqsc6imWYoS8x78sHS", + "createdAt": "2021-09-11T21:47:12.493Z" + } + ] + }, + "SitePage /c0302cab-fbe7-4dd6-bb11-d57321d97b18": { + "context": { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmUDacn4o4qwtE2nbMK2TKFGn9vSkpHnYPW5avWunFi7qC", + "createdAt": "2021-09-11T21:47:12.493Z" + }, + "migrations": [ + { + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmUDacn4o4qwtE2nbMK2TKFGn9vSkpHnYPW5avWunFi7qC", + "createdAt": "2021-09-11T21:47:12.493Z" } ] } }, "snekFinder": { "context": { - "createdAt": "2021-09-11T12:24:43.945Z", - "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmcLMkFdHcUynuA4Qzd6nj6x1K7rumCTqwhut8KG1MCsW2" + "createdAt": "2021-09-11T21:47:12.493Z", + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmYpUvGxazNZmEc8Zp3D2usGUhkST4RCwdoMac8DNiGSWr" }, "migrations": [ { @@ -78,6 +158,14 @@ { "createdAt": "2021-09-11T12:24:43.945Z", "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmcLMkFdHcUynuA4Qzd6nj6x1K7rumCTqwhut8KG1MCsW2" + }, + { + "createdAt": "2021-09-11T21:37:42.747Z", + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmS1b5Zd1z5seKjEERpMxnByWFwfwsWWk5gMjkAVTSTqGK" + }, + { + "createdAt": "2021-09-11T21:47:12.493Z", + "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmRFootvNkrCnXqHJ1Dagt2qwckFMmabPzYj9DaATEdxnX" } ] } diff --git a/packages/jaen-pages/gatsby-node.js b/packages/jaen-pages/gatsby-node.js index fda2e59f..36ea9cc8 100644 --- a/packages/jaen-pages/gatsby-node.js +++ b/packages/jaen-pages/gatsby-node.js @@ -1,9 +1,10 @@ require('isomorphic-fetch') -const {createRemoteFileNode} = require('gatsby-source-filesystem') const path = require('path') const fs = require('fs') +const {createImages} = require('./dist/create-images') + const jaenPagesPath = path.resolve('./jaen-pages.json') exports.createSchemaCustomization = ({actions}) => { @@ -60,12 +61,13 @@ exports.createSchemaCustomization = ({actions}) => { datePublished: String isBlogPost: Boolean } - - `) } -exports.createPages = async ({actions, graphql, cache}, pluginOptions) => { +exports.createPages = async ( + {actions: {createPage, createNode}, createNodeId, cache, store, reporter}, + pluginOptions +) => { const templates = pluginOptions.templates const fileContent = JSON.parse(fs.readFileSync(jaenPagesPath, 'utf8')) @@ -74,7 +76,22 @@ exports.createPages = async ({actions, graphql, cache}, pluginOptions) => { const page = await (await fetch(fileUrl)).json() if (page.template) { - actions.createPage({ + let images = [] + const fields = page.fields + + if (fields) { + images = await createImages({ + createNode, + createNodeId, + cache, + store, + reporter, + fields, + pageId: id + }) + } + + createPage({ path: page.path || `${id}/`, component: path.resolve(templates[page.template]), context: { @@ -88,7 +105,8 @@ exports.createPages = async ({actions, graphql, cache}, pluginOptions) => { datePublished: createdAt, ...page.pageMetadata }, - fields: page.fields + fields: page.fields, + images } } }) @@ -109,9 +127,14 @@ exports.createPages = async ({actions, graphql, cache}, pluginOptions) => { } } -exports.onCreatePage = async ({cache, page, actions, store}) => { - const {createPage, deletePage} = actions - +exports.onCreatePage = async ({ + page, + actions: {createPage, deletePage, createNode}, + createNodeId, + cache, + store, + reporter +}) => { const {jaenPageContext} = page.context const id = `SitePage ${page.path}` @@ -120,6 +143,22 @@ exports.onCreatePage = async ({cache, page, actions, store}) => { if (!jaenPageContext?.template) { deletePage(page) + let images = [] + + const fields = cachedJaenPage?.fields + + if (fields) { + images = await createImages({ + createNode, + createNodeId, + cache, + store, + reporter, + fields, + pageId: id + }) + } + const newPage = { ...page, context: { @@ -131,110 +170,12 @@ exports.onCreatePage = async ({cache, page, actions, store}) => { title: page.internalComponentName, datePublished: new Date().toISOString(), ...cachedJaenPage?.pageMetadata - } + }, + images } } } createPage(newPage) } - - // console.log('[onCreatePage] ', jaenPageContext) - - // const fields = jaenPageContext.fields - - // if (fields) { - // for (const [fieldName, field] of Object.entries(fields)) { - // const content = field.content - - // if (field._type === 'PlainField') { - // if (content._type === 'ImageBlock') { - // const url = content.src - - // let fileNode = await createRemoteFileNode({ - // url: content.src, // string that points to the URL of the image - // parentNodeId: node.id, // id of the parent node of the fileNode you are going to create - // createNode, // helper function in gatsby-node to generate the node - // createNodeId, // helper function in gatsby-node to generate the node id - // cache, // Gatsby's cache - // store // Gatsby's Redux store - // }) - // } - // } else if (field._type === 'BlocksField') { - // } - // } - // } -} - -exports.onCreateNode = async ({ - node, - actions: {createNode, deleteNode, createPage}, - store, - cache, - createNodeId -}) => { - const createFile = async (url, parentNodeId) => { - console.log('should create', url, parentNodeId) - return await createRemoteFileNode({ - url, - parentNodeId, - createNode, - createNodeId, - cache, - store - }) - } - - // For all MarkdownRemark nodes that have a featured image url, call createRemoteFileNode - if (node.internal.type === 'SitePage') { - const {jaenPageContext} = node.context - const fields = jaenPageContext?.fields - const images = [] - - if (fields) { - for (const [fieldName, field] of Object.entries(fields)) { - const content = field.content - - if (field._type === 'PlainField') { - if (content._type === 'ImageBlock') { - let fileNode = await createFile(content.src, node.id) - - if (fileNode) { - images.push({ - id: { - pageId: jaenPageContext.id, - fieldName - }, - file___NODE: fileNode.id - }) - } - } - } else if (field._type === 'BlocksField') { - for (const [position, block] of Object.entries(field.blocks)) { - if (block._type === 'ImageBlock') { - let fileNode = await createFile(content.src, node.id) - - if (fileNode) { - images.push({ - id: { - pageId: jaenPageContext.id, - fieldName, - block: { - position: parseInt(position), - fieldName - } - }, - file___NODE: fileNode.id - }) - } - } - } - } - } - } - - if (images.length > 0) { - node.context.jaenPageContext.images = images - } - } } diff --git a/packages/jaen-pages/src/create-images.ts b/packages/jaen-pages/src/create-images.ts new file mode 100644 index 00000000..f641fa99 --- /dev/null +++ b/packages/jaen-pages/src/create-images.ts @@ -0,0 +1,86 @@ +import { + createRemoteFileNode, + CreateRemoteFileNodeArgs +} from 'gatsby-source-filesystem' + +import {Field} from './types' + +interface CreateImagesPayload { + createNode: CreateRemoteFileNodeArgs['createNode'] + createNodeId: CreateRemoteFileNodeArgs['createNodeId'] + cache: CreateRemoteFileNodeArgs['cache'] + store: CreateRemoteFileNodeArgs['store'] + reporter: CreateRemoteFileNodeArgs['reporter'] + fields: {[fieldName: string]: Field} + pageId: string +} + +export const createImages = async ({ + fields, + pageId, + ...createFnArgs +}: CreateImagesPayload) => { + const images = [] + + if (fields) { + for (const [fieldName, field] of Object.entries(fields)) { + if (field._type === 'PlainField') { + const content = field.content + + if (content._type === 'ImageBlock') { + // check if content.src is a url + const url = content.src + if (url.startsWith('http')) { + let fileNode = await createRemoteFileNode({ + url, + parentNodeId: pageId, + ...createFnArgs + }) + + if (fileNode) { + images.push({ + id: { + pageId, + fieldName + }, + file___NODE: fileNode.id + }) + } + } + } + } else if (field._type === 'BlocksField') { + for (const [position, block] of Object.entries(field.blocks)) { + for (const contentBlock of Object.values(block.fields)) { + if (contentBlock._type === 'ImageBlock') { + // check if content.src is a url + const url = contentBlock.src + if (url.startsWith('http')) { + let fileNode = await createRemoteFileNode({ + url, + parentNodeId: pageId, + ...createFnArgs + }) + + if (fileNode) { + images.push({ + id: { + pageId, + fieldName, + block: { + position: parseInt(position), + fieldName + } + }, + file___NODE: fileNode.id + }) + } + } + } + } + } + } + } + } + + return images +}