npm - @bbki.ng/site - Versions diffs - 1.7.15 → 1.8.0 - Mend

@bbki.ng/site 1.7.15 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # @bbki.ng/site
+## 1.8.0
+## 1.7.16
 ## 1.7.15
 ## 1.7.14

package/index.html CHANGED Viewed

@@ -40,8 +40,8 @@
   </head>
   <body class="h-full m-0 flex flex-col font-mono">
-    <div id="root" class="flex-grow noto-serif"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="blog" class="flex-grow noto-serif"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <script type="module">
       // Import the functions you need from the SDKs you need
       import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.7.15",
+  "version": "1.8.0",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,8 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.5.10",
+    "@extism/extism": "2.0.0-rc11",
+    "@bbki.ng/components": "workspace:2.6.0",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -25,10 +26,11 @@
     "react-hotkeys-hook": "^3.4.3",
     "react-router-dom": "6",
     "sonner": "1.4.0",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.4.6",
+    "@bbki.ng/stylebase": "workspace:0.4.7",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",
@@ -58,6 +60,7 @@
     "ts-jest": "^27.1.1",
     "typescript": "^4.5.4",
     "vite": "5.0.0",
+    "vite-plugin-cross-origin-isolation": "0.1.6",
     "vite-plugin-glsl": "1.2.1",
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",

package/public/now.wasm ADDED Viewed

Binary file

package/src/{app.tsx → blog/app.tsx} RENAMED Viewed

@@ -16,16 +16,16 @@ import Txt from "@/pages/extensions/txt";
 import { usePaths } from "@/hooks";
 import { Login } from "@/pages/login";
 import { SWR } from "@/swr";
-import {
-  GlobalLoadingContext,
-  GlobalLoadingStateProvider,
-} from "@/global_loading_state_provider";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 import { UploadPage } from "@/pages/upload";
 import { AppCtxMenu } from "@/components/app_ctx_menu";
 import { Pochacco, PochaccoPose } from "@/components/Pochacco/Pochacco";
 import { Role, useRole } from "@/hooks/use_role";
-import { EffectContextProvider } from "@/components/effect-layer/EffectContextProvider";
 import { BotRedirect } from "@/pages/bot";
