From 7a3e2a3baf0f033c35873829490b3e35cf6f11e0 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 27 Jun 2022 21:53:44 +0800
Subject: [PATCH] refactor(console): pre-fill app id and endpoint in guides

---
 .../docs/tutorial/integrate-sdk/android.mdx     | 14 ++++++++------
 .../tutorial/integrate-sdk/android_zh-cn.mdx    | 14 ++++++++------
 .../assets/docs/tutorial/integrate-sdk/ios.mdx  | 14 ++++++++------
 .../docs/tutorial/integrate-sdk/react.mdx       | 14 ++++++++------
 .../docs/tutorial/integrate-sdk/react_zh-cn.mdx | 17 +++++++++--------
 .../assets/docs/tutorial/integrate-sdk/vue.mdx  | 14 ++++++++------
 .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx   | 14 ++++++++------
 .../Applications/components/Guide/index.tsx     |  1 +
 8 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
index f379021e7..1f95d4f66 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@@ -82,22 +82,24 @@ e.g. `io.logto.android://io.logto.sample/callback`
 
 <TabItem value="kotlin" label="Kotlin">
 
-```kotlin
-import io.logto.sdk.android.LogtoClient
+<pre>
+<code className="language-kotlin">
+{`import io.logto.sdk.android.LogtoClient
 import io.logto.sdk.android.type.LogtoConfig
 
 class MainActivity : AppCompatActivity() {
     val logtoConfig = LogtoConfig(
-        endpoint = "<your-logto-endpoint>",
-        appId = "<your-app-id>",
+        endpoint = "${props.endpoint}",
+        appId = "${props.appId}",
         scopes = null,
         resources = null,
         usingPersistStorage = true,
     )
 
     val logtoClient = LogtoClient(logtoConfig, application)
-}
-```
+}`}
+</code>
+</pre>
 
 </TabItem>
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
index f86241327..4cc2523a0 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
@@ -82,22 +82,24 @@ $(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
 
 <TabItem value="kotlin" label="Kotlin">
 
-```kotlin
-import io.logto.sdk.android.LogtoClient
+<pre>
+<code className="language-kotlin">
+{`import io.logto.sdk.android.LogtoClient
 import io.logto.sdk.android.type.LogtoConfig
 
 class MainActivity : AppCompatActivity() {
     val logtoConfig = LogtoConfig(
-        endpoint = "<your-logto-endpoint>",
-        appId = "<your-app-id>",
+        endpoint = "${props.endpoint}",
+        appId = "${props.appId}",
         scopes = null,
         resources = null,
         usingPersistStorage = true,
     )
 
     val logtoClient = LogtoClient(logtoConfig, application)
-}
-```
+}`}
+</code>
+</pre>
 
 </TabItem>
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
index bd6973e4a..e0d26d94f 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
@@ -39,15 +39,17 @@ We do not support **Carthage** and **CocoaPods** at the time due to some technic
   onButtonClick={() => props.onNext(2)}
 >
 
-```swift
-import Logto
+<pre>
+<code className="language-swift">
+{`import Logto
 
 let config = try? LogtoConfig(
-  endpoint: "<your-logto-endpoint>",
-  appId: "<your-application-id>"
+  endpoint: "${props.endpoint}",
+  appId: "${props.appId}",
 )
-let logtoClient = LogtoClient(useConfig: config)
-```
+let logtoClient = LogtoClient(useConfig: config)`}
+</code>
+</pre>
 
 By default, we store credentials like ID Token and Refresh Token in Keychain. Thus the user doesn't need to sign in again when he returns.
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
index 31377639e..612d8ee22 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@@ -60,16 +60,17 @@ pnpm build
 
 Add the following code to your main html file. You may need client ID and authorization domain.
 
-```tsx
-import { LogtoProvider, LogtoConfig } from '@logto/react';
+<pre>
+<code className="language-tsx">
+{`import { LogtoProvider, LogtoConfig } from '@logto/react';
 import React from 'react';
 
 //...
 
 const App = () => {
   const config: LogtoConfig = {
-    clientId: 'foo',
-    endpoint: 'https://your-endpoint-domain.com',
+    clientId: '${props.appId}',
+    endpoint: '${props.endpoint}',
   };
 
   return (
@@ -90,8 +91,9 @@ const App = () => {
       </LogtoProvider>
     </BrowserRouter>
   );
-};
-```
+};`}
+</code>
+</pre>
 
 </Step>
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
index df8bd9e11..5460ab177 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
@@ -58,19 +58,19 @@ pnpm build
   onButtonClick={() => props.onNext(2)}
 >
 
-在项目的 html 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
-Add the following code to your main html file. You may need client ID and authorization domain.
+在项目的 App.tsx 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
 
-```tsx
-import { LogtoProvider, LogtoConfig } from '@logto/react';
+<pre>
+<code className="language-tsx">
+{`import { LogtoProvider, LogtoConfig } from '@logto/react';
 import React from 'react';
 
 //...
 
 const App = () => {
   const config: LogtoConfig = {
-    clientId: 'foo',
-    endpoint: 'https://your-endpoint-domain.com'
+    clientId: '${props.appId}',
+    endpoint: '${props.endpoint}',
   };
 
   return (
@@ -91,8 +91,9 @@ const App = () => {
       </LogtoProvider>
     </BrowserRouter>
   );
-};
-```
+};`}
+</code>
+</pre>
 
 </Step>
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
index f0826fd88..fb522074e 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
@@ -52,19 +52,21 @@ pnpm add @logto/vue
 
 `import` and use `createLogto` to install Logto plugin:
 
-```ts
-import { createLogto, LogtoConfig } from '@logto/vue';
+<pre>
+<code className="language-ts">
+{`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  appId: '<your-application-id>',
-  endpoint: '<your-logto-endpoint>'
+  appId: '${props.appId}',
+  endpoint: '${props.endpoint}',
 };
 
 const app = createApp(App);
 
 app.use(createLogto, config);
-app.mount("#app");
-```
+app.mount("#app");`}
+</code>
+</pre>
 
 </Step>
 <Step
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
index 8cc6cffbb..9e605d81c 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
@@ -52,19 +52,21 @@ pnpm add @logto/vue
 
 `import` 并使用 `createLogto` 以插件的形式安装 Logto:
 
-```ts
-import { createLogto, LogtoConfig } from '@logto/vue';
+<pre>
+<code className="language-ts">
+{`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  appId: '<your-application-id>',
-  endpoint: '<your-logto-endpoint>'
+  appId: '${props.appId}',
+  endpoint: '${props.endpoint}',
 };
 
 const app = createApp(App);
 
 app.use(createLogto, config);
-app.mount("#app");
-```
+app.mount("#app");`}
+</code>
+</pre>
 
 </Step>
 <Step
diff --git a/packages/console/src/pages/Applications/components/Guide/index.tsx b/packages/console/src/pages/Applications/components/Guide/index.tsx
index 316dc0dee..fd3b15bdb 100644
--- a/packages/console/src/pages/Applications/components/Guide/index.tsx
+++ b/packages/console/src/pages/Applications/components/Guide/index.tsx
@@ -70,6 +70,7 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
             {GuideComponent && (
               <GuideComponent
                 appId={appId}
+                endpoint={window.location.origin}
                 activeStepIndex={activeStepIndex}
                 isCompact={isCompact}
                 onNext={(nextIndex: number) => {