refactor(console): remove protected app promotion

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

@@ -12,6 +12,7 @@ import nativeCapacitor from './native-capacitor/index';
 import nativeExpo from './native-expo/index';
 import nativeFlutter from './native-flutter/index';
 import nativeIosSwift from './native-ios-swift/index';
+import protectedApp from './protected-app/index';
 import spaAngular from './spa-angular/index';
 import spaChromeExtension from './spa-chrome-extension/index';
 import spaReact from './spa-react/index';
@@ -81,14 +82,6 @@ export const guides: Readonly<Guide[]> = Object.freeze([
     Component: lazy(async () => import('./spa-react/README.mdx')),
     metadata: spaReact,
   },
-  {
-    order: 1.2,
-    id: 'm2m-general',
-    Logo: lazy(async () => import('./m2m-general/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./m2m-general/logo-dark.svg?react')),
-    Component: lazy(async () => import('./m2m-general/README.mdx')),
-    metadata: m2mGeneral,
-  },
   {
     order: 1.2,
     id: 'web-express',
@@ -113,6 +106,14 @@ export const guides: Readonly<Guide[]> = Object.freeze([
     Component: lazy(async () => import('./web-sveltekit/README.mdx')),
     metadata: webSveltekit,
   },
+  {
+    order: 1.3,
+    id: 'spa-vue',
+    Logo: lazy(async () => import('./spa-vue/logo.svg?react')),
+    DarkLogo: undefined,
+    Component: lazy(async () => import('./spa-vue/README.mdx')),
+    metadata: spaVue,
+  },
   {
     order: 1.3,
     id: 'web-go',
@@ -131,20 +132,28 @@ export const guides: Readonly<Guide[]> = Object.freeze([
   },
   {
     order: 1.4,
+    id: 'protected-app',
+    Logo: lazy(async () => import('./protected-app/logo.svg?react')),
+    DarkLogo: lazy(async () => import('./protected-app/logo-dark.svg?react')),
+    Component: lazy(async () => import('./protected-app/README.mdx')),
+    metadata: protectedApp,
+  },
+  {
+    order: 1.5,
+    id: 'm2m-general',
+    Logo: lazy(async () => import('./m2m-general/logo.svg?react')),
+    DarkLogo: lazy(async () => import('./m2m-general/logo-dark.svg?react')),
+    Component: lazy(async () => import('./m2m-general/README.mdx')),
+    metadata: m2mGeneral,
+  },
+  {
+    order: 1.6,
     id: 'web-java-spring-boot',
     Logo: lazy(async () => import('./web-java-spring-boot/logo.svg?react')),
     DarkLogo: undefined,
     Component: lazy(async () => import('./web-java-spring-boot/README.mdx')),
     metadata: webJavaSpringBoot,
   },
-  {
-    order: 1.6,
-    id: 'spa-vue',
-    Logo: lazy(async () => import('./spa-vue/logo.svg?react')),
-    DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-vue/README.mdx')),
-    metadata: spaVue,
-  },
   {
     order: 1.7,
     id: 'native-ios-swift',

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

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

packages/console/src/assets/docs/guides/protected-app/README.mdx

@@ -0,0 +1 @@
+# Placeholder for protected app guide

packages/console/src/assets/docs/guides/protected-app/config.json

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

packages/console/src/assets/docs/guides/protected-app/index.ts

@@ -0,0 +1,14 @@
+import { ApplicationType } from '@logto/schemas';
+
+import { type GuideMetadata } from '../types';
+
+const metadata: Readonly<GuideMetadata> = Object.freeze({
+  name: 'Protected app',
+  description: 'Non-SDK integration solution powered by Cloudflare Workers',
+  target: ApplicationType.Protected,
+  isFeatured: true,
+  isCloud: true,
+  skipGuideAfterCreation: true,
+});
+
+export default metadata;

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

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

packages/console/src/assets/docs/guides/third-party-oidc/index.ts

@@ -4,9 +4,10 @@ import { type GuideMetadata } from '../types';
 
 const metadata: Readonly<GuideMetadata> = Object.freeze({
   name: 'OIDC',
-  description: 'Use Logto as a third-party OIDC identity provider (IdP) for your application. ',
+  description: 'Use Logto as a third-party OIDC identity provider (IdP) for your application.',
   target: ApplicationType.Traditional,
   isThirdParty: true,
+  skipGuideAfterCreation: true,
 });
 
 export default metadata;

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

@@ -27,13 +27,14 @@ export type GuideMetadata = {
   };
   /** Whether the guide is displayed in featured group. */
   isFeatured?: boolean;
-
-  /** Indicate whether the application is for third-party use */
+  /** Indicate whether the application is for third-party use. */
   isThirdParty?: boolean;
-
+  /** Indicate whether the application is Cloud only. E.g. Protected app */
+  isCloud?: boolean;
+  /** Indicates whether we should skip the guide after creating the application. */
+  skipGuideAfterCreation?: boolean;
   /** The related complete guide url relative to the quick starts page (https://docs.logto.io/quick-starts). */
   fullGuide?: string;
-
   /** The related URLs to add to the further readings section. */
   furtherReadings?: Array<{
     title: string;

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

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

packages/console/src/components/Guide/GuideCard/index.tsx

@@ -14,9 +14,7 @@ import styles from './index.module.scss';
 
 export type SelectedGuide = {
   id: Guide['id'];
-  target: GuideMetadata['target'];
-  name: GuideMetadata['name'];
-  isThirdParty: GuideMetadata['isThirdParty'];
+  metadata: GuideMetadata;
 };
 
 type Props = {
@@ -27,13 +25,9 @@ type Props = {
 };
 
 function GuideCard({ data, onClick, hasBorder, hasButton }: Props) {
-  const {
-    id,
-    Logo,
-    DarkLogo,
-    metadata: { target, name, description, isThirdParty },
-  } = data;
+  const { id, Logo, DarkLogo, metadata } = data;
 
+  const { target, name, description, isThirdParty } = metadata;
   const buttonText = target === 'API' ? 'guide.get_started' : 'guide.start_building';
   const { currentSubscriptionQuota } = useContext(SubscriptionDataContext);
   const theme = useTheme();
@@ -42,8 +36,8 @@ function GuideCard({ data, onClick, hasBorder, hasButton }: Props) {
   const showBetaTag = isCloud && isThirdParty;
 
   const handleClick = useCallback(() => {
-    onClick({ id, target, name, isThirdParty });
-  }, [onClick, id, target, name, isThirdParty]);
+    onClick({ id, metadata });
+  }, [onClick, id, metadata]);
 
   return (
     <div