@bbki.ng/site 2.0.52 → 3.0.0

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

@@ -1,117 +0,0 @@
-import React from "react";
-import { PluginInput, PluginInputFieldType } from "@/plugin/Plugin";
-import {
-  z,
-  zodResolver,
-  useForm,
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  Input,
-  Button,
-  ButtonType,
-  FormControl,
-} from "@bbki.ng/components";
-import { PluginDrawer } from "@/components/plugin/PluginDrawer";
-import { DialogProps } from "vaul";
-
-type PluginInputFormProps = {
-  input: PluginInput;
-  onSubmit: (input: string) => void;
-} & Pick<DialogProps, "open"> &
-  Pick<DialogProps, "onOpenChange">;
-
-const getPluginInputSchema = (input: PluginInput) => {
-  const obj: any = {};
-  const typeMap = {
-    [PluginInputFieldType.String]: z.string().default(""),
-    [PluginInputFieldType.Number]: z.number().default(0),
-    [PluginInputFieldType.Boolean]: z.boolean().default(false),
-  };
-
-  input.forEach((item) => {
-    obj[item.name] = typeMap[item.type];
-  });
-
-  return z.object(obj);
-};
-
-const getInputDefaultValue = (type: PluginInputFieldType) => {
-  switch (type) {
-    case PluginInputFieldType.String:
-      return "";
-    case PluginInputFieldType.Number:
-      return 0;
-    case PluginInputFieldType.Boolean:
-      return false;
-  }
-};
-
-const getPluginDefaultInput = (input: PluginInput) => {
-  const obj: any = {};
-  input.forEach((item) => {
-    obj[item.name] = getInputDefaultValue(item.type);
-  });
-  return obj;
-};
-
-const getInputType = (type: PluginInputFieldType) => {
-  switch (type) {
-    case PluginInputFieldType.String:
-      return "text";
-    case PluginInputFieldType.Number:
-      return "number";
-    case PluginInputFieldType.Boolean:
-      return "checkbox";
-  }
-};
-
-export const PluginInputForm = (props: PluginInputFormProps) => {
-  const { input, onSubmit, open, onOpenChange } = props;
-  const schema = getPluginInputSchema(input);
-  const form = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-    values: getPluginDefaultInput(input),
-  });
-
-  const ok = (data: z.infer<typeof schema>) => {
-    onSubmit(JSON.stringify(data));
-  };
-
-  return (
-    <PluginDrawer open={open} onOpenChange={onOpenChange}>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(ok)}>
-          {input.map((item) => {
-            return (
-              <FormField
-                key={item.name}
-                control={form.control}
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormLabel>{item.name}</FormLabel>
-                      <FormControl>
-                        <Input type={getInputType(item.type)} {...field} />
-                      </FormControl>
-                    </FormItem>
-                  );
-                }}
-                name={item.name}
-              />
-            );
-          })}
-          <Button
-            className="mt-16"
-            onClick={() => {}}
-            btnType="submit"
-            type={ButtonType.PRIMARY}
-          >
-            Ok
-          </Button>
-        </form>
-      </Form>
-    </PluginDrawer>
-  );
-};

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

@@ -1,70 +0,0 @@
-import React from "react";
-import {
-  ContextMenuItem,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-} from "@bbki.ng/components";
-import { PluginConfig, PluginStatus } from "@/plugin/Plugin";
-
-type PluginMenuItemProps = {
-  plugin: PluginConfig;
-  onUninstall: (plugin: PluginConfig) => void;
-  onInstall: (plugin: PluginConfig) => void;
-  onStop: (plugin: PluginConfig) => void;
-  onRun: (plugin: PluginConfig) => void;
-};
-
-export const PluginMenuItem = (props: PluginMenuItemProps) => {
-  const { plugin, onUninstall, onStop, onRun, onInstall } = props;
-  return (
-    <ContextMenuSub>
-      <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 && (
-          <ContextMenuItem
-            onClick={() => {
-              onUninstall(plugin);
-            }}
-          >
-            uninstall
-          </ContextMenuItem>
-        )}
-        {plugin.status === PluginStatus.Available && (
-          <ContextMenuItem
-            onClick={() => {
-              onInstall(plugin);
-            }}
-          >
-            install
-          </ContextMenuItem>
-        )}
-        {plugin.status === PluginStatus.Running && (
-          <ContextMenuItem
-            onClick={() => {
-              onStop(plugin);
-            }}
-          >
-            stop
-          </ContextMenuItem>
-        )}
-        {(plugin.status === PluginStatus.Installed ||
-          plugin.status === PluginStatus.Stopped) &&
-          !plugin.route && (
-            <ContextMenuItem
-              onClick={() => {
-                onRun(plugin);
-              }}
-            >
-              run
-            </ContextMenuItem>
-          )}
-      </ContextMenuSubContent>
-    </ContextMenuSub>
-  );
-};

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

