@bbki.ng/site 5.5.34 → 5.5.36

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.5.36
+
+### Patch Changes
+
+- e6d75b2: move now page to plugin
+
+## 5.5.35
+
+### Patch Changes
+
+- 86a9e69: fix padding
+
 ## 5.5.34
 
 ### Patch Changes

package/package.json

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

package/src/blog/app.tsx

@@ -11,11 +11,11 @@ import { usePlugins } from '#/core/hooks/use_plugins';
 import { SWR } from '@/swr';
 import type { PluginID } from '#/types/plugin';
 
-import { Cover, Streaming } from './pages';
+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' /*'extra-entry'*/];
+const APP_PLUGIN_IDS: Array<PluginID> = [/*'sticker',*/ 'xwy', 'extra-cd', 'now'];
 
 const AppRoutes = () => {
   usePlugins(APP_PLUGIN_IDS);
@@ -33,7 +33,6 @@ const AppRoutes = () => {
         </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} />} />
         ))}

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/index.ts

@@ -1,4 +1,2 @@
 export { usePaths } from './use_paths';
-export { useStreaming } from './use_streaming';
-export type { StreamingItem } from './use_streaming';
 export { useGlobalLoading } from './use_loading';

package/src/blog/hooks/use_plugin_entries.ts

@@ -3,14 +3,7 @@ import { type PathRouteProps } from 'react-router-dom';
 
 import { useMiddlewareRunner } from '#/core/hooks';
 
-const protectedRoutesSet = new Set<string>([
-  '/bot',
-  '/now',
-  '/',
-  '/blog',
-  '/blog/:title',
-  'default',
-]);
+const protectedRoutesSet = new Set<string>(['/bot', '/', '/blog', '/blog/:title', 'default']);
 
 type PluginRoute = Omit<PathRouteProps, 'element'>;
 

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/blog/pages/cover/index.tsx

@@ -11,10 +11,6 @@ export const Cover = (_: { className?: string }) => {
         to: '/blog',
         children: 'cd ./blog',
       },
-      {
-        to: '/now',
-        children: 'cd ./now',
-      },
     ],
     []
   );

package/src/blog/pages/index.tsx

@@ -1,2 +1,2 @@
 export { Cover } from './cover';
-export { default as Streaming } from './streaming';
+export { default as Streaming } from '../../plugins/now/components/streaming';

package/src/blog/utils/index.ts

@@ -2,7 +2,7 @@ import { API_ENDPOINT } from '@/constants/routes';
 
 import { getStableDeviceId } from './fingerprints';
 
