Need a Live Preview of Not Yet Published Blog Posts

[xbmc]

Need a Live Preview of Not Yet Published Blog Posts

[pkscout]

Preview builds are now enabled. I have updated the wiki page on blog posts accordingly. Tagging @ProfYaffle just so he sees this (since I separated this out from another issue).

[pkscout]

One other note. I re-saved the blog post about broken add-ons (I added a space at the end) so that it now has a preview.

[ProfYaffle]

Re-opening this. While the live preview looks great, there's a sync delay of some kind: I updated a draft post, saved it, and yet the preview still shows the old iteration.

It may be unavoidable, in which case some text on the preview button to remind people might be useful.

Perhaps unrelated, but - going back now to see if a few minutes has allowed the sync/build/whatever - I'm unable to even get a preview, instead getting a "Check for Preview" and refresh button that seem to do nothing.

[pkscout]

That save got "caught" in a major rebuild, so it look almost 17 minutes to rebuild the preview. Once we get things stable and in production, that shouldn't happen very often, but this time you saved that after I had pushed some changes that forced a full rebuild on the main site (which meant your separate temporary branch had to do the same thing).

I'll check to see if there's any way to customize what messages are shown when, but I think we may be stuck with what is there (although I can certainly submit an issue to the Netlify CMS github repo). I'm getting ready to deploy some more changes that I'm hoping will speed build times, and that may help. But there is always going to be a 5 minute or so delay between saving a draft and getting a preview.

[pkscout]

I stumbled on documentation on how to build custom live previews inside the CMS. Once I stopped following the documentation and just started banging on things, I got a viable live preview done. It's available to try in staging at:

http://kodi-tv-staging.netlify.app/admin

You probably shouldn't save any changes to the posts or add new ones, or those will get merged when we next merge staging into main. But you can at least edit exiting posts without saving and start new ones (again, without saving). The live preview is real time as you type, and it is exactly (well, 99% exactly) what you will see on the web site. There are two differences in the live preview.

1. The live preview shows the read time as 99 minutes. That is calculated by Gatsby at build time, so there is no way to access it in the live preview.
2. The live preview has no footer. We use a Gatsby static query to generate the footer list of sponsors, and, as with the read time, that query is run at build. If the footer is included the live preview errors out.

There is an interesting bonus of this preview. It is fully responsive. By resizing the preview pane you can see what the post will look like on other devices. Here are some screenshots of that:

On a big screen with enough space for a full size preview:

On a laptop sized screen with enough space for mid-sized preview:

And one with the preview pane small enough that it emulates a mobile device:

[pkscout]

Live preview for blog posts (and all other content types) are available in main now and published at https://kodi-tv.netlify.app. I think this solves the problem much better than the incremental builds at save, so I have disabled those for now. Unless we change it back, the site will only be rebuilt when a post is actually published.

[razzeee]

Closing this then :)