docs: add tabs to cli code blocks #18784
Conversation
|
Hi @Jay-Karia!, thanks for the Pull Request The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.
To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page. Read more about contributing to ESLint here |
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Jay-Karia
changed the title
|
While parsing the Tried using Characters like What should we do here. |
The pages are Tests, PRs, Custom Parsers, Integration Tutorials, flags, config files and debug.
|
You should mark the content as safe to disable encoding. |
amareshsm
added
the
accepted
|
The linting errors are due to the commands being wrapped within |
There was a problem hiding this comment.
Thanks for taking a look at this. This isn't quite what I had in mind. What I think we need is a separate component that deals with just commands. Something like this:
{{{ install_tabs({
global: true,
package: "eslint"
}) }}
{{{ npx_tabs({
package: "eslint",
args: ["--fix"]
}) }}
And then the tabs are automatically generated for npm, Yarn, pnpm, and Bun.
We should not be making any changes where we tell people to run npm test, because that's what we use in our repos. Other package managers might not work and there's no need to use them.
|
@nzakas |
|
There would be two types of tabs for code blocks one being installation and another being the runner. The installation one takes multiple params like if it needs to be global installation, what package to install, if it is a dev dep etc.. so basically this code: will be resolved to similarly for runners we will have the command that has to be run and the args that command takes. So we should auto generate it for all type of runners npx, bunx etc.. |
|
There's a library npm-to-yarn which can convert commands. Is there any other solutions you have thought about ? |
|
These are also very simple mappings from one package manager to another. We don't need any other packages to do the translation for us. |
|
Should we add |
Added two other macro components
|
@nzakas Added |
|
Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update. |
|
@Jay-Karia, CI is failing can you check that? |
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
Co-authored-by: Tanuj Kanti <86398394 [email protected]>
| @@ -0,0 1,63 @@ | |||
| {# to npm #} | |||
There was a problem hiding this comment.
Can we move this data into a JSON file? I think that would be easier to understand and maintain.
There was a problem hiding this comment.
After a bit research I found that we need to install extra dependencies for reading the JSON data into the template, and however the majority of the format will be similar to the current one.
If you have another solution to read the JSON data, we can implement it.
There was a problem hiding this comment.
template can read the JSON data, you can check out the src/_data folder in repo.
There was a problem hiding this comment.
added the data as JSON file and a helper function / file to access the data.
Can you help me with the implementation with the template. As I am new to this :-|
There was a problem hiding this comment.
seems i am a bit late, thanks for your patience.
What i found is templates with macro.html extension are not reading JSON data directly as other html templates, looking for some other ways to do this, and
would like to ask @eslint/website-team for some suggestions on this.
|
Oh, I will check it and will implement it with JSON data.
…On Fri, Sep 27, 2024 at 4:38 PM Tanuj Kanti ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In docs/src/_includes/components/_globals.html
<#18784 (comment)>:
> @@ -0,0 1,63 @@
{# to npm #}
template can read the JSON data, you can check out the src/_data folder
in repo.
—
Reply to this email directly, view it on GitHub
<#18784 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AUXSWZ7D72LOIYNNL2D2QA3ZYU4EFAVCNFSM6AAAAABMWB2TRCVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDGMZTGQ2TGNZTGA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Sorry! closed it accidentally. |
|
@Jay-Karia it looks like there's a merge conflict and a lint error, can you take a look. @Tanujkanti4441 where are we on this? |
Will fix them soon after deciding about the JSON file data and implementing. |
Looking for a way to implement JSON data in |
Prerequisites checklist
What is the purpose of this pull request? (put an "X" next to an item)
Closes #18783
What changes did you make? (Give an overview)
Adds tabs to cli code blocks for multiple package mangers (yarn, pnpm, and bun).
There's a command:
npx eslint [options] [file|dir|glob]*innpm, the code tabs allows users to get the equivalent command inyarn,pnpm, andbun.