docs: reorg integrate SDK (#740)

* docs: reorg integrate SDK

* docs: update alias

* docs: fix link

packages/console/src/pages/Guide/index.tsx

@@ -28,11 +28,11 @@ import Step from './components/Step';
 import * as styles from './index.module.scss';
 
 const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
-  react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react/index.mdx')),
+  react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
   'react_zh-cn': lazy(
     async () =>
       import(
-        '@/assets/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react/index.mdx'
+        '@/assets/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react.mdx'
       )
   ),
 };

packages/docs/docs/tutorial/integrate-sdk/README.md

@@ -0,0 +1,16 @@
+# Integrate SDK
+
+We provide a bunch of SDKs to let you integrate Logto with frontend clients with ease. If you are using traditional web technology (i.e., server directly renders frontend), please check out our integration guide.
+
+If the list doesn't cover your desired platform/framework, please file a feature request or contribute a new SDK.
+
+## Web
+
+- Vanilla JS
+- [React](./react)
+- Vue
+
+## Native
+
+- iOS
+- [Android](./android)

packages/docs/docs/tutorial/integrate-sdk/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "Integrate SDK"
-}

packages/docs/docs/tutorial/integrate-sdk/android.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_label: Android
+---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

packages/docs/docs/tutorial/integrate-sdk/android/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Android",
-  "position": 1.1
-}

packages/docs/docs/tutorial/integrate-sdk/react.mdx

@@ -1,3 +1,9 @@
+---
+sidebar_label: React
+---
+
+// Wait for AC update
+// import Step from '@components/Step';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

packages/docs/docs/tutorial/integrate-sdk/react/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "React",
-  "position": 1.1
-}

packages/docs/docusaurus.config.js

@@ -3,6 +3,7 @@
 
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const path = require('path');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -107,6 +108,16 @@ const config = {
         additionalLanguages: ['swift', 'kotlin', 'groovy', 'java'],
       },
     }),
+  plugins: [
+    async function addAliasPlugin() {
+      return ({
+        name: 'add-alias-plugin',
+        configureWebpack: () => ({ resolve: { alias: {
+          '@components': path.resolve(__dirname, './src/components')
+        } } })
+      });
+    }
+  ]
 };
 
 module.exports = config;

packages/docs/src/components/Step/index.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode,
+  title: string;
+  subtitle?: string;
+};
+
+const Step = ({ children, title, subtitle }: Props) => {
+  return (
+    <>
+      <h2>{title}</h2>
+      {subtitle && <h3>{subtitle}</h3>}
+      {children}
+    </>
+  )
+}
+
+export default Step