@bbki.ng/site 1.8.2 → 1.8.3

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 1.8.3
+
 ## 1.8.2
 
 ## 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "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.1",
+    "@bbki.ng/components": "workspace:2.6.2",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/blog/app.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Outlet, Route, Routes } from "react-router-dom";
-import { Nav, NotFound, Page, BlurCover } from "@bbki.ng/components";
+import { Nav, NotFound, Page } from "@bbki.ng/components";
 import { HotKeyNav } from "./components";
 import { threeColWrapper } from "@/components/with_wrapper";
 import { Cover } from "./pages";
@@ -48,7 +48,6 @@ const Layout = () => {
         }
         main={<Outlet />}
       />
-      <BlurCover status={isFontLoading ? "show" : "silent"} />
     </>
   );
 };

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

@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
 import { Tags, Article } from "@bbki.ng/components";
 import { ROUTES } from "@/constants";
-import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
 import classNames from "classnames";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -13,8 +13,26 @@ 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 tags = tagNames
     ? tagNames.map((t) => ({ children: t, to: `${ROUTES.TAGS}/${t}` }))
     : [];
@@ -28,15 +46,16 @@ export const ArticlePage = (props: ArticlePageProps) => {
   });
 
   return (
-    <DelayFadeIn delay={200}>
+    <>
       <Article
         title={title}
         description={description}
         className={props.className}
+        loading={loading}
       >
         <article className={articleCls}>{props.children}</article>
       </Article>
-      {tagNames && <Tags tags={tags} />}
-    </DelayFadeIn>
+      <span className="p-16">{tagNames && <Tags tags={tags} />}</span>
+    </>
   );
 };

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

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { PluginInputForm } from "@/components/plugin/PluginInputForm";
 import { useDependencies } from "@/components/plugin/hooks/useDependencies";
 import { PluginManager } from "@/plugin/PluginManager";
