Kirby preview page

1

Hi,

I’m building a Kirby Preview much like Reveal. It has 2 iframes, one with the panel and one with the frontend. Is there a possibility to view the unsaved - or hidden page in Kirby so the User can directly see, when the user edits the page? Maybe the data is stored in the $page variable or there is already a preview page, that i can show in an iframe…

2

Unsaved data is stored client side in Localstorage (so no, not available in $page). What is Reveal?

3

It’s a plugin made in kirby 2: reveal But haven’t tested it, since I have kirby 3. My Plugin is similar to the draft in github. So how does kirby builder make a preview of the data? For some reason it works in his plugin…

4

You don’t get preview of the data on the frontend, do you?

A preview feature is planned for a future Kirby version, don’t know when, though.

5

well it has a preview button in the panel … in the backend it calls the snippet and renders it correctly…ok good to know

6

Unfortunately, I’m not familiar with the inner workings of the builder plugin.

7

ok maybe i have to dig in more into the code… but good to know that the data is being stored in the localstorage… maybe i can incorporate this…

8

Is the data also stored in a session? @timoetting how did you build the preview in page builder?

9

No, that wouldn’t make sense. Check out the source code of the Plugin.

10

Hey @steve84,

The builder-preview takes place in iframes which are stitched together in vue. To render the content of these iframes, a custom route is called with the respective post data of the specific builder block. This data is then used to render and return a snippet: https://github.com/TimOetting/kirby-builder/blob/0705fc86c078e2b36f53a8bc8eeb109398c7e570/index.php#L334

I guess you could follow a simmilar approach where you somehow POST the data from vue to a custom route that renders the entire page for you. As @texnixe said, unsaved content is not available in PHP world as long you do not send it over manually.

I am not exactly sure, how to access to entires page content/value object inside vue. But i think it is somehow possible to read the store of the entire panel form.

11

I will talk with my boss if it’s necessary. Would be a nice feature though. I checked the localstorage it has a page object which stores the original state and the changes… so maybe I could merge those two together and send it via GET or POST data…

I also have a react templates of the snippets… but maybe it’s not a good idea, since it’s duplicate Code.

12

@steve84 did you walk the preview path any further? Would be interested in your work :slight_smile:

13

Basically i updated the iframe everytime the store-button is clicked via event-listener. I’m not sure if i can share the code. But it has some custom programming as well.

14

ok, thanks @steve84 … it would be great if you could share at least some code oder explain in some words how your solutions extends the (old) kirby2 solution.

Many thanks in advance and keep up your good work :slight_smile:

15

hi teichsta,

i haven’t checked the code again and if it’s still working. GitHub - beegedesign/previewer

16

@teichsta correction: last time it worked… you need to put a previewer folder in the plugin folder and under blueprint fields folowing snippet:

                      previewer:
                        type: previewer
                        label: Preview
1 Like
17

@teichsta did you manage to get it working? How do you like it?

18

new link: Bitbucket