@bbki.ng/site 0.0.49 → 0.0.50

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 0.0.50
+
 ## 0.0.49
 
 ## 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "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.1.27",
+    "@bbki.ng/components": "workspace:2.1.28",
     "@supabase/supabase-js": "^1.30.6",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/app.tsx

@@ -1,13 +1,8 @@
 import React, { useContext } from "react";
 import { Routes, Route, Outlet } from "react-router-dom";
-import {
-  Nav,
-  Page,
-  ThreeColLayout,
-  NotFound,
-  ErrorBoundary,
-} from "@bbki.ng/components";
+import { Nav, Page, NotFound } from "@bbki.ng/components";
 import { HotKeyNav, Stickers } from "./components";
+import { threeColWrapper } from "@/components/with_wrapper";
 import { Cover } from "./pages";
 
 import Png from "@/pages/extensions/png";
@@ -25,7 +20,7 @@ import {
   GlobalLoadingContext,
   GlobalLoadingStateProvider,
 } from "@/global_loading_state_provider";
-import { useScrollToTop } from "@/hooks/useScrollToTop";
+import { UploadPage } from "@/pages/upload";
 
 const Layout = () => {
   const { isLoading } = useContext(GlobalLoadingContext);
@@ -42,20 +37,6 @@ const Layout = () => {
   );
 };
 
-const threeColWrapper =
-  <T extends object>(Component: any) =>
-  (props: T) => {
-    return (
-      <ThreeColLayout
-        middleRenderer={() => (
-          <ErrorBoundary>
-            <Component {...props} />
-          </ErrorBoundary>
-        )}
-      />
-    );
-  };
-
 const NowInMidCol = threeColWrapper(NowPage);
 const ContentInMidCol = threeColWrapper(Txt);
 const ArticleInMidCol = threeColWrapper(ArticlePage);
@@ -73,18 +54,19 @@ export const App = () => {
           <Routes>
             <Route path="/" element={<Layout />}>
               <Route index element={<CoverInMidCol />} />
+
               <Route path="/projects" element={<Png />} />
               <Route path="/projects/:id" element={<PhotoProjects />} />
 
-              <Route path="now" element={<NowInMidCol />} />
-              <Route path="tags" element={<TagsInMidCol />} />
-              <Route path="tags/:tag" element={<TagsResultInMidCol />} />
-
               <Route path="blog" element={<ContentInMidCol />} />
               <Route path="blog/:title" element={<ArticleInMidCol />} />
               <Route path="blog/:title/:id" element={<PhotoProjects />} />
+              <Route path="tags" element={<TagsInMidCol />} />
+              <Route path="tags/:tag" element={<TagsResultInMidCol />} />
 
+              <Route path="now" element={<NowInMidCol />} />
               <Route path="login" element={<LoginInMidCol />} />
+              <Route path="upload" element={<UploadPage />} />
             </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>

package/src/components/ImageUploader.tsx

@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import { DropImage } from "@bbki.ng/components";
+import { AuthRequired } from "@/auth_required";
+import { useUploader } from "@/hooks/use_uploader";
+import { ImageUploaderProps } from "@/types/upload";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
+
+export const ImageUploader = (props: ImageUploaderProps) => {
+  const {
+    onUploadFinish,
+    onUploadError = () => {},
+    onUploadSuccess = () => {},
+    onBeforeUpload = () => Promise.resolve(),
+    projectId,
+    projectName,
+    ...rest
+  } = props;
+
+  const { setIsLoading } = useContext(GlobalLoadingContext);
+  const uploader = useUploader();
+
+  return (
+    <AuthRequired shouldBeKing>
+      <DropImage
+        {...rest}
+        className="mb-256"
+        onUploadFinish={onUploadFinish}
+        uploader={async (file) => {
+          await onBeforeUpload();
+          setIsLoading(true);
+          try {
+            const res = await uploader(
+              projectId || "",
+              projectName || "",
+              file
+            );
+            await onUploadSuccess(res);
+            return setIsLoading(false);
+          } catch (e) {
+            setIsLoading(false);
+            onUploadError();
+            console.error(e, "failed to upload image.");
+          }
+        }}
+        ghost
+      >
+        {() => null}
+      </DropImage>
+    </AuthRequired>
+  );
+};

package/src/components/with_wrapper/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FunctionComponent } from "react";
 import { ArticlePage } from "@/components/article";
