Routes with suffix

Developing with Prismic
1

Defining routes don't seem to resolve suffixes in routes for example adding .html.

For example

  {
    type: 'blog',
    path: '/blog/:uid/baz.html',
  }

When using the resolvePreviewURL I would expect the document with uid foo to resolve to: /blog/foo/baz.html but instead, it resolves to: /blog/foo/baz

Reproduction

I was able to reproduce this using the prismicio/reactjs-blog (github.com) repository:

Of course, previews would not work here, and anything using the asLink would also not work.

Source

After some further investigation, it seems like it's the result returned from the API, using this request:

https://fc-react-blog.cdn.prismic.io/api/v2/documents/search?q=[[at(document.id%2C+"XFGlSxAAACEARS7_")]]&ref=https%3A%2F%2Ffc-react-blog.prismic.io%2Fpreviews%2FY2NauhQAAMDemvIl%3FwebsitePreviewId%3DY2NbhRQAACUAmvW4&routes=[{"type"%3A"post"%2C"path"%3A"%2Fblog%2F%3Auid%2Ffoo.html"}%2C{"type"%3A"blog_home"%2C"path"%3A"%2F"}]

You can notice that the result url is without the .html, although it is included in the requested url:

routes=[{"type":"post","path":"/blog/:uid/foo.html"}]
2

Hello team. Could you tell us a bit more about your use case?
Why do you need to add this suffix to the routes?
I'd think that the browser skips because it reads it as a regex

4

Hi @Pau, in our framework we allow our integrators to register routes with an .html prefix, based on the same principals as Path-to-RegExp.

We have clients that integrate with multiple different systems (eg; Magento, BigCommerce, Prismic, etc...) and they previously have been using .html in their paths and would like to continue in doing so, this will avoid any requirement for unnecessary redirects. We also have clients migrating to Prismic that require this.

I'd think that the browser skips because it reads it as a regex

I don't believe it is related to the browser, the routes I posted there is straight from the query made to Prismic, and you will notice the response data is without the html, it might require some special markup/escape to include the point in before the html?

image
image1647×552 39.3 KB

Paul @ Front-Commerce

5

We currently had to hack something into our system to get this to work, we created a path serializer, and apply it any time a path is registered with the prismic client, and then we deserialize any paths we receive from the client :slightly_frowning_face:

But this is only a hack, and I do hope it will be fixed, or a solution will be made available.

//  This is a hack to support `.html`, see https://community.prismic.io/t/routes-with-suffix/11546
export const DOT_PLACEHOLDER = "/____DOT____";

export default class PrismicPath {
  /**
   * Replaces all dots in the path with a placeholder.
   *
   * see: https://community.prismic.io/t/routes-with-suffix/11546
   *
   * #### Example
   *
   * - before: `/my/path.html`
   * - after: `/my/path/____DOT____html`
   *
   * @param {string} path
   * @returns {string}
   */
  static serialize(path) {
    return path.replaceAll(".", DOT_PLACEHOLDER);
  }

  /**
   * Replaces all dot placeholders in the path with a dot.
   *
   * see: https://community.prismic.io/t/routes-with-suffix/11546
   *
   * #### Example
   *
   * - before: `/my/path/____DOT____html`
   * - after: `/my/path.html`
   *
   * @param {string} path
   * @returns {string}
   */
  static deserialize(path) {
    return path.replaceAll(DOT_PLACEHOLDER, ".");
  }
}
6

Thanks for sharing your use case and solution. I'll share this information with the dev team.

8

Hi @Pau,

Could you have any feedback from the dev team?
Any idea of an ETA of the API supporting this use case?

Thanks.

9

We have no news for the moment. We'll post an update if we do.
Thanks

1 Like