@bbki.ng/site 5.5.14 → 5.5.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bbki.ng/site
 
+## 5.5.15
+
+### Patch Changes
+
+- b377c66: add new plugin
+- Updated dependencies [b377c66]
+  - @bbki.ng/ui@0.2.11
+
 ## 5.5.14
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.14",
+  "version": "5.5.15",
   "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.2.10"
+    "@bbki.ng/ui": "0.2.11"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/app.tsx

@@ -13,8 +13,7 @@ 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';
-import { useSticker } from './hooks/use_sticker';
+import { usePlugins } from './hooks/use_plugins';
 
 const Layout = () => {
   const paths = usePaths();
@@ -60,7 +59,7 @@ const Layout = () => {
 };
 
 export const App = () => {
-  useSticker();
+  usePlugins(['sticker', 'fontstyler']);
 
   return (
     <SWR>

package/src/blog/hooks/use_plugins.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { pluginManager } from '#/core/pluginManager';
+
+/**
+ * 通用插件管理 hook
+ * 根据传入的插件ID列表加载和卸载插件
+ *
+ * @param pluginIds - 要加载的插件ID列表
+ *
+ * @example
+ * usePlugins(['sticker', 'fontstyler']);
+ */
+export const usePlugins = (pluginIds: string[]) => {
+  useEffect(() => {
+    // 加载指定的插件
+    pluginIds.forEach(id => {
+      pluginManager.loadPlugin(id);
+    });
+
+    return () => {
+      // 卸载所有指定的插件
+      pluginIds.forEach(id => {
+        pluginManager.disablePlugin(id);
+      });
+    };
+  }, [pluginIds]);
+};

package/src/blog/hooks/use_posts.ts

@@ -1,8 +1,9 @@
 import useSWR from 'swr';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { baseFetcher } from '@/utils';
 import { API_ENDPOINT } from '@/constants/routes';
+import { registry } from '#/core/registry';
 
 // In dev, use /api prefix to leverage Vite proxy to localhost:8787
 const isProd = true;
@@ -12,6 +13,13 @@ const POSTS_API = !isProd ? '/api/posts' : `${API_ENDPOINT}/posts`;
 // Use baseFetcher for full URLs, cfApiFetcher is for relative paths
 const postsFetcher = (resource: string) => baseFetcher(resource);
 
+export interface TitleListItem {
+  name: string;
+  to: string;
+  children: string;
+  className?: string;
+}
+
 export const usePosts = (name: string = '', suspense?: boolean) => {
   const { data: response, error } = useSWR(POSTS_API, postsFetcher, {
     revalidateOnFocus: false,
@@ -21,27 +29,42 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
   // Extract posts array from API response { status: "success", data: [...] }
   const data = response?.data;
 
+  const [titleList, setTitleList] = useState<TitleListItem[]>([]);
   let isLoading = !data && !error;
   const { setIsLoading } = useContext(GlobalLoadingContext);
-  const titleList =
-    isLoading || error || !data
-      ? []
-      : [
-          ...data.map((p: any) => ({
-            name: p.title,
-            to: p.title,
-            children: p.title,
-          })),
-          {
-            name: 'cd ~',
-            to: '/',
-            children: 'cd ~',
-          },
-        ];
 
   useEffect(() => {
     setIsLoading(isLoading);
-  }, [isLoading]);
+  }, [isLoading, setIsLoading]);
+
+  // Apply middleware to transform titleList
+  useEffect(() => {
+    const transformTitleList = async () => {
+      if (isLoading || error || !data) {
+        setTitleList([]);
+        return;
+      }
+
+      const baseTitleList: TitleListItem[] = [
+        ...data.map((p: any) => ({
+          name: p.title,
+          to: p.title,
+          children: p.title,
+        })),
+        {
+          name: 'cd ~',
+          to: '/',
+          children: 'cd ~',
+        },
+      ];
+
+      // Run middleware to allow plugins to transform the title list
+      const transformedList = await registry.runMiddleware('transformTitleList', baseTitleList);
+      setTitleList(transformedList);
+    };
+
+    transformTitleList();
+  }, [data, isLoading, error]);
 
   const posts =
     isLoading || name == '' || error || !data ? data : data.find((p: any) => p.title == name);

package/src/plugins/fontstyler/index.ts

@@ -0,0 +1,132 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+
+export interface TitleListItem {
+  name: string;
+  to: string;
+  children: string;
+  className?: string;
+}
+
+export interface FontConfig {
+  name: string;
+  src: string;
+  format: 'woff2' | 'woff' | 'ttf' | 'otf';
+  fontWeight?: string;
+  fontStyle?: string;
+}
+
+export interface FontRule {
+  match: string | RegExp;
+  fontFamily: string;
+  fontConfig?: FontConfig;
+  extraCls?: string;
+}
+
+class FontStylerPlugin implements IPlugin {
+  id = 'fontstyler';
+  name = 'Font Styler';
+  description = 'Apply custom fonts to specific post titles';
+  version = '1.0.0';
+  author = 'bbki.ng';
+
+  /**
+   * 配置：标题匹配规则 → 字体配置
+   * 支持精确字符串匹配或正则表达式匹配
+   *
+   * 示例：
+   * - 精确匹配: { match: '某篇文章标题', fontFamily: 'CustomFont1', fontConfig: {...} }
+   * - 正则匹配: { match: /^示例/, fontFamily: 'CustomFont2', fontConfig: {...} }
+   */
+  private fontRules: FontRule[] = [
+    {
+      match: '小乌鸦合集',
+      fontFamily: 'xwy',
+      fontConfig: {
+        name: 'xwy',
+        src: '/fonts/xwy.woff2',
+        format: 'woff2',
+      },
+      extraCls: 'text-2xl',
+    },
+  ];
+
+  private loadedFonts = new Set<string>();
+
+  onInstall = (ctx: IHostContext) => {
+    // 加载所有需要的字体文件
+    this.fontRules.forEach(rule => {
+      if (rule.fontConfig && !this.loadedFonts.has(rule.fontConfig.name)) {
+        this.loadFont(rule.fontConfig);
+        this.loadedFonts.add(rule.fontConfig.name);
+      }
+    });
+
+    ctx.api.registerMiddleware(
+      'transformTitleList',
+      this.transformTitleList,
+      this.id,
+      10 // weight
+    );
+  };
+
+  /**
+   * 动态加载字体文件
+   * 通过创建 style 标签添加 @font-face 规则
+   */
+  private loadFont = (config: FontConfig) => {
+    const styleId = `font-${config.name}`;
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      @font-face {
+        font-family: '${config.name}';
+        src: url('${config.src}') format('${config.format}');
+        font-weight: ${config.fontWeight || 'normal'};
+        font-style: ${config.fontStyle || 'normal'};
+        font-display: swap;
+      }
+      .font-${config.name} {
+        font-family: '${config.name}', monospace;
+      }
+    `;
+    document.head.appendChild(style);
+  };
+
+  /**
+   * 转换标题列表，为匹配的标题添加字体类名
+   */
+  private transformTitleList = (titleList: TitleListItem[]): TitleListItem[] => {
+    return titleList.map(item => {
+      for (const rule of this.fontRules) {
+        const match =
+          typeof rule.match === 'string' ? item.name === rule.match : rule.match.test(item.name);
+
+        if (match) {
+          return {
+            ...item,
+            className: `font-${rule.fontFamily} ${rule.extraCls || ''}`.trim(),
+          };
+        }
+      }
+      return item;
+    });
+  };
+
+  onDisable = async () => {
+    // 清理加载的字体样式
+    this.loadedFonts.forEach(fontName => {
+      const styleEl = document.getElementById(`font-${fontName}`);
+      if (styleEl) {
+        styleEl.remove();
+      }
+    });
+    this.loadedFonts.clear();
+  };
+
+  onDestroy = () => {};
+}
+
+export default new FontStylerPlugin();

package/src/plugins/manifest.ts

@@ -11,4 +11,10 @@ export const PLUGIN_MANIFEST = [
     version: '0.1.0',
     description: 'A sticker plugin',
   },
+  {
+    name: 'fontstyler',
+    id: 'fontstyler',
+    version: '0.1.0',
+    description: 'Apply custom fonts to specific post',
+  },
 ];

package/src/types/slots.ts

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