From 2d9894fe5ae0c44dafd6d110515a64c5d1daf421 Mon Sep 17 00:00:00 2001 From: geodic <64704703+geodic@users.noreply.github.com> Date: Fri, 28 Jun 2024 09:11:14 -0400 Subject: [PATCH] Added multiple package managers to all instructions (#793) --- src/routes/configuration/typescript.mdx | 52 ++++++++- .../guides/deployment-options/cloudflare.mdx | 41 ++++++- .../guides/deployment-options/firebase.mdx | 14 ++- .../guides/deployment-options/netlify.mdx | 14 ++- .../guides/deployment-options/railway.mdx | 14 ++- .../guides/deployment-options/vercel.mdx | 14 ++- src/routes/guides/routing-and-navigation.mdx | 11 +- src/routes/guides/styling-components/less.mdx | 8 +- .../guides/styling-components/macaron.mdx | 8 +- src/routes/guides/styling-components/sass.mdx | 8 +- .../guides/styling-components/tailwind.mdx | 31 +++++- src/routes/guides/styling-components/uno.mdx | 8 +- src/routes/quick-start.mdx | 102 ++++++++++++++++++ .../installation-and-setup.mdx | 12 +++ 14 files changed, 316 insertions(+), 21 deletions(-) diff --git a/src/routes/configuration/typescript.mdx b/src/routes/configuration/typescript.mdx index 5fb66f47a..f14474914 100644 --- a/src/routes/configuration/typescript.mdx +++ b/src/routes/configuration/typescript.mdx @@ -52,11 +52,59 @@ Transitioning from JavaScript to TypeScript in a Solid project offers the benefi 1. Install TypeScript into your project. + +
```bash frame="none" -npm install --save-dev typescript +npm i --save-dev typescript ``` +
-2. Run `npx tsc --init` to generate a `tsconfig.json` file. +
+```bash frame="none" +yarn add --dev typescript +``` +
+ +
+```bash frame="none" +pnpm add --save-dev typescript +``` +
+ +
+```bash frame="none" +bun add --save-dev typescript +``` +
+ + +2. Run the following command to generate a `tsconfig.json` file. + + +
+```bash frame="none" +npx tsc --init +``` +
+ +
+```bash frame="none" +yarn dlx tsc --init +``` +
+ +
+```bash frame="none" +pnpm dlx tsc --init +``` +
+ +
+```bash frame="none" +bunx tsc --init +``` +
+ 3. Update the contents of the `tsconfig.json` to match Solid's configuration: diff --git a/src/routes/guides/deployment-options/cloudflare.mdx b/src/routes/guides/deployment-options/cloudflare.mdx index 3fdb6af1b..5a1474b03 100644 --- a/src/routes/guides/deployment-options/cloudflare.mdx +++ b/src/routes/guides/deployment-options/cloudflare.mdx @@ -65,11 +65,21 @@ npm i -g wrangler ``` -
```bash frame="none" yarn global add wrangler ```
+
+```bash frame="none" +yarn global add wrangler +``` +
```bash frame="none" -pnpm i -g wrangler +pnpm add -g wrangler +``` +
+ +
+```bash frame="none" +bun add -g wrangler ```
@@ -82,10 +92,35 @@ wrangler login 3. Execute the following commands to build your project and deploy it using Wrangler: + +
```bash frame="none" npm run build -npx wrangler pages publish dist +wrangler pages publish dist +``` +
+ +
+```bash frame="none" +yarn build +wrangler pages publish dist ``` +
+ +
+```bash frame="none" +pnpm build +wrangler pages publish dist +``` +
+ +
+```bash frame="none" +bun build +wrangler pages publish dist +``` +
+ After running these commands, your project should be live. While the terminal may provide a link, it's more reliable to check your Cloudflare Pages dashboard for the deployed URL, which usually follows the format `project-name.pages.dev`. diff --git a/src/routes/guides/deployment-options/firebase.mdx b/src/routes/guides/deployment-options/firebase.mdx index 95b3cc7f4..d699fbaf8 100644 --- a/src/routes/guides/deployment-options/firebase.mdx +++ b/src/routes/guides/deployment-options/firebase.mdx @@ -23,11 +23,21 @@ npm i -g firebase-tools ``` -
``` bash yarn global add firebase-tools ```
+
+``` bash frame="none" +yarn global add firebase-tools +``` +
```bash frame="none" -pnpm i -g firebase-tools +pnpm add -g firebase-tools +``` +
+ +
+```bash frame="none" +bun add -g firebase-tools ```
diff --git a/src/routes/guides/deployment-options/netlify.mdx b/src/routes/guides/deployment-options/netlify.mdx index 0250145f2..68f1f7bdf 100644 --- a/src/routes/guides/deployment-options/netlify.mdx +++ b/src/routes/guides/deployment-options/netlify.mdx @@ -47,11 +47,21 @@ npm i -g netlify-cli ``` -
```bash frame="none" yarn global add netlify-cli ```
+
+```bash frame="none" +yarn global add netlify-cli +``` +
```bash frame="none" -pnpm i -g netlify-cli +pnpm add -g netlify-cli +``` +
+ +
+```bash frame="none" +bun add -g netlify-cli ```
diff --git a/src/routes/guides/deployment-options/railway.mdx b/src/routes/guides/deployment-options/railway.mdx index 8fba5234a..dabb8e2d0 100644 --- a/src/routes/guides/deployment-options/railway.mdx +++ b/src/routes/guides/deployment-options/railway.mdx @@ -78,11 +78,21 @@ npm i -g @railway/cli ``` -
```bash frame="none" yarn global add @railway/cli ```
+
+```bash frame="none" +yarn global add @railway/cli +``` +
```bash frame="none" -pnpm i -g @railway/cli +pnpm add -g @railway/cli +``` +
+ +
+```bash frame="none" +bun add -g @railway/cli ```
diff --git a/src/routes/guides/deployment-options/vercel.mdx b/src/routes/guides/deployment-options/vercel.mdx index 985af113f..7e7beb776 100644 --- a/src/routes/guides/deployment-options/vercel.mdx +++ b/src/routes/guides/deployment-options/vercel.mdx @@ -58,11 +58,21 @@ npm i -g vercel ``` -
```bash frame="none" yarn global add vercel ```
+
+```bash frame="none" +yarn global add vercel +``` +
```bash frame="none" -pnpm i -g vercel +pnpm add -g vercel +``` +
+ +
+```bash frame="none" +bun add -g vercel ```
diff --git a/src/routes/guides/routing-and-navigation.mdx b/src/routes/guides/routing-and-navigation.mdx index d82146a2c..74e39f9bc 100644 --- a/src/routes/guides/routing-and-navigation.mdx +++ b/src/routes/guides/routing-and-navigation.mdx @@ -22,12 +22,19 @@ npm install @solidjs/router
```bash frame="none" - yarn add @solidjs/router +yarn add @solidjs/router ```
+
```bash frame="none" -pnpm i @solidjs/router +pnpm add @solidjs/router +``` +
+ +
+```bash frame="none" +bun add @solidjs/router ```
diff --git a/src/routes/guides/styling-components/less.mdx b/src/routes/guides/styling-components/less.mdx index 17ff97f22..ba92f217c 100644 --- a/src/routes/guides/styling-components/less.mdx +++ b/src/routes/guides/styling-components/less.mdx @@ -26,7 +26,13 @@ yarn add --dev less
```bash frame="none" -pnpm i --dev less +pnpm add --dev less +``` +
+ +
+```bash frame="none" +bun add --dev less ```
diff --git a/src/routes/guides/styling-components/macaron.mdx b/src/routes/guides/styling-components/macaron.mdx index 59fdb75b9..029fd66f9 100644 --- a/src/routes/guides/styling-components/macaron.mdx +++ b/src/routes/guides/styling-components/macaron.mdx @@ -25,7 +25,13 @@ yarn add @macaron-css/core @macaron-css/solid
```bash frame="none" -pnpm i @macaron-css/core @macaron-css/solid +pnpm add @macaron-css/core @macaron-css/solid +``` +
+ +
+```bash frame="none" +bun add @macaron-css/core @macaron-css/solid ```
diff --git a/src/routes/guides/styling-components/sass.mdx b/src/routes/guides/styling-components/sass.mdx index 00fb415cc..8dbb5707c 100644 --- a/src/routes/guides/styling-components/sass.mdx +++ b/src/routes/guides/styling-components/sass.mdx @@ -26,7 +26,13 @@ yarn add --dev sass
```bash frame="none" -pnpm i --dev sass +pnpm add --dev sass +``` +
+ +
+```bash frame="none" +bun add --dev sass ```
diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx index ae6bbbff0..e6bb6b849 100644 --- a/src/routes/guides/styling-components/tailwind.mdx +++ b/src/routes/guides/styling-components/tailwind.mdx @@ -25,17 +25,44 @@ yarn add --dev tailwindcss postcss autoprefixer
```bash frame="none" -pnpm i --save-dev tailwindcss postcss autoprefixer +pnpm add --save-dev tailwindcss postcss autoprefixer +``` +
+ +
+```bash frame="none" +bun add --save-dev tailwindcss postcss autoprefixer ```
2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`. + +
```bash frame="none" - npx tailwindcss init -p ``` +
+ +
+```bash frame="none" +yarn dlx tailwindcss init -p +``` +
+ +
+```bash frame="none" +pnpm dlx tailwindcss init -p +``` +
+ +
+```bash frame="none" +bunx tailwindcss init -p +``` +
+ 3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory: diff --git a/src/routes/guides/styling-components/uno.mdx b/src/routes/guides/styling-components/uno.mdx index 1a9deb814..35e4722f3 100644 --- a/src/routes/guides/styling-components/uno.mdx +++ b/src/routes/guides/styling-components/uno.mdx @@ -24,7 +24,13 @@ yarn add --dev unocss
```bash frame="none" -pnpm i --save-dev unocss +pnpm add --save-dev unocss +``` +
+ +
+```bash frame="none" +bun add --save-dev unocss ```
diff --git a/src/routes/quick-start.mdx b/src/routes/quick-start.mdx index 22e258a2a..512b24c96 100644 --- a/src/routes/quick-start.mdx +++ b/src/routes/quick-start.mdx @@ -24,9 +24,32 @@ To get an application running, follow the steps below based on the language you 1. Run the following command in your terminal to get the JavaScript starter template: + +
```bash frame="none" npx degit solidjs/templates/js my-app ``` +
+ +
+```bash frame="none" +yarn dlx degit solidjs/templates/js my-app +``` +
+ +
+```bash frame="none" +pnpm dlx degit solidjs/templates/js my-app +``` +
+ +
+```bash frame="none" +bunx degit solidjs/templates/js my-app +``` +
+ + 2. Navigate to your application's directory: @@ -54,13 +77,41 @@ yarn install pnpm install ``` + +
+```bash frame="none" +bun install +``` +
4. Run the application: + +
```bash frame="none" npm run dev ``` +
+ +
+```bash frame="none" +yarn dev +``` +
+ +
+```bash frame="none" +pnpm dev +``` +
+ +
+```bash frame="none" +bun dev +``` +
+ This will start the development server. Now, you can open your browser and navigate to `localhost:3000` to see your application running. @@ -69,9 +120,31 @@ Now, you can open your browser and navigate to `localhost:3000` to see your appl 1. To use a TypeScript template, run the following command in your terminal: + +
```bash frame="none" npx degit solidjs/templates/ts my-app ``` +
+ +
+```bash frame="none" +yarn dlx degit solidjs/templates/ts my-app +``` +
+ +
+```bash frame="none" +pnpm dlx degit solidjs/templates/ts my-app +``` +
+ +
+```bash frame="none" +bunx degit solidjs/templates/ts my-app +``` +
+ 2. Navigate to your application's directory: @@ -99,13 +172,42 @@ yarn install pnpm install ``` + +
+```bash frame="none" +bun install +``` +
4. Run the application: + +
```bash frame="none" npm run dev ``` +
+ +
+```bash frame="none" +yarn dev +``` +
+ +
+```bash frame="none" +pnpm dev +``` +
+ +
+```bash frame="none" +bun dev +``` +
+ + This will start the development server. Now, you can open your browser and navigate to `localhost:3000` to see your application running. diff --git a/src/routes/solid-router/getting-started/installation-and-setup.mdx b/src/routes/solid-router/getting-started/installation-and-setup.mdx index 745f430b8..f180814d5 100644 --- a/src/routes/solid-router/getting-started/installation-and-setup.mdx +++ b/src/routes/solid-router/getting-started/installation-and-setup.mdx @@ -20,11 +20,23 @@ npm i @solidjs/router ``` +
+```bash frame="none" +yarn add @solidjs/router +``` +
+
```bash frame="none" pnpm add @solidjs/router ```
+ +
+```bash frame="none" +bun add @solidjs/router +``` +
## Configure the routes