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

@@ -22,6 +22,7 @@ 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';
@@ -168,7 +169,7 @@ 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,
   },
@@ -277,5 +278,3 @@ const guides: Readonly<Guide[]> = Object.freeze([
     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';