@bbki.ng/site 1.8.4 → 1.8.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.8.6
+
+## 1.8.5
+
 ## 1.8.4
 
 ## 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@extism/extism": "2.0.0-rc11",
-    "@bbki.ng/components": "workspace:2.6.3",
+    "@bbki.ng/components": "workspace:2.6.5",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

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

@@ -3,6 +3,7 @@ import { Tags, Article } from "@bbki.ng/components";
 import { ROUTES } from "@/constants";
 import classNames from "classnames";
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -13,26 +14,9 @@ export type ArticlePageProps = {
   children: ReactElement;
 };
 
-const useSafeArticleLoading = (safeSec: number) => {
-  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
-  const [isArticleLoading, setIsArticleLoading] = React.useState(true);
-
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setIsArticleLoading(false);
-    }, safeSec * 1000);
-
-    return () => {
-      clearTimeout(id);
-    };
-  }, []);
-
-  return isLoading || isFontLoading || isArticleLoading;
-};
-
 export const ArticlePage = (props: ArticlePageProps) => {
   const { tags: tagNames, title, description, headless } = props;
-  const loading = useSafeArticleLoading(0.2);
+  const loading = useSafeArticleLoading(0.2, 5);
   const tags = tagNames
     ? tagNames.map((t) => ({ children: t, to: `${ROUTES.TAGS}/${t}` }))
     : [];

package/src/blog/components/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { LinkList } from "@bbki.ng/components";
+import { BlurCover } from "@bbki.ng/components";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
 
 export { DisabledText, SmallDisabledText } from "./disabled_text";
@@ -30,10 +31,9 @@ export { MySuspense } from "./my_suspense";
 
 export const CenterLinkList = (props: any) => {
   return (
-    <div className="flex justify-center">
-      <DelayFadeIn delay={200}>
-        <LinkList {...props} />
-      </DelayFadeIn>
+    <div className="flex justify-center relative p-16">
+      <LinkList {...props} />
+      <BlurCover status={props.loading ? "show" : "silent"} />
     </div>
   );
 };

package/src/blog/components/plugin/PluginContentPage.tsx

@@ -1,25 +1,47 @@
 import { ArticlePage, ArticlePageProps } from "@/components/article";
-import React, { memo } from "react";
+import React, { useCallback, useEffect } from "react";
 import { threeColWrapper } from "@/components/with_wrapper";
 import { useParams } from "react-router-dom";
 import { usePluginOutput } from "@/components/plugin/hooks/usePluginOutput";
 import { PluginManager } from "@/plugin/PluginManager";
+import { PluginConfig } from "@extism/extism";
+import { PluginEvent } from "@/plugin/PluginEvent";
 
 type PluginContentPageProps = Omit<ArticlePageProps, "children">;
 
 const ContentPage = (props: PluginContentPageProps) => {
   const { pluginRoute } = useParams();
 
-  if (!pluginRoute || !PluginManager.instance) {
-    return null;
-  }
+  const [c, setC] = React.useState<string>("");
 
-  const plugin = PluginManager.instance.getPluginByRoute(pluginRoute);
-  if (!plugin) {
-    return null;
-  }
+  const onInstall = useCallback((plugin: PluginConfig) => {
+    if (plugin.route !== pluginRoute) {
+      return;
+    }
+
+    PluginManager.instance.run(plugin.id).then((result) => {
+      setC(result);
+    });
+  }, []);
+
+  useEffect(() => {
+    PluginManager.addEventListener<PluginConfig>(
+      PluginEvent.INSTALL,
+      onInstall
+    );
+
+    return () => {
+      PluginManager.removeEventListener<PluginConfig>(
+        PluginEvent.INSTALL,
+        onInstall
+      );
+    };
+  }, []);
+
+  const plugin = PluginManager.instance?.getPluginByRoute(pluginRoute || "");
+
+  const content = usePluginOutput(plugin?.config.id) || c;
 
-  const content = usePluginOutput(plugin.config.id);
   return (
     <ArticlePage {...props} title={plugin?.config.route || ""}>
       <div dangerouslySetInnerHTML={{ __html: content }} />

package/src/blog/components/plugin/PluginRoutes.tsx

@@ -2,12 +2,22 @@ import { threeColWrapper } from "@/components/with_wrapper";
 import { CenterLinkList } from "@/components";
 import React, { useContext } from "react";
 import { GlobalRoutesContext } from "@/context/global_routes_provider";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 const PluginRoutesContent = () => {
   const globalRouteCtx = useContext(GlobalRoutesContext);
   const routes = globalRouteCtx.globalRoutes;
 
-  return <CenterLinkList className="select-none" links={routes} title="" />;
+  const isLoading = useSafeArticleLoading(0.2, 3);
+
+  return (
+    <CenterLinkList
+      className="select-none"
+      links={routes}
+      title=""
+      loading={isLoading}
+    />
+  );
 };
 
 export const PluginRoutes = threeColWrapper(PluginRoutesContent);

package/src/blog/components/plugin/hooks/usePluginOutput.tsx

@@ -1,7 +1,7 @@
 import { PluginManager } from "@/plugin/PluginManager";
 import { useEffect, useState } from "react";
 
-export const usePluginOutput = (pluginId: number): string => {
+export const usePluginOutput = (pluginId?: number): string => {
   const [output, setOutput] = useState<string>("");
 
   useEffect(() => {

package/src/blog/hooks/use_safe_loading.ts

@@ -0,0 +1,29 @@
+import React, { useContext, useEffect } from "react";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+
+export const useSafeArticleLoading = (safeSec: number, timeOutSec: number) => {
+  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
+  const [isArticleLoading, setIsArticleLoading] = React.useState(true);
+  const [isTimeout, setIsTimeout] = React.useState(false);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setIsArticleLoading(false);
+    }, safeSec * 1000);
+
+    const timeoutId = setTimeout(() => {
+      setIsTimeout(true);
+    }, timeOutSec * 1000);
+
+    return () => {
+      clearTimeout(id);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  if (isTimeout) {
+    return false;
+  }
+
+  return isLoading || isFontLoading || isArticleLoading;
+};

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

@@ -6,6 +6,7 @@ import { CenterLinkList } from "@/components";
 import { useAuthed } from "@/hooks/use_authed";
 import { useFile2Post } from "@/hooks/use_file_to_post";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 type TxtProps = {
   title?: string;
@@ -15,6 +16,8 @@ type TxtProps = {
 const Posts = (props: TxtProps) => {
   const { titleList, isLoading, isError } = usePosts();
 
+  const isGlobalLoading = useSafeArticleLoading(0.2, 5);
+
   if (isLoading) {
     return null;
   }
@@ -25,7 +28,12 @@ const Posts = (props: TxtProps) => {
 
   const links = [...titleList, ...ArticleList];
 
-  return <CenterLinkList links={props.articleList || links} />;
+  return (
+    <CenterLinkList
+      links={props.articleList || links}
+      loading={isGlobalLoading}
+    />
+  );
 };
 
 export default (props: TxtProps) => {

package/src/blog/plugin/PluginEvent.ts

@@ -0,0 +1,5 @@
+export enum PluginEvent {
+  INIT = "init",
+  INSTALL = "installed",
+  UNINSTALL = "uninstalled",
+}

package/src/blog/plugin/PluginManager.ts

@@ -1,6 +1,7 @@
-import { Plugin, PluginConfig, PluginInputFieldType } from "./Plugin";
+import { Plugin, PluginConfig } from "./Plugin";
 import { Dependencies } from "@/plugin/Dependencies";
 import { PluginManagerPayload } from "@/plugin/PluginManagerPayload";
+import { PluginEvent } from "@/plugin/PluginEvent";
 
 export class PluginManager {
   private readonly dependencies: Dependencies;
@@ -46,6 +47,22 @@ export class PluginManager {
 
   static instance: PluginManager;
 
+  static dispatchEvent<T>(evt: PluginEvent, data: T) {
+    window.dispatchEvent(new CustomEvent(evt, { detail: data }));
+  }
+
+  static addEventListener<T>(evt: PluginEvent, cb: (data: T) => void) {
+    window.addEventListener(evt, (e) => {
+      cb((e as CustomEvent<T>).detail);
+    });
+  }
+
+  static removeEventListener<T>(evt: PluginEvent, cb: (data: T) => void) {
+    window.removeEventListener(evt, (e) => {
+      cb((e as CustomEvent<T>).detail);
+    });
+  }
+
   static async init(dependencies: Dependencies) {
     if (PluginManager.instance) {
       return;
@@ -56,7 +73,8 @@ export class PluginManager {
     await PluginManager.instance.fetchPluginConfig();
     await PluginManager.instance.restoreInstalledPlugins();
     dependencies.loading(false);
-    dependencies.toast("Plugin manager initialized");
+    // dependencies.toast("Plugin manager initialized");
+    PluginManager.dispatchEvent<null>(PluginEvent.INIT, null);
 
     // @ts-ignore
     // expose plugin manager to window for debugging
@@ -78,6 +96,9 @@ export class PluginManager {
       this.dependencies.toast("Plugin installed");
     }
 
+    // dispatch event
+    PluginManager.dispatchEvent<PluginConfig>(PluginEvent.INSTALL, config);
+
     this.saveInfo();
   }
 
@@ -93,6 +114,9 @@ export class PluginManager {
     this.plugins.delete(id);
     this.dependencies.toast("Plugin uninstalled");
 
+    // dispatch event
+    PluginManager.dispatchEvent<PluginConfig>(PluginEvent.UNINSTALL, plugin);
+
     this.saveInfo();
   }