@bbki.ng/site 5.6.1 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 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.2",
   "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/pluginManager.ts

@@ -39,6 +39,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>,

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

@@ -0,0 +1,30 @@
+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';
+
+export const FxCom = (_: IComPropsRegisteredToSlot) => {
+  const ctx = FxContext.useCtx();
+  const hashStr = ctx.versionHash;
+  const deviceId = ctx.deviceId;
+
+  // 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, hashStr]);
+
+  return <EffectLayer effects={effects} />;
+};

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

@@ -0,0 +1,8 @@
+import { createPluginCtx } from '#/core/context';
+
+export interface IFxContext {
+  versionHash: string;
+  deviceId: string;
+}
+
+export const FxContext = createPluginCtx<IFxContext>();

package/src/plugins/fx/index.ts

@@ -0,0 +1,26 @@
+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,
+        },
+        FxCom
+      ),
+      this.id
+    );
+  };
+}
+
+export default new FxPlugin();

package/src/plugins/manifest.ts

@@ -27,6 +27,13 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     description:
       '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
   },
+  {
+    name: '特效',
+    id: 'fx',
+    version: '0.1.0',
+    description:
+      '提供一些额外的视觉效果。此外，页面左下角会显示当前版本的哈希值和设备标识哈希水印。',
+  },
   // {
   //   name: 'extra-entry',
   //   id: 'extra-entry',

package/src/types/hostApi.ts

@@ -8,6 +8,7 @@ import { PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
+  getVersionHash: () => Promise<string> | string;
   setLoading: (id: PluginID, loading: boolean) => void;
   registerMiddleware: <T>(
     point: HookPoint,

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;

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,
-  };
-}