@@ -1,23 +0,0 @@
-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;
-
-  const isLoading = useSafeArticleLoading(0.2, 3);
-
-  return (
-    <CenterLinkList
-      className="select-none"
-      links={routes}
-      title=""
-      loading={isLoading}
-    />
-  );
-};
-
-export const PluginRoutes = PluginRoutesContent;

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

@@ -1,70 +0,0 @@
-import React from "react";
-import {
-  ContextMenuSeparator,
-  ContextMenuItem,
-  ContextMenuSubContent,
-  ContextMenuSub,
-  ContextMenuSubTrigger,
-} from "@bbki.ng/components";
-import { Plugin, PluginConfig } from "@/plugin/Plugin";
-import { PluginManager } from "@/plugin/PluginManager";
-import { PluginMenuItem } from "@/components/plugin/PluginMenuItem";
-
-export const PluginsMenuItem = () => {
-  const [plugins, setPlugins] = React.useState<PluginConfig[]>([]);
-
-  React.useEffect(() => {
-    setPlugins(PluginManager.instance.listAvailable());
-  }, []);
-  return (
-    <ContextMenuSub>
-      <ContextMenuSubTrigger>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          stroke-linejoin="round"
-          className="feather feather-cpu mr-8"
-        >
-          <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
-          <rect x="9" y="9" width="6" height="6"></rect>
-          <line x1="9" y1="1" x2="9" y2="4"></line>
-          <line x1="15" y1="1" x2="15" y2="4"></line>
-          <line x1="9" y1="20" x2="9" y2="23"></line>
-          <line x1="15" y1="20" x2="15" y2="23"></line>
-          <line x1="20" y1="9" x2="23" y2="9"></line>
-          <line x1="20" y1="14" x2="23" y2="14"></line>
-          <line x1="1" y1="9" x2="4" y2="9"></line>
-          <line x1="1" y1="14" x2="4" y2="14"></line>
-        </svg>
-        Plugins
-      </ContextMenuSubTrigger>
-      <ContextMenuSubContent className="w-48">
-        {plugins.map((plugin) => (
-          <PluginMenuItem
-            key={plugin.id}
-            plugin={plugin}
-            onInstall={async (plugin: PluginConfig) => {
-              await PluginManager.instance.install(plugin.id);
-              setPlugins(PluginManager.instance.listAvailable());
-            }}
-            onUninstall={async (plugin: PluginConfig) => {
-              await PluginManager.instance.uninstall(plugin);
-              setPlugins(PluginManager.instance.listAvailable());
-            }}
-            onRun={async (plugin: PluginConfig) => {
-              await PluginManager.instance.run(plugin.id);
-              setPlugins(PluginManager.instance.listAvailable());
-            }}
-            onStop={(plugin: PluginConfig) => {}}
-          />
-        ))}
-      </ContextMenuSubContent>
-    </ContextMenuSub>
-  );
-};

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

