Match paths ending in a value (such as /**/*.png)

[KyleSmith0905]

Describe the feature

Context:

I'm trying to add the Cross-Origin-Resource-Policy on dynamically generated OG Images.

I haven't seen anything on Radix3's or Nitro's documentation, I've tested these regardless:

/__og_image__/og.png # Only gives the header on the homepage's og image.

/*/__og_image__/og.png # Does not provide the header on double nested pages.

/**/__og_image__/og.png # Does not provide the header on any page

Concerns:

I'm wondering if this would be possible as a feature since Radix3 is based on the radix tree? Though, you do support foo/*/bar, so idk.

Feature Request:

Add

/**/__og_image__/og.png

or if the feature already exist, add it to the documentation.

Willing To Help

I took a look at the code, and it was clean and easy to follow! However I don't have nearly enough knowledge on how this would be done. I'm willing to test the waters, but I don't think I'd be successful. :D

Additional information

• Would you be willing to help implement this feature?

[dargmuesli]

@harlan-zw and I are interested in that as well! 😍

[pi0]

This feature is planned in next major version and already implemented see #52

[harlan-zw]

This feature is planned in next major version and already implemented see #52

Thanks for the detail, maybe you could help me understand this better. I looked at this code and I can't exactly see how this would work.

The first node needs to be an nth-deeply nested wildcard match.

For example, we need (ideally) a single route rule that will match ALL of the following:

• /blog/nuxt-3-migration-cheatsheet/__og_image__/og.png
• /blog/__og_image__/og.png
• /__og_image__/og.png
• /some/very/long/url/that/does/not/exist/but/this/is/an/example/__og_image__/og.png

I played with the latest code and this appears to be the output. Maybe I'm using it wrong though.

it('ends with pattern', () => {
    const router = createRouter({
      routes: {
        "/**/__og_image__/og.png": { m: "**/something/foo.png", order: 1 },
      },
    });
    const matcher = toRouteMatcher(router);
    const matches = matcher.matchAll("/my-path/__og_image__/og.png");
    expect(matches).toMatchInlineSnapshot('[]')
  })

If it is indeed possible with this PR, are you able to provide some code (or point in the right direction) and I can write some unit tests around it for the above?

[pi0]

You cannot combine wildcard with following static marcher. For that you need /** matcher + h3 custom route matcher (with regex) or for Nuxt renderer, you can integrate with renderer hooks just like what we do for payload paths.

This is by design for sake of API simplicity/compatiblity in radix3.

Feel free to raise a new issue in h3 or nitro if you need an example of how to do this.

[harlan-zw]

Yes, this is what I figured.

Afaik there isn't a way to handle it without using a Nitro / h3 middleware? See nuxt-modules/og-image#101 for context.

If that's the case, we can consider closing this issue.

[pi0]

• Mixed pattern /*.png coming with v2 (tracker v2 roadmap #88)
• Wildcard /** can be only last segment