Migrate to SolidBase tabs and package helper (#1135)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: amirhhashemi

app.config.ts

@@ -81,6 +81,55 @@ export default defineConfig(
 				toc: {
 					minDepth: 2,
 				},
+				packageManagers: {
+					presets: {
+						npm: {
+							install: "npm i :content",
+							"install-dev": "npm i :content -D",
+							"install-global": "npm i :content -g",
+							"install-local": "npm i",
+							run: "npm run :content",
+							exec: "npx :content",
+							create: "npm init :content",
+						},
+						pnpm: {
+							install: "pnpm i :content",
+							"install-dev": "pnpm i :content -D",
+							"install-global": "pnpm i :content -g",
+							"install-local": "pnpm i",
+							run: "pnpm :content",
+							exec: "pnpx :content",
+							create: "pnpm create :content",
+						},
+						yarn: {
+							install: "yarn add :content",
+							"install-dev": "yarn add :content -D",
+							"install-global": "yarn add :content -g",
+							"install-local": "yarn i",
+							run: "yarn :content",
+							exec: "yarn dlx :content",
+							create: "yarn create :content",
+						},
+						bun: {
+							install: "bun i :content",
+							"install-dev": "bun i :content -d",
+							"install-global": "bun i :content -g",
+							"install-local": "bun i",
+							run: "bun run :content",
+							exec: "bunx :content",
+							create: "bun create :content",
+						},
+						deno: {
+							install: "deno add npm::content",
+							"install-dev": "deno add npm::content -D",
+							"install-global": "deno add npm::content -g",
+							"install-local": "deno i",
+							run: "deno run :content",
+							exec: "dpx :content",
+							create: "deno run -A npm::content",
+						},
+					},
+				},
 			},
 		}
 	)

pnpm-lock.yaml

@@ -21,16 +21,13 @@ This offers a way to access state across an application without passing props th
 Context is created using the [`createContext`](/reference/component-apis/create-context) function.
 This function has a `Provider` property that wraps the component tree you want to provide context to.
 
-<TabsCodeBlocks>
-<div id="/context/create.js">
-```jsx
+```jsx tab title="/context/create.js"
 import { createContext } from "solid-js";
 
 const MyContext = createContext();
 ```
-</div>
-<div id="/context/component.jsx">
-```jsx
+
+```jsx tab title="/context/component.jsx"
 import { MyContext } from "./create";
 
 export function Provider (props) {
@@ -41,8 +38,6 @@ export function Provider (props) {
 	)
 };
 ```
-</div>
-</TabsCodeBlocks>
 
 ## Providing context to children
 
@@ -161,9 +156,7 @@ export function CounterProvider(props) {
 [Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context.
 You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
 
-<TabsCodeBlocks>
-<div id="App.jsx">
-```jsx
+```jsx tab title="App.jsx"
 import { CounterProvider } from "./Context";
 import { Child } from "./Child";
 
@@ -176,9 +169,8 @@ export function App() {
 	)
 }
 ```
-</div>
-<div id="Context.jsx">
-```jsx
+
+```jsx tab title="Context.jsx"
 import { createSignal, useContext } from "solid-js";
 
 export function CounterProvider(props) {
@@ -204,9 +196,9 @@ export function CounterProvider(props) {
 
 export function useCounter() { return useContext(CounterContext); }
 ```
-</div>
-<div id="Child.jsx">
-```tsx title="/context/counter-component.tsx"
+
+```tsx tab title="Child.jsx"
+// /context/counter-component.tsx
 import { useCounter } from "./Context";
 
 export function Child(props) {
@@ -221,8 +213,6 @@ export function Child(props) {
 	);
 };
 ```
-</div>
-</TabsCodeBlocks>
 
 This offers a way to manage state across your components without having to pass props through intermediate elements.
 
@@ -262,12 +252,12 @@ Read more about default values in the [`createContext`](/reference/component-api
 :::
 
 Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that
-the value returned might be `undefined` (as mentioned above). 
-This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context. 
+the value returned might be `undefined` (as mentioned above).
+This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context.
 Additionally, if you use `useContext` and it returns `undefined` (which is often, but not always, the result of a bug), the error message thrown at runtime can be confusing.
 
-The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`. 
-This also serves to narrow the type returned, so TS doesn't complain. 
+The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`.
+This also serves to narrow the type returned, so TS doesn't complain.
 As an example:
 
 ```ts title="/context/counter-component.tsx"
@@ -279,4 +269,3 @@ function useCounterContext() {
 	return context
 }
 ```
-