@bbki.ng/site 5.5.24 → 5.5.26

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.5.26
+
+### Patch Changes
+
+- 368b207: fix npe
+
+## 5.5.25
+
+### Patch Changes
+
+- 942ce66: hide icon on fonts loading
+
 ## 5.5.24
 
 ### Patch Changes

package/package.json

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

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: '小乌鸦合集',
@@ -19,6 +21,7 @@ export const FontRules: Array<FontRule> = [
       name: 'xwy-icon',
       src: '/fonts/yao-icons.woff2',
       format: 'woff2',
+      hideGlyphOnLoading: true,
     },
   },
 ];

package/src/plugins/xwy/index.ts

@@ -6,7 +6,7 @@ import { TitleListItem } from '#/types/posts';
 
 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 {
@@ -19,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)) {
@@ -58,7 +61,15 @@ class XwyPlugin implements IPlugin {
     ctx.api.registerSlot('articleTitle', SpecialTitle, this.id);
   };
 
-  private transformPostContent = (content: string) => {
+  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(

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 = `
@@ -17,6 +26,7 @@ export const loadFont = (config: FontConfig) => {
       .font-${config.name} {
         font-family: '${config.name}', monospace;
       }
+      ${hideCssRule}
     `;
   document.head.appendChild(style);
 };