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;