+import { ThreeColLayout, ErrorBoundary } from "@bbki.ng/components";
 
 export const withArticleWrapper =
   (Component: FunctionComponent<any>): FunctionComponent<any> =>
@@ -11,3 +12,17 @@ export const withArticleWrapper =
       </ArticlePage>
     );
   };
+
+export const threeColWrapper =
+  <T extends object>(Component: any) =>
+  (props: T) => {
+    return (
+      <ThreeColLayout
+        middleRenderer={() => (
+          <ErrorBoundary>
+            <Component {...props} />
+          </ErrorBoundary>
+        )}
+      />
+    );
+  };

package/src/pages/extensions/png/png_projects.tsx

@@ -1,18 +1,14 @@
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { MySuspense } from "@/components";
 import { useParams } from "react-router-dom";
 import { useProjects } from "@/hooks/use_projects";
-import { AuthRequired } from "@/auth_required";
 import { imageFormatter } from "@/utils";
-import { DropImage, Gallery, Nav } from "@bbki.ng/components";
-import { useUploader } from "@/hooks/use_uploader";
-import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { Gallery, Nav } from "@bbki.ng/components";
 import { usePaths } from "@/hooks";
+import { ImageUploader } from "@/components/ImageUploader";
 
 const ProjectDetail = () => {
   const { id } = useParams();
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-  const uploader = useUploader();
   const { projects, refresh } = useProjects(id, true);
 
   useEffect(() => {
@@ -22,26 +18,11 @@ const ProjectDetail = () => {
   }, []);
 
   const renderUploader = () => (
-    <AuthRequired shouldBeKing>
-      <DropImage
-        className="mb-256"
-        onUploadFinish={async () => {
-          setIsLoading(false);
-          await refresh();
-        }}
-        uploader={async (file) => {
-          setIsLoading(true);
-          try {
-            return await uploader(projects.id || "", id || "", file);
-          } catch (e) {
-            console.error(e, "failed to upload image.");
-          }
-        }}
-        ghost
-      >
-        {() => null}
-      </DropImage>
-    </AuthRequired>
+    <ImageUploader
+      onUploadFinish={refresh}
+      projectId={projects.id}
+      projectName={id}
+    />
   );
 
   return (

package/src/pages/upload/index.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { ArticlePage } from "@/components/article";
+import { threeColWrapper } from "@/components/with_wrapper";
+import { ImageUploader } from "@/components/ImageUploader";
+import { UploadResult } from "@/types/upload";
+import { Button } from "@bbki.ng/components";
+import { copyToClipboard } from "@/utils";
+
+const Upload = () => {
+  const [source, setSource] = useState("");
+  const buildSource = (result: UploadResult) =>
+    `<Img
+  src="${result.src}"
+  height={${result.height}}
+  width={${result.width}}
+  renderedWidth={${result.width}}
+  removeBlurBgAfterLoad
+/>`;
+
+  return (
+    <ArticlePage title="图片素材上传">
+      <>
+        <ImageUploader
+          onUploadSuccess={(res) => {
+            setSource(buildSource(res));
+          }}
+        />
+        {source && <pre>{source}</pre>}
+        <Button className="m-16" onClick={() => copyToClipboard(source)}>
+          复制代码
+        </Button>
+      </>
+    </ArticlePage>
+  );
+};
+
+export const UploadPage = threeColWrapper(Upload);

package/src/types/upload.ts

@@ -0,0 +1,16 @@
+import { ImageDropProps } from "@bbki.ng/components/lib";
+
+export type UploadResult = {
+  width: number;
+  height: number;
+  src: string;
+};
+
+export interface ImageUploaderProps
+  extends Pick<ImageDropProps<undefined>, "onUploadFinish" | "placeholder"> {
+  onBeforeUpload?: () => void;
+  onUploadError?: () => void;
+  onUploadSuccess?: (res: UploadResult) => void;
+  projectId?: string;
+  projectName?: string;
+}

package/src/utils/index.ts

@@ -141,3 +141,7 @@ export const getRandomInt = (min: number, max: number) => {
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min + 1)) + min;
 };
+
+export const copyToClipboard = async (value: string) => {
+  await navigator.clipboard.writeText(value);
+};