mirror of
https://github.com/logto-io/logto.git
synced 2025-01-27 21:39:16 -05:00
refactor(console): align further readings section (#4349)
This commit is contained in:
parent
e83208c259
commit
59a42c76c5
12 changed files with 61 additions and 113 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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(
|
||||
() => (Array.isArray(reactChildren) ? reactChildren : [reactChildren]),
|
||||
[reactChildren]
|
||||
const furtherReadings = useMemo(
|
||||
() => <FurtherReadings title="Further readings" subtitle="4 articles" />,
|
||||
[]
|
||||
);
|
||||
const children: Array<ReactElement<StepProps, typeof Step>> = useMemo(
|
||||
() =>
|
||||
Array.isArray(reactChildren)
|
||||
? reactChildren.concat(furtherReadings)
|
||||
: [reactChildren, furtherReadings],
|
||||
[furtherReadings, reactChildren]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
Loading…
Add table
Reference in a new issue