refactor(console): add aggregated npm installation component (#6159)

logto-io · Jul 2, 2024 · afd2d22 · afd2d22
1 parent 9e532f6
commit afd2d22
Show file tree

Hide file tree

Showing 24 changed files with 85 additions and 251 deletions.
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -140,8 +140,7 @@
   },
   "alias": {
     "@/*": "./src/$1",
-    "@cloud/*": "./src/cloud/$1",
-    "@mdx/components/*": "./src/mdx-components/$1"
+    "@cloud/*": "./src/cloud/$1"
   },
   "stylelint": {
     "extends": "@silverhand/eslint-config-react/.stylelintrc"

diff --git a/packages/console/src/assets/docs/guides/api-express/README.mdx b/packages/console/src/assets/docs/guides/api-express/README.mdx
@@ -1,5 +1,5 @@
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';

diff --git a/packages/console/src/assets/docs/guides/api-spring-boot/README.mdx b/packages/console/src/assets/docs/guides/api-spring-boot/README.mdx
@@ -1,5 +1,5 @@
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';

diff --git a/packages/console/src/assets/docs/guides/m2m-general/README.mdx b/packages/console/src/assets/docs/guides/m2m-general/README.mdx
@@ -1,5 +1,5 @@
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';

diff --git a/packages/console/src/assets/docs/guides/native-capacitor/README.mdx b/packages/console/src/assets/docs/guides/native-capacitor/README.mdx
@@ -1,6 +1,7 @@
 import UriInputField from '@/mdx-components/UriInputField';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 
 import capaticorIos from './assets/capacitor-ios.webp';
 import logtoSignInPage from './assets/logto-sign-in-page.webp';
@@ -18,12 +19,9 @@ To get started, you need to create a Capacitor project. You can follow the [offi
 
 This tutorial is framework-agnostic, so you can use any UI framework you prefer and update the code accordingly.
 
-```bash
-# or yarn, pnpm
-npm install @logto/capacitor
-# Install peer dependencies
-npm install @capacitor/browser @capacitor/app @capacitor/preferences
-```
+First, install Logto Capacitor SDK and its peer dependencies:
+
+<NpmLikeInstallation packageName="@logto/capacitor @capacitor/browser @capacitor/app @capacitor/preferences" />
 
 </Step>
 

diff --git a/packages/console/src/assets/docs/guides/native-expo/README.mdx b/packages/console/src/assets/docs/guides/native-expo/README.mdx
@@ -1,6 +1,5 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
@@ -14,34 +13,7 @@ import RedirectUrisNative, { defaultRedirectUri } from '../../fragments/_redirec
   subtitle="Install Logto SDK and peer dependencies"
 >
 
-<Tabs>
-
-  <TabItem value="npm" label="npm">
-
-```bash
-npm i @logto/rn
-npm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage
-```
-
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-
-```bash
-yarn add @logto/rn
-yarn add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage
-```
-
-  </TabItem>
-  <TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/rn
-pnpm add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage
-```
-
-  </TabItem>
-
-</Tabs>
+<NpmLikeInstallation packageName="@logto/rn expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage" />
 
 The `@logto/rn` package is the SDK for Logto. The remaining packages are its peer dependencies. They couldn't be listed as direct dependencies because the Expo CLI requires that all dependencies for native modules be installed directly within the root project's `package.json`.
 

diff --git a/packages/console/src/assets/docs/guides/native-flutter/README.mdx b/packages/console/src/assets/docs/guides/native-flutter/README.mdx
@@ -1,8 +1,8 @@
 import UriInputField from '@/mdx-components/UriInputField';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Checkpoint from '../../fragments/_checkpoint.md';
 import RedirectUrisNative, { defaultRedirectUri } from '../../fragments/_redirect-uris-native.mdx';

diff --git a/packages/console/src/assets/docs/guides/native-ios-swift/README.mdx b/packages/console/src/assets/docs/guides/native-ios-swift/README.mdx
@@ -1,6 +1,6 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';

diff --git a/packages/console/src/assets/docs/guides/spa-angular/README.mdx b/packages/console/src/assets/docs/guides/spa-angular/README.mdx
@@ -1,9 +1,8 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 
 import Checkpoint from '../../fragments/_checkpoint.md';
 import RedirectUrisWeb, {defaultRedirectUri, defaultPostSignOutUri} from '../../fragments/_redirect-uris-web.mdx';
@@ -14,29 +13,9 @@ import RedirectUrisWeb, {defaultRedirectUri, defaultPostSignOutUri} from '../../
   title="Installation"
   subtitle="Install Logto JS core SDK and `angular-auth-oidc-client`"
 >
-<Tabs>
-<TabItem value="npm" label="npm">
 
-```bash
-npm i @logto/js angular-auth-oidc-client
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/js angular-auth-oidc-client
-```
-
-</TabItem>
-<TabItem value="yarn" label="yarn">
-
-```bash
-yarn add @logto/js angular-auth-oidc-client
-```
+<NpmLikeInstallation packageName="@logto/js angular-auth-oidc-client" />
 
-</TabItem>
-</Tabs>
 </Step>
 
 <Step title="Configure redirect URIs">

diff --git a/packages/console/src/assets/docs/guides/spa-react/README.mdx b/packages/console/src/assets/docs/guides/spa-react/README.mdx
@@ -1,6 +1,4 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
@@ -14,29 +12,9 @@ import RedirectUrisWeb, { defaultRedirectUri, defaultPostSignOutUri } from '../.
   title="Installation"
   subtitle="Install Logto SDK for your project"
 >
-<Tabs>
-<TabItem value="npm" label="npm">
 
-```bash
-npm i @logto/react
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/react
-```
-
-</TabItem>
-<TabItem value="yarn" label="yarn">
-
-```bash
-yarn add @logto/react
-```
+<NpmLikeInstallation packageName="@logto/react" />
 
-</TabItem>
-</Tabs>
 </Step>
 
 <Step title="Init Logto provider">

diff --git a/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx b/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx
@@ -1,6 +1,6 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
@@ -39,7 +39,6 @@ yarn add @logto/browser
 <TabItem value="cdn" label="CDN">
 
 ```html
-<!-- Special thanks to jsdelivr -->
 <script type="module">
   import LogtoClient from 'https://cdn.jsdelivr.net/npm/@logto/browser@latest/+esm';
 </script>

diff --git a/packages/console/src/assets/docs/guides/spa-vue/README.mdx b/packages/console/src/assets/docs/guides/spa-vue/README.mdx
@@ -1,9 +1,8 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 
 import Checkpoint from '../../fragments/_checkpoint.md';
 import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
@@ -15,30 +14,9 @@ import { defaultRedirectUri, defaultPostSignOutUri } from '../../fragments/_redi
   title="Installation"
   subtitle="Install Logto SDK for your project"
 >
-<Tabs>
-<TabItem value="npm" label="npm">
 
-```bash
-npm i @logto/vue
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/vue
-```
-
-</TabItem>
-<TabItem value="yarn" label="yarn">
-
-```bash
-yarn add @logto/vue
-```
-
-</TabItem>
+<NpmLikeInstallation packageName="@logto/vue" />
 
-</Tabs>
 </Step>
 
 <Step

diff --git a/packages/console/src/assets/docs/guides/spa-webflow/README.mdx b/packages/console/src/assets/docs/guides/spa-webflow/README.mdx
@@ -1,6 +1,6 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
+import TabItem from '@/mdx-components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';

diff --git a/packages/console/src/assets/docs/guides/web-express/README.mdx b/packages/console/src/assets/docs/guides/web-express/README.mdx
@@ -1,10 +1,10 @@
 import UriInputField from '@/mdx-components/UriInputField';
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
 import InlineNotification from '@/ds-components/InlineNotification';
 import { generateStandardSecret } from '@logto/shared/universal';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
+
 import Checkpoint from '../../fragments/_checkpoint.md';
 import RedirectUris from '../../fragments/_redirect-uris-web.mdx';
 
@@ -15,29 +15,8 @@ import RedirectUris from '../../fragments/_redirect-uris-web.mdx';
   subtitle="Install Logto SDK and required dependencies"
 >
 
-<Tabs>
-<TabItem value="npm" label="npm">
-
-```bash
-npm i @logto/express cookie-parser express-session
-```
-
-</TabItem>
-<TabItem value="yarn" label="Yarn">
-
-```bash
-yarn add @logto/express cookie-parser express-session
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
+<NpmLikeInstallation packageName="@logto/express cookie-parser express-session" />
 
-```bash
-pnpm add @logto/express cookie-parser express-session
-```
-
-</TabItem>
-</Tabs>
 </Step>
 
 <Step
@@ -125,4 +104,3 @@ app.get('/', withLogto(config), (req, res) => {
 </Step>
 
 </Steps>
-
diff --git a/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx b/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx
@@ -1,6 +1,5 @@
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
 import { generateStandardSecret } from '@logto/shared/universal';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
@@ -13,29 +12,8 @@ import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
   subtitle="Install Logto SDK"
 >
 
-<Tabs>
-<TabItem value="npm" label="npm">
+<NpmLikeInstallation packageName="@logto/next" />
 
-```bash
-npm i @logto/next
-```
-
-</TabItem>
-<TabItem value="yarn" label="Yarn">
-
-```bash
-yarn add @logto/next
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/next
-```
-
-</TabItem>
-</Tabs>
 </Step>
 
 <Step

diff --git a/packages/console/src/assets/docs/guides/web-next/README.mdx b/packages/console/src/assets/docs/guides/web-next/README.mdx
@@ -1,5 +1,4 @@
-import Tabs from '@mdx/components/Tabs';
-import TabItem from '@mdx/components/TabItem';
+import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';
 import { generateStandardSecret } from '@logto/shared/universal';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
@@ -13,29 +12,8 @@ import RedirectUrisWeb, { defaultBaseUrl } from '../../fragments/_redirect-uris-
   subtitle="Install Logto SDK"
 >
 
-<Tabs>
-<TabItem value="npm" label="npm">
+<NpmLikeInstallation packageName="@logto/next" />
 
-```bash
-npm i @logto/next
-```
-
-</TabItem>
-<TabItem value="yarn" label="Yarn">
-
-```bash
-yarn add @logto/next
-```
-
-</TabItem>
-<TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/next
-```
-
-</TabItem>
-</Tabs>
 </Step>
 
 <Step