search

jekyll / jekyll-admin

A Jekyll plugin that provides users with a traditional CMS-style graphical interface to author content and administer Jekyll sites.
https://jekyll.github.io/jekyll-admin/
MIT License
2.82k stars 357 forks source link

Basic real preview on the side of the edit window #697

Open rpeyron opened 1 year ago

rpeyron commented 1 year ago

This PR adds a feature to get 'real' preview on the side of the editing window:

jekyll-admin-mods

It simply embeds an iframe with the resulting page (as when you click on the view button). So it is a real preview, much more accurate than every WYSIWYG editors can get. It adds a "Side preview button" that will show the preview on the side, and move side buttons to the bottom to have a larger edit space. You can close the preview and get the original layout back.

You can also force refresh the preview, but if you use the live reload feature of the jekyll live server, it will reload automatically (with a small delay depending on the speed of the page compilation).

I am aware this PR cannot be merged as is (notably because of deactivating tests, as it requires a lot of work to update) but let me know if you are interested in this feature and I may help to get something mergeable in the direction you want.

ashmaroli commented 1 year ago

Hello @rpeyron Thank you very much for proposing this enhancement. I am on board with the idea. The diff looks huge now, so this definitely requires more edits.

rpeyron commented 1 year ago

Hello @ashmaroli, thanks for your answer.

The diff looks indeed huge, but there are not that many changes ; lots of lines marked as diff are actually indented lines due to nesting existing parts in a parent

section.

Below is a list of major changes:

  • PreviewPanel.js contains code for the preview panel and button to be included in the xxEdit views
  • xxEdit views (DocumentEdit, DraftEdit, PageEdit) are modified in the same way to:
    • add DOM id to the div element that will have the class 'preview' added or removed by the preview/close buttons
    • add a parent div <div className="edit-panel">to be able to style and layout the existing contents with or without the preview panel
    • add the PreviewButton and PreviewPanel
  • preview.scss to add the CSS to style the panel and layout the page accordingly

I guess the way I use to add/remove the preview class and modify the layout is not the best, and you may want to replace that by a more reactish way to do it. The number of changes may also be lowered by maybe creating a common component for xxEdit views.

Please tell me if I can help with the edits to be done.

ashmaroli commented 1 year ago

@rpeyron On actually trying this out at my end, I would like to leave some suggestions / feedback.

Feedback

  • It is not a good idea to push the side-buttons under the metafields. The buttons getting pushed further down with every front matter entry hampers UX.
  • The iframe isn't currently resizable. So the previews are always for small-screen viewports. Having to scroll down to click "View" to open a tab for large-screen viewport is again a bad UX.

Suggestions

  • The existing MarkdownEditor / SimpleMDE allows a side-by-side "live-preview" of Markdown renders. You could emulate similar behavior for the proposed build-preview / real-preview. That would prevent making changes to existing app layout.
  • The build-preview pane could be made resizable like how Google Chrome (only browser I use currently) has it for device-based renders.
rpeyron commented 1 year ago

@ashmaroli thanks for your suggestions

  • +1 for the "full screen" mode to avoid moving the buttons (about SimpleMDE, the lack of browser spell checker compatibility is for me a no-go in 2022 ; I have suggested some alternatives in #696)
  • +1 for a slider between Markdown & preview to move the separation between the 2 columns and resize the preview