refactor(console): adjust sdk guide sorting order (#4427)

* refactor(console): adjust sdk guide sorting order

* docs(console): update rules about the sorting order of the sdk guides

packages/console/src/assets/docs/guides/README.md

@@ -60,8 +60,10 @@ This may be fixed by replacing Parcel with something else.
 
 The guides are ordered by the following rules in ascending order:
 
-1. The first segment of the directory name, which should be the target of the guide;
+1. The `order` property of all guides across all category groups
-2. The `order` property of the guide.
+2. The sorting order should exactly follow the order in UX design. E.g. Next.js being the 1st one, React being the 2nd
+3. The guides in featured group ("Popular and for you") should have `1.x` order value
+4. The guides that are not listed in featured group can have order value equal to or greater than 2
 
 You can configure the property by creating a `config.json` file in the guide directory. The file should be an object with the following structure:
 

packages/console/src/assets/docs/guides/generate-metadata.js

@@ -34,13 +34,7 @@ const data = await Promise.all(
     };
   })
 );
-const metadata = data.filter(Boolean).slice().sort((a, b) => {
+const metadata = data.filter(Boolean).slice().sort((a, b) => a.order - b.order);
-  if (a.name.split('-')[0] !== b.name.split('-')[0]) {
-    return a.name.localeCompare(b.name);
-  }
-
-  return a.order - b.order;
-});
 
 const camelCase = (value) => value.replaceAll(/-./g, (x) => x[1].toUpperCase());
 const filename = 'index.ts';

packages/console/src/assets/docs/guides/index.ts

