@bbki.ng/site 5.6.1 → 5.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.6.3
+
+### Patch Changes
+
+- 2d1528a: fix fx loading state
+
+## 5.6.2
+
+### Patch Changes
+
+- 72a0b48: add fx plugin
+
 ## 5.6.1
 
 ### Patch Changes

package/package.json

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

package/src/blog/components/BaseLayout.tsx

@@ -19,39 +19,42 @@ export const BaseLayout = () => {
   );
 
   return (
-    <Page
-      nav={
-        <Nav
-          paths={transformedPaths}
-          className="gradient-blur-cover select-none"
-          loading={isLoading}
-          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
-          style={{
-            paddingTop: 'calc(var(--safe-top) + 4px)',
-            transition: 'all .2s ease-in-out',
-          }}
-        />
-      }
-      main={
-        <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-48">
-            <ErrorBoundary>
-              <Outlet />
-            </ErrorBoundary>
-          </Container>
-        </Grid>
-      }
-    />
+    <>
+      <Page
+        nav={
+          <Nav
+            paths={transformedPaths}
+            className="gradient-blur-cover select-none"
+            loading={isLoading}
+            customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
+            style={{
+              paddingTop: 'calc(var(--safe-top) + 4px)',
+              transition: 'all .2s ease-in-out',
+            }}
+          />
+        }
+        main={
+          <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-48">
+              <ErrorBoundary>
+                <Outlet />
+              </ErrorBoundary>
+            </Container>
+          </Grid>
+        }
+      />
+      <Slot name="pageFooter" />
+    </>
   );
 };

package/src/blog/context/bbcontext.tsx

@@ -2,14 +2,11 @@ import React, { ReactNode } from 'react';
 
 import { GlobalLoadingStateProvider } from '@/context/global_loading_state_provider';
 import { GlobalRoutesProvider } from '@/context/global_routes_provider';
-import { EffectContextProvider } from '@/components/effect-layer/EffectContextProvider';
 
 export const BBContext = (props: { children: ReactNode }) => {
   return (
     <GlobalLoadingStateProvider>
-      <GlobalRoutesProvider>
-        <EffectContextProvider>{props.children}</EffectContextProvider>
-      </GlobalRoutesProvider>
+      <GlobalRoutesProvider>{props.children}</GlobalRoutesProvider>
     </GlobalLoadingStateProvider>
   );
 };

package/src/core/hooks/use_plugins.ts

