Homepage consistency

[josephernest]

Discussed in #3028

^{Originally posted by josephernest July 10, 2022}
Congrats for this great project.

When you have your first contact ever with Alpine on https://alpinejs.dev/, you are happy to see that "everything is included" in "15 attributes, 6 properties, 2 methods". This is excellent branding (and more libraries should do this!) because you know in advance that it will be lightweight (which is a awesome).

Then I look at the top example:

<script src="//unpkg.com/alpinejs" defer></script>
 <div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

and I see @click="...". I'm then thinking: Let's discover which of these 15 attributes is this!. After a few minutes, you see that @... isn't listed in the "15 attributes", and then you start thinking the promise "15 attributes only" is wrong.

Of course after a few more minutes, you discover elsewhere (after a google search etc) or in another documentation page that @... is just a shortcut for x-on:... but this isn't obvious on first contact with the library.

Suggestion of modification: replace @click by x-on:click in the first example in the homepage https://alpinejs.dev/, so that the newcomers are not lost at the beginning. It will be more consistent with the rest of the home page documentation.
Alternatively, you can also include in the homepage, in the list of 15 attributes:

x-on (abbreviated by @)  <----------
Listen for browser events on an element

[joshhanley]

This issue has been converted to a discussion as we are now using discussions to track bugs and ideas.
See this announcement for more details #1423