@@ -1,80 +0,0 @@
-import { Dependencies } from "@/plugin/Dependencies";
-import React, { useContext, useRef } from "react";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { PluginInput } from "@/plugin/Plugin";
-import { toast } from "sonner";
-import { GlobalRoutesContext } from "@/context/global_routes_provider";
-import { PluginManager } from "@/plugin/PluginManager";
-import { apiFetcher } from "@/utils";
-
-type inputResolve = (value: string | PromiseLike<string>) => void;
-
-interface depHooksRes extends Dependencies {
-  setPluginFormInputOpen: (open: boolean) => void;
-  isPluginFormInputOpen: boolean;
-  pluginInputFormConf: PluginInput;
-  formDataResolver: inputResolve;
-  pluginUIRef: React.MutableRefObject<{
-    open: boolean;
-    setHtml: (html: string) => void;
-  } | null>
-}
-
-export const useDependencies = (): depHooksRes => {
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-  const [open, setOpen] = React.useState(false);
-
-  const [input, setInput] = React.useState<PluginInput>([]);
-
-  const resolveRef = useRef<inputResolve>();
-
-  const globalRouteCtx = useContext(GlobalRoutesContext);
-
-  const pluginUIRef = useRef<{ open: boolean; setHtml: (html: string) => void } | null>(null);
-
-  return {
-    callPlugin: (id, method) => {
-      if (!PluginManager.instance) {
-        return Promise.reject("Plugin manager not initialized");
-      }
-
-      return PluginManager.instance.run(id, method);
-    },
-    addRoute: (name, to) => {
-      globalRouteCtx.addGlobalRoute({
-        name,
-        to: "/plugins/" + to,
-      });
-    },
-    removeRoute: (name) => {
-      globalRouteCtx.removeGlobalRoute(name);
-    },
-    loading: setIsLoading,
-    toast: (content: string) => {
-      toast.success(content, {
-        position: "bottom-right",
-      });
-    },
-    showUI: (html: string) => {
-      if (!pluginUIRef.current) {
-        return;
-      }
-      pluginUIRef.current.setHtml(html);
-    },
-    fetchPlugins: async () => {
-      return apiFetcher("plugin");
-    },
-    showForm: async (input) => {
-      setOpen(true);
-      setInput(input);
-      return new Promise<string>((resolve) => {
-        resolveRef.current = resolve;
-      });
-    },
-    pluginUIRef,
-    setPluginFormInputOpen: setOpen,
-    isPluginFormInputOpen: open,
-    pluginInputFormConf: input,
-    formDataResolver: resolveRef.current as inputResolve,
-  };
-};

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

@@ -1,17 +0,0 @@
-import { PluginManager } from "@/plugin/PluginManager";
-import { useEffect, useState } from "react";
-
-export const usePluginOutput = (pluginId?: number): string => {
-  const [output, setOutput] = useState<string>("");
-
-  useEffect(() => {
-    if (!pluginId) {
-      return;
-    }
-    PluginManager.instance.run(pluginId).then((result) => {
-      setOutput(result as string);
-    });
-  }, [pluginId]);
-
-  return output;
-};

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

@@ -1,34 +0,0 @@
-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/demo/DemoBox.tsx

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-
-export const DemoBox = (props: {
-  children?: ReactNode;
-  style?: React.CSSProperties;
-}) => {
-  return (
-    <div
-      className="grid place-items-center md:p-32 border-gray-400 aspect-square border border-dotted aspect-1"
-      style={props.style || {}}
-    >
-      {props.children}
-    </div>
-  );
-};

package/src/blog/demo/DemoMenu.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@bbki.ng/components";
-
-export function ContextMenuDemo() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>Right click here</ContextMenuTrigger>
-      <ContextMenuContent className="w-256">
-        <ContextMenuItem inset>
-          Back
-          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset disabled>
-          Forward
-          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset>
-          Reload
-          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-          <ContextMenuSubContent className="w-48">
-            <ContextMenuItem>
-              Save Page As...
-              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-            <ContextMenuItem>Name Window...</ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem>Developer Tools</ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-        <ContextMenuSeparator />
-        <ContextMenuCheckboxItem checked>
-          Show Bookmarks Bar
-          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-        <ContextMenuSeparator />
-        <ContextMenuRadioGroup value="pedro">
-          <ContextMenuLabel inset>People</ContextMenuLabel>
-          <ContextMenuSeparator />
-          <ContextMenuRadioItem value="pedro">
-            Pedro Duarte
-          </ContextMenuRadioItem>
-          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}