+import PluginUI from "./pluginUI/PluginUI";
 
 export const PluginInit = (props: { children: ReactNode }) => {
   const {
@@ -11,6 +12,8 @@ export const PluginInit = (props: { children: ReactNode }) => {
     pluginInputFormConf,
     formDataResolver,
 
+    pluginUIRef,
+
     ...dep
   } = useDependencies();
 
@@ -45,6 +48,9 @@ export const PluginInit = (props: { children: ReactNode }) => {
         input={pluginInputFormConf}
         onSubmit={onSubmit}
       />
+      <PluginUI
+        ref={pluginUIRef}
+      /> 
     </>
   );
 };

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

@@ -19,8 +19,11 @@ export const PluginMenuItem = (props: PluginMenuItemProps) => {
   const { plugin, onUninstall, onStop, onRun, onInstall } = props;
   return (
     <ContextMenuSub>
-      <ContextMenuSubTrigger inset>
-        {plugin.name} v{plugin.version}
+      <ContextMenuSubTrigger>
+        <div className="flex justify-between w-full mr-16">
+          <span>{plugin.name}</span>
+          <span>v{plugin.version}</span>
+        </div>
       </ContextMenuSubTrigger>
       <ContextMenuSubContent className="w-48">
         {plugin.status !== PluginStatus.Available && (

package/src/blog/components/plugin/hooks/useDependencies.ts

@@ -13,6 +13,10 @@ interface depHooksRes extends Dependencies {
   isPluginFormInputOpen: boolean;
   pluginInputFormConf: PluginInput;
   formDataResolver: inputResolve;
+  pluginUIRef: React.MutableRefObject<{
+    open: boolean;
+    setHtml: (html: string) => void;
+  } | null>
 }
 
 export const useDependencies = (): depHooksRes => {
@@ -25,6 +29,8 @@ export const useDependencies = (): depHooksRes => {
 
   const globalRouteCtx = useContext(GlobalRoutesContext);
 
+  const pluginUIRef = useRef<{ open: boolean; setHtml: (html: string) => void } | null>(null);
+
   return {
     callPlugin: (id, method) => {
       if (!PluginManager.instance) {
@@ -48,6 +54,12 @@ export const useDependencies = (): depHooksRes => {
         position: "bottom-right",
       });
     },
+    showUI: (html: string) => {
+      if (!pluginUIRef.current) {
+        return;
+      }
+      pluginUIRef.current.setHtml(html);
+    },
     showForm: async (input) => {
       setOpen(true);
       setInput(input);
@@ -55,6 +67,7 @@ export const useDependencies = (): depHooksRes => {
         resolveRef.current = resolve;
       });
     },
+    pluginUIRef,
     setPluginFormInputOpen: setOpen,
     isPluginFormInputOpen: open,
     pluginInputFormConf: input,

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

@@ -9,7 +9,7 @@ export const usePluginOutput = (pluginId: number): string => {
       return;
     }
     PluginManager.instance.run(pluginId).then((result) => {
-      setOutput(result);
+      setOutput(result as string);
     });
   }, [pluginId]);
 

package/src/blog/components/plugin/pluginUI/PluginUI.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useImperativeHandle, forwardRef } from "react"
+import { PluginDrawer } from "../PluginDrawer"
+
+export type PluginUIProps = {
+    html?: string,
+}
+
+const PluginUI = (props: PluginUIProps, ref: React.ForwardedRef<{ setHtml: (html: string) => void }>) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [open, setOpen] = React.useState(false);
+    const [html, setHtml] = React.useState(props.html);
+
+    useImperativeHandle(ref, () => ({
+        setHtml: (h) => {
+            setHtml(h);
+            setOpen(true);
+        },
+    }), []);
+
+    return (
+        <PluginDrawer
+            open={open}
+            onOpenChange={setOpen}
+        >
+            <iframe
+                sandbox="allow-scripts allow-same-origin"
+                ref={iframeRef}
+                srcDoc={html}
+            />
+        </PluginDrawer>
+    )
+}
+
+export default forwardRef(PluginUI)

package/src/blog/hooks/use_font_loading.ts

@@ -3,7 +3,7 @@ import { changeFont } from "@/utils";
 import { FontType } from "@/types/font";
 
 export const useFontLoading = () => {
-  const [isFontLoading, setIsFontLoading] = useState(false);
+  const [isFontLoading, setIsFontLoading] = useState(true);
 
   const handleFontLoading = () => {
     setIsFontLoading(true);

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

@@ -41,7 +41,6 @@ export default () => {
   }
 
   if (ArticleMap[title]) {
-    setIsLoading(false);
     return ArticleMap[title];
   }
 

package/src/blog/plugin/Dependencies.ts

@@ -4,6 +4,7 @@ export interface Dependencies {
   toast: (content: string) => void;
   loading: (show: boolean) => void;
   showForm: (input: PluginInput) => Promise<string>;
+  showUI: (html: string) => void;
   addRoute: (name: string, to: string) => void;
   removeRoute: (name: string) => void;
   callPlugin: (id: number, method: string) => Promise<any>;

package/src/blog/plugin/Plugin.ts

@@ -16,8 +16,10 @@ export type PluginConfig = {
   description: string;
   url: string;
   status: PluginStatus;
+
   inputs?: PluginInput;
   route?: string;
+  builtIn?: boolean;
 };
 
 export enum PluginInputFieldType {
@@ -83,7 +85,8 @@ export class Plugin {
       return JSON.parse(out.text());
     } catch (e) {
       this.config.status = PluginStatus.Stopped;
-      return out.text();
+      this.dependencies.loading(false);
+      return out?.text();
     }
   }
 

package/src/blog/plugin/PluginManager.ts

@@ -33,6 +33,8 @@ export class PluginManager {
   }
 
   private async restoreInstalledPlugins() {
+    await Promise.all(this.listBuiltIn().map((p) => this.install(p.id)));
+
     if (!this._info) {
       return Promise.resolve();
     }
@@ -61,7 +63,7 @@ export class PluginManager {
     window.pm = PluginManager.instance;
   }
 
-  public async install(id: number) {
+  public async install(id: number, showToast?: boolean) {
     const config = this.pluginConfigMap.get(id);
     if (!config) {
       this.dependencies.toast("Plugin not found");
@@ -71,7 +73,10 @@ export class PluginManager {
     const plugin = new Plugin(config, this.dependencies);
     await plugin.install();
     this.plugins.set(id, plugin);
-    this.dependencies.toast("Plugin installed");
+
+    if (showToast) {
+      this.dependencies.toast("Plugin installed");
+    }
 
     this.saveInfo();
   }
@@ -96,7 +101,11 @@ export class PluginManager {
   }
 
   public listAvailable(): PluginConfig[] {
-    return Array.from(this.pluginConfigMap.values());
+    return Array.from(this.pluginConfigMap.values()).filter((p) => !p.builtIn);
+  }
+
+  public listBuiltIn(): PluginConfig[] {
+    return Array.from(this.pluginConfigMap.values()).filter((p) => p.builtIn);
   }
 
   public getPlugin(id: number) {
@@ -148,6 +157,16 @@ export class PluginManager {
       route: "近况",
     });
 
+    // this.pluginConfigMap.set(2, {
+    //   name: "core",
+    //   id: 2,
+    //   version: "1.0.0",
+    //   description: "core",
+    //   url: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/plugins/reactable.core.wasm",
+    //   status: 0,
+    //   builtIn: true,
+    // })
+
     return this.pluginConfigMap;
   }
 }