chore(website): Install npm2yarn plugin

tommy351 · Dec 7, 2024 · 8a0c345 · 8a0c345
1 parent f1e46f8
commit 8a0c345
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 68 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/blog/2024-03-28-kosko-4.1.md b/website/blog/2024-03-28-kosko-4.1.md
@@ -87,8 +87,8 @@ Support for Node.js 14 was dropped. The minimum supported Node.js version is now
 
 `kosko init` command was removed from the CLI because it's only used at the first time. Now, you can use the new [create-kosko](/docs/cli/create-kosko) package to create a new project.
 
-```shell
-npm create kosko@latest example
+```shell npm2yarn
+npm init kosko@latest example
 ```
 
 ### `@kosko/generate`

diff --git a/website/docs/cli/create-kosko.md b/website/docs/cli/create-kosko.md
@@ -10,10 +10,8 @@ create-kosko [path]
 
 It's also possible to execute `create-kosko` via a package manager.
 
-```shell
-npm create kosko@latest [path]
-yarn create kosko [path]
-pnpm create kosko [path]
+```shell npm2yarn
+npm init kosko@latest [path]
 ```
 
 ## Positionals

diff --git a/website/docs/components/loading-helm-chart.mdx b/website/docs/components/loading-helm-chart.mdx
@@ -3,7 +3,6 @@ title: Loading Helm Chart
 ---
 
 import DocCardList from "@theme/DocCardList";
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 
 Kosko supports loading manifests from Helm charts. You have to [install the Helm CLI](https://helm.sh/docs/intro/install/) before using this package.
 
@@ -13,7 +12,9 @@ Under the hood, `@kosko/helm` uses `@kosko/yaml` to load YAML, which means the `
 
 ## Install
 
-<NpmInstallCommand package="@kosko/helm @kosko/yaml" />
+```shell npm2yarn
+npm install @kosko/helm @kosko/yaml
+```
 
 ## Load from a Local Chart
 

diff --git a/website/docs/components/loading-kubernetes-yaml.mdx b/website/docs/components/loading-kubernetes-yaml.mdx
@@ -2,7 +2,6 @@
 title: Loading Kubernetes YAML
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 import DocCardList from "@theme/DocCardList";
 
 If you already have lots of existing Kubernetes YAML files, you don't have to rewrite all of them in JavaScript. Kosko provides two ways for you to load Kubernetes YAML files.
@@ -13,7 +12,9 @@ This is the easiest way to import your existing Kubernetes YAML files. It's reco
 
 ### Install
 
-<NpmInstallCommand package="@kosko/yaml" />
+```shell npm2yarn
+npm install @kosko/yaml
+```
 
 ### Load from a File
 

diff --git a/website/docs/components/loading-kustomize.mdx b/website/docs/components/loading-kustomize.mdx
@@ -3,7 +3,6 @@ title: Loading Kustomize
 ---
 
 import DocCardList from "@theme/DocCardList";
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 
 Kosko supports loading manifests from Kustomize files. You have to install either [`kustomize`](https://kubectl.docs.kubernetes.io/installation/kustomize/) or [`kubectl`](https://kubectl.docs.kubernetes.io/installation/kubectl/) CLI before using this package.
 
@@ -13,7 +12,9 @@ Under the hood, `@kosko/kustomize` uses `@kosko/yaml` to load YAML, which means
 
 ## Install
 
-<NpmInstallCommand package="@kosko/kustomize @kosko/yaml" />
+```shell npm2yarn
+npm install @kosko/kustomize @kosko/yaml
+```
 
 ## Load from a local directory
 

diff --git a/website/docs/getting-started.mdx b/website/docs/getting-started.mdx
@@ -3,7 +3,6 @@ title: Getting Started
 slug: /
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 import DocCardList from "@theme/DocCardList";
 
 Welcome to the Kosko documentation! Before we start, make sure your computer meets the following system requirements.
@@ -14,8 +13,8 @@ Welcome to the Kosko documentation! Before we start, make sure your computer mee
 
 It's recommended to setup a Kosko project with [`create-kosko`](./cli/create-kosko.md) command, which sets up basic folder structure and installs everything you need automatically.
 
-```shell
-npm create kosko@latest example
+```shell npm2yarn
+npm init kosko@latest example
 ```
 
 After installation complete, the command will generate following files in `example` folder.
@@ -38,31 +37,33 @@ After installation complete, the command will generate following files in `examp
 
 Install `kosko`, `@kosko/env` and `kubernetes-models`.
 
-<NpmInstallCommand package="kosko @kosko/env kubernetes-models" />
+```shell npm2yarn
+npm install kosko @kosko/env kubernetes-models
+```
 
 Create a new component with `@kosko/template-deployed-service` template.
 
-```shell
+```shell npm2yarn
 npx @kosko/template-deployed-service --name nginx --image nginx
 ```
 
 ## Generate YAML
 
 Run [`kosko generate`](./cli/generate.mdx) to print Kubernetes manifests in the console.
 
-```shell
+```shell npm2yarn
 npx kosko generate
 ```
 
 Pipe the output to kubectl to apply to a cluster.
 
-```shell
+```shell npm2yarn
 npx kosko generate | kubectl apply -f -
 ```
 
 If you don't want to print manifests to console, run [`kosko validate`](./cli/validate.md).
 
-```shell
+```shell npm2yarn
 npx kosko validate
 ```
 

diff --git a/website/docs/plugins/lint/index.mdx b/website/docs/plugins/lint/index.mdx
@@ -4,13 +4,14 @@ available_since:
   kosko: 4.1.0
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 import RecommendedBadge from "@site/src/modules/doc/components/RecommendedBadge";
 import AllBadge from "@site/src/modules/doc/components/AllBadge";
 
 ## Install
 
-<NpmInstallCommand package="@kosko/plugin-lint" />
+```shell npm2yarn
+npm install @kosko/plugin-lint
+```
 
 ## Usage
 

diff --git a/website/docs/plugins/set-metadata.mdx b/website/docs/plugins/set-metadata.mdx
@@ -4,13 +4,13 @@ available_since:
   kosko: 4.0.0
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
-
 Set metadata for Kubernetes manifests.
 
 ## Install
 
-<NpmInstallCommand package="@kosko/plugin-set-metadata" />
+```shell npm2yarn
+npm install @kosko/plugin-set-metadata
+```
 
 ## Usage
 

diff --git a/website/docs/programmatic-usage.mdx b/website/docs/programmatic-usage.mdx
@@ -2,7 +2,6 @@
 title: Programmatic Usage
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 import DocCardList from "@theme/DocCardList";
 
 Kosko provides a programmatic API. You can generate manifests directly from Node.js.
@@ -16,7 +15,9 @@ Kosko provides a programmatic API. You can generate manifests directly from Node
 
 ## Install
 
-<NpmInstallCommand package="@kosko/env @kosko/generate" />
+```shell npm2yarn
+npm install @kosko/env @kosko/generate
+```
 
 ## Example
 

diff --git a/website/docs/recipes/default-namespace.mdx b/website/docs/recipes/default-namespace.mdx
@@ -5,13 +5,14 @@ available_since:
 ---
 
 import DocCardList from "@theme/DocCardList";
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 
 You can use `@kosko/plugin-set-metadata` to set a default namespace for all Kubernetes manifests.
 
 ## Install
 
-<NpmInstallCommand package="@kosko/plugin-set-metadata" />
+```shell npm2yarn
+npm install @kosko/plugin-set-metadata
+```
 
 ## Configuration
 

diff --git a/website/docs/typescript.mdx b/website/docs/typescript.mdx
@@ -2,7 +2,6 @@
 title: TypeScript
 ---
 
-import NpmInstallCommand from "@site/src/modules/doc/components/NpmInstallCommand";
 import DocCardList from "@theme/DocCardList";
 
 Kosko and [kubernetes-models](https://github.com/tommy351/kubernetes-models-ts) are written in TypeScript, so you don't have to install any additional type declaration files.
@@ -17,7 +16,9 @@ Kosko and [kubernetes-models](https://github.com/tommy351/kubernetes-models-ts)
 
 Install `typescript`, `ts-node` and `@tsconfig/recommended`. `@tsconfig/recommended` is optional, you can change it to any tsconfig you prefer.
 
-<NpmInstallCommand dev package="typescript ts-node @tsconfig/recommended" />
+```shell npm2yarn
+npm install typescript ts-node @tsconfig/recommended --save-dev
+```
 
 ## Configuration
 

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -5,13 +5,15 @@ import ts2js from "./remark-plugins/ts2js/index.js";
 import { themes as prismThemes } from "prism-react-renderer";
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
+import npm2yarn from "@docusaurus/remark-plugin-npm2yarn";
 
 const workspaceRoot = fileURLToPath(new URL("..", import.meta.url));
 const organizationName = "tommy351";
 const projectName = "kosko";
 const githubUrl = `https://github.com/${organizationName}/${projectName}`;
 const commitRef =
   process.env.CF_PAGES_COMMIT_SHA || process.env.CF_PAGES_BRANCH || "master";
+const remarkPlugins = [ts2js, [npm2yarn, { sync: true }]];
 
 export default {
   title: "Kosko",
@@ -77,15 +79,16 @@ export default {
         docs: {
           sidebarPath: "./sidebars.js",
           editUrl: `${githubUrl}/edit/master/website/`,
-          remarkPlugins: [ts2js],
+          remarkPlugins,
           docItemComponent: "@site/src/modules/doc/components/DocItem"
         },
         pages: {
-          remarkPlugins: [ts2js]
+          remarkPlugins
         },
         blog: {
           showReadingTime: true,
-          editUrl: `${githubUrl}/edit/master/website/blog/`
+          editUrl: `${githubUrl}/edit/master/website/blog/`,
+          remarkPlugins
         },
         theme: {
           customCss: "./src/css/custom.scss"

diff --git a/website/package.json b/website/package.json
@@ -37,6 +37,7 @@
     "@docusaurus/plugin-content-docs": "3.6.3",
     "@docusaurus/plugin-ideal-image": "3.6.3",
     "@docusaurus/preset-classic": "3.6.3",
+    "@docusaurus/remark-plugin-npm2yarn": "3.6.3",
     "@docusaurus/theme-classic": "3.6.3",
     "@docusaurus/theme-common": "3.6.3",
     "@mdx-js/react": "^3.0.1",

diff --git a/website/src/modules/doc/components/NpmInstallCommand/index.tsx b/website/src/modules/doc/components/NpmInstallCommand/index.tsx