Docs: Add tabs to cli blocks

[Jay-Karia]

Docs page(s)

One of the docs page https://eslint.org/docs/latest/use/getting-started#quick-start

What documentation issue do you want to solve?

The code blocks with CLI commands are only written in npx. What about the devs using pnpm yarn or bun

What do you think is the correct solution?

Add tabs to code blocks like https://eslint.org/docs/latest/component-library/code-tabs

Participation

• [x] I am willing to submit a pull request for this change.

Additional comments

There's a library which helps to convert commands between npm and other package managers. npm-to-yarn

[Jay-Karia]

Found a method to implement the tabs in the docs:

{% include 'components/code-tabs.html' %}

Could not find any use case in the docs.

The component uses a static npm and yarn script. How can I render it dynamically with different commands?

[amareshsm]

Use Macro to create a reusable section. Create a macro similar to hero.macro.html and use params to pass the commands dynamically.

1. creating - code-tabs.macro.html

{%- macro code_tabs(params) -%}
<div class="c-tabs" data-tabs>
    <div class="c-tabs__tablist" data-tablist hidden>
        <button class="c-tabs__tab" data-tab>npm</button>
        <button class="c-tabs__tab" data-tab>yarn</button>
    </div>
    <div class="c-tabs__tabpanel" data-tabpanel>
        <h3 class="h6 c-tabs__tabpanel__title">npm</h3>

```shell
{{ params.npm }}
```
    </div>
    <div class="c-tabs__tabpanel" data-tabpanel>
        <h3 class="h6 c-tabs__tabpanel__title">yarn</h3>
```shell
{{ params.yarn }}
```
    </div>
</div>
{%- endmacro -%}

2. usage - Import this component wherever you want to use it.

{%- from 'components/code-tabs.macro.html' import code_tabs %}

{{ code_tabs({
     npm: "npm install --save-dev",
    yarn: "yarn install"
}) }}

[Jay-Karia]

Thanks for your help. 👍

[Jay-Karia]

Added a new component: npx_tabs as mentioned here (https://github.com/eslint/eslint/pull/18784#pullrequestreview-2245833297). Can someone check it (https://github.com/eslint/eslint/pull/18784/files#diff-df81afc08e9580b24ac73fb5ab2c88f42f565f632470fd8c73542b81335819fb) ?

Then I may proceed it to implement?