@bbki.ng/site 5.5.37 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 5.6.0
+
+### Minor Changes
+
+- 3eab4b5: add plugin store
+
 ## 5.5.37
 
 ### Patch Changes

package/package.json

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

package/src/blog/app.tsx

@@ -9,16 +9,13 @@ 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 } from './pages';
 import { usePluginEntries } from './hooks/use_plugin_entries';
 import { BaseLayout } from './components/BaseLayout';
 
-const APP_PLUGIN_IDS: Array<PluginID> = [/*'sticker',*/ 'xwy', 'extra-cd', 'now'];
-
 const AppRoutes = () => {
-  usePlugins(APP_PLUGIN_IDS);
+  usePlugins();
 
   const pluginEntries = usePluginEntries();
 

package/src/core/bbplugin.ts

@@ -0,0 +1,13 @@
+import { ManifestMap } from '#/plugins/manifest';
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin, IPluginManifestEntry, PluginID } from '#/types/plugin';
+
+export class BBPlugin implements IPlugin {
+  id: PluginID = 'default';
+  onInstall?: ((ctx: IHostContext) => void | Promise<void>) | undefined;
+  onDisable?: (() => Promise<void> | void) | undefined;
+  onDestroy?: (() => void) | undefined;
+  getMeta(): IPluginManifestEntry {
+    return ManifestMap.get(this.id) as IPluginManifestEntry;
+  }
+}

package/src/core/hooks/use_plugins.ts

@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useGlobalLoading } from '@/hooks';
 import { pluginManager } from '#/core/pluginManager';
 import { PluginID } from '#/types/plugin';
 
