@bbki.ng/site 1.2.23 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.4.0
+
+## 1.3.0
+
 ## 1.2.23
 
 ## 1.2.22

package/dev-dist/sw.js

@@ -98,7 +98,7 @@ define(["./workbox-baccbcc1"], function (workbox) {
     [
       {
         url: "index.html",
-        revision: "0.clbi8di3vmg",
+        revision: "0.a0iqm7b3nfg",
       },
     ],
     {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.2.23",
+  "version": "1.4.0",
   "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.2.6",
+    "@bbki.ng/components": "workspace:2.4.0",
     "@supabase/supabase-js": "^1.30.6",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.1.4",
+    "@bbki.ng/stylebase": "workspace:0.3.0",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/app.tsx

@@ -21,6 +21,7 @@ import {
   GlobalLoadingStateProvider,
 } from "@/global_loading_state_provider";
 import { UploadPage } from "@/pages/upload";
+import { AppCtxMenu } from "@/components/app_ctx_menu";
 
 const Layout = () => {
   const { isLoading } = useContext(GlobalLoadingContext);
@@ -28,7 +29,13 @@ const Layout = () => {
     <>
       <Page
         nav={
-          <Nav paths={usePaths()} className="blur-cover" loading={isLoading} />
+          <AppCtxMenu>
+            <Nav
+              paths={usePaths()}
+              className="blur-cover select-none"
+              loading={isLoading}
+            />
+          </AppCtxMenu>
         }
         main={<Outlet />}
       />

package/src/components/app_ctx_menu/LoginMenuItem.tsx

@@ -0,0 +1,31 @@
+import { useAuthed } from "@/hooks/use_authed";
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+import {
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuShortcut,
+  Link,
+} from "@bbki.ng/components";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+export const LoginMenuItem = () => {
+  const sess = useSupabaseSession();
+  const nav = useNavigate();
+
+  if (sess?.user != null) {
+    return <ContextMenuLabel inset>{sess?.user?.email ?? ""}</ContextMenuLabel>;
+  }
+
+  return (
+    <ContextMenuItem
+      onClick={() => {
+        nav("/login");
+      }}
+      inset
+    >
+      login
+      <ContextMenuShortcut>l</ContextMenuShortcut>
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/VersionMenuItem.tsx

@@ -0,0 +1,13 @@
+import { ContextMenuItem, Tag } from "@bbki.ng/components";
+import React from "react";
+
+export const VersionMenuItem = () => {
+  // @ts-ignore
+  const appVer = GLOBAL_BBKING_VERSION;
+
+  return (
+    <ContextMenuItem inset disabled>
+      v{appVer}
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/ViewSourceMenuItem.tsx

@@ -0,0 +1,28 @@
+import { ContextMenuItem, ContextMenuShortcut } from "@bbki.ng/components";
+import React from "react";
+import { GITHUB_REPO_ADDRESS } from "@/constants";
+
+export const ViewSourceMenuItem = () => {
+  return (
+    <ContextMenuItem
+      onClick={() => {
+        // open tagUrl in new tab
+        window.open(GITHUB_REPO_ADDRESS, "_blank");
+      }}
+    >
+      <svg
+        height="16"
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        data-view-component="true"
+        className="mr-8"
+      >
+        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+      </svg>
+      view source
+      <ContextMenuShortcut>s</ContextMenuShortcut>
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/index.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuItem,
+} from "@bbki.ng/components";
+import { LoginMenuItem } from "@/components/app_ctx_menu/LoginMenuItem";
+import { VersionMenuItem } from "@/components/app_ctx_menu/VersionMenuItem";
+import { ViewSourceMenuItem } from "@/components/app_ctx_menu/ViewSourceMenuItem";
+
+export const AppCtxMenu = (props: { children: ReactElement }) => {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-256">
+        <LoginMenuItem />
+        <ContextMenuSeparator />
+        <VersionMenuItem />
+        <ViewSourceMenuItem />
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};

package/src/components/article_ctx_menu/index.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement, useCallback } from "react";
+import { useAuthed } from "@/hooks/use_authed";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+  ContextMenuItem,
+} from "@bbki.ng/components";
+import { useNavigate, useParams } from "react-router-dom";
+import { useDelPost } from "@/hooks/use_delete_post";
+import { toast } from "sonner";
+import { confirm } from "@/utils";
+
+export const ArticleCtxMenu = (props: { children: ReactElement }) => {
+  const auth = useAuthed();
+  const del = useDelPost();
+  const routeParams = useParams();
+  const nav = useNavigate();
+  const title = routeParams.title;
+
+  if (!auth) {
+    return props.children;
+  }
+
+  if (title == null || title === "") {
+    return props.children;
+  }
+
+  const doDel = useCallback(() => {
+    del(title).then(() => {
+      toast.success("删除成功");
+      nav("/");
+    });
+  }, [title]);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-128">
+        <ContextMenuItem
+          onClick={() => {
+            confirm("确认删除？", doDel);
+          }}
+        >
+          remove
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};

package/src/constants/routes.ts

@@ -21,6 +21,7 @@ export const API = {
   PROJECTS: "projects",
   UPLOAD_IMG: "upload",
   POST: "post",
+  REMOVE_POST: "remove_post",
   MOVIES: "movies",
   IMAGES: "images",
   BOOKS: "books",

package/src/demo/DemoMenu.tsx

@@ -0,0 +1,66 @@
+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/hooks/use_delete_post.ts

@@ -0,0 +1,22 @@
+import { useAuthedFetcher } from "@/hooks/use_authed_fetcher";
+import { useCallback } from "react";
+import { API } from "@/constants/routes";
+
+export const useDelPost = () => {
+  const authedFetcher = useAuthedFetcher();
+
+  const req = useCallback(
+    async (url: string, { arg }: { arg: { title: string } }) => {
+      return authedFetcher(url, {
+        method: "POST",
+        body: JSON.stringify(arg),
+      });
+    },
+    [authedFetcher]
+  );
+
+  return useCallback(
+    (title: string) => req(API.REMOVE_POST, { arg: { title } }),
+    [req]
+  );
+};

package/src/main.tsx

@@ -7,6 +7,7 @@ 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/pages/cover/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { CenterLinkList } from "@/components";
+import { ContextMenuDemo } from "@/demo/DemoMenu";
 
 export const Cover = (props: { className: string }) => {
   return (

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

@@ -9,6 +9,7 @@ import { ArticlePage } from "@/components/article";
 import { GlobalLoadingContext } from "@/global_loading_state_provider";
 import { useFile2Post } from "@/hooks/use_file_to_post";
 import { useAuthed } from "@/hooks/use_authed";
+import { ArticleCtxMenu } from "@/components/article_ctx_menu";
 
 type TArticleMap = {
   [key: string]: ReactElement;
@@ -55,7 +56,9 @@ export default () => {
   return (
     <DropZone onDrop={reader} disabled={!isKing}>
       <ArticlePage title={title}>
-        <div dangerouslySetInnerHTML={{ __html: posts.content }} />
+        <ArticleCtxMenu>
+          <div dangerouslySetInnerHTML={{ __html: posts.content }} />
+        </ArticleCtxMenu>
       </ArticlePage>
     </DropZone>
   );

package/src/pages/login/index.tsx

@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Button, ButtonType } from "@bbki.ng/components";
 import { OauthProvider } from "@/types/supabase";
 import { supabase } from "@/constants";
 import { ArticlePage } from "@/components/article";
 import { useSupabaseSession } from "@/hooks/use_supa_session";
 import { Navigate } from "react-router-dom";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
 
 export const Login = () => {
-  const [loading, setLoading] = useState(false);
+  const { isLoading, setIsLoading } = useContext(GlobalLoadingContext);
 
   const session = useSupabaseSession();
   if (session) {
@@ -16,18 +17,32 @@ export const Login = () => {
 
   return (
     <ArticlePage title="第三方账号登录">
-      <Button
-        type={loading ? ButtonType.DISABLED : ButtonType.PRIMARY}
-        className="ml-8"
-        onClick={async () => {
-          setLoading(true);
-          return supabase.auth.signIn({
-            provider: OauthProvider.GITHUB,
-          });
-        }}
-      >
-        GitHub
-      </Button>
+      <>
+        <Button
+          type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY}
+          className="ml-8"
+          onClick={async () => {
+            setIsLoading(true);
+            return supabase.auth.signIn({
+              provider: OauthProvider.GITHUB,
+            });
+          }}
+        >
+          GitHub
+        </Button>
+        <Button
+          type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY}
+          className="ml-8"
+          onClick={async () => {
+            setIsLoading(true);
+            return supabase.auth.signIn({
+              provider: OauthProvider.Spotify,
+            });
+          }}
+        >
+          Spotify
+        </Button>
+      </>
     </ArticlePage>
   );
 };

package/src/types/supabase.ts

@@ -6,4 +6,5 @@ export interface BBKingSession extends Session {
 
 export enum OauthProvider {
   GITHUB = "github",
+  Spotify = "spotify",
 }

package/src/utils/index.ts

@@ -3,6 +3,7 @@ import { ossProcessType } from "@/types/oss";
 import { API_ENDPOINT, OSS_ADDRESS } from "@/constants/routes";
 import { DEFAULT_DELAY } from "@/constants";
 import useSWR from "swr";
+import { toast } from "sonner";
 
 type Fetcher = (resource: string, init?: any) => Promise<any>;
 
@@ -153,3 +154,19 @@ export const getRandomInt = (min: number, max: number) => {
 export const copyToClipboard = async (value: string) => {
   await navigator.clipboard.writeText(value);
 };
+
+export const confirm = (message: string, exec: () => void) => {
+  toast("", {
+    description: message,
+    actionButtonStyle: {
+      backgroundColor: "#fff",
+      color: "rgb(37,99,235)",
+    },
+    action: {
+      label: "是",
+      onClick: () => {
+        exec();
+      },
+    },
+  });
+};