search

decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.83k stars 3.04k forks source link

Preview directly the final website #7179

Open tobiasBora opened 5 months ago

tobiasBora commented 5 months ago

Is your feature request related to a problem? Please describe. The default preview is usually very different from the actual website, making it hard to visualize the final result. While it is possible to customize it, it basically requires me to code my website twice, once for the actual website and one for the preview. Moreover, I don't think it is possible to actually extract the content from other .md files, for instance to print a menu or a list previewing other pages.

Describe the solution you'd like

Of course, I understand this is impossible to get easily for some framework like hugo without relying on WASM. But for js CMS based on react/vuejs/svelte, it might be possible to have a better solution. For instance TinaCms provides a react hook that can be used while building the website that will pick the new content when executed from the preview tab.

https://tina.io/docs/features/data-fetching/ https://tina.io/docs/contextual-editing/overview/

Describe alternatives you've considered

Manualy coding a new style for the prev, see drawbacks in first section.

Additional context

See also https://github.com/decaporg/decap-cms/discussions/7178

alianza commented 5 months ago

You can add an npm script that copies your stylesheet over to your public folder and use CMS.registerPreviewStyle('path/to/stylesheet.css') to register the styles for the preview.

tobiasBora commented 4 months ago

Thanks, but what about more involved things involving other things, like the menu of the website for instance (that depends on other pages), or, say that I want to create a component that link to other pages while printing there main image and a short description of the page etc… seems like it's hard to print correctly.