0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

fix(console): use safeLazy to dynamically import guide mdx (#6503)

This commit is contained in:
Charles Zhao 2024-08-22 17:25:35 +08:00 committed by GitHub
parent 4be675a53a
commit ad4e146922
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 104 additions and 97 deletions

View file

@ -1,7 +1,6 @@
/* eslint-disable max-lines */
// This is a generated file, don't update manually.
import { lazy } from 'react';
import { safeLazy } from 'react-safe-lazy';
import apiExpress from './api-express/index';
import apiPython from './api-python/index';
@ -45,289 +44,289 @@ export const guides: Readonly<Guide[]> = Object.freeze([
{
order: 1,
id: 'web-next-app-router',
Logo: lazy(async () => import('./web-next-app-router/logo.svg?react')),
DarkLogo: lazy(async () => import('./web-next-app-router/logo-dark.svg?react')),
Component: lazy(async () => import('./web-next-app-router/README.mdx')),
Logo: safeLazy(async () => import('./web-next-app-router/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./web-next-app-router/logo-dark.svg?react')),
Component: safeLazy(async () => import('./web-next-app-router/README.mdx')),
metadata: webNextAppRouter,
},
{
order: 1.1,
id: 'native-expo',
Logo: lazy(async () => import('./native-expo/logo.svg?react')),
DarkLogo: lazy(async () => import('./native-expo/logo-dark.svg?react')),
Component: lazy(async () => import('./native-expo/README.mdx')),
Logo: safeLazy(async () => import('./native-expo/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./native-expo/logo-dark.svg?react')),
Component: safeLazy(async () => import('./native-expo/README.mdx')),
metadata: nativeExpo,
},
{
order: 1.1,
id: 'spa-angular',
Logo: lazy(async () => import('./spa-angular/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-angular/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-angular/README.mdx')),
Component: safeLazy(async () => import('./spa-angular/README.mdx')),
metadata: spaAngular,
},
{
order: 1.1,
id: 'spa-chrome-extension',
Logo: lazy(async () => import('./spa-chrome-extension/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-chrome-extension/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-chrome-extension/README.mdx')),
Component: safeLazy(async () => import('./spa-chrome-extension/README.mdx')),
metadata: spaChromeExtension,
},
{
order: 1.1,
id: 'spa-react',
Logo: lazy(async () => import('./spa-react/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-react/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-react/README.mdx')),
Component: safeLazy(async () => import('./spa-react/README.mdx')),
metadata: spaReact,
},
{
order: 1.2,
id: 'web-express',
Logo: lazy(async () => import('./web-express/logo.svg?react')),
DarkLogo: lazy(async () => import('./web-express/logo-dark.svg?react')),
Component: lazy(async () => import('./web-express/README.mdx')),
Logo: safeLazy(async () => import('./web-express/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./web-express/logo-dark.svg?react')),
Component: safeLazy(async () => import('./web-express/README.mdx')),
metadata: webExpress,
},
{
order: 1.2,
id: 'web-next',
Logo: lazy(async () => import('./web-next/logo.svg?react')),
DarkLogo: lazy(async () => import('./web-next/logo-dark.svg?react')),
Component: lazy(async () => import('./web-next/README.mdx')),
Logo: safeLazy(async () => import('./web-next/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./web-next/logo-dark.svg?react')),
Component: safeLazy(async () => import('./web-next/README.mdx')),
metadata: webNext,
},
{
order: 1.2,
id: 'web-sveltekit',
Logo: lazy(async () => import('./web-sveltekit/logo.svg?react')),
Logo: safeLazy(async () => import('./web-sveltekit/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-sveltekit/README.mdx')),
Component: safeLazy(async () => import('./web-sveltekit/README.mdx')),
metadata: webSveltekit,
},
{
order: 1.3,
id: 'spa-vue',
Logo: lazy(async () => import('./spa-vue/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-vue/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-vue/README.mdx')),
Component: safeLazy(async () => import('./spa-vue/README.mdx')),
metadata: spaVue,
},
{
order: 1.3,
id: 'web-go',
Logo: lazy(async () => import('./web-go/logo.svg?react')),
Logo: safeLazy(async () => import('./web-go/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-go/README.mdx')),
Component: safeLazy(async () => import('./web-go/README.mdx')),
metadata: webGo,
},
{
order: 1.3,
id: 'web-next-auth',
Logo: lazy(async () => import('./web-next-auth/logo.svg?react')),
Logo: safeLazy(async () => import('./web-next-auth/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-next-auth/README.mdx')),
Component: safeLazy(async () => import('./web-next-auth/README.mdx')),
metadata: webNextAuth,
},
{
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')),
Logo: safeLazy(async () => import('./protected-app/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./protected-app/logo-dark.svg?react')),
Component: safeLazy(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')),
Logo: safeLazy(async () => import('./m2m-general/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./m2m-general/logo-dark.svg?react')),
Component: safeLazy(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')),
Logo: safeLazy(async () => import('./web-java-spring-boot/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-java-spring-boot/README.mdx')),
Component: safeLazy(async () => import('./web-java-spring-boot/README.mdx')),
metadata: webJavaSpringBoot,
},
{
order: 1.7,
id: 'native-ios-swift',
Logo: lazy(async () => import('./native-ios-swift/logo.svg?react')),
Logo: safeLazy(async () => import('./native-ios-swift/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./native-ios-swift/README.mdx')),
Component: safeLazy(async () => import('./native-ios-swift/README.mdx')),
metadata: nativeIosSwift,
},
{
order: 2,
id: 'native-android',
Logo: lazy(async () => import('./native-android/logo.svg?react')),
Logo: safeLazy(async () => import('./native-android/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./native-android/README.mdx')),
Component: safeLazy(async () => import('./native-android/README.mdx')),
metadata: nativeAndroid,
},
{
order: 2,
id: 'spa-vanilla',
Logo: lazy(async () => import('./spa-vanilla/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-vanilla/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-vanilla/README.mdx')),
Component: safeLazy(async () => import('./spa-vanilla/README.mdx')),
metadata: spaVanilla,
},
{
order: 2,
id: 'web-nuxt',
Logo: lazy(async () => import('./web-nuxt/logo.svg?react')),
Logo: safeLazy(async () => import('./web-nuxt/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-nuxt/README.mdx')),
Component: safeLazy(async () => import('./web-nuxt/README.mdx')),
metadata: webNuxt,
},
{
order: 2,
id: 'web-php',
Logo: lazy(async () => import('./web-php/logo.svg?react')),
Logo: safeLazy(async () => import('./web-php/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-php/README.mdx')),
Component: safeLazy(async () => import('./web-php/README.mdx')),
metadata: webPhp,
},
{
order: 2,
id: 'web-ruby',
Logo: lazy(async () => import('./web-ruby/logo.svg?react')),
Logo: safeLazy(async () => import('./web-ruby/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-ruby/README.mdx')),
Component: safeLazy(async () => import('./web-ruby/README.mdx')),
metadata: webRuby,
},
{
order: 2.1,
id: 'spa-webflow',
Logo: lazy(async () => import('./spa-webflow/logo.svg?react')),
Logo: safeLazy(async () => import('./spa-webflow/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./spa-webflow/README.mdx')),
Component: safeLazy(async () => import('./spa-webflow/README.mdx')),
metadata: spaWebflow,
},
{
order: 2.2,
id: 'web-wordpress',
Logo: lazy(async () => import('./web-wordpress/logo.svg?react')),
Logo: safeLazy(async () => import('./web-wordpress/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-wordpress/README.mdx')),
Component: safeLazy(async () => import('./web-wordpress/README.mdx')),
metadata: webWordpress,
},
{
order: 3,
id: 'web-python',
Logo: lazy(async () => import('./web-python/logo.svg?react')),
Logo: safeLazy(async () => import('./web-python/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-python/README.mdx')),
Component: safeLazy(async () => import('./web-python/README.mdx')),
metadata: webPython,
},
{
order: 4,
id: 'native-capacitor',
Logo: lazy(async () => import('./native-capacitor/logo.svg?react')),
Logo: safeLazy(async () => import('./native-capacitor/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./native-capacitor/README.mdx')),
Component: safeLazy(async () => import('./native-capacitor/README.mdx')),
metadata: nativeCapacitor,
},
{
order: 5,
id: 'native-flutter',
Logo: lazy(async () => import('./native-flutter/logo.svg?react')),
Logo: safeLazy(async () => import('./native-flutter/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./native-flutter/README.mdx')),
Component: safeLazy(async () => import('./native-flutter/README.mdx')),
metadata: nativeFlutter,
},
{
order: 5,
id: 'web-dotnet-core',
Logo: lazy(async () => import('./web-dotnet-core/logo.svg?react')),
Logo: safeLazy(async () => import('./web-dotnet-core/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-dotnet-core/README.mdx')),
Component: safeLazy(async () => import('./web-dotnet-core/README.mdx')),
metadata: webDotnetCore,
},
{
order: 5.1,
id: 'web-dotnet-core-mvc',
Logo: lazy(async () => import('./web-dotnet-core-mvc/logo.svg?react')),
Logo: safeLazy(async () => import('./web-dotnet-core-mvc/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-dotnet-core-mvc/README.mdx')),
Component: safeLazy(async () => import('./web-dotnet-core-mvc/README.mdx')),
metadata: webDotnetCoreMvc,
},
{
order: 5.2,
id: 'web-dotnet-core-blazor-server',
Logo: lazy(async () => import('./web-dotnet-core-blazor-server/logo.svg?react')),
Logo: safeLazy(async () => import('./web-dotnet-core-blazor-server/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-dotnet-core-blazor-server/README.mdx')),
Component: safeLazy(async () => import('./web-dotnet-core-blazor-server/README.mdx')),
metadata: webDotnetCoreBlazorServer,
},
{
order: 5.3,
id: 'web-dotnet-core-blazor-wasm',
Logo: lazy(async () => import('./web-dotnet-core-blazor-wasm/logo.svg?react')),
Logo: safeLazy(async () => import('./web-dotnet-core-blazor-wasm/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-dotnet-core-blazor-wasm/README.mdx')),
Component: safeLazy(async () => import('./web-dotnet-core-blazor-wasm/README.mdx')),
metadata: webDotnetCoreBlazorWasm,
},
{
order: 6,
id: 'web-outline',
Logo: lazy(async () => import('./web-outline/logo.svg?react')),
DarkLogo: lazy(async () => import('./web-outline/logo-dark.svg?react')),
Component: lazy(async () => import('./web-outline/README.mdx')),
Logo: safeLazy(async () => import('./web-outline/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./web-outline/logo-dark.svg?react')),
Component: safeLazy(async () => import('./web-outline/README.mdx')),
metadata: webOutline,
},
{
order: 6.1,
id: 'web-passport',
Logo: lazy(async () => import('./web-passport/logo.svg?react')),
DarkLogo: lazy(async () => import('./web-passport/logo-dark.svg?react')),
Component: lazy(async () => import('./web-passport/README.mdx')),
Logo: safeLazy(async () => import('./web-passport/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./web-passport/logo-dark.svg?react')),
Component: safeLazy(async () => import('./web-passport/README.mdx')),
metadata: webPassport,
},
{
order: 999,
id: 'web-gpt-plugin',
Logo: lazy(async () => import('./web-gpt-plugin/logo.svg?react')),
Logo: safeLazy(async () => import('./web-gpt-plugin/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
Component: safeLazy(async () => import('./web-gpt-plugin/README.mdx')),
metadata: webGptPlugin,
},
{
order: Number.POSITIVE_INFINITY,
id: 'api-express',
Logo: lazy(async () => import('./api-express/logo.svg?react')),
DarkLogo: lazy(async () => import('./api-express/logo-dark.svg?react')),
Component: lazy(async () => import('./api-express/README.mdx')),
Logo: safeLazy(async () => import('./api-express/logo.svg?react')),
DarkLogo: safeLazy(async () => import('./api-express/logo-dark.svg?react')),
Component: safeLazy(async () => import('./api-express/README.mdx')),
metadata: apiExpress,
},
{
order: Number.POSITIVE_INFINITY,
id: 'api-python',
Logo: lazy(async () => import('./api-python/logo.svg?react')),
Logo: safeLazy(async () => import('./api-python/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./api-python/README.mdx')),
Component: safeLazy(async () => import('./api-python/README.mdx')),
metadata: apiPython,
},
{
order: Number.POSITIVE_INFINITY,
id: 'api-spring-boot',
Logo: lazy(async () => import('./api-spring-boot/logo.svg?react')),
Logo: safeLazy(async () => import('./api-spring-boot/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./api-spring-boot/README.mdx')),
Component: safeLazy(async () => import('./api-spring-boot/README.mdx')),
metadata: apiSpringBoot,
},
{
order: Number.POSITIVE_INFINITY,
id: 'third-party-oidc',
Logo: lazy(async () => import('./third-party-oidc/logo.svg?react')),
Logo: safeLazy(async () => import('./third-party-oidc/logo.svg?react')),
DarkLogo: undefined,
Component: lazy(async () => import('./third-party-oidc/README.mdx')),
Component: safeLazy(async () => import('./third-party-oidc/README.mdx')),
metadata: thirdPartyOidc,
},
]);

View file

@ -1,6 +1,6 @@
import { type ApplicationType } from '@logto/schemas';
import { type MDXProps } from 'mdx/types';
import { type LazyExoticComponent, type FunctionComponent } from 'react';
import { type LazyExoticComponent, type ComponentType, type SVGProps } from 'react';
/**
* The guide metadata type. The directory name that the metadata is in will be the
@ -48,11 +48,11 @@ export type Guide = {
/** The unique identifier of the guide. */
id: string;
Logo:
| LazyExoticComponent<SvgComponent>
| LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
| ((props: { readonly className?: string }) => JSX.Element);
DarkLogo?:
| LazyExoticComponent<SvgComponent>
| LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
| ((props: { readonly className?: string }) => JSX.Element);
Component: LazyExoticComponent<FunctionComponent<MDXProps>>;
Component: LazyExoticComponent<ComponentType<MDXProps>>;
metadata: Readonly<GuideMetadata>;
};

View file

@ -1,16 +1,17 @@
import { SsoProviderName } from '@logto/schemas';
import { type MDXProps } from 'mdx/types';
import { lazy, type FunctionComponent, type LazyExoticComponent } from 'react';
import { type ComponentType, type LazyExoticComponent } from 'react';
import { safeLazy } from 'react-safe-lazy';
type GuideComponentType = LazyExoticComponent<FunctionComponent<MDXProps>>;
type GuideComponentType = LazyExoticComponent<ComponentType<MDXProps>>;
const ssoConnectorGuides: Readonly<{ [key in SsoProviderName]?: GuideComponentType }> = {
[SsoProviderName.SAML]: lazy(async () => import('./saml/README.mdx')),
[SsoProviderName.OIDC]: lazy(async () => import('./oidc/README.mdx')),
[SsoProviderName.AZURE_AD]: lazy(async () => import('./azure-ad/README.mdx')),
[SsoProviderName.GOOGLE_WORKSPACE]: lazy(async () => import('./google-workspace/README.mdx')),
[SsoProviderName.OKTA]: lazy(async () => import('./okta/README.mdx')),
[SsoProviderName.AZURE_AD_OIDC]: lazy(async () => import('./azure-oidc/README.mdx')),
[SsoProviderName.SAML]: safeLazy(async () => import('./saml/README.mdx')),
[SsoProviderName.OIDC]: safeLazy(async () => import('./oidc/README.mdx')),
[SsoProviderName.AZURE_AD]: safeLazy(async () => import('./azure-ad/README.mdx')),
[SsoProviderName.GOOGLE_WORKSPACE]: safeLazy(async () => import('./google-workspace/README.mdx')),
[SsoProviderName.OKTA]: safeLazy(async () => import('./okta/README.mdx')),
[SsoProviderName.AZURE_AD_OIDC]: safeLazy(async () => import('./azure-oidc/README.mdx')),
};
export default ssoConnectorGuides;

View file

@ -1,6 +1,13 @@
import { type ApplicationResponse } from '@logto/schemas';
import classNames from 'classnames';
import { type LazyExoticComponent, Suspense, createContext, useContext } from 'react';
import {
type ComponentType,
type LazyExoticComponent,
type SVGProps,
Suspense,
createContext,
useContext,
} from 'react';
import { guides } from '@/assets/docs/guides';
import { type GuideMetadata } from '@/assets/docs/guides/types';
@ -16,7 +23,7 @@ import styles from './index.module.scss';
export type GuideContextType = {
metadata: Readonly<GuideMetadata>;
Logo?:
| LazyExoticComponent<SvgComponent>
| LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
| ((props: { readonly className?: string }) => JSX.Element);
isCompact: boolean;
app?: ApplicationResponse;