@@ -24,69 +24,6 @@ import webPython from './web-python/index';
 import webRemix from './web-remix/index';
 
 const guides: Readonly<Guide[]> = Object.freeze([
-  {
-    order: Number.POSITIVE_INFINITY,
-    id: 'm2m-general',
-    Logo: lazy(async () => import('./m2m-general/logo.svg')),
-    Component: lazy(async () => import('./m2m-general/README.mdx')),
-    metadata: m2mGeneral,
-  },
-  {
-    order: 1,
-    id: 'native-ios-swift',
-    Logo: lazy(async () => import('./native-ios-swift/logo.svg')),
-    Component: lazy(async () => import('./native-ios-swift/README.mdx')),
-    metadata: nativeIosSwift,
-  },
-  {
-    order: 2,
-    id: 'native-android-java',
-    Logo: lazy(async () => import('./native-android-java/logo.svg')),
-    Component: lazy(async () => import('./native-android-java/README.mdx')),
-    metadata: nativeAndroidJava,
-  },
-  {
-    order: 2.1,
-    id: 'native-android-kt',
-    Logo: lazy(async () => import('./native-android-kt/logo.svg')),
-    Component: lazy(async () => import('./native-android-kt/README.mdx')),
-    metadata: nativeAndroidKt,
-  },
-  {
-    order: 3,
-    id: 'native-flutter',
-    Logo: lazy(async () => import('./native-flutter/logo.svg')),
-    Component: lazy(async () => import('./native-flutter/README.mdx')),
-    metadata: nativeFlutter,
-  },
-  {
-    order: 4,
-    id: 'native-capacitor',
-    Logo: lazy(async () => import('./native-capacitor/logo.svg')),
-    Component: lazy(async () => import('./native-capacitor/README.mdx')),
-    metadata: nativeCapacitor,
-  },
-  {
-    order: 1,
-    id: 'spa-react',
-    Logo: lazy(async () => import('./spa-react/logo.svg')),
-    Component: lazy(async () => import('./spa-react/README.mdx')),
-    metadata: spaReact,
-  },
-  {
-    order: 2,
-    id: 'spa-vue',
-    Logo: lazy(async () => import('./spa-vue/logo.svg')),
-    Component: lazy(async () => import('./spa-vue/README.mdx')),
-    metadata: spaVue,
-  },
-  {
-    order: 3,
-    id: 'spa-vanilla',
-    Logo: lazy(async () => import('./spa-vanilla/logo.svg')),
-    Component: lazy(async () => import('./spa-vanilla/README.mdx')),
-    metadata: spaVanilla,
-  },
   {
     order: 1,
     id: 'web-next',
@@ -94,6 +31,13 @@ const guides: Readonly<Guide[]> = Object.freeze([
     Component: lazy(async () => import('./web-next/README.mdx')),
     metadata: webNext,
   },
+  {
+    order: 1.1,
+    id: 'spa-react',
+    Logo: lazy(async () => import('./spa-react/logo.svg')),
+    Component: lazy(async () => import('./spa-react/README.mdx')),
+    metadata: spaReact,
+  },
   {
     order: 1.1,
     id: 'web-next-app-router',
@@ -102,61 +46,117 @@ const guides: Readonly<Guide[]> = Object.freeze([
     metadata: webNextAppRouter,
   },
   {
-    order: 2,
+    order: 1.2,
+    id: 'm2m-general',
+    Logo: lazy(async () => import('./m2m-general/logo.svg')),
+    Component: lazy(async () => import('./m2m-general/README.mdx')),
+    metadata: m2mGeneral,
+  },
+  {
+    order: 1.2,
     id: 'web-express',
     Logo: lazy(async () => import('./web-express/logo.svg')),
     Component: lazy(async () => import('./web-express/README.mdx')),
     metadata: webExpress,
   },
   {
-    order: 3,
+    order: 1.3,
     id: 'web-go',
     Logo: lazy(async () => import('./web-go/logo.svg')),
     Component: lazy(async () => import('./web-go/README.mdx')),
     metadata: webGo,
   },
   {
-    order: 4,
+    order: 1.5,
-    id: 'web-python',
+    id: 'web-gpt-plugin',
-    Logo: lazy(async () => import('./web-python/logo.svg')),
+    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg')),
-    Component: lazy(async () => import('./web-python/README.mdx')),
+    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
-    metadata: webPython,
+    metadata: webGptPlugin,
   },
   {
-    order: 5,
+    order: 1.6,
+    id: 'spa-vue',
+    Logo: lazy(async () => import('./spa-vue/logo.svg')),
+    Component: lazy(async () => import('./spa-vue/README.mdx')),
+    metadata: spaVue,
+  },
+  {
+    order: 1.7,
+    id: 'native-ios-swift',
+    Logo: lazy(async () => import('./native-ios-swift/logo.svg')),
+    Component: lazy(async () => import('./native-ios-swift/README.mdx')),
+    metadata: nativeIosSwift,
+  },
+  {
+    order: 2,
+    id: 'native-android-kt',
+    Logo: lazy(async () => import('./native-android-kt/logo.svg')),
+    Component: lazy(async () => import('./native-android-kt/README.mdx')),
+    metadata: nativeAndroidKt,
+  },
+  {
+    order: 2,
+    id: 'spa-vanilla',
+    Logo: lazy(async () => import('./spa-vanilla/logo.svg')),
+    Component: lazy(async () => import('./spa-vanilla/README.mdx')),
+    metadata: spaVanilla,
+  },
+  {
+    order: 2,
     id: 'web-php',
     Logo: lazy(async () => import('./web-php/logo.svg')),
     Component: lazy(async () => import('./web-php/README.mdx')),
     metadata: webPhp,
   },
   {
-    order: 6,
+    order: 3,
+    id: 'native-android-java',
+    Logo: lazy(async () => import('./native-android-java/logo.svg')),
+    Component: lazy(async () => import('./native-android-java/README.mdx')),
+    metadata: nativeAndroidJava,
+  },
+  {
+    order: 3,
+    id: 'web-python',
+    Logo: lazy(async () => import('./web-python/logo.svg')),
+    Component: lazy(async () => import('./web-python/README.mdx')),
+    metadata: webPython,
+  },
+  {
+    order: 4,
+    id: 'native-capacitor',
+    Logo: lazy(async () => import('./native-capacitor/logo.svg')),
+    Component: lazy(async () => import('./native-capacitor/README.mdx')),
+    metadata: nativeCapacitor,
+  },
+  {
+    order: 4,
     id: 'web-remix',
     Logo: lazy(async () => import('./web-remix/logo.svg')),
     Component: lazy(async () => import('./web-remix/README.mdx')),
     metadata: webRemix,
   },
   {
-    order: 7,
+    order: 5,
+    id: 'native-flutter',
+    Logo: lazy(async () => import('./native-flutter/logo.svg')),
+    Component: lazy(async () => import('./native-flutter/README.mdx')),
+    metadata: nativeFlutter,
+  },
+  {
+    order: 5,
     id: 'web-asp-net-core',
     Logo: lazy(async () => import('./web-asp-net-core/logo.svg')),
     Component: lazy(async () => import('./web-asp-net-core/README.mdx')),
     metadata: webAspNetCore,
   },
   {
-    order: 8,
+    order: 6,
     id: 'web-outline',
     Logo: lazy(async () => import('./web-outline/logo.svg')),
     Component: lazy(async () => import('./web-outline/README.mdx')),
     metadata: webOutline,
   },
-  {
-    order: 9,
-    id: 'web-gpt-plugin',
-    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg')),
-    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
-    metadata: webGptPlugin,
-  },
 ]);
 
 export default guides;

packages/console/src/assets/docs/guides/m2m-general/config.json

@@ -0,0 +1,3 @@
+{
+  "order": 1.2
+}

packages/console/src/assets/docs/guides/native-android-java/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 3
 }

packages/console/src/assets/docs/guides/native-android-kt/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 2.1
+  "order": 2
 }

packages/console/src/assets/docs/guides/native-flutter/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 5
 }

packages/console/src/assets/docs/guides/native-ios-swift/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 1
+  "order": 1.7
 }

packages/console/src/assets/docs/guides/spa-react/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 1
+  "order": 1.1
 }

packages/console/src/assets/docs/guides/spa-vanilla/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 2
 }

packages/console/src/assets/docs/guides/spa-vue/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 1.6
 }

packages/console/src/assets/docs/guides/web-asp-net-core/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 7
+  "order": 5
 }

packages/console/src/assets/docs/guides/web-express/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 1.2
 }

packages/console/src/assets/docs/guides/web-go/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 1.3
 }

packages/console/src/assets/docs/guides/web-gpt-plugin/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 9
+  "order": 1.5
 }

packages/console/src/assets/docs/guides/web-java/config.json

@@ -0,0 +1,3 @@
+{
+  "order": 1.4
+}

packages/console/src/assets/docs/guides/web-outline/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 8
+  "order": 6
 }

packages/console/src/assets/docs/guides/web-php/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 5
+  "order": 2
 }

packages/console/src/assets/docs/guides/web-python/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 4
+  "order": 3
 }

packages/console/src/assets/docs/guides/web-remix/config.json

@@ -1,3 +1,3 @@
 {
-  "order": 6
+  "order": 4
 }