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
954 stars 48 forks source link

Custom preview url #169

Open mattickx opened 5 months ago

mattickx commented 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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.

bummzack commented 1 month ago

I've just discovered this project and I'm delighted about it. We are big fans of Svelte and we also used Netlify/Decap CMS in some of our projects. Having a preview was always one of the features we missed the most…

I think an iframe should work, but I would suggest to use the postMessage API for communication.

I imagine something like this:

I think this would be an approach that should work with quite a lot of stacks/frameworks/etc.

martendegroot commented 1 day ago

@kyoshino , I landed here straight from google looking for the same thing. Has something like this already been added? It would be great to render some style on top of the bare preview pane. If there's a registered open issue assigned to this feature request, I'd love to follow it.

kyoshino commented 1 day ago

Not yet implemented. I’ll work on it in a few months and close this ticket once done 🙂