@bbki.ng/site 5.5.19 → 5.5.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.5.21
+
+### Patch Changes
+
+- 166aa70: fix loading state error
+
+## 5.5.20
+
+### Patch Changes
+
+- 6748bb3: fix null pointer exception
+
 ## 5.5.19
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.19",
+  "version": "5.5.21",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

package/src/blog/app.tsx

@@ -1,75 +1,32 @@
-import React, { useContext } from 'react';
-import { Outlet, Route, Routes, useNavigate } from 'react-router-dom';
-import { Logo, Nav, NotFound, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
+import React from 'react';
+import { Outlet, Route, Routes } from 'react-router-dom';
+import { NotFound } from '@bbki.ng/ui';
 
-import { usePaths } from '@/hooks';
 import ArticlePage from '@/pages/extensions/txt/article';
 import Txt from '@/pages/extensions/txt';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
 import { Slot } from '#/core/components/SlotComp';
 import { usePlugins } from '#/core/hooks/use_plugins';
 import { SWR } from '@/swr';
+import type { PluginID } from '#/types/plugin';
 
 import { Cover, Streaming } from './pages';
+import { usePluginEntries } from './hooks/use_plugin_entries';
+import { BaseLayout } from './components/BaseLayout';
 
-const Layout = () => {
-  const paths = usePaths();
-  const { isLoading } = useContext(GlobalLoadingContext);
-
-  const nav = useNavigate();
-
-  const defaultLogo = (
-    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
-  );
-
-  return (
-    <Page
-      nav={
-        <Nav
-          paths={paths}
-          className="gradient-blur-cover select-none"
-          loading={isLoading}
-          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
-          style={{
-            paddingTop: 'var(--safe-top)',
-            transition: 'all .2s ease-in-out',
-          }}
-        />
-      }
-      main={
-        <Grid
-          leftAside={
-            <div className="py-32 px-6">
-              <Slot name="leftCol" data={paths} />
-            </div>
-          }
-          rightAside={
-            <div className="py-32 px-6">
-              <Slot name="rightCol" data={paths} />
-            </div>
-          }
-        >
-          <Container className="py-32">
-            <ErrorBoundary>
-              <Outlet />
-            </ErrorBoundary>
-          </Container>
-        </Grid>
-      }
-    />
-  );
-};
+const APP_PLUGIN_IDS: Array<PluginID> = ['sticker', 'xwy', 'extra-cd' /*'extra-entry'*/];
 
 export const App = () => {
-  usePlugins(['sticker', 'xwy', 'extra-cd']);
+  usePlugins(APP_PLUGIN_IDS);
+
+  const pluginEntries = usePluginEntries();
 
   return (
     <SWR>
       <BBContext>
         <Routes>
-          <Route path="/" element={<Layout />}>
+          <Route path="/" element={<BaseLayout />}>
             <Route index element={<Cover />} />
 
             <Route path="blog" element={<Outlet />}>
@@ -79,6 +36,13 @@ export const App = () => {
 
             <Route path="bot" element={<BotRedirect />} />
             <Route path="now" element={<Streaming />} />
+            {pluginEntries?.map(route => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={<Slot name="route" data={route} />}
+              />
+            ))}
           </Route>
           <Route path="*" element={<NotFound />} />
         </Routes>

package/src/blog/components/BaseLayout.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { useNavigate, Outlet } from 'react-router-dom';
+import { Logo, Nav, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
+
+import { Slot } from '#/core/components/SlotComp';
+import { usePaths } from '@/hooks';
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+
+export const BaseLayout = () => {
+  const paths = usePaths();
+  const { isLoading } = useContext(GlobalLoadingContext);
+
+  const nav = useNavigate();
+
+  const defaultLogo = (
+    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
+  );
+
+  return (
+    <Page
+      nav={
+        <Nav
+          paths={paths}
+          className="gradient-blur-cover select-none"
+          loading={isLoading}
+          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
+          style={{
+            paddingTop: 'var(--safe-top)',
+            transition: 'all .2s ease-in-out',
+          }}
+        />
+      }
+      main={
+        <Grid
+          leftAside={
+            <div className="py-32 px-6">
+              <Slot name="leftCol" data={paths} />
+            </div>
+          }
+          rightAside={
+            <div className="py-32 px-6">
+              <Slot name="rightCol" data={paths} />
+            </div>
+          }
+        >
+          <Container className="py-32">
+            <ErrorBoundary>
+              <Outlet />
+            </ErrorBoundary>
+          </Container>
+        </Grid>
+      }
+    />
+  );
+};

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -7,7 +7,7 @@ import { useFingerprint } from '@/hooks/use_fingerprint';
 const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
 
 export const EffectContextProvider = (props: { children: ReactNode }) => {
-  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
+  const { isLoading } = useContext(GlobalLoadingContext);
   const { deviceId } = useFingerprint();
 
   const effects: Effect[] = useMemo(() => {
@@ -15,13 +15,8 @@ export const EffectContextProvider = (props: { children: ReactNode }) => {
     if (deviceId) wmLines.push(deviceId);
     wmLines.push('hello world');
 
-    return [
-      grain(),
-      paper(),
-      spiral({ active: isLoading || isFontLoading }),
-      watermark({ lines: wmLines }),
-    ];
-  }, [isLoading, isFontLoading, deviceId]);
+    return [grain(), paper(), spiral({ active: isLoading }), watermark({ lines: wmLines })];
+  }, [isLoading, deviceId]);
 
   return (
     <>

package/src/blog/components/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { LinkList } from '@bbki.ng/ui';
+import { LinkList, LinkListProps } from '@bbki.ng/ui';
 
-export { MySuspense } from './my_suspense';
-
-export const CenterLinkList = (props: any) => {
+export const CenterLinkList = (props: LinkListProps) => {
   return (
     <div className="flex justify-center relative h-full">
       <LinkList {...props} />

package/src/blog/context/global_loading_state_provider.tsx

@@ -1,19 +1,15 @@
 import React, { createContext, ReactNode, useState, useCallback, useMemo } from 'react';
 
-import { useFontLoading } from '@/hooks/use_font_loading';
-
 type LoadingStates = Map<string, boolean>;
 
 type LoadingContext = {
   isLoading: boolean;
-  isFontLoading: boolean;
   register: (id: string) => void;
   setLoading: (id: string, loading: boolean) => void;
   unregister: (id: string) => void;
 };
 
 export const GlobalLoadingContext = createContext<LoadingContext>({
-  isFontLoading: false,
   isLoading: false,
   register: () => {},
   setLoading: () => {},
@@ -22,7 +18,6 @@ export const GlobalLoadingContext = createContext<LoadingContext>({
 
 export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
   const [loadingStates, setLoadingStates] = useState<LoadingStates>(new Map());
-  const isFontLoading = useFontLoading();
 
   const register = useCallback((id: string) => {
     setLoadingStates(prev => {
@@ -49,18 +44,17 @@ export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
   }, []);
 
   const isLoading = useMemo(() => {
-    return Array.from(loadingStates.values()).some(Boolean) || isFontLoading;
-  }, [loadingStates, isFontLoading]);
+    return Array.from(loadingStates.values()).some(Boolean);
+  }, [loadingStates]);
 
   const contextValue = useMemo(
     () => ({
       isLoading,
-      isFontLoading,
       register,
       setLoading,
       unregister,
     }),
-    [isLoading, isFontLoading, register, setLoading, unregister]
+    [isLoading, register, setLoading, unregister]
   );
 
   return (

package/src/blog/hooks/use_loading.ts

@@ -20,7 +20,7 @@ export function useGlobalLoading(id: string | undefined, loading: boolean | unde
     return () => {
       unregister(id);
     };
-  }, [id, loading]);
+  }, [id, loading, register, setLoading, unregister]);
 
   return isLoading;
 }

package/src/blog/hooks/use_plugin_entries.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type PathRouteProps } from 'react-router-dom';
+
+import { useMiddlewareRunner } from '#/core/hooks';
+
+const protectedRoutesSet = new Set<string>([
+  '/bot',
+  '/now',
+  '/',
+  '/blog',
+  '/blog/:title',
+  'default',
+]);
+
+type PluginRoute = Omit<PathRouteProps, 'element'>;
+
+export const usePluginEntries = () => {
+  const [fullRoutes, setFullRoutes] = useState<Array<PluginRoute>>([]);
+  const runRef = useRef<(input: Array<PluginRoute>) => Promise<Array<PluginRoute>>>(() =>
+    Promise.resolve([])
+  );
+
+  const onMiddlewareChange = useCallback(() => {
+    runRef.current([]).then(setFullRoutes);
+  }, []);
+
+  const { run } = useMiddlewareRunner<Array<PluginRoute>>({
+    hookPoint: 'extendedRoutes',
+    onMiddlewareChange,
+  });
+
+  runRef.current = run;
+
+  useEffect(() => {
+    run([]).then(setFullRoutes);
+  }, [run]);
+
+  const safeRoutes = fullRoutes?.filter(route => {
+    if ('path' in route) {
+      return !protectedRoutesSet.has(route.path);
+    }
+    return false;
+  }) as Array<PluginRoute>;
+
+  console.log('safe plugin routes:', safeRoutes);
+
+  return safeRoutes ?? [];
+};

package/src/blog/hooks/use_posts.ts

@@ -1,10 +1,11 @@
 import useSWR from 'swr';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useGlobalLoading } from '@/hooks';
 import { baseFetcher } from '@/utils';
 import { API_ENDPOINT } from '@/constants/routes';
-import { useMiddlewareTransData } from '#/core/hooks';
+import { IPost } from '#/types/posts';
+import { useMiddlewareRunner } from '#/core/hooks/useMiddlewareTransData';
 
 const isProd = true;
 const POSTS_API = !isProd ? '/api/posts' : `${API_ENDPOINT}/posts`;
@@ -28,34 +29,40 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
   const baseTitleList: TitleListItem[] = useMemo(() => {
     if (!data || swrError) return [];
 
-    return data.map((p: any) => ({
+    return data.map((p: IPost) => ({
       name: p.title,
       to: p.title,
       children: p.title,
     }));
   }, [data, swrError]);
 
+  const [fullTitleList, setFullTitleList] = useState<TitleListItem[]>(baseTitleList);
+
   // Use middleware hook to transform title list
   const {
-    data: titleList,
     loading: isTransforming,
     error: transformError,
-  } = useMiddlewareTransData({
+    run,
+  } = useMiddlewareRunner<TitleListItem[]>({
     hookPoint: 'transformTitleList',
-    baseData: baseTitleList,
-    immediate: baseTitleList.length > 0,
   });
 
+  useEffect(() => {
+    if (baseTitleList.length > 0) {
+      run(baseTitleList).then(setFullTitleList);
+    }
+  }, [baseTitleList, run]);
+
   const gLoading = useGlobalLoading('posts', isDataLoading || isTransforming);
 
   const posts =
     isDataLoading || name === '' || swrError || !data
       ? data
-      : data.find((p: any) => p.title === name);
+      : data.find((p: IPost) => p.title === name);
 
   return {
     posts,
-    titleList: titleList ?? [],
+    titleList: fullTitleList ?? [],
     isError: swrError || transformError,
     isLoading: gLoading,
   };

package/src/blog/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+
 import App from './app';
 import './main.css';
 

package/src/blog/pages/cover/index.tsx

@@ -1,31 +1,40 @@
-import React, { useContext } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { LinkProps } from '@bbki.ng/ui';
+
 import { CenterLinkList } from '@/components';
-import { GlobalRoutesContext } from '@/context/global_routes_provider';
+import { useMiddlewareRunner } from '#/core/hooks';
+
+export const Cover = (_: { className?: string }) => {
+  const baseEntries: Array<LinkProps> = useMemo(
+    () => [
+      {
+        to: '/blog',
+        children: 'cd ./blog',
+      },
+      {
+        to: '/now',
+        children: 'cd ./now',
+      },
+    ],
+    []
+  );
+
+  const [entries, setEntries] = React.useState<Array<LinkProps>>(baseEntries);
+
+  const { run } = useMiddlewareRunner<Array<LinkProps>>({
+    hookPoint: 'transformCoverEntry',
+    onMiddlewareChange: () => {
+      run(baseEntries).then(setEntries);
+    },
+  });
+
+  useEffect(() => {
+    run(baseEntries).then(setEntries);
+  }, [baseEntries, run]);
 
-export const Cover = (props: { className?: string }) => {
-  const globalRouteCtx = useContext(GlobalRoutesContext);
-  const routes = globalRouteCtx.globalRoutes;
-  const pluginEntry = routes.length > 0 ? [{ to: '/plugins', name: 'cd ./plugins' }] : [];
   return (
     <>
-      <CenterLinkList
-        className="select-none"
-        links={[
-          {
-            to: '/blog',
-            name: 'cd ./blog',
-            children: 'cd ./blog',
-          },
-          {
-            to: '/now',
-            name: 'cd ./now',
-            children: 'cd ./now',
-          },
-          ...pluginEntry,
-        ]}
-        title=""
-        // footer={<Version className="" />}
-      />
+      <CenterLinkList className="select-none" links={entries} />
     </>
   );
 };

package/src/blog/pages/extensions/txt/article.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { NotFound } from '@bbki.ng/ui';
 import { useParams } from 'react-router-dom';
+
 import { usePosts } from '@/hooks/use_posts';
 import { ArticlePage } from '@/components/article';
 import { useBlogScrollReset } from '@/hooks/use_blog_scroll_pos_restoration';
 
-export default () => {
+function TxtArticle() {
   const { title } = useParams();
   const { posts, isError, isLoading } = usePosts(title);
 
@@ -19,7 +20,7 @@ export default () => {
     return <NotFound />;
   }
 
-  if (isLoading) {
+  if (isLoading || !posts) {
     return null;
   }
 
@@ -30,4 +31,6 @@ export default () => {
       <div dangerouslySetInnerHTML={{ __html: posts.content }} />
     </ArticlePage>
   );
-};
+}
+
+export default TxtArticle;

package/src/blog/pages/extensions/txt/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LinkProps, Button } from '@bbki.ng/ui';
+
 import { usePosts } from '@/hooks/use_posts';
 import { CenterLinkList } from '@/components';
 import { useBlogScroll, useBlogScrollRestoration } from '@/hooks/use_blog_scroll_pos_restoration';
@@ -9,43 +10,46 @@ type TxtProps = {
   articleList?: LinkProps[];
 };
 
-export default (props: TxtProps) => {
-  const { titleList, isLoading, isError } = usePosts();
+const Txt = (props: TxtProps) => {
+  const { titleList, isError } = usePosts();
 
   useBlogScrollRestoration();
 
   const { gotoTop } = useBlogScroll();
 
-  if (isLoading) {
-    return null;
-  }
-
   if (isError) {
-    return <CenterLinkList links={props.articleList} />;
+    return <CenterLinkList links={props.articleList ?? titleList} />;
   }
 
+  const links = props.articleList ?? titleList;
+
   return (
     <CenterLinkList
-      links={props.articleList || titleList}
-      loading={isLoading}
+      links={links}
       footer={
-        <Button onClick={gotoTop} className="mt-32">
-          <svg
-            data-testid="geist-icon"
-            height="16"
-            stroke-linejoin="round"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
-              fill="currentColor"
-            ></path>
-          </svg>
-        </Button>
+        links.length > 0 ? (
+          <Button onClick={gotoTop} className="mt-32">
+            <svg
+              data-testid="geist-icon"
+              height="16"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </Button>
+        ) : null
       }
     />
   );
 };
+
+Txt.displayName = 'Txt';
+
+export default Txt;

package/src/blog/swr.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
+
 import { cfApiFetcher } from '@/utils';
 
-export const SWR = (props: { children: any }) => {
+export const SWR = (props: { children: ReactNode }) => {
   return (
     <SWRConfig
       value={{

package/src/blog/types/path.ts

@@ -1,11 +1,4 @@
-import { FunctionComponent } from 'react';
-
 export interface pathObj {
   path?: string;
   name: string;
 }
-
-export interface compPathObj extends pathObj {
-  component: FunctionComponent<any>;
-  componentProps?: any;
-}

package/src/blog/utils/index.ts

@@ -32,24 +32,3 @@ export const withBBApi =
     fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: 'cors' });
 
 export const cfApiFetcher = withBBApi(baseFetcher)(API_ENDPOINT);
-
-export const changeFont = (type: FontType) => {
-  const rootDiv = document.getElementById('root');
-  if (rootDiv == null) {
-    return;
-  }
-
-  if (rootDiv.classList.contains(type)) {
-    return;
-  }
-
-  // remove all font type class
-  for (const fontType in FontType) {
-    rootDiv.classList.remove(fontType);
-  }
-
-  rootDiv.classList.add(type);
-
-  // save font type to local storage
-  localStorage.setItem('font', type);
-};

package/src/core/context/createPluginCtx.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, ComponentType } from 'react';
-import { IHostContext } from '#/types/hostApi';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
 
 /**
  * 创建插件专属的 Context 工具集
@@ -33,15 +34,19 @@ export function createPluginCtx<T>() {
    * const Enhanced = withCtx(picker, BaseComp)(ctx);
    * ctx.api.registerSlot('slotName', Enhanced, pluginId);
    */
-  const withCtx = <P extends { data?: any }>(
+  const withCtx = <P extends IComPropsRegisteredToSlot>(
     ctx: T,
     Component: React.ComponentType<P>
   ): ComponentType<P> => {
-    return (props: P) => (
-      <Ctx.Provider value={ctx}>
-        <Component {...props} />
-      </Ctx.Provider>
-    );
+    const WrappedComponent: React.FC<P> = props => {
+      return (
+        <Ctx.Provider value={ctx}>
+          <Component {...props} />
+        </Ctx.Provider>
+      );
+    };
+
+    return WrappedComponent;
   };
 
   return {

package/src/core/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useSlotComp } from './useSlotComp';
-export { useMiddlewareTransData } from './useMiddlewareTransData';
+export { useMiddlewareRunner } from './useMiddlewareTransData';
 export type {
   UseMiddlewareTransDataOptions,
   UseMiddlewareTransDataResult,

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,68 +1,54 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import { registry } from '#/core/registry';
 import type { HookPoint } from '#/types/slots';
 
-export interface UseMiddlewareTransDataOptions<T> {
+export interface UseMiddlewareTransDataOptions {
   hookPoint: HookPoint;
-  baseData: T;
-  immediate?: boolean;
+  onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
 }
 
 export interface UseMiddlewareTransDataResult<T> {
-  data: T | undefined;
   loading: boolean;
   error: Error | null;
-  run: () => Promise<T>;
+  run: (inputData: T) => Promise<T>;
 }
 
-export function useMiddlewareTransData<T>({
+export function useMiddlewareRunner<T>({
   hookPoint,
-  baseData,
-  immediate = true,
-}: UseMiddlewareTransDataOptions<T>): UseMiddlewareTransDataResult<T> {
-  const [data, setData] = useState<T | undefined>(undefined);
+  onMiddlewareChange,
+}: UseMiddlewareTransDataOptions): UseMiddlewareTransDataResult<T> {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const immediateRef = useRef(immediate);
-  immediateRef.current = immediate;
-
-  const run = useCallback(async (): Promise<T> => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const result = await registry.runMiddleware(hookPoint, baseData);
-      setData(result);
-      return result;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      setError(error);
-      throw error;
-    } finally {
-      setLoading(false);
-    }
-  }, [hookPoint, baseData]);
-
+  const run = useCallback(
+    async (inputData: T) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await registry.runMiddleware(hookPoint, inputData);
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [hookPoint]
+  );
+
+  // 仅通知，不执行
   useEffect(() => {
-    if (!immediateRef.current) return;
-
-    let cancelled = false;
-
-    run()
-      .then(result => {
-        if (cancelled) return;
-        setData(result);
-      })
-      .catch(() => {
-        // 错误已在 run 中设置到 state
-      });
+    const unsubscribe = registry.subscribeMiddleware(hookPoint, () => {
+      onMiddlewareChange?.();
+    });
 
     return () => {
-      cancelled = true;
+      unsubscribe();
     };
-  }, [hookPoint, baseData, run]);
+  }, [hookPoint, onMiddlewareChange]);
 
-  return { data, loading, error, run };
+  return { loading, error, run };
 }

package/src/core/hooks/useSlotComp.ts

@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from 'react';
 
-import { SlotName } from '#/types/slots';
+import { IComPropsRegisteredToSlot, SlotName } from '#/types/slots';
 
 import { registry } from '../registry';
 
 export const useSlotComp = (slotName: SlotName) => {
-  const [components, setComponents] = useState<React.ComponentType<any>[]>([]);
+  const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
+    () => registry.getComponents(slotName)
+  );
 
   useEffect(() => {
+    setComponents(registry.getComponents(slotName));
+
     const unsubscribe = registry.subscribe(() => {
       const comps = registry.getComponents(slotName);
       setComponents(comps);
@@ -16,7 +20,7 @@ export const useSlotComp = (slotName: SlotName) => {
     return () => {
       unsubscribe();
     };
-  }, []);
+  }, [slotName]);
 
   return components;
 };

package/src/core/hooks/use_plugins.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { pluginManager } from '#/core/pluginManager';
 import { PluginID } from '#/types/plugin';
@@ -13,11 +13,20 @@ import { PluginID } from '#/types/plugin';
  * usePlugins(['sticker', 'fontstyler']);
  */
 export const usePlugins = (pluginIds: Array<PluginID>) => {
+  const [done, setDone] = useState(false);
+
+  const loadAllPlugins = useCallback(async () => {
+    try {
+      await Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)));
+      setDone(true);
+    } catch (error) {
+      console.error('Error loading plugins:', error);
+    }
+  }, [pluginIds]);
+
   useEffect(() => {
     // 加载指定的插件
-    pluginIds.forEach(id => {
-      pluginManager.loadPlugin(id);
-    });
+    loadAllPlugins();
 
     return () => {
       // 卸载所有指定的插件
@@ -25,5 +34,7 @@ export const usePlugins = (pluginIds: Array<PluginID>) => {
         pluginManager.disablePlugin(id);
       });
     };
-  }, [pluginIds]);
+  }, [loadAllPlugins, pluginIds]);
+
+  return done;
 };

package/src/core/pluginManager.ts

@@ -70,7 +70,7 @@ class PluginManager {
       const ctx = this.createHostContext();
 
       if (p.onInstall) {
-        p.onInstall(ctx);
+        await p.onInstall(ctx);
       }
 
       this.activePlugins.set(pluginId, p);

package/src/core/registry.ts

@@ -20,6 +20,7 @@ export class Registry {
   private slots = new Map<SlotName, ISlotEntry[]>();
 
   private listeners = new Set<() => void>();
+  private middlewareListenerMap = new Map<HookPoint, Set<() => void>>();
 
   private middlewares = new Map<HookPoint, IMiddlewareEntry<unknown>[]>();
 
@@ -27,6 +28,22 @@ export class Registry {
     this.listeners.forEach(listener => listener());
   }
 
+  private broadcastMiddlewareChange(point: HookPoint) {
+    const listeners = this.middlewareListenerMap.get(point);
+    if (listeners) {
+      listeners.forEach(listener => listener());
+    }
+  }
+
+  subscribeMiddleware(hookPoint: HookPoint, listener: () => void) {
+    if (!this.middlewareListenerMap.has(hookPoint)) {
+      this.middlewareListenerMap.set(hookPoint, new Set());
+    }
+    const listeners = this.middlewareListenerMap.get(hookPoint)!;
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+
   subscribe(listener: () => void) {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -91,7 +108,10 @@ export class Registry {
     const newList = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
       (a, b) => (b.weight || 0) - (a.weight || 0)
     );
+
     this.middlewares.set(hookPoint, newList);
+
+    this.broadcastMiddlewareChange(hookPoint);
   }
 
   getComponents(slotName: SlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {

package/src/plugins/extra-entry/components/page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PathRouteProps } from 'react-router-dom';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const ExtendedRoutesPage = ({ data }: IComPropsRegisteredToSlot) => {
+  const route = data as Omit<PathRouteProps, 'element'>;
+
+  if (route.path === '/hello') {
+    return <div className="p-4 text-center">Hello from Extra Entry Plugin!</div>;
+  }
+
+  return <></>;
+};

package/src/plugins/extra-entry/index.ts

@@ -0,0 +1,32 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+import { buildEntryCreator } from '#/utils';
+
+import { ExtendedRoutesPage } from './components/page';
+
+export class ExtraEntryPlugin implements IPlugin {
+  id: string = 'extra-entry';
+  name: string = 'Extra Entry';
+  description?: string | undefined;
+  version: string = '1.0.0';
+  author?: string | undefined = 'bbki.ng';
+
+  onInstall?: ((ctx: IHostContext) => void | Promise<void>) | undefined = async (
+    ctx: IHostContext
+  ) => {
+    const entryCreator = buildEntryCreator(ctx);
+    entryCreator(
+      {
+        pageComponent: ExtendedRoutesPage,
+        path: '/hello',
+        label: 'cd ./hello',
+      },
+      this.id
+    );
+  };
+
+  onDisable?: (() => Promise<void> | void) | undefined;
+  onDestroy?: (() => void) | undefined;
+}
+
+export default new ExtraEntryPlugin();

package/src/plugins/manifest.ts

@@ -12,6 +12,12 @@ export const PLUGIN_MANIFEST = [
     description:
       'Provides additional change directory functionalities for enhanced user experience.',
   },
+  {
+    name: 'extra-entry',
+    id: 'extra-entry',
+    version: '0.1.0',
+    description: 'Provides extra entries for cover and extended routes.',
+  },
   {
     name: 'xwy',
     id: 'xwy',

package/src/plugins/xwy/const/index.ts

@@ -9,7 +9,7 @@ export const FontRules: Array<FontRule> = [
       src: '/fonts/xwy.woff2',
       format: 'woff2',
     },
-    extraCls: 'text-2xl',
+    extraCls: 'text-2xl w-[113px]',
     variant: 'special',
   },
 ];

package/src/types/plugin.ts

@@ -1,3 +1,7 @@
+import type React from 'react';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
 import { IHostContext } from './hostApi';
 
 export interface IPlugin {
@@ -12,4 +16,10 @@ export interface IPlugin {
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd';
+export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry';
+
+export interface IPluginEntry {
+  path: string;
+  label?: string;
+  pageComponent: React.ComponentType<IComPropsRegisteredToSlot>;
+}

package/src/types/posts.ts

@@ -5,3 +5,12 @@ export interface TitleListItem {
   className?: string;
   variant?: 'default' | 'special';
 }
+
+export interface IPost {
+  id: string;
+  title: string;
+  content: string;
+  author: string;
+  createdAt: string;
+  updatedAt: string;
+}

package/src/types/slots.ts

@@ -1,5 +1,11 @@
-export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow' | 'logo';
-export type HookPoint = 'filterPosts' | 'transformPostContent' | 'transformTitleList';
+export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow' | 'logo' | 'route';
+
+export type HookPoint =
+  | 'filterPosts'
+  | 'transformPostContent'
+  | 'transformTitleList'
+  | 'extendedRoutes'
+  | 'transformCoverEntry';
 
 export interface IComPropsRegisteredToSlot {
   data: unknown;

package/src/utils/index.tsx

@@ -0,0 +1,52 @@
+import { LinkProps, PathRouteProps } from 'react-router-dom';
+import React from 'react';
+
+import { IHostContext } from '#/types/hostApi';
+import { IPluginEntry } from '#/types/plugin';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const buildEntryCreator = (ctx: IHostContext) => (entry: IPluginEntry, id: string) => {
+  ctx.api.registerMiddleware(
+    'extendedRoutes',
+    (routes: Array<Omit<PathRouteProps, 'element'>>) => {
+      return [
+        ...routes,
+        {
+          path: entry.path,
+        },
+      ];
+    },
+    id,
+    10
+  );
+
+  ctx.api.registerSlot(
+    'route',
+    (props: IComPropsRegisteredToSlot) => {
+      const route = props.data as Omit<PathRouteProps, 'element'>;
+      if (route.path === entry.path) {
+        const Com = entry.pageComponent;
+        return <Com data={props.data} />;
+      }
+      return null;
+    },
+    id
+  );
+
+  if (!entry.label) return;
+
+  ctx.api.registerMiddleware(
+    'transformCoverEntry',
+    (entries: Array<LinkProps>) => {
+      return [
+        ...entries,
+        {
+          to: entry.path,
+          children: entry.label,
+        },
+      ];
+    },
+    id,
+    10
+  );
+};

package/src/blog/components/Auth.tsx

@@ -1,13 +0,0 @@
-import { Role, useRole } from '@/hooks/use_role';
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-
-export const Auth = (props: { children: any; shouldRedirect?: boolean; role?: Role[] }) => {
-  const myRole = useRole();
-
-  if (props.role && !props.role.includes(myRole)) {
-    return props.shouldRedirect ? <Navigate to={'/login'} /> : null;
-  }
-
-  return props.children;
-};

package/src/blog/components/DelayFadeIn/DelayFadeIn.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import cls from 'classnames';
-
-export type DelayFadeInProps = {
-  children: any;
-  delay: number;
-};
-
-export const DelayFadeIn = (props: DelayFadeInProps) => {
-  const [show, setShow] = React.useState(false);
-
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setShow(true);
-    }, props.delay);
-
-    return () => {
-      clearTimeout(id);
-    };
-  }, []);
-
-  const className = cls('transition-opacity', {
-    'opacity-100': show,
-    'opacity-0': !show,
-  });
-
-  return <div className={className}>{props.children}</div>;
-};

package/src/blog/components/Spinner.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useGlobalLoading } from '@/hooks';
-
-export const Spinner = (props: { disableDotIndicator?: boolean }) => {
-  const { disableDotIndicator } = props;
-
-  useGlobalLoading('spinner', !disableDotIndicator);
-
-  return <div className="h-full w-full grid place-items-center"></div>;
-};

package/src/blog/components/my_suspense.tsx

@@ -1,11 +0,0 @@
-import React, { ReactElement, ReactNode, Suspense } from 'react';
-import { ErrorBoundary } from '@bbki.ng/ui';
-import { Spinner } from './Spinner';
-
-export const MySuspense = (props: { children: ReactNode; fallback?: ReactElement }) => {
-  return (
-    <ErrorBoundary>
-      <Suspense fallback={<Spinner />}>{props.children}</Suspense>
-    </ErrorBoundary>
-  );
-};

package/src/blog/components/share/share-btn.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Button } from '@bbki.ng/ui';
-import { ShareIcon } from './share-icon';
-
-export const ShareBtn = ({ shareInfo }: { shareInfo: ShareData }) => {
-  const handleShare = async () => {
-    try {
-      await navigator.share(shareInfo);
-    } catch (error) {
-      const isAbortError = (error as Error).name === 'AbortError';
-      if (isAbortError) {
-        return;
-      }
-      console.error('Share failed:', (error as Error).message);
-    }
-  };
-
-  return (
-    <Button
-      size="sm"
-      className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
-      variant="ghost"
-      onClick={handleShare}
-    >
-      <ShareIcon />
-    </Button>
-  );
-};

package/src/blog/components/share/share-icon.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export const ShareIcon = () => (
-  <svg
-    data-testid="geist-icon"
-    height="12"
-    stroke-linejoin="round"
-    // style="color:currentColor"
-    viewBox="0 0 16 16"
-    width="12"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.29289 1.39644C7.68342 1.00592 8.31658 1.00592 8.70711 1.39644L11.7803 4.46966L12.3107 4.99999L11.25 6.06065L10.7197 5.53032L8.75 3.56065V10.25V11H7.25V10.25V3.56065L5.28033 5.53032L4.75 6.06065L3.68934 4.99999L4.21967 4.46966L7.29289 1.39644ZM13.5 9.24999V13.5H2.5V9.24999V8.49999H1V9.24999V14C1 14.5523 1.44771 15 2 15H14C14.5523 15 15 14.5523 15 14V9.24999V8.49999H13.5V9.24999Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);

package/src/blog/hooks/use_font_loading.ts

@@ -1,41 +0,0 @@
-import { useEffect, useState } from 'react';
-import { changeFont } from '@/utils';
-import { FontType } from '@/types/font';
-
-export const useFontLoading = () => {
-  const [isFontLoading, setIsFontLoading] = useState(false);
-
-  const handleFontLoading = () => {
-    setIsFontLoading(true);
-    document.fonts.ready.then(() => {
-      handleFontLoadingDone();
-    });
-  };
-
-  const handleFontLoadingDone = () => {
-    setIsFontLoading(false);
-    // setTimeout(() => {
-    // }, 500);
-  };
-
-  const handleFontLoadingError = () => {
-    setIsFontLoading(false);
-    changeFont(FontType.Mono);
-  };
-
-  useEffect(() => {
-    document.fonts.onloadingerror = handleFontLoadingError;
-    document.fonts.onloading = handleFontLoading;
-
-    document.fonts.ready.then(() => {
-      handleFontLoadingDone();
-    });
-
-    return () => {
-      document.fonts.onloadingerror = null;
-      document.fonts.onloading = null;
-    };
-  }, []);
-
-  return isFontLoading;
-};