Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Add tabs to cli blocks #18783

Open
1 task done
Jay-Karia opened this issue Aug 17, 2024 · 4 comments · May be fixed by #18784
Open
1 task done

Docs: Add tabs to cli blocks #18783

Jay-Karia opened this issue Aug 17, 2024 · 4 comments · May be fixed by #18784
Assignees
@Jay-Karia
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion documentation Relates to ESLint's documentation

Comments

@Jay-Karia
Copy link
Contributor

Jay-Karia commented Aug 17, 2024 •
edited
Loading

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

  • 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 Jay-Karia added the documentation Relates to ESLint's documentation label Aug 17, 2024
@amareshsm amareshsm added the accepted There is consensus among the team that this change meets the criteria for inclusion label Aug 17, 2024
@Jay-Karia
Copy link
Contributor Author

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
Copy link
Member

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 -%}
  1. 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
Copy link
Contributor Author

Thanks for your help. 👍

@Jay-Karia Jay-Karia linked a pull request Aug 18, 2024 that will close this issue
Open
9 tasks
@Jay-Karia

This comment has been minimized.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jay-Karia Jay-Karia

Labels
accepted There is consensus among the team that this change meets the criteria for inclusion documentation Relates to ESLint's documentation
Projects
Triage
Status: Ready to Implement
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: add tabs to cli code blocks Jay-Karia/eslint
2 participants
@amareshsm @Jay-Karia