Custom previews

[dindinet]

Hey Kohei

Do you have a timeline for Custom Previews?

Will it be a lot of work?

Where in the repo is the code that does the default preview?

regards @dindinet

[kyoshino]

Hey 👋🏼 Custom Previews is https://decapcms.org/docs/customization/ right?

• registerPreviewStyle (CSS registration) is probably not a big deal; I’ll work on it sometime this month.
• registerPreviewTemplate might take a bit of time because it’s a React thing, but I’ll do it anyway before the 1.0 release planned for this Q3.

The default CSS is embedded in field-preview.svelte.

[dindinet]

Hi Kohei

Specifically
registerPreviewTemplate
Registers a template for a folder collection or an individual file in a file collection.

CMS.registerPreviewTemplate(name, react_component);

You won't implement it in React though, will you?

More likely
CMS.registerPreviewTemplate(name, svelte_component/template);

@dindinet

[kyoshino]

You know I’m a Svelte backer and I hate React, but an easy migration is a must for Sveltia. As the project README says, it’s designed to be a drop-in replacement for Netlify/Decap CMS. Asking existing users to rewrite their components in Svelte is not an option, unfortunately 🤣

[dindinet]

<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
  var PostPreview = createClass({
    render: function() {
      var entry = this.props.entry;
      var image = entry.getIn(['data', 'image']);
       var bg = this.props.getAsset(image);
      return h('div', {},
        h('h1', {}, entry.getIn(['data', 'title'])),
        h('img', {src: bg.toString()}),
        h('div', {"className": "text"}, this.props.widgetFor('body'))
      );
    }
  });

  CMS.registerPreviewTemplate("posts", PostPreview);
</script>

[dindinet]

Point taken. So for the time being we need to get our heads round Preact and the ideas mentioned in the Using React in Svelte article?

[kyoshino]

Actually I want to add support for Preact+HTM as an alternative to the h hell. No transpiler necessary. I used the combo for my previous project, and it worked well. It’s easy to learn for developers familiar with React. Svelte 5+ adoption will take some time.

[kyoshino]

Anyway, I need to add compatibility for the h thing first.