Skip to content

[5.x] Improved JS slugs#9440

Merged
jasonvarga merged 47 commits intomasterfrom
slugify-on-the-server-side
Mar 20, 2024
Merged

[5.x] Improved JS slugs#9440
jasonvarga merged 47 commits intomasterfrom
slugify-on-the-server-side

Conversation

@duncanmcclean
Copy link
Copy Markdown
Member

@duncanmcclean duncanmcclean commented Feb 1, 2024

Edit by Jason:

The server side thing is good in theory but dealing with async stuff is a pain. So we've kept the JS version for when you need a quick slug like for handle, but you can use the server side thing when it's important language-aware ones like entry strings.

  • Added Statamic.$slug JS API that generates slug fluently:
    • Statamic.$slug.create('Foo Bar'); // foo-bar
    • Statamic.$slug.separatedBy('_').create('Foo Bar'); // foo_bar
  • Added str_slug and snake_case global helpers for these two cases. They mimic the naming of equivalent Laravel helpers.
    • str_slug('Foo Bar'); // foo-bar
    • snake_case('Foo Bar'); // foo_bar
  • Server-side slug generation is opt in via new API.
    • This makes .create() return a promise.
    • It handles debouncing.
    • Statamic.$slug.async().create('Foo Bar').then(slug => ...); // foo-bar
    • Statamic.$slug.async().separatedBy('_').in('zn').create('你好').then(slug => ...); // ni_hao
  • JS-based / speakingurl slugs are not removed. When you don't chain async, that's what's being used.
  • The <slugify> component emits events so that you can track when slugification is happening.
  • Appropriate components now show spinners when slug requests are happening.
    • Anywhere the slug fieldtype is used, like in entries.
    • When creating items like collections, navigations, forms, etc.

This pull request changes the way slugs are generated in the Control Panel.

Until now, we've now used a library called speakingurl. It worked fine for generating slugs based on English strings but it didn't work so well for other languages, like German & Chinese.

Rather than implementing another JS library, we've decided to generate the slugs using Laravel's Str::slug() helper which seems to be more reliable with other languages.

We had made some modifications to our $slugify helper to workaround issues like smart quotes, hiphens separated by spaces, etc. I've added tests for these cases and Laravel's string helper seems to handle them as expected.

Due to slug generation now being done on the server-side & needing to perform network requests, I've had to make changes to how we use the $slugify helper in various places across the codebase.

Closes #2817.
Closes #9590.

Comment thread resources/js/components/blueprints/Sections.vue Outdated
Comment thread resources/js/components/blueprints/Sections.vue Outdated
Comment thread resources/js/plugins/slugify.js Outdated
Comment thread tests/Feature/Fieldtypes/SlugTest.php Outdated
@duncanmcclean duncanmcclean changed the base branch from 4.x to master February 1, 2024 15:47
@duncanmcclean duncanmcclean changed the title [4.x] Generate slugs with Laravel's Str::slug() helper [5.x] Generate slugs with Laravel's Str::slug() helper Feb 1, 2024
@jasonvarga jasonvarga changed the title [5.x] Generate slugs with Laravel's Str::slug() helper [5.x] Improved JS slugs Mar 20, 2024
@jasonvarga jasonvarga merged commit fb49b1c into master Mar 20, 2024
@jasonvarga jasonvarga deleted the slugify-on-the-server-side branch March 20, 2024 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

No open projects
Status: Done

2 participants