@bbki.ng/site 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.6.3
+
+## 1.6.2
+
 ## 1.6.1
 
 ## 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.5.1",
+    "@bbki.ng/components": "workspace:2.5.3",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.4.1",
+    "@bbki.ng/stylebase": "workspace:0.4.3",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/hooks/use_font_loading.ts

@@ -1,39 +1,37 @@
 import { useEffect, useState } from "react";
+import { changeFont } from "@/utils";
+import { FontType } from "@/types/font";
 
 export const useFontLoading = () => {
   const [isFontLoading, setIsFontLoading] = useState(false);
 
   const handleFontLoading = () => {
     setIsFontLoading(true);
+    document.fonts.ready.then(() => {
+      handleFontLoadingDone();
+    });
   };
 
   const handleFontLoadingDone = () => {
-    // delay 200ms
     setTimeout(() => {
       setIsFontLoading(false);
     }, 500);
   };
 
+  const handleFontLoadingError = () => {
+    setIsFontLoading(false);
+    changeFont(FontType.Mono);
+  };
+
   useEffect(() => {
-    document.fonts.onloadingdone = handleFontLoadingDone;
-    document.fonts.onloadingerror = handleFontLoadingDone;
-    document.fonts.ready.then(handleFontLoading);
+    document.fonts.onloadingerror = handleFontLoadingError;
     document.fonts.onloading = handleFontLoading;
 
-    // check font ready
-    if (document.fonts.status === "loaded") {
-      handleFontLoadingDone();
-    }
-
-    console.log(document.fonts.status);
-
     return () => {
-      document.fonts.onloadingdone = null;
       document.fonts.onloadingerror = null;
-      document.fonts.ready.then(() => {});
       document.fonts.onloading = null;
     };
-  }, [document.fonts.status]);
+  }, []);
 
   return isFontLoading;
 };

package/src/main.tsx

@@ -7,7 +7,6 @@ import "@bbki.ng/components/style";
 import App from "./app";
 import "./main.css";
 import Logger from "@/components/Logger";
-import { AppCtxMenu } from "@/components/app_ctx_menu";
 
 const container = document.getElementById("root") as Element;
 const root = createRoot(container);

package/src/types/font.ts

@@ -0,0 +1,4 @@
+export enum FontType {
+  NotoSerifSC = "noto-serif",
+  Mono = "font-mono",
+}

package/src/utils/index.ts

@@ -4,6 +4,7 @@ import { API_ENDPOINT, OSS_ADDRESS } from "@/constants/routes";
 import { DEFAULT_DELAY } from "@/constants";
 import useSWR from "swr";
 import { toast } from "sonner";
+import { FontType } from "@/types/font";
 
 type Fetcher = (resource: string, init?: any) => Promise<any>;
 
@@ -171,3 +172,24 @@ export const confirm = (message: string, exec: () => void) => {
     },
   });
 };
+
+export const changeFont = (type: FontType) => {
+  const rootDiv = document.getElementById("root");
+  if (rootDiv == null) {
+    return;
+  }
+
+  if (rootDiv.classList.contains(type)) {
+    return;
+  }
+
+  // remove all font type class
+  for (const fontType in FontType) {
+    rootDiv.classList.remove(fontType);
+  }
+
+  rootDiv.classList.add(type);
+
+  // save font type to local storage
+  localStorage.setItem("font", type);
+};