Demonstrate content items linked in Rich text elements

[JanLenoch]

Motivation

In Rich text elements, one can link to other content in multiple ways.

It would be great to have a showcase on the starter, how to resolve rich text editor.

Proposed solution

Make use of the rich text resolvers of the future transformer plugin or the GraphQL _nodes properties produced by the decorateItemNodeWithRichTextLinkedItemsLinks method. Use them to display inline linked items in the Summary element of the Blogpost reference content type.

Content components are described in #28

[billyryanwill]

Is there anything that can be done on this? Happy to help contribute if there's a plan of action. I've been looking at how to resolve these the last few days and I'm sure it's something that will help the community loads.

[petrsvihlik]

@billyryanwill thanks for your interest! we'll be happy to work with you on this one.

@Simply007 can you please suggest a solution? thx

[Simply007]

Hello @billyryanwill,

thanks for your interest. If you provide me an email you are using for the Kentico Cloud I can clone you the source project we are using for the starter so that you could make the changes there. And once you are ready to contribute, I could merge the changes back to the source project.

The best way to demonstrate the rich text resolution is on type Blogpost reference on Summary field (as it is in the description). We already have a blog post with a description of how to resolve linked items in rich text element and I think it would be great to have this approach incorporated in the starter for inline linked content items.

There are also showcases how to load the content in the source plugin Readme.

FYI: content components resolution showcase is submitted in #28.

[billyryanwilliams]

@Simply007
So I took a look at that pretty awesome blog post. Looking at it it made sense to abstract away a bunch of the internals and make it more accessible. I've just released a really early version of what that package could look like here.

Effectively I've taken a load of the internals from the blog post and added them to an ES6 class to make the code a bit more maintainable. Then exported a Gatsby component which takes in a function to spit out the actual components you want to use. See below for a rough example.

import RichText from "kenticocloudgatsbyresolver";
<RichText 
  content={yourModel.resolvedHtml}
  contentItems={yourModel.linked_items}
  customLinkedItemRenderer={
    function({type, linkedItem}){
      switch (type) {
        case 'snippet': {
          return <CodeBlock linkedItem={linkedItem} />;
        }
        default:
          return "Unsupported type";
      }
    }
  }
/>

The cool thing about this is that we can add in the inline link and image resolvers into this rich text component as well with minor amounts of work.

This is definitely the direction I'm going to go in for my projects. What are your thoughts on using this?

[billyryanwill]

Just realised I commented using my other Github account 😂 rest assured it's the same dev!

[Simply007]

@billyryanwill (aka @billyryanwilliams),

that is great. Let's ping the author of the blog post @rshackleton, maybe he has also some thoughts using this.

I think that approach is great and it proved to be useful (https://rshackleton.co.uk used this I believe) I am deciding whether it suits to this "simple starter" that was meant to be a more bootstrap project, but on the other hand, most of the people are using rich text element. So let's try it - we could always split this example to another repository.

Just FYI:
We also have one Gatsby Template project but it is also just a landing page if you want to take a look.

[Simply007]

Related to billyryanwilliams/kenticocloudgatsbyresolver#3

[rshackleton]

Somehow I think I'd managed to miss this since last August 😳

@billyryanwill I'll take a closer look at the implementation, it could be worth merging into the Gatsby theme package I've started as resolving linked items a common requirement and would be something that most projects would require.

https://github.com/rshackleton/gatsby-packages/tree/master/packages/gatsby-theme-kontent

[billyryanwilliams]

@rshackleton 😂

No worries. I'm going to look at updating it with what is currently there and pointing and using the Kontent packages instead so that at least it is up to date.

I'd be keen to potentially keep it as a separate package so that it's relatively easy to import without using the theme? What do you think?

cc @Simply007

[rshackleton]

Can absolutely still be separate, I may just make it a dependency of the theme.

[billyryanwilliams]

Cool. I've got some time this evening so will try and port it over.

@Simply007 I'm guessing me rebranding it with Kontent rather than cloud in the name is preferable? If so I'll spin up a new package.

[Simply007]

@billyryanwill - yes it is.
We have these internal naming conventions, you could follow them if you want.