Test Portable text rich text resolution

examples/resolution/gatsby-node.js

@@ -1,97 +1,97 @@
-const { resolveUrl } = require("./src/utils/resolvers");
-
-exports.createPages = async ({ graphql, actions }) => {
- const { createPage } = actions
-
- const { data } = await graphql(`
- query PagesQuery {
- allKontentItemPerson {
- nodes {
- __typename
- elements {
- slug {
- value
- }
- }
- system {
- codename
- }
- preferred_language
- }
- }
- allKontentItemRepository {
- nodes {
- __typename
- elements {
- slug {
- value
- }
- }
- system {
- codename
- }
- preferred_language
- }
- }
- allKontentItemWebsite {
- nodes {
- __typename
- elements {
- slug {
- value
- }
- }
- system {
- codename
- }
- preferred_language
- }
- }
- }
- `);
-
- const {
- allKontentItemPerson: {
- nodes: people
- },
- allKontentItemRepository: {
- nodes: repositories
- },
- allKontentItemWebsite: {
- nodes: websites
- }
- } = data;
-
- people.forEach(person => {
- createPage({
- path: resolveUrl(person.__typename, person.elements.slug.value),
- component: require.resolve(`./src/templates/person.js`),
- context: {
- language: person.preferred_language,
- codename: person.system.codename,
- },
- })
- });
-
- repositories.forEach(repository => {
- createPage({
- path: resolveUrl(repository.__typename, repository.elements.slug.value),
- component: require.resolve(`./src/templates/repository.js`),
- context: {
- language: repository.preferred_language,
- codename: repository.system.codename,
- },
- })
- });
-
- websites.forEach(website => {
- createPage({
- path: resolveUrl(website.__typename, website.elements.slug.value),
- component: require.resolve(`./src/templates/website.js`),
- context: {
- language: website.preferred_language,
- codename: website.system.codename,
- },
- })
- });
-}
+const { resolveUrl } = require("./src/utils/resolvers");
+
+exports.createPages = async ({ graphql, actions }) => {
+ const { createPage } = actions
+
+ const { data } = await graphql(`
+ query PagesQuery {
+ allKontentItemPerson {
+ nodes {
+ __typename
+ elements {
+ slug {
+ value
+ }
+ }
+ system {
+ codename
+ }
+ preferred_language
+ }
+ }
+ allKontentItemRepository {
+ nodes {
+ __typename
+ elements {
+ slug {
+ value
+ }
+ }
+ system {
+ codename
+ }
+ preferred_language
+ }
+ }
+ allKontentItemWebsite {
+ nodes {
+ __typename
+ elements {
+ slug {
+ value
+ }
+ }
+ system {
+ codename
+ }
+ preferred_language
+ }
+ }
+ }
+ `);
+
+ const {
+ allKontentItemPerson: {
+ nodes: people
+ },
+ allKontentItemRepository: {
+ nodes: repositories
+ },
+ allKontentItemWebsite: {
+ nodes: websites
+ }
+ } = data;
+
+ people.forEach(person => {
+ createPage({
+ path: resolveUrl(person.__typename, person.elements.slug.value),
+ component: require.resolve(`./src/templates/person.js`),
+ context: {
+ language: person.preferred_language,
+ codename: person.system.codename,
+ },
+ })
+ });
+
+ repositories.forEach(repository => {
+ createPage({
+ path: resolveUrl(repository.__typename, repository.elements.slug.value),
+ component: require.resolve(`./src/templates/repository.js`),
+ context: {
+ language: repository.preferred_language,
+ codename: repository.system.codename,
+ },
+ })
+ });
+
+ websites.forEach(website => {
+ createPage({
+ path: resolveUrl(website.__typename, website.elements.slug.value),
+ component: require.resolve(`./src/templates/website.js`),
+ context: {
+ language: website.preferred_language,
+ codename: website.system.codename,
+ },
+ })
+ });
+}

examples/resolution/package.json

@@ -15,15 +15,17 @@
  "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 0"
  },
  "dependencies": {
+ "@kontent-ai/rich-text-resolver": "0.0.3",
+ "@portabletext/react": "^2.0.2",
  "gatsby": "^5.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  },
  "devDependencies": {
  "cross-env": "^7.0.3",
  "eslint": "^8.29.0",
- "prettier": "2.0.5",
- "eslint-config-react-app": "^7.0.1"
+ "eslint-config-react-app": "^7.0.1",
+ "prettier": "2.0.5"
  },
  "repository": {
  "type": "git",

examples/resolution/src/components/portableRichtext.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Link } from "gatsby"
+import { toPlainText, PortableText } from '@portabletext/react';
+import { nodeParse, resolveTable, transformToPortableText } from '@kontent-ai/rich-text-resolver';
+import { resolveUrl } from "../utils/resolvers"
+import Website from '../components/website'
+import Repository from '../components/repository'
+
+const PortableRichText = ({ value, images, links, linkedItems }) => {
+
+ const portableTextComponents = {
+ types: {
+ image: ({ value }) => {
+ // const image = images.find(image => image.image_id === value.asset._ref)
+ const alt = value.asset.description || value.asset.url.split("/").pop();
+ return (
+ <img
+ src={`${value.asset.url}?w=200`}
+ alt={alt}
+ width="200"
+ />
+ );
+ },
+ component: (block) => {
+ const linkedItem = linkedItems.find(item => item.system.codename === block.value.component._ref);
+
+ // In case of linked item is not a part fo the response
+ if(!linkedItem) {
+ return <strong style={{color: "red"}}>⚠ Linked item is no longer in the response. ⚠</strong>
+ }
+
+ switch (linkedItem.__typename) {
+ case 'kontent_item_website':
+ return (
+ <Website item={linkedItem} />
+ );
+ case 'kontent_item_repository':
+ return (
+ <Repository item={linkedItem} />
+ );
+ default:
+ return <div>Content item not supported</div>;
+ }
+ },
+ // TODO add table to the showcase
+ table: ({ value }) => {
+ const tableString = resolveTable(value, toPlainText);
+ return <>{tableString}</>;
+ }
+ },
+ marks: {
+ link: ({ value, children }) => {
+ const target = (value?.href || '').startsWith('http') ? '_blank' : undefined
+ return (
+ <a href={value?.href} target={target} rel={value?.rel} title={value?.title} data-new-window={value['data-new-window']}>
+ {children}
+ </a>
+ )
+ },
+ internalLink: ({ value, children }) => {
+ const link = links.find(link => link.link_id === value.reference._ref)
+ // i.e. person -> kontent_item_person
+ const linkType = `kontent_item_${link.type}`;
+ // TODO How to handle more children? Add to showcase
+ return (
+ <Link to={resolveUrl(linkType, link.url_slug)}>
+ {children[0]}
+ </Link>
+ );
+ }
+ }
+ }
+
+ // TODO add automatic distinguish
+ const parsedTree = nodeParse(value);
+ const portableText = transformToPortableText(parsedTree);
+
+
+ return (
+ <div>
+ <PortableText value={portableText} components={portableTextComponents} />
+ </div>
+ );
+}
+
+export default PortableRichText;