CMS with Ember nice URL slugs and link to helper

Questions Routing
1

Hi,

I’m creating a small CMS with a Drupal backend (https://www.contentacms.org/) for Ember. In the backend I have a field to define a path for each page. I’m having trouble how to architect the routing in a bice way. I would like to avoid using page ID and just use the path defined in the backend.

this is a property I can access through my api as one string /foo/bar/baz.

What I’m having trouble is defining my router so I can use the path defined in the api. It works when the slug is simply /foo or /bar. But what do I do if the slug is /foo/bar or just `/´ or any other length.

This is what my router looks like currently.

Router.map(function() {

       this.route('page', { path: '/:path });

}

I’m also having trouble with the menu. How can I define a LinkTo helper that would work for any url length. {{#link-to 'page' item.alias}} only works for urls in the first level.

Also I’m wondering how I would approach converting internal links that are used inside the body field with link-to helpers. I’m also having the same issue in the menu.

2

You might want to try using a wildcard route for this one.

this.route('page', { path: '/*path' });

Check out wildcard routing in the guides.

Here’s a twiddle showing how you can wire this up and grab the path in the route’s model hook: Ember Twiddle

2 Likes
3

I would like to avoid using page ID and just use the path defined in the backend.

You might break saved URLs if the path value changes. If you are using the same route/controller/template to load and display all the paths, you could do:

  this.route('pages', function () {
    this.route('show', { path: '/:page_id' });
    this.route('show', { path: '/:page_id/:path' });
  });

Links can be generated with: {{#link-to "pages.show" pageId}} or {{#link-to "pages.show" pageId path}}.

This is similar to how Stackoverflow styles their URLs: https://stackoverflow.com/questions/<question-id>/<question-slug>.

4

The backend checks if a path has already been used for another page. So that should not be a problem. But maybe including the ID is safer.

5

The problem is what do I do if the path has several segments. /segment-one/segment-two Doesn’t the link to helper have to look different depending on the amount of segments? How can I anticipate that.

6

I created a ember-twiddle to demonstrate. Note, I do a simple slugify on the path by replacing the forward slashes with dashes: /foo/bar to foo-bar.

Your implementation will depend on how your data is displayed (template).

  • If using the same template, you can implement my method.
  • If using different templates, you will need to use wildcards as mentioned by @ryanto.
7

I would wanna avoid to slugify urls as I would want to give authors the flexibility to structure their webpage via url paths.

I will use @ryanto approach works for the link-to helpers as well. For links that the authors place in the body field I would probably have to process the content of the field or just have a full page reload.