feat: Add playground to navbar

tjtanjin · tjtanjin · commit 55eff6231085 · 2025-06-14T01:54:02.000+08:00
diff --git a/public/locales/en/components/navigationbar.json b/public/locales/en/components/navigationbar.json
@@ -3,6 +3,7 @@
     "documentation": "Documentation",
     "plugins": "Plugins",
     "themes": "Themes",
+    "playground": "Playground",
     "theme_builder": "Theme Builder",
     "about_us": "About Us",
     "about_us.our_team": "Our Team",
diff --git a/public/locales/zh/components/navigationbar.json b/public/locales/zh/components/navigationbar.json
@@ -3,6 +3,7 @@
     "documentation": "文档",
     "plugins": "插件",
     "themes": "主题",
+    "playground": "测试",
     "theme_builder": "主题构建器",
     "about_us": "关于我们",
     "about_us.our_team": "我们的团队",
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
@@ -1,4 +1,10 @@
-import { DescriptionOutlined, ExtensionOutlined, InfoOutlined, PaletteOutlined } from '@mui/icons-material';
+import {
+  DescriptionOutlined,
+  ExtensionOutlined,
+  InfoOutlined,
+  PaletteOutlined,
+  PsychologyOutlined,
+} from '@mui/icons-material';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import CloseIcon from '@mui/icons-material/Close';
 // import CodeIcon from '@mui/icons-material/Code';
