UI indicators for SEO #49

Thinking of SEO best practices and how the cms might help with this, it would be good if we could set, for a given field, some variables to have the UI indicate if the text entered in a field is acceptable length. Perhaps this is just a "soft" indication and does not prevent saving, just shows a message in the UI.

For example, if a title should be 70-90 char, maybe:

• under 70 - "Title text is too short, consider adding"
• over 90 - "Title text is too long, consider reducing"

Maybe it could also show a count of what you entered, as well...

This should be really easy to implement with a custom field.
https://lume.land/cms/fields/custom_fields/

As a temporary workaround, you can use the init option of the fields, that allows to change any field configuration dynamically. For example:

{
 name: "title",
 type: "text",
 init(field, cms, data) {
 // Get the current title
 const value = data?.title;
 // Check the value length. Note that it can be empty (for example, in the creation form).
 if (value) {
 if (value.length > 90) {
 field.description = "<strong>Title text is too long,</strong> consider reducing";
 } else if (value.length < 70) {
 field.description = "<strong>Title text is too short,</strong> consider adding";
 }
 }
 }
}

This changes the description option of the field based on the current value. It's not perfect because it's not updated dynamically (the form is sent by AJAx, so you have to reload the page after saving the changes to see the new description). I have to think of a way to refresh the form.

To test this, use the version 0.12.1 or greater (there was a bug in 0.12.1 caused data not to be passed to the init function).