Improve CMS Editor

[ericthelemur]

Decap allows for custom widgets to pick fields, which would be a lot nicer than the current layout. In fact, there was one for categories & tags that I never got time to add back after a Decap update that required converting the widgets from class components to functional components.

Fields that should have a custom widget:

• Categories/tags: like the ex below, load the existing values from the taxonomy, so it can check existing or not
• Colour: Show a colour picker or list of preset colours (and preview the colours)
• Icon: Similar for icons, can preview any ones with paths easily, shouldn't be too hard to do bootstrap or phosphor too
• Emoji: Emoji pickers definitely exist
• Date?: If you can get the base date from the parent somehow in decap somehow, show a preview of what that date will convert to

The formatting of the preview could 100% be improved, loading custom CSS is easy, currently only loading the basics in the macro parts::preview_styles

Decap docs here https://decapcms.org/docs/custom-widgets/, code for the old one is here

stardust/templates/admin/admin.html

Lines 21 to 63 in 80ae7b2

	var CategoriesControl = createClass({
	handleChange: function(e) {
	const separator = this.props.field.get('separator', ', ')
	this.props.onChange(e.target.value.split(separator).map((e) => e.trim()));
	},
	render: function() {
	const separator = this.props.field.get('separator', ', ');
	const existing = this.props.field.get("existing", []);
	console.log(existing);
	var value = this.props.value;
	return h("div", {}, [
	h('input', {
	id: this.props.forID,
	className: this.props.classNameWrapper,
	type: 'text',
	value: value ? value.join(separator) : '',
	onChange: this.handleChange,
	}),
	h('p', {}, this.props.value.map(v => `${v} ${existing.includes(v.toLowerCase()) ? "✓" : "(NEW)"}`).join(separator))
	])
	},
	});
	var CategoriesPreview = createClass({
	render: function() {
	return h('ul', {},
	this.props.value.map(function(val, index) {
	return h('li', {className: "badge bg-secondary ms-1", key: index}, val);
	})
	);
	}
	});
	var schema = {
	properties: {
	separator: { type: 'string' },
	existing: { type: "array", items: { type: "string" } }
	},
	}
	CMS.registerWidget('categories', CategoriesControl, CategoriesPreview, schema);

and used here

stardust/templates/admin/config.html

Line 35 in 80ae7b2

existing: [{% for term in cats.items %} "{{ term.name | lower | safe }}", {% endfor %}]

[ericthelemur]

Oh also, the short codes (such as {{ note(...) }} render on the actual page, but are currently disabled in the preview. See issue #5

I had this working for basic shortcodes (no ifs, etc.) by using the shortcode in admin/_index.md and generating a wrapping -- hoping this meant the shortcodes wouldn't have to be defined twice. But that's unlikely, unless there is some third format we can get both JS and Zola to understand. So probably just gonna have to commit to duplicating shortcodes in JS and Zola,

See decap docs https://decapcms.org/docs/customization/ and the current wrapper top and bottom and used like https://github.com/UWCS/stardust/blob/master/content/admin/_index.md