feat: Live Demo

[KnorpelSenf]

Here are some cryptic notes to self, maybe they are good enough that you can make sense of them :)

1-click demos. I imagine having a number of short and complete bot codes on one page, and at the very top there's a table with three columns: name (includes link to anchor on the page) a RUN button to start it, and a DEPLOY button that puts the bot on Deno Deploy. Requires a text field, too. Token is obviously never sent, and this must be explained. Cached in localstore of the browser so it persists across visits. It is worth investigating if the token should be shown on other pages, too, in order to improve the copy-pastability of example bot code. Investigate integration between the example bots here, and those in the repo. Should unify the two current sections Live Browser Demo and Example Bots on the page, having two entries here does not make sense and it never did.

[KnorpelSenf]

Example structure of the page:

Bot Token (explain why that's safe to paste here): [ text field ] check mark
> inferred bot name, updates as soon as token is pasted <

Echo bot (scroll link)	RUN	DEPLOY
Cool sample bot (scroll link)	RUN	DEPLOY
Advanced sample bot (scroll link)	RUN	DEPLOY

# Echo bot

... code ...

# Cool sample bot

... code ...

# Advanced sample bot

... code ...

[EdJoPaTo]

How about statically hosting examples with predefined bot usernames? This exact source code runs as @whateverbot and its kinda done? If all examples get their token via environment its pretty easy to automatically start them up and keep them running somewhere. This seems like way less effort compared to providing deploy buttons and all that background magic?

[KnorpelSenf]

The point is that the users get their own bot. They create it, they name it, they own the token. It it their bot that they got up and running. This is a very different experience from just having us run some bot somewhere.

I agree it is a lot of effort, though—it's also also a cool thing to have.

[rojvv]

How and where should we write the code for the "Run" button?

[rojvv]

Also, what about this structure:

- Link to Demo 1
- Link to Demo 2

# Demo 1

Run - Deploy

```
code
```

# Demo 2

Run - Deploy

```
code
```

[KnorpelSenf]

How and where should we write the code for the "Run" button?

The code will live in the website repo. It will be processed by vuepress and shipped as static asset.

Also, what about this structure:

• Link to Demo 1 - Link to Demo 2

Demo 1

Run - Deploy

code

Demo 2

Run - Deploy

code

Good idea! I like this better than the first suggestion.

[KnorpelSenf]

Regarding the how: you just write regular TypeScript and import grammY from its own CDN. This means you won't have type safety with grammY, just with your own code.

Vuepress let's us write Vue.js components and include them in markdown, so it'll just become a Vue SFC (single-file component) in its own file, plus a <Bot/> element in the markdown.