refactor(console): align further readings section (#4349)

packages/console/src/assets/docs/guides/native-android-java/README.mdx

@@ -106,16 +106,4 @@ logtoClient.signOut(logtoException -> {
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/native-android-kt/README.mdx

@@ -98,16 +98,4 @@ logtoClient.signOut { logtoException: LogtoException? ->
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/native-ios-swift/README.mdx

@@ -119,16 +119,4 @@ await client.signOut()
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/spa-react/README.mdx

@@ -164,16 +164,4 @@ After signing out, it'll be great to redirect user back to your website. Let's a
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/spa-vanilla/README.mdx

@@ -134,16 +134,4 @@ After signing out, it'll be great to redirect user back to your website. Let's a
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/spa-vue/README.mdx

@@ -183,16 +183,4 @@ After signing out, it'll be great to redirect user back to your website. Let's a
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/web-express/README.mdx

@@ -186,16 +186,4 @@ After signing out, it'll be great to redirect your user back to your website. Le
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/web-go/README.mdx

@@ -351,16 +351,4 @@ After the user makes a signing-out request, Logto will clear all user authentica
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/assets/docs/guides/web-next/README.mdx

@@ -233,16 +233,4 @@ After signing out, it'll be great to redirect user back to your website. Let's a
 
 </Step>
 
-<Step
-  title="Further readings"
-  subtitle="4 articles"
->
-
-- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
-- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
-
-</Step>
-
 </Steps>

packages/console/src/mdx-components-v2/Step/index.tsx

@@ -7,7 +7,7 @@ import DangerousRaw from '@/ds-components/DangerousRaw';
 import * as styles from './index.module.scss';
 
 export type Props = {
-  index: number;
+  index?: number;
   title: string;
   subtitle?: string;
   children: ReactNode;
@@ -17,7 +17,7 @@ function Step({ title, subtitle, index, children }: Props, ref?: Ref<HTMLDivElem
   return (
     <section ref={ref} className={styles.wrapper}>
       <header>
-        <Index index={index + 1} />
+        <Index index={(index ?? 0) + 1} />
         <CardTitle
           size="medium"
           title={<DangerousRaw>{title}</DangerousRaw>}

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

@@ -0,0 +1,48 @@
+import TextLink from '@/ds-components/TextLink';
+
+import Step, { type Props } from '../Step';
+
+export default function FurtherReadings(props: Omit<Props, 'children'>) {
+  return (
+    <Step {...props}>
+      <ul>
+        <li>
+          <TextLink
+            target="blank"
+            rel="noopener"
+            href="https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience"
+          >
+            Customize sign-in experience
+          </TextLink>
+        </li>
+        <li>
+          <TextLink
+            target="blank"
+            rel="noopener"
+            href="https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in"
+          >
+            Enable SMS or email passwordless sign-in
+          </TextLink>
+        </li>
+        <li>
+          <TextLink
+            target="blank"
+            rel="noopener"
+            href="https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in"
+          >
+            Enable social sign-in
+          </TextLink>
+        </li>
+        <li>
+          <TextLink
+            target="blank"
+            rel="noopener"
+            href="https://docs.logto.io/docs/recipes/protect-your-api"
+          >
+            Protect your API
+          </TextLink>
+        </li>
+      </ul>
+    </Step>
+  );
+}

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

@@ -8,6 +8,7 @@ import Sample from '../Sample';
 import { type Props as StepProps } from '../Step';
 import type Step from '../Step';
 
+import FurtherReadings from './FurtherReadings';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -34,9 +35,16 @@ export default function Steps({ children: reactChildren }: Props) {
   const stepReferences = useRef<Array<Nullable<HTMLElement>>>([]);
   const { scrollTop } = useScroll(findScrollableElement(contentRef.current));
   const [activeIndex, setActiveIndex] = useState(-1);
-  const children = useMemo(
+  const furtherReadings = useMemo(
-    () => (Array.isArray(reactChildren) ? reactChildren : [reactChildren]),
+    () => <FurtherReadings title="Further readings" subtitle="4 articles" />,
-    [reactChildren]
+    []
+  );
+  const children: Array<ReactElement<StepProps, typeof Step>> = useMemo(
+    () =>
+      Array.isArray(reactChildren)
+        ? reactChildren.concat(furtherReadings)
+        : [reactChildren, furtherReadings],
+    [furtherReadings, reactChildren]
   );
 
   useEffect(() => {