Adding code blocks (and other structured content)
One of the challenges/opportunities we have is that we've got an Angular component library that uses TypeScript interfaces to initialise components. You can generate that interface data from a CMS, obviously, but it needs to be fairly structured.
To date I've been using Drupal paragraphs to do that. It's OK, but I have to do a lot of processing on the Druapal node object - which is very heavily nested - before I can push it into the index that we use to store our API data. I was wondering whether Contentful would let me do that.
Code blocks
The default editor in Contentful has a code markup button, so if I want to add something fairly straightforward, I can just add the markup inline.
console.log('Hello world');This is nice as far as is goes, but it's got a few problems. Not the least of which is that by default, Contentful won't escape HTML angle brackets, which Bootstrap doesn't really like.
I'd hoped to add a section here on including GitHub Gists in your pages, but it would appear all the components you can use to generate Gists are incompatible with Ivy or SSR or both. This is one of my least favorite things about Angular - everything can be going along swimmingly until you find some comparitively simple thing that it just won't do. If I have time, I'll see about writing my own component.
More complex components
As you can probably see, the embedded cards render on the front end as fairly plain Bootstrap cards. I'll go into how to make them into components and render dynamically later.
In the back end, I've set up a content type called Pop out card. It's got the title, body text, an image, and then configuration for the linked button. The final field, called cardLinkInternal, is meant to generate an internal link but that's not really what you end up with the in API. It's probably better to stick with a short text link with no validation. That way you can use relative links or full ones.
What the API gives us is in two parts. There's an items section, containing plain text items and references to the embedded items, then an includes section, which contains the full embedded items.