@bbki.ng/site 5.5.23 → 5.5.24

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 5.5.24
+
+### Patch Changes
+
+- 48e4f2d: add new transformer to xwy plugin
+
 ## 5.5.23
 
 ### Patch Changes

package/package.json

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

package/src/blog/pages/extensions/txt/article.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 import { usePosts } from '@/hooks/use_posts';
 import { ArticlePage } from '@/components/article';
 import { useBlogScrollReset } from '@/hooks/use_blog_scroll_pos_restoration';
+import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
 
 function TxtArticle() {
   const { title } = useParams();
@@ -12,6 +13,8 @@ function TxtArticle() {
 
   useBlogScrollReset();
 
+  const transformedContent = useMiddlewareTransformedData('transformPostContent', posts?.content);
+
   if (!title) {
     return <NotFound />;
   }
@@ -28,7 +31,7 @@ function TxtArticle() {
 
   return (
     <ArticlePage title={title} date={date}>
-      <div dangerouslySetInnerHTML={{ __html: posts.content }} />
+      <div dangerouslySetInnerHTML={{ __html: transformedContent }} />
     </ArticlePage>
   );
 }

package/src/core/hooks/useMiddlewareTransData.ts

@@ -53,18 +53,16 @@ export function useMiddlewareRunner<T>({
   return { loading, error, run };
 }
 
-export const useMiddlewareTransformedData = <T>(hookPoint: HookPoint, defaultValue: Array<T>) => {
-  const [result, setResult] = useState<Array<T>>(defaultValue);
+export const useMiddlewareTransformedData = <T>(hookPoint: HookPoint, defaultValue: T) => {
+  const [result, setResult] = useState<T>(defaultValue);
 
-  const runRef = useRef<(input: Array<T>) => Promise<Array<T>>>(() =>
-    Promise.resolve(defaultValue)
-  );
+  const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));
 
   const onMiddlewareChange = useCallback(() => {
     runRef.current(defaultValue).then(setResult);
   }, [defaultValue]);
 
-  const { run } = useMiddlewareRunner<Array<T>>({
+  const { run } = useMiddlewareRunner<T>({
     hookPoint,
     onMiddlewareChange,
   });

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

@@ -12,4 +12,13 @@ export const FontRules: Array<FontRule> = [
     extraCls: 'text-2xl w-[81px]',
     variant: 'special',
   },
+  {
+    match: '',
+    fontFamily: 'xwy-icon',
+    fontConfig: {
+      name: 'xwy-icon',
+      src: '/fonts/yao-icons.woff2',
+      format: 'woff2',
+    },
+  },
 ];

package/src/plugins/xwy/index.ts

@@ -1,9 +1,10 @@
+import { PathObj } from '@bbki.ng/ui';
+
 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 { SpecialTitle } from './components/article';
 import { XwyLogo } from './components/logo';
 import { FontRules } from './const';
 import { loadFont } from './utils';
@@ -42,6 +43,14 @@ class XwyPlugin implements IPlugin {
       10 // weight
     );
 
+    // 注册中间件，修改文章内容
+    ctx.api.registerMiddleware(
+      'transformPostContent',
+      this.transformPostContent,
+      this.id,
+      10 // weight
+    );
+
     // 注册logo插槽组件
     ctx.api.registerSlot('logo', XwyLogo, this.id);
 
@@ -49,6 +58,19 @@ class XwyPlugin implements IPlugin {
     ctx.api.registerSlot('articleTitle', SpecialTitle, this.id);
   };
 
+  private transformPostContent = (content: string) => {
+    // 在文章内容中替换特定关键词为特殊样式
+    return content
+      .replace(
+        /小乌鸦/g,
+        `<span class="font-xwy text-content-special text-[1.6rem] align-middle">小乌鸦</span>`
+      )
+      .replace(
+        /公园/,
+        `公园 <span class="font-xwy-icon text-[#679867] text-[1.6rem] align-middle">&#xE01A&#xE003</span>`
+      );
+  };
+
   private transformBreadcrumbPaths = (paths: PathObj[]) => {
     const result = paths.map(p => {
       if (p.name === '小乌鸦合集') {

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

@@ -12,7 +12,7 @@ export const loadFont = (config: FontConfig) => {
         src: url('${config.src}') format('${config.format}');
         font-weight: ${config.fontWeight || 'normal'};
         font-style: ${config.fontStyle || 'normal'};
-        font-display: swap;
+        font-display: block;
       }
       .font-${config.name} {
         font-family: '${config.name}', monospace;