Skip to content

Commit

Permalink
Merge pull request #8 from imgeng/gh-2-add-support-for-storyblok
Browse files Browse the repository at this point in the history
Gh 2 add support for storyblok
jonarnes authored Dec 8, 2022
2 parents d149405 + b57484a commit 009ae4f
Showing 6 changed files with 109 additions and 15 deletions.
18 changes: 17 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

This is a plugin for [GatsbyJS](https://www.gatsbyjs.com) that allows you to seamlessly integrate [ImageEngine](https://imageengine.io) into your Gatsby workflow.

It includes functionality to make it easy to use external CMS (e.g.: `Contentful`, `Sanity.io`), static `File` assets created through `gatsby-plugin-filesystem`, and others, allowing them to be used directly with `Gatsby` components such as `GatsbyImage` and `ImageEngine engines`.
It includes functionality to make it easy to use external CMS (e.g.: `Contentful`, `Sanity.io`, `Storyblok`), static `File` assets created through `gatsby-plugin-filesystem`, and others, allowing them to be used directly with `Gatsby` components such as `GatsbyImage` and `ImageEngine engines`.

Helpers to build your own urls and ImageEngine related functionality along with components are also exposed in order to provide flexibility in how you organise your assets and how you deal with including them in your final web pages/content.

@@ -14,6 +14,7 @@ Helpers to build your own urls and ImageEngine related functionality along with
- [ImageEngineAsset](#imageengineasset)
- [Contentful](#contentful)
- [Sanity.IO](#sanity-io)
- [Storyblok](#storyblok)
- [File](#file)
- [Custom](#custom-nodes)

@@ -63,6 +64,10 @@ plugins: [
{
source: "sanityio",
ie_delivery_address: "https://another-ie-url.cdn.imgeng.in/"
},
{
source: "storyblok",
ie_delivery_address: "https://another-ie-url.cdn.imgeng.in/"
},
{source: "file"}
],
@@ -128,6 +133,13 @@ The same as with `contentful`, an `ImageEngineAsset` node is created as a child

You need to have an `ImageEngine` delivery address using `Sanity`'s CDN as origin and use that address as your `ie_delivery_address`.

#### Storyblok

For `storyblok` functionality to work you'll need to use [gatsby-source-storyblok](https://www.gatsbyjs.com/plugins/gatsby-source-storyblok/).

With that in place `Gatsby` will create Graphql Nodes for your Storyblok elements. When an element is of the type `StoryblokEntry` we'll create a child node of `ImageEngineAsset` under it, that you can access through graphql.

You need to have an ImageEngine delivery address using `Storyblok`'s CDN as origin and use that address as your `ie_delivery_address`.
#### File

For `File` assets you'll need to use [gatsby-source-filesystem](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/)
@@ -294,6 +306,10 @@ options: {
{
source: "sanityio",
ie_delivery_address: "https://another-ie-url.cdn.imgeng.in/"
},
{
source: "storyblok",
ie_delivery_address: "https://another-ie-url.cdn.imgeng.in/"
},
{source: "file"}
],
36 changes: 28 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
{
"name": "@imageengine/gatsby-plugin-imageengine",
"version": "0.0.10",
"version": "0.0.11",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/imgeng/imageengine-gatsby.git"
},
"keywords": ["imageengine","image cdn","gatsby"],
"keywords": [
"imageengine",
"image cdn",
"gatsby"
],
"author": "ImageEnigine",
"license": "ISC",
"bugs": {
"url": "https://github.com/imgeng/imageengine-gatsby/issues"
"url": "https://github.com/imgeng/imageengine-gatsby/issues"
},
"homepage": "https://github.com/imgeng/imageengine-gatsby/",

"scripts": {
"build": "tsc --build src",
"watch": "tsc --build src --watch=true",
3 changes: 2 additions & 1 deletion src/default_platforms.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,8 @@ type PlatformObject = {
const platforms: PlatformObject[] = [
{platform: "contentful", node_types: ["ContentfulAsset"]},
{platform: "sanityio", node_types: ["SanityImageAsset"]},
{platform: "file", node_types: ["File", "StaticImage"]}
{platform: "file", node_types: ["File", "StaticImage"]},
{platform: "storyblok", node_types: ["StoryblokEntry"]}
];

export const child_ofs: string[] = platforms.reduce((acc, {node_types}) => {
53 changes: 53 additions & 0 deletions src/platforms/storyblok.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {
IECheckFunction,
IETransformFunction,
IEDefaultPlatform,
} from "../types";

import { node_create, REPLACEMENT_TOKEN } from "../helpers/nodes_helpers.js";

const default_replace_url: string = "https://a.storyblok.com/";

const checker: IECheckFunction = (node_object) => {
let internal = node_object?.node?.internal;
const isStoryblok = internal && internal.type === "StoryblokEntry";

if (isStoryblok) {
let content = JSON.parse(node_object.node.content);
return content.assets !== undefined;
}
return isStoryblok;
};

const transformer: IETransformFunction = (
node_object,
options,
global_options
) => {
let dist_url =
options?.ie_delivery_address || global_options?.ie_delivery_address;
let directives = options?.directives || global_options?.directives;
let replace_url = options?.replace_url || default_replace_url;
let content = JSON.parse(node_object.node.content);
if (content.assets) {
let filename = content.assets.filename;

let tokenized_url = filename.replace(replace_url, REPLACEMENT_TOKEN);
return node_create(
node_object,
filename,
tokenized_url,
dist_url,
directives,
node_object?.node?.internal.mediaType
);
}
return null;
};

const platform: IEDefaultPlatform = {
checker: checker,
transformer: transformer,
};

export default platform;
3 changes: 2 additions & 1 deletion src/resolvers.ts
Original file line number Diff line number Diff line change
@@ -168,7 +168,8 @@ function gatsby_image_resolver(source: any, args: any): any {
let with_source_args = directives_args(source, args);
let full_args = Object.assign(args || {}, with_source_args);
let url = ie_replace_url(source, full_args);
let format = source.internal.mediaType.split("/")[1];
let format = source.internal.mediaType !== undefined
? source.internal.mediaType.split("/")[1] : "jpeg";

let source_metadata = {
width: source.width || with_source_args["width"],

0 comments on commit 009ae4f

Please sign in to comment.