Slug names should be auto-generated

[JuhaS]

On post creation page we should auto-generate the filename but allow override.

Page: /Wiredcraft/.../posts/master/new

Rules:

• Filename = (date)-(slug).md where date is todays date and slug is slugified title. For now we'll only support md.

Tasks:

• by default hide the "slug" inputfield but have an option to enable it ("manual override"
• make the filename preview bigger
• disable markdown switcher and hardcode to md

@hunvreus can you review the issue.

[haishanh]

What if there is no alphanumeric in the title? For example all Chinese characters like "你好世界". Actively prompt user to manual override?

[JuhaS]

@haishanh we should use slug-library that support generating slugs from different charactersets including Chinese (aka romanization). Here is one: https://github.com/lovell/limax .

[haishanh]

@JuhaS To cover different charactersets, we will need to load huge blob of dictionary data into the browser. So we may need to implement in the backend?

[JuhaS]

The pinyin library seems to have web version, maybe that only includes most common chars or uses some estimations but I would say lets try that first, it's data-file is really small. So maybe we first convert to pinyin and then slugify that: https://github.com/hotoo/pinyin/blob/master/lib/web-pinyin.js#L25 .

EDIT: You can also see what cleanup the limax does for the response from pinyin lib: https://github.com/lovell/limax/blob/master/lib/limax.js#L36

EDIT2: To clarify, for now we only need chinese.

[hunvreus]

I wouldn't worry too much about it at first. We usually create an English version of the page first and then translate to Chinese (filenames/slugs tend to be in English, not Chinese).

Additionally, what you're effectively going to create is the filename, not the slug. Let's see with a specific use case;

1. I write the title of my post: Awesome day in Shanghai
2. The filename would be auto generated to: 2017-05-27-awesome-day-in-shanghai.md
3. User could still click on the advanced option and manually override it to: shanghai/2017-05-27-awesome-day-in-shanghai.html (notice the change of extension).

We also need to address the potential for collision (if you pick a filename that is already taken). Should we let the user know and let him change the filename manually? Should we do our best at automating this (like adding a number afterwards; 2017-05-27-awesome-day-in-shanghai-1.md)?

[JuhaS]

Can you @hunvreus help with this: @haishanh was asking how should the form look like. Currently title is in the middle of the form, so it's a bit weird if the filename processing is in there as well. Should we find a way to raise the "Title" field to the top of the form so that the filename-display that is related to it is at the top as well?

[hunvreus]

Something like that:

1. By default we show the title input with a "Filename (edit): " in the description.
2. As you fill in the field we display the filename. By default it's {SLUG}.md
3. We have a "edit" link next to "Filename". When clicked it reveals the filename as a field below the title.
4. User can hide back the Filename field by clicking on the "Hide" link next to the label.

A couple more comments;

• Filename auto updates based on the title ONLY for new entries. Once the entry has been saved, it doesn't change anymore.
• Users can select whatever they want as the filename, including subfolders. So I could have a post (saved in _posts/) that has a latest/this-is-my-title.xml filename and it would save it as _posts/latest/this-is-my-title.xml.

[hunvreus]

Changed the story to;

1. By default we show the title input with a "Filepath: _posts/2017-05-25-untitled.md (edit)" in the description. Notice we show the full path and show a link to the filename option.
2. As you fill in the field we update the filepath, for example "Filepath: _posts/2017-05-25-untitled.md (edit)"
3. When clicked, the edit link disappears and reveals the "Filename" field which allows you to edit the path/filename (after the root folder, in the example _posts.
4. User can hide back the Filename field by clicking on the "Hide" link next to the label.

[JuhaS]

One more clarification: Where should these input fields be in relation to the rest of the form? Currently title is around the middle of the form I believe, keep it there?

[hunvreus]

I haven't seen title in the middle, but there are language and slug right now. We're dropping slug (since it's now managed in the filename). Filename shows under the title field. Title is at the top right under language. I may change the style on the language at some point.

[haishanh]

@JuhaS We can do it like this:

If we find the key JSONSchema. properties.title in _schemas/{collection}.json, we delete this title key before passing the schema to react-jsonschema-form and then we generate the title and filename field ourselves just like how we generate the slug field, put them on top of the page(just below the language field).

[JuhaS]

@JuhaS We can do it like this:

If you find that using the object keys to order actually works in browsers its good enough too (even it it's not guaranteed on the language level). But your approach seems ok to me as well if that's easier.

[woodpig07]

Just found out react-jsonschema-form does provide a way to define field order: https://github.com/mozilla-services/react-jsonschema-form#object-fields-ordering You can use that to programmatically make sure title displaying as the first and body displaying at last.

[haishanh]

This issue should have been addressed with the last PR.

For new entry, it works as described:

Changed the story to;

1. By default we show the title input with a "Filepath: _posts/2017-05-25-untitled.md (edit)" in the description. Notice we show the full path and show a link to the filename option.
2. As you fill in the field we update the filepath, for example "Filepath: _posts/2017-05-25-untitled.md (edit)"
3. When clicked, the edit link disappears and reveals the "Filename" field which allows you to edit the path/filename (after the root folder, in the example _posts.
4. User can hide back the Filename field by clicking on the "Hide" link next to the label.

For existing entry, the difference is:

The filepath will not update automatically after changing title. But if you click the (edit) button, you will still be able to change it.

[JuhaS]

Just implemented for western characters. If we want to support non-ascii slugs we can use this (seemed best option so far): https://github.com/hotoo/pinyin/blob/master/lib/web-pinyin.js#L25 .