Replace current formatSlug() with a more robust solution for non-english languages

[codeflorist]

The current formatSlug() implementation used in the website template as well as the various tests and examples is rather barebones and imho should be replaced with a more robust solution, that takes non-english languages into account.

The current implementation is:

  val
    .replace(/ /g, '-')
    .replace(/[^\w-]+/g, '')
    .toLowerCase()

This results in non english-characters simply getting dropped. But in german language e.g. one would like the umlaut ä to be translated into ae, and ß be represented as ss.

An in my opinion rather good package for this is https://github.com/sindresorhus/slugify.

This is rather easy to implement currently for the website template by adding the package and editing src\fields\slug\formatSlug.ts to:

import slugify from '@sindresorhus/slugify'
export const formatSlug = (val: string): string => slugify(val)

But since imho Payload should provide a hassle-free and good out-of-the-box experience also for non-english devs, i would recommend having this in the website template.

Feel free to let me know, if i should provide a pull request for this!