@bbki.ng/site 5.4.54 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @bbki.ng/site
 
+## 5.5.0
+
+### Minor Changes
+
+- 2caf775: add blog plugin
+
+### Patch Changes
+
+- Updated dependencies [2caf775]
+  - @bbki.ng/ui@0.2.0
+
+## 5.4.55
+
+### Patch Changes
+
+- e08565d: update nav
+- Updated dependencies [e08565d]
+  - @bbki.ng/ui@0.1.29
+
 ## 5.4.54
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.54",
+  "version": "5.5.0",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -14,7 +14,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.1.28"
+    "@bbki.ng/ui": "0.2.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/app.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
 import { Cover, Streaming } from './pages';
 import { Nav, NotFound, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
@@ -12,6 +12,8 @@ import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
 import { useDynamicLogo } from './hooks/use_dynamic_logo';
+import { Slot } from '../core/components/SlotComp';
+import { pluginManager } from '#/core/pluginManager';
 
 const Layout = () => {
   const paths = usePaths();
@@ -32,7 +34,18 @@ const Layout = () => {
         />
       }
       main={
-        <Grid leftAside={<div />} rightAside={<div />}>
+        <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 />
@@ -45,6 +58,14 @@ const Layout = () => {
 };
 
 export const App = () => {
+  // useEffect(() => {
+  //   pluginManager.loadPlugin('test');
+
+  //   return () => {
+  //     pluginManager.disablePlugin('test');
+  //   };
+  // }, []);
+
   return (
     <SWR>
       <BBContext>

package/src/blog/components/article/index.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Button, Article, Link } from '@bbki.ng/ui';
-import { ROUTES } from '@/constants';
+import { Article, Link } from '@bbki.ng/ui';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 

package/src/blog/hooks/use_blog_context.ts

@@ -0,0 +1,14 @@
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+import { IBlogContext } from '@/types/blog-context';
+import { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useBlogContext = (): IBlogContext => {
+  const globalLoading = useContext(GlobalLoadingContext);
+  const location = useLocation();
+
+  return {
+    gloalLoading: globalLoading.isLoading,
+    location,
+  };
+};

package/src/blog/hooks/use_posts.ts

@@ -26,11 +26,18 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
   const titleList =
     isLoading || error || !data
       ? []
-      : data.map((p: any) => ({
-          name: p.title,
-          to: p.title,
-          children: p.title,
-        }));
+      : [
+          ...data.map((p: any) => ({
+            name: p.title,
+            to: p.title,
+            children: p.title,
+          })),
+          {
+            name: 'cd ~',
+            to: '/',
+            children: 'cd ~',
+          },
+        ];
 
   useEffect(() => {
     setIsLoading(isLoading);

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

@@ -3,8 +3,9 @@ import { useStreaming, StreamingItem } from '@/hooks/use_streaming';
 import { formatStreamingData } from '@/utils/streaming';
 import { Button, Panel } from '@bbki.ng/ui';
 import { useScrollBtnVisibility } from './useScrollBtnVisibility';
-import classNames from 'classnames';
+import { Link } from '@bbki.ng/ui';
 import { ArrowDownIcon } from './arrow-down';
+import classNames from 'classnames';
 
 // Extend JSX IntrinsicElements for the web component
 declare global {
@@ -79,17 +80,17 @@ const Streaming = () => {
           {formattedData}
         </bb-msg-history>
       </Panel>
-      {scrolled ? (
-        <Button
-          className="mt-16"
-          transparent={!showScrollBtn}
-          onClick={() => {
-            bbMsgHistoryRef.current?.scrollToBottom();
-          }}
-        >
-          <ArrowDownIcon show={showScrollBtn} />
-        </Button>
-      ) : null}
+      <Link
+        className={classNames('w-fit relative opacity-0 transition-all duration-300 mt-16', {
+          'opacity-100': scrolled,
+          'opacity-0': showScrollBtn,
+          'pointer-events-none': showScrollBtn || !scrolled,
+        })}
+        to="/"
+        style={{ left: -4 }}
+      >
+        cd ..
+      </Link>
     </>
   );
 };

package/src/blog/types/blog-context.ts

@@ -0,0 +1,6 @@
+import { Location } from 'react-router-dom';
+
+export interface IBlogContext {
+  gloalLoading: boolean;
+  location: Location;
+}

package/src/core/components/SlotComp.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SlotName } from 'src/types/slots';
+import { useSlotComp } from '../hooks/useSlotComp';
+
+export interface ISlotProps {
+  name: SlotName;
+  data?: any;
+}
+
+export const Slot: React.FC<ISlotProps> = ({ name, data }) => {
+  const components = useSlotComp(name);
+
+  return (
+    <>
+      {components.map((Component, index) => (
+        <Component key={index} data={data} />
+      ))}
+    </>
+  );
+};

package/src/core/hooks/useSlotComp.ts

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

package/src/core/pluginManager.ts

@@ -0,0 +1,80 @@
+import { IHostContext } from '#/types/hostApi';
+import { registry } from './registry';
+import type { SlotName, HookPoint } from '#/types/slots';
+import { IPlugin } from '#/types/plugin';
+
+class PluginManager {
+  private activePlugins: Map<string, IPlugin> = new Map();
+
+  private createHostContext(): IHostContext {
+    return {
+      api: {
+        registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight = 0) => {
+          registry.registerMiddleware(point, fn, pluginId, weight);
+        },
+        registerSlot: (
+          slotName: SlotName,
+          component: React.ComponentType<any>,
+          pluginId: string,
+          weight = 0
+        ) => {
+          registry.registerComponent(slotName, component, pluginId, weight);
+        },
+      },
+    };
+  }
+
+  private loading = new Set<string>();
+
+  // enable abort ctrl
+  async loadPlugin(pluginId: string) {
+    if (this.activePlugins.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is already loaded.`);
+      return;
+    }
+
+    if (this.loading.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is loading...`);
+      return;
+    }
+
+    // try load plugin
+    this.loading.add(pluginId);
+
+    try {
+      const module = await import(`../plugins/${pluginId}`);
+
+      const p: IPlugin = module.default;
+
+      const ctx = this.createHostContext();
+
+      if (p.onInstall) {
+        p.onInstall(ctx);
+      }
+
+      this.activePlugins.set(pluginId, p);
+    } catch (error) {
+      console.error(`Failed to load plugin ${pluginId}:`, error);
+    } finally {
+      this.loading.delete(pluginId);
+    }
+  }
+
+  async disablePlugin(pluginId: string) {
+    const plugin = this.activePlugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`Plugin ${pluginId} is not loaded.`);
+      return;
+    }
+
+    if (plugin.onDisable) {
+      await plugin.onDisable();
+    }
+
+    this.activePlugins.delete(pluginId);
+
+    registry.unregisterAllByPluginId(plugin.id);
+  }
+}
+
+export const pluginManager = new PluginManager();

package/src/core/registry.ts

@@ -0,0 +1,97 @@
+import type { SlotName, HookPoint } from 'src/types/slots';
+
+export interface ISlotEntry {
+  id: string;
+  component: React.ComponentType<any>;
+  pluginId: string;
+  weight: number;
+}
+
+export interface IMiddlewareEntry {
+  id: string;
+  fn: Function;
+  pluginId: string;
+  weight?: number;
+}
+
+export class Registry {
+  private slots = new Map<SlotName, ISlotEntry[]>();
+
+  private listeners = new Set<() => void>();
+
+  private middlewares = new Map<HookPoint, IMiddlewareEntry[]>();
+
+  private broadcastChange() {
+    this.listeners.forEach(listener => listener());
+  }
+
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  registerComponent(slot: SlotName, component: React.ComponentType, pluginId: string, weight = 0) {
+    const existing = this.slots.get(slot) || [];
+
+    const newEntry: ISlotEntry = {
+      id: `${pluginId}-${component.name || 'comp'}`,
+      pluginId,
+      component,
+      weight,
+    };
+
+    // 插入并按权重排序（权重大的在前）
+    const newList = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
+    this.slots.set(slot, newList);
+
+    this.broadcastChange();
+  }
+
+  unregisterAllByPluginId(pluginId: string) {
+    // 1. 清理 UI 槽位
+    this.slots.forEach((entries, slotName) => {
+      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+      this.slots.set(slotName, filtered);
+    });
+
+    // 2. 清理中间件
+    this.middlewares.forEach((entries, point) => {
+      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+      this.middlewares.set(point, filtered);
+    });
+
+    console.log(`[Registry] All resources for plugin "${pluginId}" have been cleared.`);
+
+    this.broadcastChange();
+  }
+
+  registerMiddleware(hookPoint: HookPoint, fn: Function, pluginId: string, weight = 0) {
+    const existing = this.middlewares.get(hookPoint) || [];
+
+    const newEntry: IMiddlewareEntry = {
+      id: `${pluginId}-${fn.name || 'middleware'}`,
+      pluginId,
+      fn,
+      weight,
+    };
+
+    // 插入并按权重排序（权重大的在前）
+    const newList = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+    this.middlewares.set(hookPoint, newList);
+  }
+
+  getComponents(slotName: SlotName): React.ComponentType<any>[] {
+    return (this.slots.get(slotName) || []).map(entry => entry.component);
+  }
+
+  async runMiddleware<T>(point: HookPoint, data: T): Promise<T> {
+    const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
+    let result = data;
+    for (const fn of fns) {
+      result = await fn(result);
+    }
+    return result;
+  }
+}
+
+export const registry = new Registry();

package/src/plugins/manifest.ts

@@ -0,0 +1,8 @@
+export const PLUGIN_MANIFEST = [
+  {
+    name: 'test',
+    id: 'test',
+    version: '0.1.0',
+    description: 'A test plugin',
+  },
+];

package/src/plugins/test/components/emoji.tsx

@@ -0,0 +1,8 @@
+import { type PathObj } from '@bbki.ng/ui';
+import React from 'react';
+
+export const Emoji = ({ data }: { data: any }) => {
+  const path = data as PathObj[];
+  console.log(path);
+  return <span>😊</span>;
+};

package/src/plugins/test/index.ts

@@ -0,0 +1,22 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+import { Emoji } from './components/emoji';
+
+class TestPlugin implements IPlugin {
+  id: string = 'test';
+  name: string = 'Test Plugin';
+  description?: string | undefined;
+  version: string = '0.1.0';
+  author?: string | undefined;
+
+  onInstall?: ((ctx: IHostContext) => void) | undefined = (ctx: IHostContext) => {
+    ctx.api.registerSlot('leftCol', Emoji, this.id);
+  };
+
+  onDisable?: (() => Promise<void> | void) | undefined;
+  onDestroy?: (() => void) | undefined;
+}
+
+const testPlugin = new TestPlugin();
+
+export default testPlugin;

package/src/types/hostApi.ts

@@ -0,0 +1,17 @@
+import { HookPoint, SlotName } from './slots';
+
+export interface IHostApi {
+  registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight?: number) => void;
+  registerSlot: (
+    slotName: SlotName,
+    component: React.ComponentType<any>,
+    pluginId: string,
+    weight?: number
+  ) => void;
+}
+
+export type PluginInitializer = (api: IHostApi) => void;
+
+export interface IHostContext {
+  api: IHostApi;
+}

package/src/types/plugin.ts

@@ -0,0 +1,13 @@
+import { IHostContext } from './hostApi';
+
+export interface IPlugin {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  author?: string;
+
+  onInstall?: (ctx: IHostContext) => void;
+  onDisable?: () => Promise<void> | void;
+  onDestroy?: () => void;
+}

package/src/types/slots.ts

@@ -0,0 +1,2 @@
+export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow';
+export type HookPoint = 'filterPosts' | 'transformPostContent';

package/tsconfig.json

@@ -7,7 +7,8 @@
     "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/blog/*"]
