@bbki.ng/site 5.5.23 → 5.5.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.5.25
+
+### Patch Changes
+
+- 942ce66: hide icon on fonts loading
+
+## 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.25",
   "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

@@ -1,5 +1,7 @@
 import { FontRule } from '../types';
 
+export const LOADING_CLASS = 'fonts-loading';
+
 export const FontRules: Array<FontRule> = [
   {
     match: '小乌鸦合集',
@@ -12,4 +14,14 @@ 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',
+      hideGlyphOnLoading: true,
+    },
+  },
 ];

package/src/plugins/xwy/index.ts

@@ -1,11 +1,12 @@
+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 { FontRules, LOADING_CLASS } from './const';
 import { loadFont } from './utils';
 
 class XwyPlugin implements IPlugin {
@@ -18,6 +19,9 @@ class XwyPlugin implements IPlugin {
   private loadedFonts = new Set<string>();
 
   onInstall = (ctx: IHostContext) => {
+    // add font loading listener
+    this.initFontLoadingListener();
+
     // 加载所有需要的字体文件
     FontRules.forEach(rule => {
       if (rule.fontConfig && !this.loadedFonts.has(rule.fontConfig.name)) {
@@ -42,6 +46,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 +61,27 @@ class XwyPlugin implements IPlugin {
     ctx.api.registerSlot('articleTitle', SpecialTitle, this.id);
   };
 
+  private initFontLoadingListener() {
+    // listen font loading status and add class to body for styling
+    document.documentElement.classList.add(LOADING_CLASS);
+    document.fonts.ready.then(() => {
+      document.documentElement.classList.remove(LOADING_CLASS);
+    });
+  }
+
+  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/types/index.ts

@@ -4,6 +4,7 @@ export interface FontConfig {
   format: 'woff2' | 'woff' | 'ttf' | 'otf';
   fontWeight?: string;
   fontStyle?: string;
+  hideGlyphOnLoading?: boolean;
 }
 
 export interface FontRule {

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

@@ -1,9 +1,18 @@
+import { LOADING_CLASS } from '../const';
 import { type FontConfig } from '../types';
 
 export const loadFont = (config: FontConfig) => {
   const styleId = `font-${config.name}`;
   if (document.getElementById(styleId)) return;
 
+  const hideCssRule = config.hideGlyphOnLoading
+    ? `
+      .${LOADING_CLASS} .font-${config.name} {
+        visibility: hidden;
+      }
+    `
+    : '';
+
   const style = document.createElement('style');
   style.id = styleId;
   style.textContent = `
@@ -12,11 +21,12 @@ 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;
       }
+      ${hideCssRule}
     `;
   document.head.appendChild(style);
 };