@bbki.ng/site 5.5.33 → 5.5.35

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @bbki.ng/site
 
+## 5.5.35
+
+### Patch Changes
+
+- 86a9e69: fix padding
+
+## 5.5.34
+
+### Patch Changes
+
+- 648530c: fix lineheight
+- 346f6c7: plugin status sync to react
+
 ## 5.5.33
 
 ### Patch Changes

package/package.json

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

package/src/blog/app.tsx

@@ -15,37 +15,39 @@ import { Cover, Streaming } from './pages';
 import { usePluginEntries } from './hooks/use_plugin_entries';
 import { BaseLayout } from './components/BaseLayout';
 
-const APP_PLUGIN_IDS: Array<PluginID> = ['sticker', 'xwy', 'extra-cd' /*'extra-entry'*/];
+const APP_PLUGIN_IDS: Array<PluginID> = [/*'sticker',*/ 'xwy', 'extra-cd' /*'extra-entry'*/];
 
-export const App = () => {
+const AppRoutes = () => {
   usePlugins(APP_PLUGIN_IDS);
 
   const pluginEntries = usePluginEntries();
 
+  return (
+    <Routes>
+      <Route path="/" element={<BaseLayout />}>
+        <Route index element={<Cover />} />
+
+        <Route path="blog" element={<Outlet />}>
+          <Route path="" element={<Txt />} />
+          <Route path=":title" element={<ArticlePage />} />
+        </Route>
+
+        <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>
+  );
+};
+
+export const App = () => {
   return (
     <SWR>
       <BBContext>
-        <Routes>
-          <Route path="/" element={<BaseLayout />}>
-            <Route index element={<Cover />} />
-
-            <Route path="blog" element={<Outlet />}>
-              <Route path="" element={<Txt />} />
-              <Route path=":title" element={<ArticlePage />} />
-            </Route>
-
-            <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>
+        <AppRoutes />
       </BBContext>
     </SWR>
   );

package/src/blog/components/BaseLayout.tsx

@@ -27,7 +27,7 @@ export const BaseLayout = () => {
           loading={isLoading}
           customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
           style={{
-            paddingTop: 'var(--safe-top)',
+            paddingTop: 'calc(var(--safe-top) + 4px)',
             transition: 'all .2s ease-in-out',
           }}
         />
@@ -45,7 +45,7 @@ export const BaseLayout = () => {
             </div>
           }
         >
-          <Container className="py-32">
+          <Container className="py-48">
             <ErrorBoundary>
               <Outlet />
             </ErrorBoundary>

package/src/blog/hooks/use_loading.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
 
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 
@@ -9,7 +9,13 @@ import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
  * @param id - Unique identifier for this loading state
  * @param loading - Whether this specific loading state is active
  */
-export function useGlobalLoading(id: string | undefined, loading: boolean | undefined) {
+export function useGlobalLoading(
+  id?: string | undefined,
+  loading?: boolean | undefined
+): {
+  isLoading: boolean;
+  setGlobalLoading: (key: string, loadingFromManual: boolean) => () => void;
+} {
   const { register, setLoading, unregister, isLoading } = useContext(GlobalLoadingContext);
 
   useEffect(() => {
@@ -22,5 +28,20 @@ export function useGlobalLoading(id: string | undefined, loading: boolean | unde
     };
   }, [id, loading, register, setLoading, unregister]);
 
-  return isLoading;
+  const setGlobalLoading = useCallback(
+    (key: string, loadingFromManual: boolean) => {
+      register(key);
+      setLoading(key, loadingFromManual);
+
+      return () => {
+        unregister(key);
+      };
+    },
+    [register, setLoading, unregister]
+  );
+
+  return {
+    isLoading,
+    setGlobalLoading,
+  };
 }

package/src/blog/hooks/use_posts.ts

@@ -53,7 +53,7 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
     }
   }, [baseTitleList, run]);
 
-  const gLoading = useGlobalLoading('posts', isDataLoading || isTransforming);
+  const { isLoading: gLoading } = useGlobalLoading('posts', isDataLoading || isTransforming);
 
   const posts =
     isDataLoading || name === '' || swrError || !data

package/src/blog/main.css

@@ -73,7 +73,7 @@ a {
 
 @supports (padding-top: env(safe-area-inset-top)) {
   :root {
-    --safe-top: calc(env(safe-area-inset-top) + 4px);
+    --safe-top: calc(env(safe-area-inset-top));
   }
 }
 
@@ -82,7 +82,7 @@ a {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none;
   transition: all 0.2s ease-in-out;
-  padding-top: var(--safe-top);
+  /* padding-top: var(--safe-top); */
   box-sizing: border-box;
 }
 

package/src/core/hooks/use_plugins.ts

@@ -1,8 +1,24 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { useGlobalLoading } from '@/hooks';
 import { pluginManager } from '#/core/pluginManager';
 import { PluginID } from '#/types/plugin';
 
+const usePluginsLoading = () => {
+  const { setGlobalLoading } = useGlobalLoading();
+
+  useEffect(() => {
+    let unregister: (() => void) | undefined;
+    const unscribe = pluginManager.subscribePluginLoading(payload => {
+      unregister = setGlobalLoading(payload.id, payload.loading);
+    });
+    return () => {
+      unscribe();
+      unregister?.();
+    };
+  }, [setGlobalLoading]);
+};
+
 /**
  * 通用插件管理 hook
  * 根据传入的插件ID列表加载和卸载插件
@@ -15,6 +31,8 @@ import { PluginID } from '#/types/plugin';
 export const usePlugins = (pluginIds: Array<PluginID>) => {
   const [done, setDone] = useState(false);
 
+  usePluginsLoading();
+
   const loadAllPlugins = useCallback(async () => {
     try {
       await Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)));

package/src/core/pluginManager.ts

@@ -2,19 +2,25 @@ import React from 'react';
 
 import { IHostContext } from '#/types/hostApi';
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
-import { IPlugin } from '#/types/plugin';
+import { IPlugin, PluginEvents, PluginID } from '#/types/plugin';
 import { getStableDeviceId } from '@/utils/fingerprints';
 
 import { registry } from './registry';
+import { createEventBus } from './utils/eventBus';
 
 const pluginModules = import.meta.glob('../plugins/*/index.ts');
 
 class PluginManager {
   private activePlugins: Map<string, IPlugin> = new Map();
 
+  private bus = createEventBus<PluginEvents>();
+
   private createHostContext(): IHostContext {
     return {
       api: {
+        setLoading: (id: PluginID, loading: boolean) => {
+          this.bus.emit('plugin:loading:changed', { id, loading });
+        },
         registerMiddleware: <T>(
           point: HookPoint,
           fn: (data: T) => Promise<T> | T,
@@ -38,8 +44,12 @@ class PluginManager {
 
   private loading = new Set<string>();
 
+  subscribePluginLoading(listener: (payload: PluginEvents['plugin:loading:changed']) => void) {
+    return this.bus.on('plugin:loading:changed', listener);
+  }
+
   // enable abort ctrl
-  async loadPlugin(pluginId: string) {
+  async loadPlugin(pluginId: PluginID) {
     if (this.activePlugins.has(pluginId)) {
       console.warn(`Plugin ${pluginId} is already loaded.`);
       return;
@@ -52,11 +62,16 @@ class PluginManager {
 
     // try load plugin
     this.loading.add(pluginId);
+    this.bus.emit('plugin:loading:changed', { id: pluginId, loading: true });
 
     const modulePath = `../plugins/${pluginId}/index.ts`;
     const moduleLoader = pluginModules[modulePath];
     if (!moduleLoader) {
       console.error(`Plugin ${pluginId} not found in registry`);
+
+      this.loading.delete(pluginId);
+      this.bus.emit('plugin:loading:changed', { id: pluginId, loading: false });
+
       return;
     }
 
@@ -78,10 +93,11 @@ class PluginManager {
       console.error(`Failed to load plugin ${pluginId}:`, error);
     } finally {
       this.loading.delete(pluginId);
+      this.bus.emit('plugin:loading:changed', { id: pluginId, loading: false });
     }
   }
 
-  async disablePlugin(pluginId: string) {
+  async disablePlugin(pluginId: PluginID) {
     const plugin = this.activePlugins.get(pluginId);
     if (!plugin) {
       console.warn(`Plugin ${pluginId} is not loaded.`);

package/src/core/registry.ts

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 
+import { createEventBus } from './utils/eventBus';
+
 export interface ISlotEntry {
   id: string;
   component: React.ComponentType<IComPropsRegisteredToSlot>;
@@ -16,37 +18,28 @@ export interface IMiddlewareEntry<T> {
   weight?: number;
 }
 
+type RegistryEvents = {
+  'components:changed': void;
+  'middleware:changed': HookPoint;
+};
+
 export class Registry {
   private slots = new Map<SlotName, ISlotEntry[]>();
 
-  private listeners = new Set<() => void>();
-  private middlewareListenerMap = new Map<HookPoint, Set<() => void>>();
+  private bus = createEventBus<RegistryEvents>();
 
   private middlewares = new Map<HookPoint, IMiddlewareEntry<unknown>[]>();
 
-  private broadcastChange() {
-    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);
+    return this.bus.on('middleware:changed', point => {
+      if (point === hookPoint) {
+        listener();
+      }
+    });
   }
 
   subscribe(listener: () => void) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
+    return this.bus.on('components:changed', listener);
   }
 
   registerComponent(
@@ -68,7 +61,7 @@ export class Registry {
     const newList = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
     this.slots.set(slot, newList);
 
-    this.broadcastChange();
+    this.bus.emit('components:changed', undefined);
   }
 
   unregisterAllByPluginId(pluginId: string) {
@@ -86,7 +79,7 @@ export class Registry {
 
     console.log(`[Registry] All resources for plugin "${pluginId}" have been cleared.`);
 
-    this.broadcastChange();
+    this.bus.emit('components:changed', undefined);
   }
 
   registerMiddleware<T>(
@@ -111,7 +104,7 @@ export class Registry {
 
     this.middlewares.set(hookPoint, newList);
 
-    this.broadcastMiddlewareChange(hookPoint);
+    this.bus.emit('middleware:changed', hookPoint);
   }
 
   getComponents(slotName: SlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {

package/src/core/utils/eventBus.ts

@@ -0,0 +1,29 @@
+export interface EventBus<Events extends Record<string, unknown>> {
+  on<K extends keyof Events>(event: K, callback: (data: Events[K]) => void): () => void;
+  emit<K extends keyof Events>(event: K, data: Events[K]): void;
+}
+
+export function createEventBus<Events extends Record<string, unknown>>(): EventBus<Events> {
+  const listeners = new Map<keyof Events, Set<(data: Events[keyof Events]) => void>>();
+
+  return {
+    on<K extends keyof Events>(event: K, callback: (data: Events[K]) => void): () => void {
+      if (!listeners.has(event)) {
+        listeners.set(event, new Set());
+      }
+      const set = listeners.get(event)!;
+      const cb = callback as (data: Events[keyof Events]) => void;
+      set.add(cb);
+
+      return () => {
+        set.delete(cb);
+      };
+    },
+
+    emit<K extends keyof Events>(event: K, data: Events[K]): void {
+      const set = listeners.get(event);
+      if (!set) return;
+      set.forEach(callback => callback(data as Events[keyof Events]));
+    },
+  };
+}

package/src/plugins/xwy/index.ts

@@ -75,11 +75,11 @@ class XwyPlugin implements IPlugin {
     return content
       .replace(
         /小乌鸦/g,
-        `<span class="font-xwy text-content-special text-[1.6rem] align-middle leading-[28px]">小乌鸦</span>`
+        `<span class="font-xwy text-content-special text-[1.6rem] align-middle leading-[1.09]">小乌鸦</span>`
       )
       .replace(
         /公园/,
-        `公园 <span class="font-xwy-icon text-[#679867] text-[1.6rem] align-middle leading-[28px]">&#xE01A&#xE003</span>`
+        `公园 <span class="font-xwy-icon text-[#679867] text-[1.6rem] align-middle leading-[1.09]">&#xE01A&#xE003</span>`
       );
   };
 

package/src/types/hostApi.ts

@@ -3,9 +3,11 @@ import React from 'react';
 import { type FingerprintData } from '@/utils/fingerprints';
 
 import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
+import { PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
+  setLoading: (id: PluginID, loading: boolean) => void;
   registerMiddleware: <T>(
     point: HookPoint,
     fn: (baseData: T) => T,

package/src/types/plugin.ts

@@ -23,3 +23,12 @@ export interface IPluginEntry {
   label?: string;
   pageComponent: React.ComponentType<IComPropsRegisteredToSlot>;
 }
+
+export type PluginEvents = {
+  'plugin:loading:changed': IPluginLoadingPayload;
+};
+
+export interface IPluginLoadingPayload {
+  id: PluginID;
+  loading: boolean;
+}