+import { PluginStore } from '../pluginStore';
+
 const usePluginsLoading = () => {
   const { setGlobalLoading } = useGlobalLoading();
 
@@ -28,9 +30,16 @@ const usePluginsLoading = () => {
  * @example
  * usePlugins(['sticker', 'fontstyler']);
  */
-export const usePlugins = (pluginIds: Array<PluginID>) => {
+export const usePlugins = () => {
   const [done, setDone] = useState(false);
 
+  const installedPlugins = PluginStore.getInstance().getInstalledPlugins();
+
+  const pluginIds: Array<PluginID> = useMemo(
+    () => ['store', ...Array.from(installedPlugins)],
+    [installedPlugins]
+  );
+
   usePluginsLoading();
 
   const loadAllPlugins = useCallback(async () => {

package/src/core/pluginManager.ts

@@ -8,6 +8,7 @@ import { getStableDeviceId } from '@/utils/fingerprints';
 import { registry } from './registry';
 import { createEventBus } from './utils/eventBus';
 import { AdminPluginIDSet } from './const';
+import { PluginStore } from './pluginStore';
 
 const pluginModules = import.meta.glob('../plugins/*/index.ts');
 
@@ -17,14 +18,15 @@ class PluginManager {
   private bus = createEventBus<PluginEvents>();
 
   private createHostContext(perm: PluginPerm = 'guest'): IHostContext {
-    const adminOnlyApi = {
-      installPlugin: (id: PluginID) => this.loadPlugin(id),
-      disablePlugin: (id: PluginID) => this.disablePlugin(id),
-    };
-
+    const adminCtx =
+      perm === 'admin'
+        ? {
+            store: PluginStore.getInstance(),
+          }
+        : {};
     return {
+      ...adminCtx,
       api: {
-        ...(perm === 'admin' ? adminOnlyApi : {}),
         setLoading: (id: PluginID, loading: boolean) => {
           this.bus.emit('plugin:loading:changed', { id, loading });
         },
@@ -89,7 +91,7 @@ class PluginManager {
 
       const p: IPlugin = module.default;
 
-      const perm = (p as IPlugin & { perm?: PluginPerm }).perm || 'guest';
+      const perm = p.getMeta().perm || 'guest';
       if (perm === 'admin' && !AdminPluginIDSet.has(pluginId)) {
         console.error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
         return;

package/src/core/pluginStore.ts

@@ -0,0 +1,68 @@
+import { PLUGIN_MANIFEST } from '#/plugins/manifest';
+import { IPluginStoreEntry, PluginID } from '#/types/plugin';
+
+import { pluginManager } from './pluginManager';
+
+export class PluginStore {
+  private static instance: PluginStore;
+
+  private installedSet: Set<PluginID> = new Set();
+
+  private constructor() {
+    this.parse();
+  }
+
+  private parse = () => {
+    this.installedSet.clear();
+    const installedPluginsStr = localStorage.getItem('installed_plugins');
+    if (installedPluginsStr) {
+      try {
+        const entries = JSON.parse(installedPluginsStr) as Array<PluginID>;
+        entries.forEach(id => this.installedSet.add(id));
+      } catch (e) {
+        console.error('Failed to parse installed plugins from localStorage', e);
+      }
+    }
+
+    return this.installedSet;
+  };
+
+  private stringify = () => {
+    localStorage.setItem('installed_plugins', JSON.stringify(Array.from(this.installedSet)));
+  };
+
+  getInstalledPlugins: () => Set<PluginID> = () => {
+    return this.parse();
+  };
+
+  getAllPlugins: () => Array<IPluginStoreEntry> = () => {
+    const installedPlugins = this.getInstalledPlugins();
+    return PLUGIN_MANIFEST.map(plugin => ({
+      ...plugin,
+      enabled: installedPlugins.has(plugin.id),
+    }));
+  };
+
+  isPluginInstalled: (id: PluginID) => boolean = id => {
+    return this.getInstalledPlugins().has(id);
+  };
+
+  installPlugin: (id: PluginID) => Promise<void> = async id => {
+    await pluginManager.loadPlugin(id);
+    this.installedSet.add(id);
+    this.stringify();
+  };
+
+  disablePlugin: (id: PluginID) => Promise<void> = async id => {
+    await pluginManager.disablePlugin(id);
+    this.installedSet.delete(id);
+    this.stringify();
+  };
+
+  static getInstance() {
+    if (!PluginStore.instance) {
+      PluginStore.instance = new PluginStore();
+    }
+    return PluginStore.instance;
+  }
+}

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

@@ -1,27 +1,14 @@
+import { BBPlugin } from '#/core/bbplugin';
 import { IHostContext } from '#/types/hostApi';
-import { IPlugin } from '#/types/plugin';
+import { PluginID } from '#/types/plugin';
 import { TitleListItem } from '#/types/posts';
 
-class ExtraCd implements IPlugin {
-  id: string = 'extra-cd';
-  name: string = 'Extra CD';
-  description: string =
-    'Provides additional change directory functionalities for enhanced user experience.';
-  version: string = '1.0.0';
-  author: string = 'bbki.ng';
+class ExtraCd extends BBPlugin {
+  id: PluginID = 'extra-cd';
 
-  async onInstall(ctx: IHostContext): Promise<void> {
-    // Initialize any required resources or settings
+  override onInstall = async (ctx: IHostContext): Promise<void> => {
     ctx.api.registerMiddleware('transformTitleList', this.transformTitleList, this.id, 10);
-  }
-
-  async onDisable(): Promise<void> {
-    // Clean up active operations
-  }
-
-  onDestroy(): void {
-    // Release all resources
-  }
+  };
 
   private transformTitleList = (titleList: Array<TitleListItem>) => {
     return [

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

@@ -1,19 +1,14 @@
+import { BBPlugin } from '#/core/bbplugin';
 import { IHostContext } from '#/types/hostApi';
-import { IPlugin } from '#/types/plugin';
+import { PluginID } 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';
+export class ExtraEntryPlugin extends BBPlugin {
+  id: PluginID = 'extra-entry';
 
-  onInstall?: ((ctx: IHostContext) => void | Promise<void>) | undefined = async (
-    ctx: IHostContext
-  ) => {
+  override onInstall = async (ctx: IHostContext): Promise<void> => {
     const entryCreator = buildEntryCreator(ctx);
     entryCreator(
       {
@@ -24,9 +19,6 @@ export class ExtraEntryPlugin implements IPlugin {
       this.id
     );
   };
-
-  onDisable?: (() => Promise<void> | void) | undefined;
-  onDestroy?: (() => void) | undefined;
 }
 
 export default new ExtraEntryPlugin();

package/src/plugins/manifest.ts

@@ -1,40 +1,47 @@
-export const PLUGIN_MANIFEST = [
+import { IPluginManifestEntry } from '#/types/plugin';
+
+export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
   {
-    name: 'sticker',
+    name: '贴纸',
     id: 'sticker',
     version: '0.1.0',
-    description: 'A sticker plugin',
+    description: '在页面一些地方显示奇怪的贴纸',
   },
   {
-    name: 'store',
+    name: '插件商店',
     id: 'store',
     version: '0.1.0',
-    description: 'A plugin for state management and data persistence.',
+    description: '一个管理 bbki.ng 插件的商店',
     perm: 'admin',
   },
   {
-    name: 'now',
+    name: '最近',
     id: 'now',
     version: '1.0.0',
-    description: 'show real-time site status and logs',
+    description: '显示网站最近更新的版本，以及一些文字动态',
   },
   {
-    name: 'extra-cd',
+    name: '捷径',
     id: 'extra-cd',
     version: '0.1.0',
     description:
-      'Provides additional change directory functionalities for enhanced user experience.',
+      '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
   },
+  // {
+  //   name: 'extra-entry',
+  //   id: 'extra-entry',
+  //   version: '0.1.0',
+  //   description: 'Provides extra entries for cover and extended routes.',
+  // },
   {
-    name: 'extra-entry',
-    id: 'extra-entry',
-    version: '0.1.0',
-    description: 'Provides extra entries for cover and extended routes.',
-  },
-  {
-    name: 'xwy',
+    name: '小乌鸦',
     id: 'xwy',
     version: '0.1.0',
-    description: 'customize for xwy',
+    description: '为小乌鸦合集实现定制功能或者样式的插件',
   },
 ];
+
+export const ManifestMap = PLUGIN_MANIFEST.reduce((map, entry) => {
+  map.set(entry.id, entry);
+  return map;
+}, new Map<string, IPluginManifestEntry>());

package/src/plugins/now/components/index.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
-import { PathRouteProps } from 'react-router-dom';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
 import Streaming from './streaming';
 
-export const pageNow = ({ data }: IComPropsRegisteredToSlot) => {
-  const route = data as Omit<PathRouteProps, 'element'>;
-
-  if (route.path !== '/now') {
-    return <></>;
-  }
-
+export const pageNow = (_: IComPropsRegisteredToSlot) => {
   return <Streaming />;
 };

package/src/plugins/now/index.ts

@@ -1,18 +1,15 @@
+import { BBPlugin } from '#/core/bbplugin';
 import { IHostContext } from '#/types/hostApi';
-import { IPlugin } from '#/types/plugin';
+import { PluginID } from '#/types/plugin';
 import { buildEntryCreator } from '#/utils';
 
 import { pageNow } from './components';
 import { NowCtx } from './context';
 
-export class NowPlugin implements IPlugin {
-  id: string = 'now';
-  name: string = 'Now';
-  description?: string | undefined = 'Manages real-time site status and logs';
-  version: string = '1.0.0';
-  author?: string | undefined = 'bbki.ng';
+export class NowPlugin extends BBPlugin {
+  id: PluginID = 'now';
 
-  onInstall = (ctx: IHostContext) => {
+  override onInstall = async (ctx: IHostContext): Promise<void> => {
     const nowEntryCreator = buildEntryCreator(ctx);
     const { withCtx } = NowCtx;
 

package/src/plugins/sticker/index.ts

@@ -1,18 +1,12 @@
+import { BBPlugin } from '#/core/bbplugin';
 import { IHostContext } from '#/types/hostApi';
-import { IPlugin } from '#/types/plugin';
+import { PluginID } from '#/types/plugin';
 
 import { StickerCom } from './components/StickerCom';
 import { IStickerCtx, StickerCtx } from './context';
 
-class Sticker implements IPlugin {
-  id: string;
-  constructor() {
-    this.id = 'sticker';
-    this.name = 'Sticker';
-    this.description = 'A plugin for managing stickers and decorative elements';
-    this.version = '1.0.0';
-    this.author = 'bbki.ng';
-  }
+class Sticker extends BBPlugin {
+  id: PluginID = 'sticker';
 
   private createPluginCtx = async (ctx: IHostContext): Promise<IStickerCtx> => {
     return {
@@ -20,7 +14,7 @@ class Sticker implements IPlugin {
     };
   };
 
-  onInstall = async (ctx: IHostContext) => {
+  override onInstall = async (ctx: IHostContext): Promise<void> => {
     const { withCtx } = StickerCtx;
 
     const pluginCtx = await this.createPluginCtx(ctx);
@@ -29,14 +23,6 @@ class Sticker implements IPlugin {
 
     ctx.api.registerSlot('leftCol', Sticker, this.id);
   };
-
-  onDisable = async () => {};
-
-  onDestroy = () => {};
-  name: string;
-  description?: string | undefined;
-  version: string;
-  author?: string | undefined;
 }
 
 export default new Sticker();

package/src/plugins/store/components/storePage.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useEffect } from 'react';
+import { Button, Table } from '@bbki.ng/ui';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+import { IPluginStoreEntry, PluginID } from '#/types/plugin';
+
+import { StoreCtx } from '../context';
+
+export const StorePage = (_: IComPropsRegisteredToSlot) => {
+  const { list, setLoading, isInstalled, install, uninstall } = StoreCtx.useCtx();
+  const [plugins, setPlugins] = React.useState<Array<IPluginStoreEntry>>([]);
+
+  useEffect(() => {
+    const fetchPlugins = async () => {
+      setLoading(true);
+      const pluginList = await list();
+      setPlugins(pluginList);
+      setLoading(false);
+    };
+
+    fetchPlugins();
+  }, [list, setLoading]);
+
+  const handleInstall = useCallback(
+    async (id: PluginID) => {
+      setLoading(true);
+      await install(id);
+      const pluginList = await list();
+      setPlugins(pluginList);
+      setLoading(false);
+    },
+    [install, list, setLoading]
+  );
+
+  const handleUninstall = useCallback(
+    async (id: PluginID) => {
+      setLoading(true);
+      await uninstall(id);
+      const pluginList = await list();
+      setPlugins(pluginList);
+      setLoading(false);
+    },
+    [uninstall, list, setLoading]
+  );
+
+  if (plugins.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="prose">
+      <Table
+        className="w-full"
+        rowCount={plugins.length}
+        headerRenderer={() => {
+          return (
+            <>
+              <Table.HCell>插件名称</Table.HCell>
+              <Table.HCell>插件描述</Table.HCell>
+              <Table.HCell style={{ textAlign: 'right' }}>安装/卸载</Table.HCell>
+            </>
+          );
+        }}
+        rowRenderer={index => {
+          const isIdxValid = index >= 0 && index < plugins.length;
+          if (!isIdxValid) {
+            return null;
+          }
+          const plugin = plugins[index];
+          return (
+            <>
+              <Table.Cell>{plugin.name}</Table.Cell>
+              <Table.Cell>{plugin.description}</Table.Cell>
+              <Table.Cell style={{ textAlign: 'right' }}>
+                {isInstalled(plugin.id) ? (
+                  <Button
+                    variant="ghost"
+                    className="text-content-danger"
+                    onClick={() => {
+                      handleUninstall(plugin.id);
+                    }}
+                  >
+                    卸载
+                  </Button>
+                ) : (
+                  <Button
+                    color="primary"
+                    onClick={() => {
+                      handleInstall(plugin.id);
+                    }}
+                  >
+                    安装
+                  </Button>
+                )}
+              </Table.Cell>
+            </>
+          );
+        }}
+      />
+    </div>
+  );
+};

package/src/plugins/store/context/index.ts

@@ -0,0 +1,12 @@
+import { createPluginCtx } from '#/core/context';
+import { IPluginStoreEntry, PluginID } from '#/types/plugin';
+
+export interface IStoreCtx {
+  install: (pid: PluginID) => Promise<void>;
+  uninstall: (pid: PluginID) => Promise<void>;
+  isInstalled: (pid: PluginID) => boolean;
+  list: () => Promise<Array<IPluginStoreEntry>> | Array<IPluginStoreEntry>;
+  setLoading: (loading: boolean) => void;
+}
+
+export const StoreCtx = createPluginCtx<IStoreCtx>();

package/src/plugins/store/index.ts

@@ -0,0 +1,38 @@
+import { BBPlugin } from '#/core/bbplugin';
+import { IHostContext } from '#/types/hostApi';
+import { PluginID } from '#/types/plugin';
+import { buildEntryCreator } from '#/utils';
+
+import { StorePage } from './components/storePage';
+import { StoreCtx } from './context';
+
+export class PluginStore extends BBPlugin {
+  id: PluginID = 'store';
+  override onInstall = async (ctx: IHostContext): Promise<void> => {
+    const entryCreator = buildEntryCreator(ctx);
+    entryCreator(
+      {
+        path: '/store',
+        label: 'cd ./store',
+        pageComponent: StoreCtx.withCtx(
+          {
+            install: ctx.store?.installPlugin || (async () => {}),
+            uninstall: ctx.store?.disablePlugin || (async () => {}),
+            isInstalled: ctx.store?.isPluginInstalled || ((_: PluginID) => false),
+            list: () => {
+              const installed = Array.from(ctx.store?.getAllPlugins() || []);
+              return installed.filter(({ id }) => id !== this.id);
+            },
+            setLoading: (loading: boolean) => {
+              ctx.api.setLoading('store', loading);
+            },
+          },
+          StorePage
+        ),
+      },
+      this.id
+    );
+  };
+}
+
+export default new PluginStore();

package/src/plugins/xwy/index.ts

@@ -1,6 +1,7 @@
 import { IHostContext } from '#/types/hostApi';
-import { IPlugin } from '#/types/plugin';
+import { BBPlugin } from '#/core/bbplugin';
 import { HookPoint } from '#/types/slots';
+import { PluginID } from '#/types/plugin';
 
 import { HookPointTypeMap, Transformer } from './types';
 import { SpecialTitle } from './components/article';
@@ -14,16 +15,12 @@ import {
   pinTitle,
 } from './transformers';
 
-class XwyPlugin implements IPlugin {
-  id = 'fontstyler';
-  name = 'Font Styler';
-  description = 'Apply custom fonts to specific post titles';
-  version = '1.0.0';
-  author = 'bbki.ng';
+class XwyPlugin extends BBPlugin {
+  id: PluginID = 'xwy';
 
   private loadedFonts = new Set<string>();
 
-  onInstall = (ctx: IHostContext) => {
+  override onInstall = (ctx: IHostContext) => {
     // add font loading listener
     this.initFontLoadingListener();
 
@@ -71,7 +68,7 @@ class XwyPlugin implements IPlugin {
     });
   }
 
-  onDisable = async () => {
+  override onDisable = async () => {
     this.loadedFonts.forEach(fontName => {
       const styleEl = document.getElementById(`font-${fontName}`);
       if (styleEl) {
@@ -80,8 +77,6 @@ class XwyPlugin implements IPlugin {
     });
     this.loadedFonts.clear();
   };
-
-  onDestroy = () => {};
 }
 
 export default new XwyPlugin();

package/src/types/hostApi.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { type FingerprintData } from '@/utils/fingerprints';
+import { PluginStore } from '#/core/pluginStore';
 
 import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
 import { PluginID } from './plugin';
@@ -20,13 +21,11 @@ export interface IHostApi {
     pluginId: string,
     weight?: number
   ) => void;
-
-  installPlugin?: (id: PluginID) => void;
-  disablePlugin?: (id: PluginID) => void;
 }
 
 export type PluginInitializer = (api: IHostApi) => void;
 
 export interface IHostContext {
+  store?: PluginStore;
   api: IHostApi;
 }

package/src/types/plugin.ts

@@ -5,18 +5,15 @@ import { IComPropsRegisteredToSlot } from '#/types/slots';
 import { IHostContext } from './hostApi';
 
 export interface IPlugin {
-  id: string;
-  name: string;
-  description?: string;
-  version: string;
-  author?: string;
+  id: PluginID;
 
+  getMeta: () => IPluginManifestEntry;
   onInstall?: (ctx: IHostContext) => void | Promise<void>;
   onDisable?: () => Promise<void> | void;
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry' | 'store' | 'now';
+export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry' | 'store' | 'now' | 'default';
 
 export interface IPluginEntry {
   path: string;
@@ -42,3 +39,7 @@ export interface IPluginManifestEntry {
   description?: string;
   perm?: PluginPerm;
 }
+
+export interface IPluginStoreEntry extends IPluginManifestEntry {
+  enabled: boolean;
+}