search

sveltia / sveltia-cms

Alternative to Netlify/Decap CMS. Fast, lightweight, Git-based headless CMS. Modern UX, first-class i18n support, open source & free. Made with Svelte.
MIT License
719 stars 33 forks source link

Custom preview url #169

Open mattickx opened 2 weeks ago

mattickx commented 2 weeks ago

A couple of years ago I've managed to run Decap CMS with custom preview links (iframe + passing data to it): https://github.com/decaporg/decap-cms/issues/2183#issuecomment-997373169

Would something similar be possible today with sceltia-cms ?

kyoshino commented 2 weeks ago

Hi there 👋🏻 I was actually trying to implement an ifame preview a few months ago. There were some issues, but will take a look again.

mattickx commented 2 weeks ago

Hi there 👋🏻 I was actually trying to implement an ifame preview a few months ago. There were some issues, but will take a look again.

Great! Thank you very much.

I'm not too familiar with the underlying structure, but I noticed that CMS.registerPreviewTemplate is not compatible.

Here's what I basically achieved and want to reproduce with Sveltia CMS:

If this becomes part of the project for official support, that would be even better!

kyoshino commented 2 weeks ago

Yeah, CMS.registerPreviewTemplate is not yet supported in Sveltia. I was thinking about enabling an iframe preview by simply configuring a preview URL, without using the method. IIRC, I encountered at least 2 issues:

Will dive into it further.

mattickx commented 1 week ago

I encountered at least 2 issues:

  • It may be difficult or impossible to preview a new entry draft (an existing entry is fine) because the data is not saved and the entry URL/slug is not determined yet

As you can see in my old example, with NetlifyCMS you had access to the current editing data. Not sure if this is available in Sveltia. I used that data and put it in a variable on the window object.

  • The previewed page may be reloaded for every single change/keystroke unless the framework’s hot reload works well

Will dive into it further.

Since the preview is rendered with an iframe, you can access a variable in the parent's iframe DOM's window. Inside my own project (using the CMS) I've set an interval on my preview page that retrieves the parent's iframe data and updates the view.

This way, there's no need for the CMS to refresh or rerender anything, especially not on each keystroke. Instead, you could update the variable in the CMS DOM's window only when necessary (on blur or some other event).

On the user project side, for standardization and ease of use, the polling of the content on the preview page could be hidden behind a utility function in a module or SDK.