feat(console): add complete tutorial doc links for app guide (#5397)

packages/console/src/assets/docs/guides/m2m-general/index.ts

@@ -7,6 +7,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
   description: 'Enables direct communication between machines.',
   target: ApplicationType.MachineToMachine,
   isFeatured: true,
+  fullTutorial: {
+    title: 'Full machine-to-machine integration tutorial',
+    url: 'https://docs.logto.io/sdk/m2m',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/native-android/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'kotlin',
     path: 'android-sample-kotlin',
   },
+  fullTutorial: {
+    title: 'Full Android SDK tutorial',
+    url: 'https://docs.logto.io/sdk/android',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/spa-react/index.ts

@@ -11,6 +11,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     path: 'packages/react-sample',
   },
   isFeatured: true,
+  fullTutorial: {
+    title: 'Full React SDK tutorial',
+    url: 'https://docs.logto.io/sdk/react',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/spa-vanilla/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'js',
     path: 'packages/browser-sample',
   },
+  fullTutorial: {
+    title: 'Full vanilla JS SDK tutorial',
+    url: 'https://docs.logto.io/sdk/vanilla-js',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/spa-vue/index.ts

@@ -12,6 +12,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     path: 'packages/vue-sample',
   },
   isFeatured: true,
+  fullTutorial: {
+    title: 'Full Vue SDK tutorial',
+    url: 'https://docs.logto.io/sdk/vue',
+  },
 });
 
 export default metadata;

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

@@ -30,6 +30,12 @@ export type GuideMetadata = {
 
   /** Indicate whether the application is for third-party use */
   isThirdParty?: boolean;
+
+  /** The related complete tutorial doc for this guide which will be displayed in the 'Further readings' section. */
+  fullTutorial?: {
+    title: string;
+    url: string;
+  };
 };
 
 /** The guide instance to build in the console. */

packages/console/src/assets/docs/guides/web-dotnet-core-blazor-server/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'csharp',
     path: '/',
   },
+  fullTutorial: {
+    title: 'Full .NET Core (Blazor Server) integration tutorial',
+    url: 'https://docs.logto.io/sdk/dotnet-core/blazor-server',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-dotnet-core-blazor-wasm/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'csharp',
     path: '/',
   },
+  fullTutorial: {
+    title: 'Full .NET Core (Blazor WASM) integration tutorial',
+    url: 'https://docs.logto.io/sdk/dotnet-core/blazor-wasm',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-dotnet-core-mvc/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'csharp',
     path: '/',
   },
+  fullTutorial: {
+    title: 'Full .NET Core (MVC) integration tutorial',
+    url: 'https://docs.logto.io/sdk/dotnet-core/mvc',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-express/index.ts

@@ -11,6 +11,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'js',
     path: 'packages/express-sample',
   },
+  fullTutorial: {
+    title: 'Full Express SDK tutorial',
+    url: 'https://docs.logto.io/sdk/express',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-go/index.ts

@@ -11,6 +11,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'go',
     path: 'gin-sample',
   },
+  fullTutorial: {
+    title: 'Full Go SDK tutorial',
+    url: 'https://docs.logto.io/sdk/go',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-next-app-router/index.ts

@@ -11,6 +11,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'js',
     path: 'packages/next-app-dir-sample',
   },
+  fullTutorial: {
+    title: 'Full Next.js App Router SDK tutorial',
+    url: 'https://docs.logto.io/sdk/next-app-router',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-next/index.ts

@@ -12,6 +12,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     path: 'packages/next-sample',
   },
   isFeatured: true,
+  fullTutorial: {
+    title: 'Full Next.js SDK tutorial',
+    url: 'https://docs.logto.io/sdk/next',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-php/index.ts

@@ -6,6 +6,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
   name: 'PHP',
   description: 'Integrate Logto into your PHP web app, such as Lavarel.',
   target: ApplicationType.Traditional,
+  fullTutorial: {
+    title: 'Full PHP SDK tutorial',
+    url: 'https://docs.logto.io/sdk/php',
+  },
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-python/index.ts

@@ -10,6 +10,10 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'python',
     path: 'samples',
   },
+  fullTutorial: {
+    title: 'Full Python SDK tutorial',
+    url: 'https://docs.logto.io/sdk/python',
+  },
 });
 
 export default metadata;

packages/console/src/mdx-components/Steps/FurtherReadings.tsx

@@ -1,15 +1,26 @@
 import { type Ref, forwardRef } from 'react';
 
+import { type GuideMetadata } from '@/assets/docs/guides/types';
 import TextLink from '@/ds-components/TextLink';
 
 import Step, { type Props as StepProps } from '../Step';
 
-type Props = Omit<StepProps, 'children'>;
+type Props = Omit<StepProps, 'children'> & {
+  fullTutorial: GuideMetadata['fullTutorial'];
+};
 
 function FurtherReadings(props: Props, ref?: Ref<HTMLDivElement>) {
+  const { fullTutorial, ...stepProps } = props;
   return (
-    <Step ref={ref} {...props}>
+    <Step ref={ref} {...stepProps}>
       <ul>
+        {fullTutorial && (
+          <li>
+            <TextLink href={fullTutorial.url} targetBlank="noopener">
+              {fullTutorial.title}
+            </TextLink>
+          </li>
+        )}
         <li>
           <TextLink href="https://docs.logto.io/docs/recipes/customize-sie/" targetBlank="noopener">
             Customize sign-in experience

packages/console/src/mdx-components/Steps/index.tsx

@@ -41,8 +41,8 @@ export default function Steps({ children: reactChildren }: Props) {
   const isApiResourceGuide = metadata.target === 'API';
 
   const furtherReadings = useMemo(
-    () => <FurtherReadings title="Further readings" subtitle="3 articles" />,
-    []
+    () => <FurtherReadings title="Further readings" fullTutorial={metadata.fullTutorial} />,
+    [metadata.fullTutorial]
   );
   const children: Array<ReactElement<StepProps, typeof Step>> = useMemo(() => {
     const steps = Array.isArray(reactChildren) ? reactChildren : [reactChildren];