Improve `showCommands` experience in URL builder about showmy.chat HOT 1 OPEN

I knew URL encoding caught some issues when something in a URL might contain reserved characters (like the & character is encoded, because when it shows up in a URL, it's to seperate query params).

But I wanted to know more, so I went digging a bit deeper to understand it better.

This happens because the URL-builder on the frontend uses URL to generate the URL, and it follows rfc3986, which encodes a bunch of special characters (including , and !).

The elventy serverless docs mention URL parameters should be treated as as potentially malicious.
The warning mentions displaying them in templates, but we're not currently doing that.

That being said, the rabbithole I went down didn't provide a clear answer why the , is one of those encoded characters, only that it is. The closest I got was this snippet from the RFC:

Percent-
encoding a reserved character, or decoding a percent-encoded octet
that corresponds to a reserved character, will change how the URI is
interpreted by most applications.

So I don't know what to do with them.
I'd probably stay on the safe side and keep the encoding.
Then decode it in the serverless function.

That way the URL-builder form keeps the user-friendliness of being able to use a ,, and the URL is URI-encoded according to that RFC. I don't consider the URL having encoded pieces as an issue. Anyone that wants to edit it manually still can. If the pattern of percentage encodings in it is too confusing, there's still the URL-builder form.

On the serverless side, the encoded URL needs to turn into decoded pieces.
Maybe eleventy serverless already does that for you.
If not, we can use decodeURIComponent

With the !, the solution seems simpler: stripping it out on the frontend if a command starts with it. (either startsWith("!") and substr or your favourite other method)

edit: the input for show commands uses a regex pattern: ^[\w-]+(,[\w-]+)*$
This means a single command has to be composed of "any letter, digit or underscore" (that's what \w matches).
Else the form submission will be rejected. (so a ! is disallowed in this current configuration)
That's still a frontend check, and should only be considered as a guide for users, not as a guarantee (that's what the validators in the serverless function are for)

from showmy.chat.