@bbki.ng/site 5.5.21 → 5.5.23

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @bbki.ng/site
 
+## 5.5.23
+
+### Patch Changes
+
+- e2181b3: add new slots and data hook point
+- Updated dependencies [e2181b3]
+  - @bbki.ng/ui@0.2.15
+
+## 5.5.22
+
+### Patch Changes
+
+- 20b3d36: update font
+- Updated dependencies [20b3d36]
+  - @bbki.ng/ui@0.2.14
+
 ## 5.5.21
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.21",
+  "version": "5.5.23",
   "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.13"
+    "@bbki.ng/ui": "0.2.15"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/components/BaseLayout.tsx

@@ -5,10 +5,12 @@ import { Logo, Nav, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
 import { Slot } from '#/core/components/SlotComp';
 import { usePaths } from '@/hooks';
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
 
 export const BaseLayout = () => {
   const paths = usePaths();
   const { isLoading } = useContext(GlobalLoadingContext);
+  const transformedPaths = useMiddlewareTransformedData('transformBreadcrumbPath', paths);
 
   const nav = useNavigate();
 
@@ -20,7 +22,7 @@ export const BaseLayout = () => {
     <Page
       nav={
         <Nav
-          paths={paths}
+          paths={transformedPaths}
           className="gradient-blur-cover select-none"
           loading={isLoading}
           customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}

package/src/blog/components/article/index.tsx

@@ -1,21 +1,22 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { Article, Link } from '@bbki.ng/ui';
 import classNames from 'classnames';
-import { useNavigate } from 'react-router-dom';
+
+import { Slot } from '#/core/components/SlotComp';
 
 export type ArticlePageProps = {
   tags?: string[];
   title: string;
   date?: string;
-  description?: any;
+  description?: ReactNode;
   headless?: boolean;
   className?: string;
   children: ReactElement;
 };
 
 export const ArticlePage = (props: ArticlePageProps) => {
-  const { tags: tagNames, title, description, headless } = props;
-  const navgation = useNavigate();
+  const { title, description, headless } = props;
+  // const navgation = useNavigate();
 
   if (headless) {
     return props.children;
@@ -26,7 +27,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
   return (
     <>
       <Article
-        title={title}
+        title={<Slot name="articleTitle" data={title} placeholder={<>{title}</>} />}
         date={props.date}
         description={description}
         className={`${props.className || ''}`}

package/src/blog/hooks/use_paths.ts

@@ -1,12 +1,12 @@
-import { pathObj } from '@/types/path';
+import { useLocation } from 'react-router-dom';
+import { useMemo } from 'react';
+
 import { usePathName } from '@/hooks/use_pathname';
+import { pathObj } from '@/types/path';
 
 export const usePaths = (): pathObj[] => {
   const pathname = usePathName();
-
-  if (pathname === '/') {
-    return [{ name: '~' }];
-  }
+  const { pathname: locationPathname } = useLocation();
 
   const pathNameArr = pathname.split('/');
 
@@ -17,14 +17,22 @@ export const usePaths = (): pathObj[] => {
       .replace(/^$/, '/');
   });
 
-  return pathsArr.map((path, index) => {
-    const isLast = index === pathsArr.length - 1;
-    const name = decodeURIComponent(pathNameArr[index].replace(/^$/, '~'));
-    return isLast
-      ? { name }
-      : {
-          name,
-          path,
-        };
-  });
+  const result = useMemo(() => {
+    return pathsArr.map((path, index) => {
+      const isLast = index === pathsArr.length - 1;
+      const name = decodeURIComponent(pathNameArr[index].replace(/^$/, '~'));
+      return isLast
+        ? { name }
+        : {
+            name,
+            path,
+          };
+    });
+  }, [locationPathname]);
+
+  if (pathname === '/') {
+    return [{ name: '~' }];
+  }
+
+  return result;
 };

package/src/blog/utils/index.ts

@@ -1,5 +1,5 @@
 import { API_ENDPOINT } from '@/constants/routes';
-import { FontType } from '@/types/font';
+
 import { getStableDeviceId } from './fingerprints';
 
 type Fetcher = (resource: string, init?: any) => Promise<any>;

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 
 import { registry } from '#/core/registry';
 import type { HookPoint } from '#/types/slots';
@@ -52,3 +52,28 @@ export function useMiddlewareRunner<T>({
 
   return { loading, error, run };
 }
+
+export const useMiddlewareTransformedData = <T>(hookPoint: HookPoint, defaultValue: Array<T>) => {
+  const [result, setResult] = useState<Array<T>>(defaultValue);
+
+  const runRef = useRef<(input: Array<T>) => Promise<Array<T>>>(() =>
+    Promise.resolve(defaultValue)
+  );
+
+  const onMiddlewareChange = useCallback(() => {
+    runRef.current(defaultValue).then(setResult);
+  }, [defaultValue]);
+
+  const { run } = useMiddlewareRunner<Array<T>>({
+    hookPoint,
+    onMiddlewareChange,
+  });
+
+  runRef.current = run;
+
+  useEffect(() => {
+    run(defaultValue).then(setResult);
+  }, [defaultValue, run]);
+
+  return result;
+};

package/src/plugins/xwy/components/article.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const SpecialTitle = (props: IComPropsRegisteredToSlot) => {
+  const title = props.data as string;
+
+  if (title === '小乌鸦合集') {
+    return <span className="font-xwy text-content-special text-4xl">{title}</span>;
+  }
+
+  return <>{title}</>;
+};

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

@@ -9,7 +9,7 @@ export const FontRules: Array<FontRule> = [
       src: '/fonts/xwy.woff2',
       format: 'woff2',
     },
-    extraCls: 'text-2xl w-[113px]',
+    extraCls: 'text-2xl w-[81px]',
     variant: 'special',
   },
 ];

package/src/plugins/xwy/index.ts

@@ -1,6 +1,8 @@
 import { IHostContext } from '#/types/hostApi';
 import { IPlugin } from '#/types/plugin';
 import { TitleListItem } from '#/types/posts';
+import { PathObj } from '@bbki.ng/ui';
+import { SpecialTitle } from './components/article';
 
 import { XwyLogo } from './components/logo';
 import { FontRules } from './const';
@@ -32,8 +34,37 @@ class XwyPlugin implements IPlugin {
       10 // weight
     );
 
+    // 注册中间件，修改面包屑路径显示
+    ctx.api.registerMiddleware(
+      'transformBreadcrumbPath',
+      this.transformBreadcrumbPaths,
+      this.id,
+      10 // weight
+    );
+
     // 注册logo插槽组件
     ctx.api.registerSlot('logo', XwyLogo, this.id);
+
+    // 注册「小乌鸦合集」标题组件
+    ctx.api.registerSlot('articleTitle', SpecialTitle, this.id);
+  };
+
+  private transformBreadcrumbPaths = (paths: PathObj[]) => {
+    const result = paths.map(p => {
+      if (p.name === '小乌鸦合集') {
+        return {
+          ...p,
+          name: '小乌鸦合集',
+          className: 'font-xwy text-content-special text-[1.2rem]',
+        };
+      }
+
+      return p;
+    });
+
+    console.log('Transformed breadcrumb paths:', result);
+
+    return result;
   };
 
   /**

package/src/types/slots.ts

@@ -1,8 +1,15 @@
-export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow' | 'logo' | 'route';
+export type SlotName =
+  | 'leftCol'
+  | 'rightCol'
+  | 'articleActionRow'
+  | 'logo'
+  | 'route'
+  | 'articleTitle';
 
 export type HookPoint =
   | 'filterPosts'
   | 'transformPostContent'
+  | 'transformBreadcrumbPath'
   | 'transformTitleList'
   | 'extendedRoutes'
   | 'transformCoverEntry';