+      "@/*": ["src/blog/*"],
+      "#/*": ["src/*"]
     }
   },
   "include": ["./src", "vite.config.js", "index.d.ts"]

package/vite.config.js

@@ -41,6 +41,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src/blog'),
+      '#': path.resolve(__dirname, './src/'),
     },
     // preserveSymlinks: true,
   },

package/src/blog/types/articles.ts

@@ -1,6 +0,0 @@
-import { FunctionComponent } from 'react';
-
-export type MdxArticle = {
-  default: FunctionComponent<any>;
-  meta: any;
-};

package/src/blog/types/color.ts

@@ -1,21 +0,0 @@
-export enum TextColors {
-  GRAY = 'text-gray-400',
-  RED = 'text-red-500',
-  BLUE = 'text-blue-600',
-}
-
-export enum BgColors {
-  WHITE_GRAY = 'bg-gray-50',
-  LIGHT_GRAY = 'bg-gray-100',
-  GRAY = 'bg-gray-400',
-  RED = 'bg-red-500',
-  BLUE = 'bg-blue-600',
-  LIGHT_BLUE = 'bg-blue-300',
-  WHITE_BLUE = 'bg-blue-100',
-}
-
-export enum HoveredTextColors {
-  GRAY = 'hover:bg-gray-100',
-  RED = 'hover:bg-red-100',
-  BLUR = 'hover:bg-blue-100',
-}

package/src/blog/types/cusdis.ts

@@ -1,4 +0,0 @@
-export enum cusdisEvent {
-  COMMENTS_LOADED = 'COMMENTS_LOADED',
-  COMMENT_SENT = 'COMMENT_SENT',
-}

package/src/blog/types/oss.ts

@@ -1,15 +0,0 @@
-export enum ossProcessType {
-  THUMBNAIL = 'thumbnail',
-  WEBP = 'webp',
-  NULL = 'null',
-  oWEBP = 'owebp',
-  PROG = 'prog',
-}
-
-export interface UploadResult {
-  name: string;
-  res: {
-    status: number;
-  };
-  url: string;
-}

package/src/blog/types/photo.ts

@@ -1,17 +0,0 @@
-import { ossProcessType } from '@/types/oss';
-
-export interface Photo {
-  src: string;
-  width: number;
-  height: number;
-  processType?: ossProcessType;
-  avgColor?: string;
-  thumbnailSrc?: string;
-  renderedWidth?: number;
-}
-
-export interface PhotoProject {
-  name: string;
-  description?: string;
-  images: Photo[];
-}