How to ensure slugs do not contain accented characters?

Question

The title says it all. When adding a title to a page, or an image, if that title has accented characters, it is reflected in the URL. e.g. a piece titled "Événements" will generate a slug "événements".

While I agree this is valid, and that it gets converted at one point to % characters (e.g. "%C3%A9v%C3%A9nement") under the browser's hood, this is not what is expected in the current project.

Is there a way to catch when the slug is updated, and choose to manually replace the accented characters with whatever equivalent we choose? Currently we are correcting those slugs manually, and obviously some slip through the cracks.

Answer 1

Those are run through the sluggo utility (built originally for Apostrophe) in the slugify utility method. There's a copy as a browser utility and another as a server-side utility.

You could overwrite or extend those (extending with the super pattern would be better) to replace accented characters. I found a few options to do that (here's one).

Here's the server-side one, for example:

// in lib/modules/apostrophe-utils/index.js
module.exports = {
  construct: function (self, options) {
    const superSlugify = self.slugify;
    self.slugify = function (s, options) {
      const slug = superSlugify(s, options);
      const newSlug = slug.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
      return newSlug;
    };
  }
};

You'd want to do the client-side one as well to avoid potential editor confusion, though you could get away with only this.

OR, if you were so inclined, you could PR this as an option on the sluggo package, then that could be activated as an option on apostrophe-utils.