refactor(console): support non-svg logos

packages/console/src/assets/docs/guides/generate-metadata.js

@@ -41,20 +41,31 @@ const metadata = data
   .sort((a, b) => a.order - b.order);
 
 const camelCase = (value) => value.replaceAll(/-./g, (x) => x[1].toUpperCase());
-const filename = 'index.ts';
+const filename = 'index.tsx';
 
 await fs.writeFile(
   filename,
   "// This is a generated file, don't update manually.\n\nimport { lazy } from 'react';\n\nimport { type Guide } from './types';\n"
 );
 
-for (const { name } of metadata) {
+for (const { name, logo } of metadata) {
   // eslint-disable-next-line no-await-in-loop
   await fs.appendFile(filename, `import ${camelCase(name)} from './${name}/index';\n`);
+
+  if (logo && !logo.endsWith('.svg')) {
+    // eslint-disable-next-line no-await-in-loop
+    await fs.appendFile(filename, `import ${camelCase(name)}Logo from './${name}/${logo}';\n`);
+  }
 }
 
 await fs.appendFile(filename, '\n');
-await fs.appendFile(filename, 'const guides: Readonly<Guide[]> = Object.freeze([');
+await fs.appendFile(filename, 'export const guides: Readonly<Guide[]> = Object.freeze([');
+
+const getLogo = ({ name, logo }) => {
+  if (!logo) return 'undefined';
+  if (logo.endsWith('.svg')) return `lazy(async () => import('./${name}/${logo}'))`;
+  return `({ className }: { readonly className?: string }) => <img src={${camelCase(name)}Logo} alt="${name}" className={className} />`;
+};
 
 for (const { name, logo, order } of metadata) {
   // eslint-disable-next-line no-await-in-loop
@@ -64,11 +75,11 @@ for (const { name, logo, order } of metadata) {
   {
     order: ${order},
     id: '${name}',
-    Logo: ${logo ? `lazy(async () => import('./${name}/${logo}'))` : 'undefined'},
+    Logo: ${getLogo({ name, logo })},
     Component: lazy(async () => import('./${name}/README.mdx')),
     metadata: ${camelCase(name)},
   },`
   );
 }
 
-await fs.appendFile(filename, ']);\n\nexport default guides;\n');
+await fs.appendFile(filename, ']);\n');

packages/console/src/assets/docs/guides/index.ts → packages/console/src/assets/docs/guides/index.tsx

@@ -2,43 +2,44 @@
 
 import { lazy } from 'react';
 
-import { type Guide } from './types';
-import webNextAppRouter from './web-next-app-router/index';
+import apiExpress from './api-express/index';
+import apiPython from './api-python/index';
+import apiSpringBoot from './api-spring-boot/index';
+import m2mGeneral from './m2m-general/index';
+import nativeAndroid from './native-android/index';
+import nativeCapacitor from './native-capacitor/index';
 import nativeExpo from './native-expo/index';
+import nativeFlutter from './native-flutter/index';
+import nativeIosSwift from './native-ios-swift/index';
 import spaAngular from './spa-angular/index';
+import { type Guide } from './types';
+import webNextAppRouter from './web-next-app-router/index';
 import spaReact from './spa-react/index';
-import m2mGeneral from './m2m-general/index';
 import webExpress from './web-express/index';
 import webNext from './web-next/index';
+import webNextAuth from './web-next-auth/index';
+import webNuxt from './web-nuxt/index';
+import webPhp from './web-php/index';
 import webSveltekit from './web-sveltekit/index';
 import webGo from './web-go/index';
-import webNextAuth from './web-next-auth/index';
 import webJavaSpringBoot from './web-java-spring-boot/index';
 import webGptPlugin from './web-gpt-plugin/index';
 import spaVue from './spa-vue/index';
-import nativeIosSwift from './native-ios-swift/index';
-import nativeAndroid from './native-android/index';
 import spaVanilla from './spa-vanilla/index';
-import webNuxt from './web-nuxt/index';
-import webPhp from './web-php/index';
 import webRuby from './web-ruby/index';
+import webRubyLogo from './web-ruby/logo.webp';
 import spaWebflow from './spa-webflow/index';
 import webWordpress from './web-wordpress/index';
 import webPython from './web-python/index';
-import nativeCapacitor from './native-capacitor/index';
 import webRemix from './web-remix/index';
-import nativeFlutter from './native-flutter/index';
 import webDotnetCore from './web-dotnet-core/index';
 import webDotnetCoreMvc from './web-dotnet-core-mvc/index';
 import webDotnetCoreBlazorServer from './web-dotnet-core-blazor-server/index';
 import webDotnetCoreBlazorWasm from './web-dotnet-core-blazor-wasm/index';
 import webOutline from './web-outline/index';
-import apiExpress from './api-express/index';
-import apiPython from './api-python/index';
-import apiSpringBoot from './api-spring-boot/index';
 import thirdPartyOidc from './third-party-oidc/index';
 
-const guides: Readonly<Guide[]> = Object.freeze([
+export const guides: Readonly<Guide[]> = Object.freeze([
   {
     order: 1,
     id: 'web-next-app-router',
@@ -168,7 +169,9 @@ const guides: Readonly<Guide[]> = Object.freeze([
   {
     order: 2,
     id: 'web-ruby',
-    Logo: lazy(async () => import('./web-ruby/logo.webp')),
+    Logo: ({ className }: { readonly className?: string }) => (
+      <img src={webRubyLogo} alt="web-ruby" className={className} />
+    ),
     Component: lazy(async () => import('./web-ruby/README.mdx')),
     metadata: webRuby,
   },
@@ -250,32 +253,31 @@ const guides: Readonly<Guide[]> = Object.freeze([
     metadata: webOutline,
   },
   {
-    order: Infinity,
+    order: Number.POSITIVE_INFINITY,
     id: 'api-express',
     Logo: lazy(async () => import('./api-express/logo.svg')),
     Component: lazy(async () => import('./api-express/README.mdx')),
     metadata: apiExpress,
   },
   {
-    order: Infinity,
+    order: Number.POSITIVE_INFINITY,
     id: 'api-python',
     Logo: lazy(async () => import('./api-python/logo.svg')),
     Component: lazy(async () => import('./api-python/README.mdx')),
     metadata: apiPython,
   },
   {
-    order: Infinity,
+    order: Number.POSITIVE_INFINITY,
     id: 'api-spring-boot',
     Logo: lazy(async () => import('./api-spring-boot/logo.svg')),
     Component: lazy(async () => import('./api-spring-boot/README.mdx')),
     metadata: apiSpringBoot,
   },
   {
-    order: Infinity,
+    order: Number.POSITIVE_INFINITY,
     id: 'third-party-oidc',
     Logo: lazy(async () => import('./third-party-oidc/logo.svg')),
     Component: lazy(async () => import('./third-party-oidc/README.mdx')),
     metadata: thirdPartyOidc,
-  },]);
-
-export default guides;
+  },
+]);

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

@@ -40,9 +40,12 @@ export type GuideMetadata = {
 
 /** The guide instance to build in the console. */
 export type Guide = {
+  order: number;
   /** The unique identifier of the guide. */
   id: string;
-  Logo: LazyExoticComponent<SvgComponent>;
+  Logo:
+    | LazyExoticComponent<SvgComponent>
+    | ((props: { readonly className?: string }) => JSX.Element);
   Component: LazyExoticComponent<FunctionComponent<MDXProps>>;
   metadata: Readonly<GuideMetadata>;
 };

packages/console/src/assets/index.d.ts

@@ -4,3 +4,13 @@ declare module '*.svg' {
   const value: SvgComponent;
   export default value;
 }
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}

packages/console/src/components/Guide/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import guides from '@/assets/docs/guides';
+import { guides } from '@/assets/docs/guides';
 import { type Guide } from '@/assets/docs/guides/types';
 import {
   thirdPartyAppCategory,

packages/console/src/components/Guide/index.tsx

@@ -3,7 +3,7 @@ import { MDXProvider } from '@mdx-js/react';
 import classNames from 'classnames';
 import { type LazyExoticComponent, Suspense, createContext, useContext } from 'react';
 
-import guides from '@/assets/docs/guides';
+import { guides } from '@/assets/docs/guides';
 import { type GuideMetadata } from '@/assets/docs/guides/types';
 import Button from '@/ds-components/Button';
 import CodeEditor from '@/ds-components/CodeEditor';
@@ -17,7 +17,9 @@ import * as styles from './index.module.scss';
 
 export type GuideContextType = {
   metadata: Readonly<GuideMetadata>;
-  Logo?: LazyExoticComponent<SvgComponent>;
+  Logo?:
+    | LazyExoticComponent<SvgComponent>
+    | ((props: { readonly className?: string }) => JSX.Element);
   isCompact: boolean;
   app?: ApplicationResponse;
   endpoint?: string;

packages/console/src/pages/ApiResourceDetails/components/ApiGuide/index.tsx

@@ -2,7 +2,7 @@ import { type Resource } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { useContext, useMemo } from 'react';
 
-import guides from '@/assets/docs/guides';
+import { guides } from '@/assets/docs/guides';
 import Guide, { GuideContext, type GuideContextType } from '@/components/Guide';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import useCustomDomain from '@/hooks/use-custom-domain';

packages/console/src/pages/ApplicationDetails/components/AppGuide/index.tsx

@@ -2,7 +2,7 @@ import { type ApplicationResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { useContext, useMemo } from 'react';
 
-import guides from '@/assets/docs/guides';
+import { guides } from '@/assets/docs/guides';
 import Guide, { GuideContext, type GuideContextType } from '@/components/Guide';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import useCustomDomain from '@/hooks/use-custom-domain';