[ Vanilla JS ] Examples how should be use

[ampmonteiro]

The same way you have a section about UI framework, i think should exist a section with vanilla js because the section astro components > client-side scripts is incomplete or too vague ( https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts).

In the section about vanilla js should exist clear examples as well as should exist a template for that in the cli and in astro.new.

[sarah11918]

Hi @ampmonteiro, thanks for this comment! I've been writing these Vanilla JS examples for our new tutorial this week, in fact! Once that is in our docs, we can think about where it might make sense to put some examples of things you can build with script tags only, without needing a framework.

I like your idea for a starter template that has some common website features pre-built with vanilla JS, like a theme toggle, navigation show/hide.

[ampmonteiro]

hi @sarah11918 ,
i create this issue in sequence of this issue that i create in your astro repo ( withastro/astro#5083),
and because even dont know where you should put you script tags, only in pages or you can put in components? is that best practice? when is bundling into separate file, when is not? And how i config to always bundle into separate file?

I think this are import questions to be answer in the docs, mainly with practical examples.

Beside of examples that you mention, i think should be mention how, p.e, load a json file from public folder without the need to reach to static endpoint ( https://docs.astro.build/en/core-concepts/endpoints/#static-file-endpoints) like i shown in issue i mention ( that also should be in Data Fetching section ( with subtitle vanilla js but also is valid for frameworks since should work the same way).

thanks

[sarah11918]

Closing this because we now have a page on scripts and event handling! https://docs.astro.build/en/guides/client-side-scripts/ to address the main concern here! 🥳

I do still like the idea of "recipes" for creating a theme toggle, nav bar etc. in plain JS. But for now, we do have those in the tutorial.