added to docs

the-r3aper7 · Sep 18, 2023 · afa7f06 · afa7f06
1 parent cc565ad
commit afa7f06
Show file tree

Hide file tree

Showing 34 changed files with 1,054 additions and 27 deletions.
diff --git a/packages/docs/src/components/package-manager-tabs/index.tsx b/packages/docs/src/components/package-manager-tabs/index.tsx
@@ -5,6 +5,7 @@ import { YarnIcon } from './yarn';
 import { NpmIcon } from './npm';
 import { BunIcon } from './bun';
 import { GlobalStore } from '../../context';
+import { isBrowser } from '@builder.io/qwik/build';
 
 
 const packageManagersTabs = [
@@ -27,16 +28,16 @@ const packageManagersTabs = [
 ];
 
 export default component$(() => {
-  const toActive = useSignal<number>(0);
+  const activePkgTab = useSignal<number>(0);
   const globalStore = useContext(GlobalStore);
 
   useTask$(({ track }) => {
-    const trackedValue = track(() => toActive.value);
+    const trackedValue = track(() => activePkgTab.value);
     globalStore.pkgManagerIdx = trackedValue;
   })
 
   return (
-    <Tabs selectedIndex={globalStore.pkgManagerIdx} onSelectedIndexChange$={(currIdx) => { toActive.value = currIdx }}>
+    <Tabs selectedIndex={globalStore.pkgManagerIdx} onSelectedIndexChange$={(currIdx) => { activePkgTab.value = currIdx }}>
       <TabList class={`-mb-4 space-x-2 ${globalStore.theme === 'light' ? "text-black" : "text-white"} `}>
         {
           packageManagersTabs.map((el, idx) => {

diff --git a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx
@@ -93,7 +93,7 @@ yarn start
 ```shell
 pnpm start
 ```
-  </span>
+  </span> 
     <span q:slot="bun">
 ```shell
 bun start

diff --git a/packages/docs/src/routes/docs/(qwikcity)/project-structure/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/project-structure/index.mdx
@@ -6,6 +6,8 @@ contributors:
   - mhevery
 ---
 
+import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
+
 # Project Structure
 
 A typical Qwik project looks like this:
@@ -89,14 +91,54 @@ Qwik uses Vite to build the project. The `vite.config.ts` file contains the Vite
 Qwik has a utility command called `new` that allows developers to easily create new components and routes. 
 
 Let's say you wanted to create a new component called `Button`, you would run the command:
-```tsx
+
+<PackageManagerTabs>
+  <span q:slot="npm">
+```shell
+npm qwik new Button
+```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn qwik new Button
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
 pnpm qwik new Button
 ```
+  </span>
+  <span q:slot="bun">
+```shell
+bun qwik new Button
+```
+  </span>
+</PackageManagerTabs>
 
 Maybe you want to create a new route for the /contact page. To do that, you could use the command:
-```tsx
+
+<PackageManagerTabs>
+  <span q:slot="npm">
+```shell
+npm qwik new /contact
+```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn qwik new /contact
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
 pnpm qwik new /contact
 ```
+  </span>
+  <span q:slot="bun">
+```shell
+bun qwik new /contact
+```
+  </span>
+</PackageManagerTabs>
 
 The following commands are consistent with Qwik's directory file structure, allowing you to scaffold components more quickly.
 

diff --git a/packages/docs/src/routes/docs/deployments/aws-lambda/index.mdx b/packages/docs/src/routes/docs/deployments/aws-lambda/index.mdx
@@ -5,17 +5,37 @@ contributors:
   - WilliamEspegren
 ---
 
+import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
+
 # AWS Adapter
 
-Qwik City AWS Adapter allows you to connect Qwik City to [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/nodejs-handler.html?icmpid=docs_lambda_hel).
 
 ## Installation
 
 To integrate the `aws-lambda` adapter, use the `add` command:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run qwik add aws-lambda
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run qwik add aws-lambda
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run qwik add aws-lambda
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run qwik add aws-lambda
+```
+  </span>
+</PackageManagerTabs>
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
@@ -33,9 +53,28 @@ Additionally, within the `package.json`, the `build.server` and `serverless:prev
 
 To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run build
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run build
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run build
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run build
+```
+  </span>
+</PackageManagerTabs>
 
 ## Deploy to AWS
 

diff --git a/packages/docs/src/routes/docs/deployments/azure-swa/index.mdx b/packages/docs/src/routes/docs/deployments/azure-swa/index.mdx
@@ -8,6 +8,8 @@ contributors:
   - WilliamEspegren
 ---
 
+import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
+
 # Azure Static Web Apps Middleware
 
 Qwik City Azure Static Web Apps middleware allows you to connect Qwik City to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/).
@@ -16,9 +18,28 @@ Qwik City Azure Static Web Apps middleware allows you to connect Qwik City to [A
 
 To integrate the `azure-swa` adapter, use the `add` command:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run qwik add azure-swa
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run qwik add azure-swa
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run qwik add azure-swa
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run qwik add azure-swa
+```
+  </span>
+</PackageManagerTabs>
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
@@ -36,9 +57,28 @@ Additionally, within the `package.json`, the `build.server` and `deploy` scripts
 
 To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run build
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run build
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run build
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run build
+```
+  </span>
+</PackageManagerTabs>
 
 ## Deploy to Azure
 

diff --git a/packages/docs/src/routes/docs/deployments/cloudflare-pages/index.mdx b/packages/docs/src/routes/docs/deployments/cloudflare-pages/index.mdx
@@ -9,6 +9,8 @@ contributors:
   - mhevery
 ---
 
+import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
+
 # Cloudflare Pages Adapter
 
 Qwik City Cloudflare Pages adapter allows you to connect Qwik City to [Cloudflare Pages](https://pages.cloudflare.com/).
@@ -17,9 +19,28 @@ Qwik City Cloudflare Pages adapter allows you to connect Qwik City to [Cloudflar
 
 To integrate the `cloudflare-pages` adapter, use the `add` command:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run qwik add cloudflare-pages
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run qwik add cloudflare-pages
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run qwik add cloudflare-pages
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run qwik add cloudflare-pages
+```
+  </span>
+</PackageManagerTabs>
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
@@ -37,9 +58,28 @@ Additionally, within the `package.json`, the `build.server` and `deploy` scripts
 
 To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
 
+<PackageManagerTabs>
+  <span q:slot="npm">
 ```shell
 npm run build
 ```
+  </span>
+  <span q:slot="yarn">
+```shell
+yarn run build
+```
+  </span>
+  <span q:slot="pnpm">
+```shell
+pnpm run build
+```
+  </span>
+  <span q:slot="bun">
+```shell
+bun run build
+```
+  </span>
+</PackageManagerTabs>
 
 [Read the full guide here](https://github.com/BuilderIO/qwik/tree/main/starters/adapters/cloudflare-pages/README.md)