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
2024-12-16 20:26:19 -05:00 · 2023-09-05 23:36:30 +08:00 · 2023-09-05 23:36:30 +08:00 · 90ea2e2f71
commit 90ea2e2f71
parent ef0e38249f
20 changed files with 107 additions and 105 deletions
--- a/packages/console/src/assets/docs/guides/README.md
+++ b/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;
-2. The `order` property of the guide.
+1. The `order` property of all guides across all category groups
+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:

--- a/packages/console/src/assets/docs/guides/generate-metadata.js
+++ b/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) => {
-  if (a.name.split('-')[0] !== b.name.split('-')[0]) {
-    return a.name.localeCompare(b.name);
-  }
-
-  return a.order - b.order;
-});
+const metadata = data.filter(Boolean).slice().sort((a, b) => a.order - b.order);

 const camelCase = (value) => value.replaceAll(/-./g, (x) => x[1].toUpperCase());
 const filename = 'index.ts';
--- a/packages/console/src/assets/docs/guides/index.ts
+++ b/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,
-    id: 'web-python',
-    Logo: lazy(async () => import('./web-python/logo.svg')),
-    Component: lazy(async () => import('./web-python/README.mdx')),
-    metadata: webPython,
+    order: 1.5,
+    id: 'web-gpt-plugin',
+    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg')),
+    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
+    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;
--- a/packages/console/src/assets/docs/guides/m2m-general/config.json
+++ b/packages/console/src/assets/docs/guides/m2m-general/config.json
@ -0,0 +1,3 @@
+{
+  "order": 1.2
+}
--- a/packages/console/src/assets/docs/guides/native-android-java/config.json
+++ b/packages/console/src/assets/docs/guides/native-android-java/config.json
@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 3
 }
--- a/packages/console/src/assets/docs/guides/native-android-kt/config.json
+++ b/packages/console/src/assets/docs/guides/native-android-kt/config.json
@ -1,3 +1,3 @@
 {
-  "order": 2.1
+  "order": 2
 }
--- a/packages/console/src/assets/docs/guides/native-flutter/config.json
+++ b/packages/console/src/assets/docs/guides/native-flutter/config.json
@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 5
 }
--- a/packages/console/src/assets/docs/guides/native-ios-swift/config.json
+++ b/packages/console/src/assets/docs/guides/native-ios-swift/config.json
@ -1,3 +1,3 @@
 {
-  "order": 1
+  "order": 1.7
 }
--- a/packages/console/src/assets/docs/guides/spa-react/config.json
+++ b/packages/console/src/assets/docs/guides/spa-react/config.json
@ -1,3 +1,3 @@
 {
-  "order": 1
+  "order": 1.1
 }
--- a/packages/console/src/assets/docs/guides/spa-vanilla/config.json
+++ b/packages/console/src/assets/docs/guides/spa-vanilla/config.json
@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 2
 }
--- a/packages/console/src/assets/docs/guides/spa-vue/config.json
+++ b/packages/console/src/assets/docs/guides/spa-vue/config.json
@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 1.6
 }
--- a/packages/console/src/assets/docs/guides/web-asp-net-core/config.json
+++ b/packages/console/src/assets/docs/guides/web-asp-net-core/config.json
@ -1,3 +1,3 @@
 {
-  "order": 7
+  "order": 5
 }
--- a/packages/console/src/assets/docs/guides/web-express/config.json
+++ b/packages/console/src/assets/docs/guides/web-express/config.json
@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 1.2
 }
--- a/packages/console/src/assets/docs/guides/web-go/config.json
+++ b/packages/console/src/assets/docs/guides/web-go/config.json
@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 1.3
 }
--- a/packages/console/src/assets/docs/guides/web-gpt-plugin/config.json
+++ b/packages/console/src/assets/docs/guides/web-gpt-plugin/config.json
@ -1,3 +1,3 @@
 {
-  "order": 9
+  "order": 1.5
 }
--- a/packages/console/src/assets/docs/guides/web-java/config.json
+++ b/packages/console/src/assets/docs/guides/web-java/config.json
@ -0,0 +1,3 @@
+{
+  "order": 1.4
+}
--- a/packages/console/src/assets/docs/guides/web-outline/config.json
+++ b/packages/console/src/assets/docs/guides/web-outline/config.json
@ -1,3 +1,3 @@
 {
-  "order": 8
+  "order": 6
 }
--- a/packages/console/src/assets/docs/guides/web-php/config.json
+++ b/packages/console/src/assets/docs/guides/web-php/config.json
@ -1,3 +1,3 @@
 {
-  "order": 5
+  "order": 2
 }
--- a/packages/console/src/assets/docs/guides/web-python/config.json
+++ b/packages/console/src/assets/docs/guides/web-python/config.json
@ -1,3 +1,3 @@
 {
-  "order": 4
+  "order": 3
 }
--- a/packages/console/src/assets/docs/guides/web-remix/config.json
+++ b/packages/console/src/assets/docs/guides/web-remix/config.json
@ -1,3 +1,3 @@
 {
-  "order": 6
+  "order": 4
 }