0
Fork 0
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:
Gao Sun 2023-08-17 09:35:55 +08:00 committed by GitHub
parent e83208c259
commit 59a42c76c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 61 additions and 113 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>}

View file

@ -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>
);
}

View file

@ -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(() => {