package/src/blog/demo/ImgDemo.tsx

@@ -1,34 +0,0 @@
-import React, { useState } from "react";
-import { Button, Img, ImgProps } from "@bbki.ng/components";
-import { PHOTOS_FOR_DEMO } from "@/constants/photos";
-import { DemoBox } from "@/demo/DemoBox";
-import { Photo } from "@/types/photo";
-
-const ImgWrapper = (props: ImgProps) => {
-  return (
-    <DemoBox>
-      <Img {...props} />
-    </DemoBox>
-  );
-};
-
-export const ImgDemo = () => {
-  const [count, setCount] = useState(0);
-  const refresh = () => {
-    setCount(count + 1);
-  };
-
-  const images: Photo[] = PHOTOS_FOR_DEMO;
-
-  return (
-    <div>
-      <ImgWrapper
-        {...images[count % images.length]}
-        key={count}
-      />
-      <Button onClick={refresh} className="mx-32 my-16">
-        刷新
-      </Button>
-    </div>
-  );
-};

package/src/blog/demo/PluginDemo.ts

@@ -1,24 +0,0 @@
-import createPlugin from "@extism/extism";
-import { CurrentPlugin } from "@extism/extism";
-import { toast } from "sonner";
-
-const plugin = await createPlugin("http://localhost:5173/demo.wasm", {
-  useWasi: true,
-  functions: {
-    "extism:host/user": {
-      toast: (cp: CurrentPlugin, offs: bigint) => {
-        const content = cp.read(offs).text();
-        toast.success(content, {
-          position: "bottom-right",
-        });
-      },
-    },
-  },
-});
-
-export const testPlugin = async () => {
-  const input = "bbki.ng";
-  let out = await plugin.call("greet", input);
-  console.log(out.text());
-  return out.text();
-};

package/src/blog/demo/SpinnerDemo.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { DemoBox } from "@/demo/DemoBox.js";
-import { Spinner } from "@/components/Spinner";
-
-export const SpinnerDemo = () => {
-  return (
-    <DemoBox style={{ background: "#dc5530", borderColor: "white" }}>
-      <Spinner
-        disableDotIndicator
-      />
-    </DemoBox>
-  );
-};

package/src/blog/demo/Xwy.tsx

@@ -1,13 +0,0 @@
-import { Img } from "@bbki.ng/components";
-import React from "react";
-
-export const Xwy = () => {
-  const xwy = {
-    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/xwy.jpg",
-    renderedWidth: 400,
-    width: 1125,
-    height: 750,
-  };
-
-  return <Img {...xwy} />;
-};

package/src/blog/plugin/Dependencies.ts

@@ -1,14 +0,0 @@
-import { PluginInput } from "@/plugin/Plugin";
-import { PluginConfig  } from "@/plugin/Plugin";
-
-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>;
-  fetchPlugins: () => Promise<PluginConfig[]>;
-}

package/src/blog/plugin/HostFuncAdapter.ts

@@ -1,28 +0,0 @@
-import { CurrentPlugin, ExtismPluginOptions } from "@extism/extism";
-import { Dependencies } from "@/plugin/Dependencies";
-
-type HostFunctions = ExtismPluginOptions["functions"];
-
-export const hostFuncAdapter = (dep: Dependencies): HostFunctions => {
-  return {
-    "extism:host/user": {
-      // ui state
-      loading: (cp: CurrentPlugin, offs: bigint) => {
-        const show = cp.read(offs).text() === "true";
-        dep.loading(show);
-      },
-
-      // ui io
-      toast: (cp: CurrentPlugin, offs: bigint) => {
-        const content = cp.read(offs).text();
-        dep.toast(content);
-      },
-
-      callPlugin: (cp: CurrentPlugin, name: bigint, args: bigint) => {
-        const id = cp.read(name).number();
-        const method = cp.read(args).text();
-        return dep.callPlugin(id, method);
-      },
-    },
-  };
-};