@acorel/contentful-integration
Version:
Contentful integration with SAP Composable Storefront by Acorel
46 lines (40 loc) • 2.05 kB
text/typescript
import {BLOCKS} from "@contentful/rich-text-types";
import {Options} from "@contentful/rich-text-html-renderer";
import {CmsComponentType} from "@acorel/graphql-integration";
import {ContentfulIntegrationService} from "./contentful-integration.service";
export const CONTENTFUL_ENTITY = ['__typename', {sys: ['id']}]
export const CONTENTFUL_ENTITY_EXT = [...CONTENTFUL_ENTITY, {sys: ['id', 'publishedAt', 'firstPublishedAt', 'publishedVersion']}]
export const CONTENTFUL_ASSET= [...CONTENTFUL_ENTITY_EXT, 'title', 'description', 'contentType', 'fileName', 'size', 'url', 'width', 'height']
export const CONTENTFUL_CMS_COMP= [...CONTENTFUL_ENTITY_EXT, {styleClasses: ['styleClasses']}];
export const CONTENTFUL_LINKS = [{ entries: [{ inline: CONTENTFUL_ENTITY}, {hyperlink: CONTENTFUL_ENTITY}, {block: CONTENTFUL_ENTITY}], assets: [{ hyperlink: CONTENTFUL_ASSET}, {block: CONTENTFUL_ASSET}]}]
export const CONTENTFUL_RICH_TEXT = ['json', { links: CONTENTFUL_LINKS}]
export function renderOptions(links: any) {
// create an asset map
const assetMap = new Map();
// loop through the linked assets and add them to a map
for (const asset of links.assets.block) {
assetMap.set(asset.sys.id, asset);
}
return {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: (node, next) => {
// find the asset in the assetMap by ID
const asset = assetMap.get(node.data['target'].sys.id);
switch (asset.contentType) {
case "video/mp4":
return `<video width="100%" height="100%" controls> <source src=${asset.url} type="video/mp4" /> </video>`;
case "image/png":
return `<img src=${asset.url} height=${asset.height} width=${asset.width} alt=${asset.description} />`;
default:
return "Nothing to see here...";
}
},
},
} as Partial<Options>;
}
export function extractCommonCmsProperties(item: any) {
return {
uid: item.sys.id,
styleClasses: (item.styleClasses?.styleClasses) ? item.styleClasses?.styleClasses.join(" ") : ''
}
}