@@ -7,7 +7,11 @@ import { PluginID } from '#/types/plugin';
 import { PluginStore } from '../pluginStore';
 
 const usePluginsLoading = () => {
-  const { setGlobalLoading } = useGlobalLoading();
+  const { setGlobalLoading, isLoading } = useGlobalLoading();
+
+  useEffect(() => {
+    pluginManager.notifySiteLoadingChanged(isLoading);
+  }, [isLoading]);
 
   useEffect(() => {
     let unregister: (() => void) | undefined;

package/src/core/pluginManager.ts

@@ -30,6 +30,9 @@ class PluginManager {
         setLoading: (id: PluginID, loading: boolean) => {
           this.bus.emit('plugin:loading:changed', { id, loading });
         },
+        onLoadingChanged: (listener: (payload: PluginEvents['site:loading:changed']) => void) => {
+          return this.bus.on('site:loading:changed', listener);
+        },
         registerMiddleware: <T>(
           point: HookPoint,
           fn: (data: T) => Promise<T> | T,
@@ -39,6 +42,11 @@ class PluginManager {
           registry.registerMiddleware(point, fn, pluginId, weight);
         },
         getDeviceId: getStableDeviceId,
+        getVersionHash: () => {
+          const hashStr: string =
+            typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
+          return hashStr;
+        },
         registerSlot: (
           slotName: SlotName,
           component: React.ComponentType<IComPropsRegisteredToSlot>,
@@ -53,6 +61,10 @@ class PluginManager {
 
   private loading = new Set<string>();
 
+  notifySiteLoadingChanged(loading: boolean) {
+    this.bus.emit('site:loading:changed', loading);
+  }
+
   subscribePluginLoading(listener: (payload: PluginEvents['plugin:loading:changed']) => void) {
     return this.bus.on('plugin:loading:changed', listener);
   }

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

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+import { FxContext } from '../context';
+
+const useLoadingState = () => {
+  const ctx = FxContext.useCtx();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const unsubscribe = ctx.subscribeToLoading(setIsLoading);
+    return () => {
+      unsubscribe();
+    };
+  }, [ctx]);
+
+  return isLoading;
+};
+
+export const FxCom = (_: IComPropsRegisteredToSlot) => {
+  const ctx = FxContext.useCtx();
+  const hashStr = ctx.versionHash;
+  const deviceId = ctx.deviceId;
+  const isLoading = useLoadingState();
+
+  console.log('is loading', isLoading);
+
+  const effects: Effect[] = useMemo(() => {
+    const wmLines = [hashStr];
+    if (deviceId) wmLines.push(deviceId);
+    wmLines.push('hello world');
+
+    return [grain(), paper(), spiral({ active: isLoading }), watermark({ lines: wmLines })];
+  }, [isLoading, deviceId, hashStr]);
+
+  return <EffectLayer effects={effects} />;
+};

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

@@ -0,0 +1,12 @@
+import { createPluginCtx } from '#/core/context';
+import { PluginEvents } from '#/types/plugin';
+
+export interface IFxContext {
+  versionHash: string;
+  deviceId: string;
+  subscribeToLoading: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
+}
+
+export const FxContext = createPluginCtx<IFxContext>();

package/src/plugins/fx/index.ts

@@ -0,0 +1,29 @@
+import { BBPlugin } from '#/core/bbplugin';
+import { IHostContext } from '#/types/hostApi';
+import { PluginID } from '#/types/plugin';
+
+import { FxCom } from './components';
+import { FxContext } from './context';
+
+class FxPlugin extends BBPlugin {
+  id: PluginID = 'fx';
+
+  override onInstall = async (ctx: IHostContext) => {
+    ctx.api.registerSlot(
+      'pageFooter',
+      FxContext.withCtx(
+        {
+          versionHash: await ctx.api.getVersionHash(),
+          deviceId: (await ctx.api.getDeviceId()).id,
+          subscribeToLoading: listener => {
+            return ctx.api.onLoadingChanged(listener);
+          },
+        },
+        FxCom
+      ),
+      this.id
+    );
+  };
+}
+
+export default new FxPlugin();

package/src/plugins/manifest.ts

@@ -25,7 +25,13 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     id: 'extra-cd',
     version: '0.1.0',
     description:
-      '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+      '提供额外的页面跳转链接。例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+  },
+  {
+    name: '特效',
+    id: 'fx',
+    version: '0.1.0',
+    description: '提供一些额外的视觉效果。例如版本、设备信息水印，加载状态螺旋线、背景纹理等',
   },
   // {
   //   name: 'extra-entry',

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Table } from '@bbki.ng/ui';
+import classNames from 'classnames';
+import { Button, Table, Link } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 import { IPluginStoreEntry, PluginID } from '#/types/plugin';
@@ -163,13 +164,22 @@ export const StorePage = (_: IComPropsRegisteredToSlot) => {
   }
 
   return (
-    <div className="prose">
-      <Table
-        className="w-full"
-        rowCount={plugins.length}
-        headerRenderer={headerRenderer}
-        rowRenderer={rowRenderer}
-      />
-    </div>
+    <>
+      <div className="prose">
+        <Table
+          className="w-full"
+          rowCount={plugins.length}
+          headerRenderer={headerRenderer}
+          rowRenderer={rowRenderer}
+        />
+      </div>
+      <Link
+        className={classNames('w-fit relative transition-all duration-300 mt-16')}
+        to="/"
+        style={{ left: -4 }}
+      >
+        cd ..
+      </Link>
+    </>
   );
 };

package/src/types/hostApi.ts

@@ -4,11 +4,15 @@ import { type FingerprintData } from '@/utils/fingerprints';
 import { PluginStore } from '#/core/pluginStore';
 
 import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
-import { PluginID } from './plugin';
+import { PluginEvents, PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
+  getVersionHash: () => Promise<string> | string;
   setLoading: (id: PluginID, loading: boolean) => void;
+  onLoadingChanged: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
   registerMiddleware: <T>(
     point: HookPoint,
     fn: (baseData: T) => T,

package/src/types/plugin.ts

@@ -13,7 +13,15 @@ export interface IPlugin {
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry' | 'store' | 'now' | 'default';
+export type PluginID =
+  | 'sticker'
+  | 'xwy'
+  | 'extra-cd'
+  | 'extra-entry'
+  | 'store'
+  | 'now'
+  | 'default'
+  | 'fx';
 
 export interface IPluginEntry {
   path: string;
@@ -23,6 +31,7 @@ export interface IPluginEntry {
 
 export type PluginEvents = {
   'plugin:loading:changed': IPluginLoadingPayload;
+  'site:loading:changed': boolean;
 };
 
 export interface IPluginLoadingPayload {

package/src/types/slots.ts

@@ -4,6 +4,7 @@ export type SlotName =
   | 'articleActionRow'
   | 'logo'
   | 'route'
+  | 'pageFooter'
   | 'articleTitle';
 
 export type HookPoint =

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -1,27 +0,0 @@
-import React, { ReactNode, useContext, useMemo } from 'react';
-import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
-
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
-import { useFingerprint } from '@/hooks/use_fingerprint';
-
-const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
-
-export const EffectContextProvider = (props: { children: ReactNode }) => {
-  const { isLoading } = useContext(GlobalLoadingContext);
-  const { deviceId } = useFingerprint();
-
-  const effects: Effect[] = useMemo(() => {
-    const wmLines = [hashStr];
-    if (deviceId) wmLines.push(deviceId);
-    wmLines.push('hello world');
-
-    return [grain(), paper(), spiral({ active: isLoading }), watermark({ lines: wmLines })];
-  }, [isLoading, deviceId]);
-
-  return (
-    <>
-      <EffectLayer effects={effects} />
-      {props.children}
-    </>
-  );
-};

package/src/blog/hooks/use_fingerprint.ts

@@ -1,55 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { getStableDeviceId, FingerprintData } from '@/utils/fingerprints';
-
-interface UseFingerprintReturn {
-  deviceId: string | null;
-  fingerprint: FingerprintData | null;
-  loading: boolean;
-  error: Error | null;
-  refresh: () => Promise<void>;
-}
-
-export function useFingerprint(): UseFingerprintReturn {
-  const [state, setState] = useState<{
-    deviceId: string | null;
-    fingerprint: FingerprintData | null;
-    loading: boolean;
-    error: Error | null;
-  }>({
-    deviceId: null,
-    fingerprint: null,
-    loading: true,
-    error: null,
-  });
-
-  const refresh = useCallback(async () => {
-    setState(prev => ({ ...prev, loading: true, error: null }));
-    try {
-      const { id, fp } = await getStableDeviceId();
-      setState({
-        deviceId: id,
-        fingerprint: fp,
-        loading: false,
-        error: null,
-      });
-    } catch (err) {
-      setState(prev => ({
-        ...prev,
-        loading: false,
-        error: err instanceof Error ? err : new Error('Failed to get fingerprint'),
-      }));
-    }
-  }, []);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  return {
-    deviceId: state.deviceId,
-    fingerprint: state.fingerprint,
-    loading: state.loading,
-    error: state.error,
-    refresh,
-  };
-}