Implement Webhook Utility

[roziscoding]

Successor to #523

Layout preview:

[github-actions]

🚀 Deployed on https://6408c1956eb2b26a330dceed--grammy.netlify.app

[roziscoding]

I created a new dedicated page for this component and added a link to it in the "Resources" menu in the navbar.
That's a suggestion and I'm completely fine if we decide to change it

[KnorpelSenf]

1. Pretty awesome stuff! 🎉
2. What's the loading spinner at the top doing? It never completes for me 🤔
3. It would be cool to remove the button to load the bot info. This can happen automatically as soon as the token is inserted and correct.
4. Does the component actually store the token in localStorage? It's gone upon reload.
5. We should link to this website's source code in the promise that says we don't send the token anywhere.
6. Are you planning on adding a light mode?
7. This should probably be in its own category under Resources, perhaps called Tools. http://fqs.deno.dev can go in there, too, as soon as it's done. /cc @dcdunkan
8. Additionally, we should add this component to every tutorial on the page that tells users to set a webhook.

[roziscoding]

What's the loading spinner at the top doing? It never completes for me 🤔

It's loading the bot's picture. I don't think it's able to handle a bot not having a picture. I'll fix that.

It would be cool to remove the button to load the bot info. This can happen automatically as soon as the token is inserted and correct.

I can't really validate the token without calling the API, and I'm not sure if it's a good idea to do that on every typed character, but if you think it's fine, I can implement it no problem

Does the component actually store the token in localStorage? It's gone upon reload.

No, not really. I forgot about that part. I'll add it ASAP

We should link to this website's source code in the promise that says we don't send the token anywhere.

I agree. Will do.👍🏻

Are you planning on adding a light mode?

The component framework already has one built-in, but I couldn't figure out how to detect that the user changed the overall page theme

This should probably be in its own category under Resources, perhaps called Tools. http://fqs.deno.dev/ can go in there, too, as soon as it's done. /cc @dcdunkan

I agree.

Additionally, we should add this component to every tutorial on the page that tells users to set a webhook.

Should we do this on a new PR after this one gets merged?

[KnorpelSenf]

it's a good idea to do that on every typed character, but if you think it's fine

I do think it's fine. Note that tokens are usually pasted, so most often there will only be a single request. Even if there are a few hundred requests, it shouldn't be much of an issue.

I couldn't figure out how to detect that the user changed the overall page theme

There's https://github.com/vuepress/vuepress-next/blob/d283ffe3ef0668bfea54e6d973066695f46f13c0/ecosystem/theme-default/src/client/composables/useDarkMode.ts but it doesn't seem to be available to the outside. We can check the DOM manually, but that's ugly. Perhaps @Loskir or @CikiMomogi know this?

Should we do this on a new PR after this one gets merged?

That depends on whether or not we even want to keep it on a dedicated page. Note that #635 was closed. @roj1512 what do you think?

[rojvv]

Can you make the preview work somehow?

[roziscoding]

Can you make the preview work somehow?

On it. I saw it was failing after I requested your review.

[rojvv]

The cursor for the disabled checkboxes should be either default or not-allowed, not pointer.

[rojvv]

Do you think it should adapt light mode better? Or this dark background is intended?

[rojvv]

Do some overflow: hidden; text-overflow: ellipses so longer webhook URLs appear better.

[rojvv]

Suggested change

	label: "Bot Token",
	label: "Bot token",

[rojvv]

Is this string used?

[roziscoding]

Not anymore, no.

[rojvv]

Remove it then.

[KnorpelSenf]

I have some more feedback. All of these ideas are optional and won't block from merging. You're free to decide if you want to do them here or in a subsequent PQ or not at all.

1. The three checkboxes look like we could change the settings. It is not intuitive that all they do is to provide information. Either restyle, or add a tooltip, or add a link to BotFather, or a combination of the above.
2. The text field loses focus when typing.
3. The error message "Network request for 'getMe' failed!" should not be printed when the text field is cleared.
4. The error message "Network request for 'getMe' failed!" should perhaps be changed to something more informative.
5. The text "The one which @BotFather gave you." should include a link to BotFather.
6. The back arrow should perhaps be displayed next to the bot's avatar. That's where I'd expect backwards nav.
7. The component should not flicker when pressing refresh.

[rojvv]

Closing due to inactivity and in favor of grammY tools.

[KnorpelSenf]

Wouldn't it still be awesome to have a webhook utility component that can be included in the respective guides? IMO it is much preferable to write docs that go like

you gotta set your token, have a tool for that, look: [TOOL]

rather than

you gotta set your token, you can do this via curl or your browser or this other website over there which we created, it is called tools.grammy.dev and it is very good but no matter what you do you always have to leave this site and your train of thought

[roziscoding]

I agree it's better to have something inline, but I'll open another PQ with the grammy tools version of the component, since it doesn't depend on a UI framework and the design should work better in the docs

[KnorpelSenf]

Awesome!

[rojvv]

Thanks for proving what I assumed as a YES @roziscoding.