Skip to content

Commit

Permalink
docs(getting-started): workaround npm2yarn multi-line conversion is…
Browse files Browse the repository at this point in the history
…sue with Tabs (#1999)

I've noticed that the `npm2yarn` plugin only converts the last line of
multi-command code blocks. This PR introduces a temporary workaround by
splitting the commands into individual code blocks within a Tabs
component. This change ensures that all commands are properly displayed
and converted for each package manager.

### Before

In the original documentation, a single code block with multiple
commands was used. However, only the last command was converted
correctly:
![original code
block](https://github.com/user-attachments/assets/883e53a3-4a6e-4a4e-8d0c-f6f1be337382)

### After

With the proposed change, the commands are split into separate tabs
(npm, yarn, pnpm, bun), each containing a single code block. This
guarantees that every command is correctly rendered:

![after
fixing](https://github.com/user-attachments/assets/bd5f685c-3e5d-41bf-82c2-30f033192637)

---------

Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Taofeeq Oluderu <oluderutaofeeq@gmail.com>
Co-authored-by: Ehindero Israel <iehindero419@stu.ui.edu.ng>
Co-authored-by: Abhi Aiyer <abhiaiyer91@gmail.com>
  • Loading branch information
5 people authored Feb 21, 2025
1 parent 2f83d3a commit 2c893cf
Showing 1 changed file with 29 additions and 1 deletion.
30 changes: 29 additions & 1 deletion docs/src/pages/docs/getting-started/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,40 @@ cd hello-mastra

Then, initialize a TypeScript project including the `@mastra/core` package:

```bash copy npm2yarn
<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
<Tabs.Tab>
```bash copy
npm init -y
npm install typescript tsx @types/node mastra@alpha --save-dev
npm install @mastra/core@alpha zod
npx tsc --init
```
</Tabs.Tab>
<Tabs.Tab>
```bash copy
pnpm init
pnpm add typescript tsx @types/node mastra@alpha --save-dev
pnpm add @mastra/core@alpha zod
pnpm dlx tsc --init
```
</Tabs.Tab>
<Tabs.Tab>
```bash copy
yarn init -y
yarn add typescript tsx @types/node mastra@alpha --dev
yarn add @mastra/core@alpha zod
yarn dlx tsc --init
```
</Tabs.Tab>
<Tabs.Tab>
```bash copy
bun init -y
bun add typescript tsx @types/node mastra@alpha --dev
bun add @mastra/core@alpha zod
bunx tsc --init
```
</Tabs.Tab>
</Tabs>

### Set Up your API Key

Expand Down

0 comments on commit 2c893cf

Please sign in to comment.