Case insensitive routes?

[perostlin]

Hello,

We're using SvelteKit for our web sites, I wonder if there is a standardized way to make the routes case insensitive?

Say I have the following routes structure:
src/
      routes/
            blog

Then if I go to either /blog, /Blog, /BLOG, etc. in my browser I want to end up on the blog route.

Any pointers would be appreciated!

[eltigerchino]

You can try using matchers? (I’m not sure if this is the best way)
https://kit.svelte.dev/docs/advanced-routing#matching

The docs show an example of a matcher using a regex. So maybe something a regex with the case-insensitive flag? (I haven’t tested this)

/** @type {import('@sveltejs/kit').ParamMatcher} */
export function match(param) {
    return /^blog$/i.test(param);
}

[perostlin]

I thought about that too, but the problem is that I want all routes to be case insensitive, so a param matcher would have to be placed on all routes.

But maybe a hook would suffice?

[eltigerchino]

Sorry I misunderstood. Yes, a hook will most certainly suffice!
Maybe something such as below:

import { redirect } from '@sveltejs/kit';

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    // redirect to lowercase URL if there's a capital letter in the pathname
	if (event.url.pathname.match(/[A-Z]/)) {
		throw redirect(307, event.url.pathname.toLowerCase());
	}

	const response = await resolve(event);

	return response;
}

StackBlitz

[peter-hendy]

I think it's even better to use the reroute universal hook

import type { Reroute } from '@sveltejs/kit';

export const reroute: Reroute = ({ url }) => {
	return url.pathname.toLowerCase();
};

[perostlin]

Late response from my part, sorry about that, both worked fine, the handle makes the url lowercase even in the browser, the reroute keeps the uppercase characters, so for us both works, we will probably go for the reroute just to skip a redirect.

Thanks @eltigerchino and @peter-hendy 🙇‍♂️