My experience with Wisp.blog - Part 4

When you read the documentation at Wisp.blog, there is only one thing under "Advanced Concepts", namely the "Custom React Components". See here. As a curious developer this grabbed my interest. Especially as someone who's used to working with Storyblok, where every component is a 'custom react component' you have to define in your codebase.

So, what is it?

In Wisp, custom react components are a way to define elements on your blog that go beyond regular text editing. In theory anything is possible here, you could add an entire ecommerce application, a game, or (if you're feeling adventurous) an image with a hover animation. The docs themselves give a quite good overview of possibilities in the section common use cases.

Because I don't have a clear goal for this website, besided having a blog, it was a bit harder for me to come up with a fitting custom component to test this. So I came up with a small 'playground' where you can change some settings of the logo.

It isn't some groundbreaking technology, but it shows the basic possibilities of the custom components. And implementing it was surprisingly effortless for something housed under "advanced concepts", the only issue I had was in regards to TypeScript not recognizing the customComponents object as a generic object. But that with an expect-error directive this was 'solved'.

But this did lead me to an issue with Wisp I hadn't really considered before.

Where is my preview mode?

I've reread the documentation, but there was nothing like a preview mode to view unpublished content in the website (either on a preview url or in my local environment). This meant I had to place the custom component in an article and publish it before I could actually develop and test this feature.

For a brand new blog without any readers, this isn't an issue, but imagine running a big blog where people eagerly await new entries or a company who uses their blog to generate conversions! You'd have to either publish unfinished content or have a separate blog just to test a new custom component.

Having a parameter, or a different base url or blog id would make this so much easier. I've toyed with the idea of adding a tag or metadata to publish unpublished content (I know that sounds weird), but that would make my code over complex.

In practice, this probably won't be a huge issue, it is something to keep in mind if you ever want to add custom components.

Powered by wisp