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
750 stars 34 forks source link

[feature request] Preview customization #51

Open braebo opened 10 months ago

braebo commented 10 months ago

Being able to customize the previews is an amazing feature in Decap. I use it to import my global css so that the content in the preview looks just like the page the content is on!

Any plans to support this feature? Or perhaps I missed it?

kyoshino commented 10 months ago

Hi, thank you for checking Sveltia CMS! Custom Previews are not supported yet, as mentioned in the README. I’ll figure out how to do it hopefully this month.

braebo commented 10 months ago

Ah, missed that sorry. Looking forward to it! Amazing work on Sveltia btw, crazy how much faster it is when swapping out decap! UI is beautiful too 🙏🏽

dindinet commented 10 months ago

@kyoshino @FractalHQ I have used NetlifyCMS on a couple of hugo projects. I created PreviewTemplates for the collection types and found the process a bit of a torture. I am not a React developer. I have dreamed more than once of a svelte port of the CMS. You are a hero for doing this.

To allow clients to build their own page layouts from a menu of sections we implemented the 'Advanced_Page' collection type. The client can add a new page and choose the components for the page in the order they require. I never managed to implement a satisfactory PreviewTemplate for this Advanced page type.I have attached the section for the advanced page type from our config.yml (it is inside the zip file.)

So my request is a Preview template made up of sub templates displayed in the order passed in as a collection.

advanced_page.zip

To help explain whjat I mean. The hugo template for the advanced page loops through the page sections and selects the appropriate partial template

{{ range $section := .Params.sections }} {{ $include_dict := dict "section" $section "Site" $.Site }} {{ $component := print $section.type ".html" }} {{ partial $component $include_dict }} {{ end }}

I am a beginner with svelte but I get the feeling this should be possible.