-type Fetcher = (resource: string, init?: any) => Promise<any>;
+type Fetcher = (resource: string, init?: RequestInit) => Promise<unknown>;
 
 export const floatNumberToPercentageString = (num: number): string => {
   return `${num * 100}%`;

package/src/core/const/index.ts

@@ -0,0 +1,3 @@
+import { PluginID } from '#/types/plugin';
+
+export const AdminPluginIDSet: Set<PluginID> = new Set(['store']);

package/src/core/pluginManager.ts

@@ -2,11 +2,12 @@ import React from 'react';
 
 import { IHostContext } from '#/types/hostApi';
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
-import { IPlugin, PluginEvents, PluginID } from '#/types/plugin';
+import { IPlugin, PluginEvents, PluginID, PluginPerm } from '#/types/plugin';
 import { getStableDeviceId } from '@/utils/fingerprints';
 
 import { registry } from './registry';
 import { createEventBus } from './utils/eventBus';
+import { AdminPluginIDSet } from './const';
 
 const pluginModules = import.meta.glob('../plugins/*/index.ts');
 
@@ -15,9 +16,15 @@ class PluginManager {
 
   private bus = createEventBus<PluginEvents>();
 
-  private createHostContext(): IHostContext {
+  private createHostContext(perm: PluginPerm = 'guest'): IHostContext {
+    const adminOnlyApi = {
+      installPlugin: (id: PluginID) => this.loadPlugin(id),
+      disablePlugin: (id: PluginID) => this.disablePlugin(id),
+    };
+
     return {
       api: {
+        ...(perm === 'admin' ? adminOnlyApi : {}),
         setLoading: (id: PluginID, loading: boolean) => {
           this.bus.emit('plugin:loading:changed', { id, loading });
         },
@@ -82,7 +89,13 @@ class PluginManager {
 
       const p: IPlugin = module.default;
 
-      const ctx = this.createHostContext();
+      const perm = (p as IPlugin & { perm?: PluginPerm }).perm || 'guest';
+      if (perm === 'admin' && !AdminPluginIDSet.has(pluginId)) {
+        console.error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
+        return;
+      }
+
+      const ctx = this.createHostContext(perm);
 
       if (p.onInstall) {
         await p.onInstall(ctx);

package/src/plugins/manifest.ts

@@ -5,6 +5,19 @@ export const PLUGIN_MANIFEST = [
     version: '0.1.0',
     description: 'A sticker plugin',
   },
+  {
+    name: 'store',
+    id: 'store',
+    version: '0.1.0',
+    description: 'A plugin for state management and data persistence.',
+    perm: 'admin',
+  },
+  {
+    name: 'now',
+    id: 'now',
+    version: '1.0.0',
+    description: 'show real-time site status and logs',
+  },
   {
     name: 'extra-cd',
     id: 'extra-cd',

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

@@ -0,0 +1,16 @@
+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 <></>;
+  }
+
+  return <Streaming />;
+};

package/src/{blog/pages → plugins/now/components}/streaming/arrow-down.tsx

@@ -5,7 +5,7 @@ export const ArrowDownIcon = ({ show }: { show: boolean }) => (
   <svg
     data-testid="geist-icon"
     height="16"
-    stroke-linejoin="round"
+    strokeLinejoin="round"
     viewBox="0 0 16 16"
     width="16"
     style={{
@@ -17,8 +17,8 @@ export const ArrowDownIcon = ({ show }: { show: boolean }) => (
     })}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      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>

package/src/{blog/pages → plugins/now/components}/streaming/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useStreaming, StreamingItem } from '@/hooks/use_streaming';
-import { formatStreamingData } from '@/utils/streaming';
-import { Button, Panel } from '@bbki.ng/ui';
-import { useScrollBtnVisibility } from './useScrollBtnVisibility';
-import { Link } from '@bbki.ng/ui';
-import { ArrowDownIcon } from './arrow-down';
+import { Panel, Link } from '@bbki.ng/ui';
 import classNames from 'classnames';
 
-// Extend JSX IntrinsicElements for the web component
+import { formatStreamingData } from '#/plugins/now/utils/streaming';
+
+import { useStreaming } from '../../hooks/use_streaming';
+
+import { useScrollBtnVisibility } from './useScrollBtnVisibility';
+
 declare global {
   namespace JSX {
     interface IntrinsicElements {

package/src/{blog/pages → plugins/now/components}/streaming/useScrollBtnVisibility.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { BbMsgHistoryElement } from '.';
 
 export const useScrollBtnVisibility = (ele: BbMsgHistoryElement) => {

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

@@ -0,0 +1,7 @@
+import { createPluginCtx } from '#/core/context';
+
+export interface INowCtx {
+  setLoading: (loading: boolean) => void;
+}
+
+export const NowCtx = createPluginCtx<INowCtx>();

package/src/{blog → plugins/now}/hooks/use_streaming.ts

@@ -2,14 +2,13 @@ import useSWR from 'swr';
 import { useEffect, useState } from 'react';
 
 import { baseFetcher } from '@/utils';
-import { API_ENDPOINT } from '@/constants/routes';
 
-import { useGlobalLoading } from './use_loading';
+import { NowCtx } from '../context';
 
 // In dev, use /api prefix to leverage Vite proxy to localhost:8787
 // const isProd = typeof window !== 'undefined' && /^https:\/\/bbki.ng/.test(window.location.href);
 const isProd = true;
-const API_BASE = !isProd ? '/api' : API_ENDPOINT;
+const API_BASE = !isProd ? '/api' : 'https://cf.bbki.ng';
 
 export type StreamingItem = {
   id: string;
@@ -93,6 +92,8 @@ export function useStreaming(options: UseStreamingOptions = {}) {
 
   const isLoading = !data && !error;
 
+  const nowCtx = NowCtx.useCtx();
+
   const [, forceUpdate] = useState(0);
 
   // make rerender when customElement defined
@@ -102,7 +103,7 @@ export function useStreaming(options: UseStreamingOptions = {}) {
     });
   }, []);
 
-  useGlobalLoading('streaming', isLoading);
+  nowCtx.setLoading(isLoading);
 
   return {
     streaming: data?.data ?? [],

package/src/plugins/now/index.ts

@@ -0,0 +1,37 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } 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';
+
+  onInstall = (ctx: IHostContext) => {
+    const nowEntryCreator = buildEntryCreator(ctx);
+    const { withCtx } = NowCtx;
+
+    nowEntryCreator(
+      {
+        path: '/now',
+        label: 'cd ./now',
+        pageComponent: withCtx(
+          {
+            setLoading: loading => {
+              ctx.api.setLoading('now', loading);
+            },
+          },
+          pageNow
+        ),
+      },
+      this.id
+    );
+  };
+}
+
+export default new NowPlugin();

package/src/{blog → plugins/now}/utils/streaming.ts

@@ -1,7 +1,11 @@
-import { StreamingItem } from '@/hooks/use_streaming';
+export type StreamingItem = {
+  id: string;
+  author: string;
+  content: string;
+  type?: string;
+  createdAt: string;
+};
 
-// Format: "author: content" (with optional timestamp)
-// Timestamp format: YYYY-mm-dd HH:MM:SS
 export const formatStreamingData = (items: StreamingItem[]): string => {
   if (!items || items.length === 0) {
     return '';

package/src/plugins/xwy/index.ts

@@ -1,13 +1,17 @@
-import { PathObj } from '@bbki.ng/ui';
-
 import { IHostContext } from '#/types/hostApi';
 import { IPlugin } from '#/types/plugin';
-import { TitleListItem } from '#/types/posts';
+import { HookPoint } from '#/types/slots';
 
 import { SpecialTitle } from './components/article';
 import { XwyLogo } from './components/logo';
 import { FontRules, LOADING_CLASS } from './const';
 import { loadFont } from './utils';
+import {
+  transformBreadcrumbPaths,
+  transformTitleList,
+  transformPostContent,
+  pinTitle,
+} from './transformers';
 
 class XwyPlugin implements IPlugin {
   id = 'fontstyler';
@@ -30,29 +34,7 @@ class XwyPlugin implements IPlugin {
       }
     });
 
-    // 注册中间件，修改标题列表
-    ctx.api.registerMiddleware(
-      'transformTitleList',
-      this.transformTitleList,
-      this.id,
-      10 // weight
-    );
-
-    // 注册中间件，修改面包屑路径显示
-    ctx.api.registerMiddleware(
-      'transformBreadcrumbPath',
-      this.transformBreadcrumbPaths,
-      this.id,
-      10 // weight
-    );
-
-    // 注册中间件，修改文章内容
-    ctx.api.registerMiddleware(
-      'transformPostContent',
-      this.transformPostContent,
-      this.id,
-      10 // weight
-    );
+    this.batchRegisterMiddlewares(ctx);
 
     // 注册logo插槽组件
     ctx.api.registerSlot('logo', XwyLogo, this.id);
@@ -61,6 +43,22 @@ class XwyPlugin implements IPlugin {
     ctx.api.registerSlot('articleTitle', SpecialTitle, this.id);
   };
 
+  private trasformerMap: Partial<Record<HookPoint, Array<(baseData: any) => any>>> = {
+    transformTitleList: [pinTitle, transformTitleList],
+    transformBreadcrumbPath: [transformBreadcrumbPaths],
+    transformPostContent: [transformPostContent],
+  };
+
+  private batchRegisterMiddlewares(ctx: IHostContext) {
+    for (const [point, fns] of Object.entries(this.trasformerMap) as Array<
+      [HookPoint, Array<(baseData: unknown) => unknown>]
+    >) {
+      fns.forEach(fn => {
+        ctx.api.registerMiddleware(point, fn, this.id, 10);
+      });
+    }
+  }
+
   private initFontLoadingListener() {
     // listen font loading status and add class to body for styling
     console.log('Initializing font loading listener');
@@ -70,58 +68,6 @@ class XwyPlugin implements IPlugin {
     });
   }
 
-  private transformPostContent = (content: string = '') => {
-    // 在文章内容中替换特定关键词为特殊样式
-    return content
-      .replace(
-        /小乌鸦/g,
-        `<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-[1.09]">&#xE01A&#xE003</span>`
-      );
-  };
-
-  private transformBreadcrumbPaths = (paths: PathObj[]) => {
-    const result = paths.map(p => {
-      if (p.name === '小乌鸦合集') {
-        return {
-          ...p,
-          name: '小乌鸦合集',
-          className: 'font-xwy text-content-special text-[1.2rem] align-middle relative top-[1px]',
-        };
-      }
-
-      return p;
-    });
-
-    console.log('Transformed breadcrumb paths:', result);
-
-    return result;
-  };
-
-  /**
-   * 转换标题列表，为匹配的标题添加字体类名
-   */
-  private transformTitleList = (titleList: TitleListItem[]): TitleListItem[] => {
-    return titleList.map(item => {
-      for (const rule of FontRules) {
-        const match =
-          typeof rule.match === 'string' ? item.name === rule.match : rule.match.test(item.name);
-
-        if (match) {
-          return {
-            ...item,
-            variant: rule.variant || 'default',
-            className: `font-${rule.fontFamily} ${rule.extraCls || ''}`.trim(),
-          };
-        }
-      }
-      return item;
-    });
-  };
-
   onDisable = async () => {
     this.loadedFonts.forEach(fontName => {
       const styleEl = document.getElementById(`font-${fontName}`);

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

@@ -0,0 +1,67 @@
+import { PathObj } from '@bbki.ng/ui';
+
+import { TitleListItem } from '#/types/posts';
+
+import { FontRules } from '../const';
+
+export const transformPostContent = (content: string = '') => {
+  // 在文章内容中替换特定关键词为特殊样式
+  return content
+    .replace(
+      /小乌鸦/g,
+      `<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-[1.09]">&#xE01A&#xE003</span>`
+    );
+};
+
+export const pinTitle = (titleList: TitleListItem[]) => {
+  const pinnedTitle = '小乌鸦合集';
+  const index = titleList.findIndex(item => item.name === pinnedTitle);
+  if (index > -1) {
+    const [item] = titleList.splice(index, 1);
+    titleList.unshift(item);
+  }
+  return titleList;
+};
+
+export const transformBreadcrumbPaths = (paths: PathObj[]) => {
+  const result = paths.map(p => {
+    if (p.name === '小乌鸦合集') {
+      return {
+        ...p,
+        name: '小乌鸦合集',
+        className: 'font-xwy text-content-special text-[1.2rem] align-middle relative top-[1px]',
+      };
+    }
+
+    return p;
+  });
+
+  console.log('Transformed breadcrumb paths:', result);
+
+  return result;
+};
+
+/**
+ * 转换标题列表，为匹配的标题添加字体类名
+ */
+export const transformTitleList = (titleList: TitleListItem[]): TitleListItem[] => {
+  return titleList.map(item => {
+    for (const rule of FontRules) {
+      const match =
+        typeof rule.match === 'string' ? item.name === rule.match : rule.match.test(item.name);
+
+      if (match) {
+        return {
+          ...item,
+          variant: rule.variant || 'default',
+          className: `font-${rule.fontFamily} ${rule.extraCls || ''}`.trim(),
+        };
+      }
+    }
+    return item;
+  });
+};

package/src/types/hostApi.ts

@@ -20,6 +20,9 @@ export interface IHostApi {
     pluginId: string,
     weight?: number
   ) => void;
+
+  installPlugin?: (id: PluginID) => void;
+  disablePlugin?: (id: PluginID) => void;
 }
 
 export type PluginInitializer = (api: IHostApi) => void;

package/src/types/plugin.ts

@@ -16,7 +16,7 @@ export interface IPlugin {
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry';
+export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry' | 'store' | 'now';
 
 export interface IPluginEntry {
   path: string;
@@ -32,3 +32,13 @@ export interface IPluginLoadingPayload {
   id: PluginID;
   loading: boolean;
 }
+
+export type PluginPerm = 'guest' | 'admin';
+
+export interface IPluginManifestEntry {
+  id: PluginID;
+  name: string;
+  version: string;
+  description?: string;
+  perm?: PluginPerm;
+}