[feature request] Preview customization

[braebo]

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]

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]

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]

@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.

[waynevanson]

I'm so keen for this.

My initial thought would an onChange event, and a way to subscribe to partial updates of content.

If I was editing in a directory collection .[5].reviewer, it would send a payload with:

{
  segments: [5, 'reviewer'],
  value: {
    from: 3,
    to: 5
  }
}