Enhance Button Shortcode to Support Script-Based/Inline onclick Functionality

[priyakdey]

I'd like to propose enhancing the current button shortcode to support onClick attribute for both inline JavaScript functions and functions defined in external scripts. This will make the button shortcode more versatile and useful in various scenarios.

Currently the generated tag for the button.html is a, this kinda deviates from the name of the shortcode.

Proposed Changes:

1. Generate button tag for button shortcode.

2. Add onclick attribute to support inline functions. Example:
   {{< button href="https://example.com" onclick="() => console.log("I work")" >}}Click Me{{< /button >}}

3. Support External Scripts via custom attribute:
   Option to resolve functions from external scripts. I am still to explore more internals of hugo, but the idea which comes to me is:
   {{< button href="https://example.com" onclick="myFunction()" data-script="/assets/js/script1.js" >}}Click Me{{< /button >}}
   This can allow users to have multiple scripts if wants to, if we want to support just one script, that becomes simpler.

Benefits:

• Increases the flexibility and utility of the button shortcode.
• Simplifies adding JavaScript functionality to buttons without editing the template files directly.
• Supports scalable integration with multiple scripts.

Additional Context:

I was trying to add onClick attribute to the already present button shortcode. Currently it only supports - href and target attributes. I am looking for ways to hack it, but default support for this feature might be useful IMHO. I understand, changing this might completely break some systems, since these changes the tag itself, and all href attributes might not be supported(I don't know much about web dev).

Another approach can be to create a shortcode link which acts like current button, and replace button with a proper button tag.

Looking forward to feedback and suggestions from the community!