@@ -167,6 +173,9 @@ const NavigationBar: React.FC<{
         <Button component={Link} to="/themes" sx={generalNavLinkSx}>
           {t('navigation_bar.themes')}
         </Button>
+        <Button component={Link} to="/playground" sx={generalNavLinkSx}>
+          {t('navigation_bar.playground')}
+        </Button>
         <Box>
           <Button
             onClick={(event) => setAboutMenuAnchor((prev) => (prev ? null : event.currentTarget))}
@@ -435,6 +444,10 @@ const NavigationBar: React.FC<{
               <PaletteOutlined sx={{ mr: 1 }} />
               <ListItemText primary={t('navigation_bar.themes')} />
             </ListItem>
+            <ListItem component={Link} to="/playground" sx={generalNavLinkSx}>
+              <PsychologyOutlined sx={{ mr: 1 }} />
+              <ListItemText primary={t('navigation_bar.playground')} />
+            </ListItem>
             {/* <ListItem component={Link} to="/theme-builder" sx={generalNavLinkSx}>
               <CodeIcon sx={{ mr: 1 }} />
               <ListItemText primary={t('navigation_bar.theme_builder')} />
diff --git a/src/interfaces/Plugin.ts b/src/interfaces/Plugin.ts
@@ -15,4 +15,5 @@ export type Plugin = {
   userId: string;
   github: string;
   packageUrl: string;
+  isDataMissing?: boolean;
 };
diff --git a/src/interfaces/Theme.ts b/src/interfaces/Theme.ts
@@ -19,4 +19,5 @@ export type Theme = {
   tags: string[];
   github: string;
   content: ThemeContent;
+  isDataMissing?: boolean;
 };
diff --git a/src/services/plugins/apiService.ts b/src/services/plugins/apiService.ts
@@ -7,7 +7,7 @@ import { galleryApiFetch } from '@/utils';
 import { resetPluginsCache } from '../plugins/cacheService';
 import { getNpmPluginData } from './npmService';
 
-const fetchPluginsFromApi = async (url: string): Promise<Plugin[]> => {
+const fetchPluginsFromApi = async (url: string): Promise<(Plugin | Partial<Plugin>)[]> => {
   try {
     let apiPlugins = null;
 
@@ -35,9 +35,35 @@ const fetchPluginsFromApi = async (url: string): Promise<Plugin[]> => {
 /**
  * Fetches plugins information from npm.
  */
-const fetchPluginsFromNpm = async (apiPlugins: ApiPlugin[]): Promise<Plugin[]> => {
-  // todo: good to cache themes already fetched to reduce calls to cdn
-  return await Promise.all(apiPlugins.map((apiPlugin) => getNpmPluginData(apiPlugin)));
+const fetchPluginsFromNpm = async (apiPlugins: ApiPlugin[]): Promise<(Plugin | Partial<Plugin>)[]> => {
+  const settledResults = await Promise.allSettled(apiPlugins.map((apiPlugin) => getNpmPluginData(apiPlugin)));
+
+  return settledResults.map((result, index) => {
+    const apiPlugin = apiPlugins[index]; // Get the original apiPlugin for fallback data
+
+    if (result.status === 'fulfilled') {
+      return result.value;
+    } else {
+      // Handle rejected promise from getNpmPluginData
+      // This case should be rare if getNpmPluginData's try/catch is effective
+      console.error(`Error processing plugin ${apiPlugin.id} after NPM fetch attempt:`, result.reason);
+      return {
+        id: apiPlugin.id,
+        name: apiPlugin.name || apiPlugin.id || 'Plugin Name Unavailable',
+        authorName: 'N/A',
+        description: 'Plugin details are currently unavailable due to an unexpected error.',
+        version: 'N/A',
+        isDataMissing: true,
+        favoritesCount: apiPlugin.favoritesCount,
+        isFavorite: apiPlugin.isFavorite ?? false,
+        userId: apiPlugin.userId,
+        createdAt: apiPlugin.createdAt,
+        updatedAt: apiPlugin.updatedAt,
+        keywords: [],
+        packageUrl: apiPlugin.packageUrl,
+      };
+    }
+  });
 };
 
 const addPluginToFavorites = async (plugin: Plugin) => {
diff --git a/src/services/plugins/npmService.ts b/src/services/plugins/npmService.ts
@@ -1,4 +1,5 @@
 import { ApiPlugin } from '@/interfaces/ApiPlugin';
+import { Plugin } from '@/interfaces/Plugin';
 
 import { Endpoints } from '../../constants/Endpoints';
 
@@ -7,36 +8,75 @@ import { Endpoints } from '../../constants/Endpoints';
  *
  * @param themeId id of theme to fetch data for
  */
-const getNpmPluginData = async (plugin: ApiPlugin) => {
+const getNpmPluginData = async (apiPlugin: ApiPlugin): Promise<Plugin | Partial<Plugin>> => {
   // check if plugin is valid
-  if (!plugin.id || typeof plugin.id !== 'string') {
-    throw new Error('Invalid plugin ID provided');
+  if (!apiPlugin.id || typeof apiPlugin.id !== 'string') {
+    // This case should ideally not happen if data is validated upstream
+    // but as a safeguard:
+    console.error('Invalid plugin ID provided to getNpmPluginData:', apiPlugin);
+    return {
+      id: apiPlugin.id || 'unknown-id',
+      name: apiPlugin.name || apiPlugin.id || 'Plugin Name Unavailable',
+      authorName: 'N/A',
+      description: apiPlugin.description || 'No description available.',
+      version: 'N/A',
+      isDataMissing: true,
+      favoritesCount: apiPlugin.favoritesCount,
+      isFavorite: apiPlugin.isFavorite ?? false,
+      userId: apiPlugin.userId,
+      createdAt: apiPlugin.createdAt,
+      updatedAt: apiPlugin.updatedAt,
+      keywords: [],
+      packageUrl: apiPlugin.packageUrl,
+    };
   }
 
-  // fetch package data from npm registry
-  const response = await fetch(`${Endpoints.fetchNpmPlugins}/${encodeURIComponent(plugin.id)}/latest`);
-  const pluginData = await response.json();
+  try {
+    // fetch package data from npm registry
+    const response = await fetch(`${Endpoints.fetchNpmPlugins}/${encodeURIComponent(apiPlugin.id)}/latest`);
+    if (!response.ok) {
+      throw new Error(`NPM API request failed with status ${response.status}`);
+    }
+    const pluginData = await response.json();
+    const authorImg = `https://avatars.githubusercontent.com/${pluginData.author.name}`;
+    const imageUrl = pluginData.pluginLogo || null; // Assuming pluginLogo can be null/undefined
 
-  const authorImg = `https://avatars.githubusercontent.com/${pluginData.author.name}`;
-  const imageUrl = pluginData.pluginLogo || '';
-
-  return {
-    authorImg,
-    authorName: pluginData.author.name,
-    createdAt: plugin.createdAt,
-    description: pluginData.description,
-    favoritesCount: plugin.favoritesCount,
-    github: pluginData.repository,
-    id: plugin.id,
-    imageUrl,
-    isFavorite: plugin.isFavorite ?? false,
-    keywords: pluginData.keywords,
-    name: pluginData.name,
-    packageUrl: plugin.packageUrl,
-    updatedAt: plugin.updatedAt,
-    userId: plugin.userId,
-    version: pluginData.version,
-  };
+    return {
+      id: apiPlugin.id,
+      name: pluginData.name || apiPlugin.name || apiPlugin.id, // Use fetched name, fallback to apiPlugin name then id
+      authorName: pluginData.author?.name || 'N/A',
+      description: pluginData.description || 'No description available.',
+      version: pluginData.version || 'N/A',
+      isDataMissing: false,
+      favoritesCount: apiPlugin.favoritesCount,
+      isFavorite: apiPlugin.isFavorite ?? false,
+      userId: apiPlugin.userId,
+      createdAt: apiPlugin.createdAt,
+      updatedAt: apiPlugin.updatedAt,
+      imageUrl,
+      authorImg,
+      github: pluginData.repository?.url || pluginData.repository || null, // Handle repository being object or string
+      keywords: pluginData.keywords || [],
+      packageUrl: apiPlugin.packageUrl,
+    };
+  } catch (error) {
+    console.error(`Error fetching plugin data from NPM for ${apiPlugin.id}:`, error);
+    return {
+      id: apiPlugin.id,
+      name: apiPlugin.name || apiPlugin.id || 'Plugin Name Unavailable',
+      authorName: 'N/A',
+      description: 'Plugin details are currently unavailable due to an external service issue.',
+      version: 'N/A',
+      isDataMissing: true,
+      favoritesCount: apiPlugin.favoritesCount,
+      isFavorite: apiPlugin.isFavorite ?? false,
+      userId: apiPlugin.userId,
+      createdAt: apiPlugin.createdAt,
+      updatedAt: apiPlugin.updatedAt,
+      keywords: [],
+      packageUrl: apiPlugin.packageUrl,
+    };
+  }
 };
 
 export { getNpmPluginData };
diff --git a/src/services/themes/apiService.ts b/src/services/themes/apiService.ts
@@ -7,7 +7,7 @@ import { galleryApiFetch } from '@/utils';
 import { resetThemesCache } from '../themes/cacheService';
 import { getGitHubThemeData } from '../themes/gitHubService';
 
-const fetchThemesFromApi = async (url: string): Promise<Theme[]> => {
+const fetchThemesFromApi = async (url: string): Promise<(Theme | Partial<Theme>)[]> => {
   try {
     let apiThemes = null;
 
@@ -35,9 +35,41 @@ const fetchThemesFromApi = async (url: string): Promise<Theme[]> => {
 /**
  * Fetches themes information from github (or more accurately, jsdelivr cache).
  */
-const fetchThemesFromGitHub = async (apiThemes: ApiTheme[]): Promise<Theme[]> => {
-  // todo: good to cache themes already fetched to reduce calls to cdn
-  return await Promise.all(apiThemes.map((apiTheme) => getGitHubThemeData(apiTheme)));
+const fetchThemesFromGitHub = async (apiThemes: ApiTheme[]): Promise<(Theme | Partial<Theme>)[]> => {
+  const settledResults = await Promise.allSettled(apiThemes.map((apiTheme) => getGitHubThemeData(apiTheme)));
+
+  return settledResults.map((result, index) => {
+    const apiTheme = apiThemes[index]; // Get the original apiTheme for fallback data
+
+    if (result.status === 'fulfilled') {
+      return result.value;
+    } else {
+      // Handle rejected promise from getGitHubThemeData
+      // This case should be rare if getGitHubThemeData's try/catch is effective
+      console.error(`Error processing theme ${apiTheme.id} after GitHub fetch attempt:`, result.reason);
+      // Construct a partial theme, similar to how getGitHubThemeData would in its catch block
+      return {
+        id: apiTheme.id,
+        name: apiTheme.name || apiTheme.id || 'Theme Name Unavailable',
+        authorName: 'N/A',
+        description: 'Theme details are currently unavailable due to an unexpected error.',
+        version: 'N/A',
+        isDataMissing: true,
+        favoritesCount: apiTheme.favoritesCount || 0,
+        isFavorite: apiTheme.isFavorite ?? false,
+        github: 'N/A',
+        tags: [],
+        content: {
+          cssStyles: '',
+          inlineStyles: '',
+          settings: '',
+        },
+        // Include other fields from apiTheme if necessary and available
+        createdAt: apiTheme.createdAt,
+        updatedAt: apiTheme.updatedAt,
+      };
+    }
+  });
 };
 
 const addThemeToFavorites = async (theme: Theme) => {
diff --git a/src/services/themes/gitHubService.ts b/src/services/themes/gitHubService.ts