+import { PluginInit } from "@/components/plugin/PluginInit";
+import { BBContext } from "@/context/bbcontext";
+import { PluginContentPage } from "@/components/plugin/PluginContentPage";
+import { PluginRoutes } from "@/components/plugin/PluginRoutes";
 const Layout = () => {
   const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
@@ -65,9 +65,10 @@ const CoverInMidCol = threeColWrapper(Cover);
 export const App = () => {
   return (
     <SWR>
-      <EffectContextProvider>
-        <HotKeyNav>
-          <GlobalLoadingStateProvider>
+      {/*<EffectContextProvider>*/}
+      <HotKeyNav>
+        <BBContext>
+          <PluginInit>
             <Routes>
               <Route path="/" element={<Layout />}>
                 <Route index element={<CoverInMidCol />} />
@@ -85,12 +86,18 @@ export const App = () => {
                 <Route path="now" element={<NowInMidCol />} />
                 <Route path="login" element={<LoginInMidCol />} />
                 <Route path="upload" element={<UploadPage />} />
+                <Route path="/plugins" element={<PluginRoutes />} />
+                <Route
+                  path="/plugins/:pluginRoute"
+                  element={<PluginContentPage />}
+                />
               </Route>
               <Route path="*" element={<NotFound />} />
             </Routes>
-          </GlobalLoadingStateProvider>
-        </HotKeyNav>
-      </EffectContextProvider>
+          </PluginInit>
+        </BBContext>
+      </HotKeyNav>
+      {/*</EffectContextProvider>*/}
     </SWR>
   );
 };

package/src/{articles → blog/articles}/celebration.mdx RENAMED Viewed

@@ -19,4 +19,3 @@ tags:
 —— 摘自《夜的命名术》
 ```

package/src/{articles → blog/articles}/cousin.mdx RENAMED Viewed

@@ -12,4 +12,4 @@ tags:
 种蓄场倒闭，伯父去世，伯母改嫁，堂兄结婚生子、大病入院、妻子失踪。全部发生在这二十年间。「弟弟来你家要把你的菜全吃光了」，二十年前，种蓄场的职员这样逗堂兄玩。晚餐的时候，堂兄用筷子截住我伸出的筷子，不让我夹菜。
-曾经父母宠爱，无忧无虑的堂兄，现在沉默寡言。
+曾经父母宠爱，无忧无虑的堂兄，现在沉默寡言。

package/src/{articles → blog/articles}/leaves.mdx RENAMED Viewed

@@ -4,4 +4,4 @@ tags:
   - 随笔
 ---
-下班发现洗衣机盖子上有片树叶，应该是窗外飘进来的。
+下班发现洗衣机盖子上有片树叶，应该是窗外飘进来的。

package/src/{articles → blog/articles}/liqiu.mdx RENAMED Viewed

@@ -5,4 +5,3 @@ tags:
 ---
 这个没有参与感的夏天，就像六月的梦，是黑色的。对了，吃过一次西瓜，大面积黑色里，至少还有一小片红。

package/src/{articles → blog/articles}/men-without-women.mdx RENAMED Viewed

@@ -8,9 +8,9 @@ tags:
 《没有女人的男人们》是村上春树的短篇小说集，书本介绍写的是：「村上返回原点之作，《东京奇谭集》之后时隔九年又一短篇小说集」。「返回原点」也多少有点像在说自己，时隔三年又回到之前离开的城市。一天刚好看完。
-| 上午 | 下午 | 晚上 |
-|:----|:-----|:----|
-| 驾驶我的车 <br /> 昨天  | 独立器官 <br /> 山鲁左德 <br /> 木野 | 恋爱的萨姆沙 |
+| 上午                   | 下午                                 | 晚上         |
+| :--------------------- | :----------------------------------- | :----------- |
+| 驾驶我的车 <br /> 昨天 | 独立器官 <br /> 山鲁左德 <br /> 木野 | 恋爱的萨姆沙 |
 故事中的男人们，有人妻子过世，有人想满世界流浪，有人是坚定的不婚主义，有人被戴上有颜色的帽子……男男女女，来来去去。短篇小说比起电影好像更任性一点，结局戛然而止也让人也觉得情理之中，根据交代过的信息想象一下男女主接下来的境遇也是一件很有意思的事情。我最喜欢的两篇是《山鲁佐德》和《木野》。前者作为一个故事，故事中又穿插了女主讲述的故事，很有层次感，也很容易被带入女主的玄妙变态、虚实莫辨的回忆或者说是想象中。甚至阅读完都不太想深究她和男主到底是什么关系。此外文中有一段关于胡子的描述，觉得挺好玩，感觉也可以尝试一下：

package/src/{articles → blog/articles}/movie-day.mdx RENAMED Viewed

@@ -8,8 +8,8 @@ tags:
 **一天计划**，用一天时间在同一个地点做同一件事情。比如写一天代码、看一天书。个人电影节也是「一天计划」的一部分。从之前标记想看的电影清单中随机挑选出五部电影，用一天时间看完。
-| 上午 | 下午 | 晚上 |
-|:----|:-----|:----|
+| 上午                   | 下午                         | 晚上     |
+| :--------------------- | :--------------------------- | :------- |
 | 花火 <br /> 数电影的人 | 不能说的游戏 <br /> 蜂蜜之地 | 尽情游戏 |
 《花火》整部电影都很沉默冷静，甚至连剧中的枪响也是。可能是浓烈的情感需要大面积的留白去稀释，主角台词不多，却好像什么都已说尽。《数电影的人》是一部记录片，介绍了一群修复电影胶片的人，为电影延续生命。他们有枯燥的工作，有来自同事间互相鼓励和安慰。有意义危机，也有使命感和成就感。我更羡慕的是他们的工作周期，能花很长很长的一段时间慢慢把事情做好，也紧迫也从容。《不能说的游戏》讲述小女孩被熟人性侵后，整个人生受到的影响。电影配乐很欢快，大部分剪辑也是，但看似轻松欢快的节奏，却能让人感受到背后的压抑与主角内心困兽般的反应。这部电影，比起犯人，我更讨厌女主的母亲。《蜂蜜之地》是一部很美的记录片，贫瘠的土地，满眼只能看到岩石灌木和沙砾。相依为命的母女，贪婪的邻居。能够看到一种截然不同的生活方式，已经很心满意足。《尽情游戏》则是一部轻松的喜剧，可能包含了对战争的反思，我更愿意就把它当成一部普通的喜剧。最后其实还有一部德国电影《奇迹》，已经无法看下去，就像很久没有运动，跑完三公里已经到了极限，无法跑完最后一圈。

package/src/{articles → blog/articles}/projects.mdx RENAMED Viewed

@@ -6,4 +6,3 @@ headless: True
 import Png from "@/pages/extensions/png";
 <Png />

package/src/{articles → blog/articles}/quote.mdx RENAMED Viewed

@@ -11,7 +11,6 @@ tags:
 \- “我很悲惨，要是你知道我有多悲惨就好了。” \
 \- “我们能做什么？我们必须过好自己的生活。”
 “河流紀事 · 鄧獻誌
 河流用一生梳理 \

package/src/{articles → blog/articles}/red-gun.mdx RENAMED Viewed

@@ -16,4 +16,4 @@ tags:
 小男孩掉头要走，老板娘大声问：
-“你昨天是不是拿了他那把红色的枪？”
+“你昨天是不是拿了他那把红色的枪？”

package/src/{articles → blog/articles}/rice-noodle.mdx RENAMED Viewed

@@ -18,4 +18,4 @@ tags:
 ……
-“哎！不是说了要圆粉吗？”
+“哎！不是说了要圆粉吗？”

package/src/{articles → blog/articles}/spring-cooldown.mdx RENAMED Viewed

@@ -4,4 +4,5 @@ tags:
   - 随笔
   - 天气
 ---
 最开始只是刮风。重庆刮完台风的第二天，长沙，办公室窗外大风呼号，其声呜咽。工作群登出通告，提醒下班关窗。后边几天气温就回到冬季，并且有断断续续的小雨，不得不再次翻出羽绒服。小河涨水后，关注的钓鱼区 UP 主视频也随之陆续更新。

package/src/{articles → blog/articles}/spring-rain.mdx RENAMED Viewed

@@ -4,6 +4,7 @@ tags:
   - 随笔
   - 天气
 ---
 在正式进入夏天之前，这里的气温曾突然跌到冬天的水平。然后伴随着清明时节的雨水，慢慢回升。我的作息，已经提前向去年夏末的节奏靠近。要不是疫情，早起后就能很悠闲地去那家粉店。要不是疫情，每个人都能多出很多选择。
 春天的雨在窗外滴滴答答，好像永远不会停下，雨声比冬天欢快，也许是整体气温让人先放松了下来。

package/src/{articles → blog/articles}/woke-up.mdx RENAMED Viewed

@@ -4,4 +4,4 @@ tags:
   - 随笔
 ---
-厨房里，小乌鸦买的火锅底料掉在纯净水瓶上，纯净水瓶掉到地上，这是清早发现的。凌晨只是被惊醒，瞬间不知道自己在哪，有点害怕。
+厨房里，小乌鸦买的火锅底料掉在纯净水瓶上，纯净水瓶掉到地上，这是清早发现的。凌晨只是被惊醒，瞬间不知道自己在哪，有点害怕。

package/src/{components → blog/components}/Footer.tsx RENAMED Viewed

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { Link, Tag } from "@bbki.ng/components";
 import { useLocation } from "react-router-dom";
 import { usePaths } from "@/hooks";
-import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 export const Footer = () => {
   const location = useLocation();

package/src/{components → blog/components}/ImageUploader.tsx RENAMED Viewed

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { DropImage } from "@bbki.ng/components";
 import { useUploader } from "@/hooks/use_uploader";
 import { ImageUploaderProps } from "@/types/upload";
-import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 import { Auth } from "@/components/Auth";
 import { Role } from "@/hooks/use_role";
 import { useParams } from "react-router-dom";

package/src/{components → blog/components}/Img_ctx_menu/index.tsx RENAMED Viewed

@@ -13,7 +13,7 @@ import { confirm } from "@/utils";
 import { ContextMenuSeparator } from "@bbki.ng/components";
 import { useDelImg } from "@/hooks/use_del_img";
 import { toast } from "sonner";
-import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 export const ImgCtxMenu = (props: {
   children: ReactElement;

package/src/{components → blog/components}/Spinner.tsx RENAMED Viewed

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from "react";
-import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 export const Spinner = (props: { disableDotIndicator?: boolean }) => {
   const { disableDotIndicator } = props;

package/src/{components → blog/components}/app_ctx_menu/index.tsx RENAMED Viewed

@@ -10,6 +10,7 @@ import {
 import { LoginMenuItem } from "@/components/app_ctx_menu/LoginMenuItem";
 import { VersionMenuItem } from "@/components/app_ctx_menu/VersionMenuItem";
 import { ViewSourceMenuItem } from "@/components/app_ctx_menu/ViewSourceMenuItem";
+import { PluginsMenuItem } from "@/components/plugin/PluginsMenuItem";
 export const AppCtxMenu = (props: { children: ReactElement }) => {
   return (
@@ -17,9 +18,10 @@ export const AppCtxMenu = (props: { children: ReactElement }) => {
       <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
       <ContextMenuContent className="w-256">
         <LoginMenuItem />
-        <ContextMenuSeparator />
         <VersionMenuItem />
         <ViewSourceMenuItem />
+        <ContextMenuSeparator />
+        <PluginsMenuItem />
       </ContextMenuContent>
     </ContextMenu>
   );

package/src/{components → blog/components}/article/index.tsx RENAMED Viewed

@@ -4,7 +4,7 @@ import { ROUTES } from "@/constants";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
 import classNames from "classnames";
-type ArticlePageProps = {
+export type ArticlePageProps = {
   tags?: string[];
   title: string;
   description?: any;

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

@@ -0,0 +1,30 @@
+import { ArticlePage, ArticlePageProps } from "@/components/article";
+import React, { memo } 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";
+type PluginContentPageProps = Omit<ArticlePageProps, "children">;
+const ContentPage = (props: PluginContentPageProps) => {
+  const { pluginRoute } = useParams();
+  if (!pluginRoute || !PluginManager.instance) {
+    return null;
+  }
+  const plugin = PluginManager.instance.getPluginByRoute(pluginRoute);
+  if (!plugin) {
+    return null;
+  }
+  const content = usePluginOutput(plugin.config.id);
+  return (
+    <ArticlePage {...props} title={plugin?.config.route || ""}>
+      <div dangerouslySetInnerHTML={{ __html: content }} />
+    </ArticlePage>
+  );
+};
+export const PluginContentPage = threeColWrapper(ContentPage);

package/src/blog/components/plugin/PluginDrawer.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { DialogProps, Drawer } from "vaul";
+import React, { ReactNode } from "react";
+type PluginDrawerProps = {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+} & Pick<DialogProps, "open"> &
+  Pick<DialogProps, "onOpenChange">;
+export const PluginDrawer = (props: PluginDrawerProps) => {
+  const { children, title, description, open, onOpenChange } = props;
+  return (
+    <Drawer.Root
+      direction="bottom"
+      open={open}
+      onOpenChange={onOpenChange}
+      modal={false}
+    >
+      <Drawer.Portal>
+        <Drawer.Content className="bg-gray-100 flex flex-col {/*rounded-t-[10px]*/} mt-24 h-fit fixed bottom-0 left-0 right-0 outline-none border-t border-gray-200">
+          <div className="p-4 bg-white {/*rounded-t-[10px]*/} flex-1">
+            <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
+            <div className="max-w-md mx-auto my-32 p-16">
+              <Drawer.Title className="font-medium mb-2 text-zinc-900">
+                {title}
+              </Drawer.Title>
+              <Drawer.Description className="text-zinc-600 mb-2">
+                {description}
+              </Drawer.Description>
+              {children}
+            </div>
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+};

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

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect } from "react";
+import { ReactNode } from "react";
+import { PluginInputForm } from "@/components/plugin/PluginInputForm";
+import { useDependencies } from "@/components/plugin/hooks/useDependencies";
+import { PluginManager } from "@/plugin/PluginManager";
+export const PluginInit = (props: { children: ReactNode }) => {
+  const {
+    isPluginFormInputOpen,
+    setPluginFormInputOpen,
+    pluginInputFormConf,
+    formDataResolver,
+    ...dep
+  } = useDependencies();
+  useEffect(() => {
+    PluginManager.init(dep).then();
+  }, []);
+  const onSubmit = useCallback(
+    (formData: string) => {
+      formDataResolver(formData);
+      setPluginFormInputOpen(false);
+    },
+    [formDataResolver]
+  );
+  const onOpenChange = useCallback(
+    (o: boolean) => {
+      setPluginFormInputOpen(o);
+      if (!o) {
+        formDataResolver("");
+      }
+    },
+    [formDataResolver]
+  );
+  return (
+    <>
+      {props.children}
+      <PluginInputForm
+        open={isPluginFormInputOpen}
+        onOpenChange={onOpenChange}
+        input={pluginInputFormConf}
+        onSubmit={onSubmit}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,117 @@
+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 ADDED Viewed

@@ -0,0 +1,67 @@
+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 inset>
+        {plugin.name} v{plugin.version}
+      </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 ADDED Viewed

@@ -0,0 +1,13 @@
+import { threeColWrapper } from "@/components/with_wrapper";
+import { CenterLinkList } from "@/components";
+import React, { useContext } from "react";
+import { GlobalRoutesContext } from "@/context/global_routes_provider";
+const PluginRoutesContent = () => {
+  const globalRouteCtx = useContext(GlobalRoutesContext);
+  const routes = globalRouteCtx.globalRoutes;
+  return <CenterLinkList className="select-none" links={routes} title="" />;
+};
+export const PluginRoutes = threeColWrapper(PluginRoutesContent);