@bbki.ng/site 0.0.17

package/src/hooks/use_img_loading.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export const useImgLoading = (src: string) => {
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setLoading(false);
+    };
+    return () => {
+      img.src = "";
+    };
+  }, []);
+  return loading;
+};

package/src/hooks/use_pathname.ts

@@ -0,0 +1,6 @@
+import { useLocation } from "react-router-dom";
+
+export const usePathName = () => {
+  const { pathname } = useLocation();
+  return pathname.replace(/\/$/, "");
+};

package/src/hooks/use_paths.ts

@@ -0,0 +1,30 @@
+import { pathObj } from "@/types/path";
+import { usePathName } from "@/hooks/use_pathname";
+
+export const usePaths = (): pathObj[] => {
+  const pathname = usePathName();
+
+  if (pathname === "/") {
+    return [{ name: "~" }];
+  }
+
+  const pathNameArr = pathname.split("/");
+
+  const pathsArr: string[] = pathNameArr.map((p: string, index: number) => {
+    return pathNameArr
+      .slice(0, index + 1)
+      .join("/")
+      .replace(/^$/, "/");
+  });
+
+  return pathsArr.map((path, index) => {
+    const isLast = index === pathsArr.length - 1;
+    const name = decodeURIComponent(pathNameArr[index].replace(/^$/, "~"));
+    return isLast
+      ? { name }
+      : {
+          name,
+          path,
+        };
+  });
+};

package/src/hooks/use_projects.ts

@@ -0,0 +1,56 @@
+import useSWR, { useSWRConfig } from "swr";
+import { API } from "@/constants/routes";
+import { useCallback } from "react";
+import { Photo } from "@/types/photo";
+
+export const useProjects = (name: string = "", suspense?: boolean) => {
+  const URL = `${API.PROJECTS}${name ? "/" : ""}${name}`;
+
+  const { data, error } = useSWR(URL, {
+    revalidateOnFocus: false,
+    suspense,
+  });
+
+  const { mutate, cache } = useSWRConfig();
+
+  const getCachedProjects = (n: string) => {
+    if (!n) {
+      return;
+    }
+    return cache.get("projects")?.find((p: { name: string }) => p.name === n);
+  };
+
+  const refresh = useCallback(() => {
+    return mutate(URL);
+  }, [URL]);
+
+  const addLocalPhotoImmediately = useCallback(
+    (photo: Photo) => {
+      if (!name) {
+        return;
+      }
+
+      if (!data || error) {
+        return;
+      }
+
+      return mutate(
+        URL,
+        {
+          ...data,
+          images: [photo, ...data.images],
+        },
+        false
+      );
+    },
+    [data, error]
+  );
+
+  return {
+    refresh,
+    addLocalPhotoImmediately,
+    projects: data || getCachedProjects(name),
+    isError: error,
+    isLoading: !data && !error,
+  };
+};

package/src/hooks/use_route_name.ts

@@ -0,0 +1,7 @@
+import { ROUTE_NAME } from "@/constants";
+import { usePathName } from "@/hooks/use_pathname";
+
+export const useRouteName = () => {
+  const pathname = usePathName();
+  return ROUTE_NAME[pathname.replace(/\/$/, "")] || ROUTE_NAME.unknown;
+};

package/src/hooks/use_supa_session.ts

@@ -0,0 +1,30 @@
+import { createClient, Session } from "@supabase/supabase-js";
+import { SUPABASE } from "@/constants";
+import { useEffect, useState } from "react";
+import { BBKingSession } from "@/types/supabase";
+
+export const useSupabaseSession = (): BBKingSession | null => {
+  const supabase = createClient(SUPABASE.URL, SUPABASE.ANNO);
+
+  const extendSess = (sess: Session | null) => {
+    if (!sess) {
+      return sess;
+    }
+    return {
+      ...sess,
+      isKing: sess.user?.id === SUPABASE.BB_KING_ID,
+    };
+  };
+
+  const [session, setSession] = useState(extendSess(supabase.auth.session()));
+
+  useEffect(() => {
+    supabase.auth.onAuthStateChange((event, session) => {
+      if (event === "SIGNED_IN") {
+        setSession(extendSess(session));
+      }
+    });
+  }, []);
+
+  return session;
+};

package/src/hooks/use_uploader.ts

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+import { apiFetcher, getImageFileSize, withToken } from "@/utils";
+import { Photo } from "@/types/photo";
+import { API } from "@/constants/routes";
+import { UploadResult } from "@/types/oss";
+
+export const useUploader = () => {
+  const { access_token: token } = useSupabaseSession() || {};
+  const authedApiFetcher = withToken(apiFetcher)(token);
+
+  return useCallback(
+    async (pid: string, projectName: string, file: File): Promise<Photo> => {
+      const { width, height } = await getImageFileSize(file);
+
+      const url = `${API.UPLOAD_IMG}?pid=${pid}&fileName=${file.name}&projectName=${projectName}&width=${width}&height=${height}`;
+
+      const result = (await authedApiFetcher(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+        },
+        body: file,
+      })) as UploadResult;
+
+      return {
+        width,
+        height,
+        src: result.url,
+      };
+    },
+    [token]
+  );
+};

package/src/hooks/use_video_controls.ts

@@ -0,0 +1,71 @@
+import {
+  ReactEventHandler,
+  useRef,
+  useState,
+  RefObject,
+  useEffect,
+} from "react";
+
+export const useVideoControls = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlay, setIsPlay] = useState(false);
+
+  const toggle = async () => {
+    const { current: video } = videoRef;
+
+    if (!video) return;
+
+    if (video.paused || video.ended) {
+      await video.play();
+      setIsPlay(true);
+      return;
+    }
+    video.pause();
+    setIsPlay(false);
+  };
+
+  const isEnd = videoRef && videoRef.current && videoRef.current.ended;
+
+  return {
+    videoRef,
+    isPlay: isPlay && !isEnd,
+    toggle,
+  };
+};
+
+export const useVideoProgress = () => {
+  const [progress, setProgress] = useState(0);
+  const onTimeUpdate: ReactEventHandler<HTMLVideoElement> = (event) => {
+    const video = event.currentTarget;
+    if (!video.duration) {
+      setProgress(0);
+      return;
+    }
+    setProgress(video.currentTime / video.duration);
+  };
+
+  return { progress, onTimeUpdate };
+};
+
+export const useVideoEleHeight = (
+  videoRef: RefObject<HTMLVideoElement>
+): number => {
+  const [height, setHeight] = useState(0);
+  const updateHeight = () => {
+    if (!videoRef.current) {
+      return;
+    }
+    const { height } = videoRef.current.getBoundingClientRect();
+    setHeight(height);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateHeight);
+    return () => {
+      window.removeEventListener("resize", updateHeight);
+    };
+  }, []);
+
+  useEffect(updateHeight);
+  return height;
+};

package/src/main.css

@@ -0,0 +1,156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+@layer base {
+  .blur-cover {
+    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(7px);
+  }
+
+  .prose pre {
+    color: #24292f !important;
+    background-color: #f6f8fa !important;
+  }
+
+  a:focus {
+    @apply outline-none;
+  }
+
+  /* syntax highlight */
+  /*!
+    Theme: GitHub
+    Description: Light theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+    Outdated base version: https://github.com/primer/github-syntax-light
+    Current colors taken from GitHub's CSS
+  */
+
+  .hljs {
+    color: #24292e;
+    background: #ffffff;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #d73a49;
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #6f42c1;
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #005cc5;
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #032f62;
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #e36209;
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #6a737d;
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #22863a;
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #24292e;
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #005cc5;
+    font-weight: bold;
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #735c0f;
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #24292e;
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #24292e;
+    font-weight: bold;
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+  }
+}

package/src/main.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+import { ReloadPrompt } from "@/components";
+import "@bbki.ng/components/style";
+import App from "./app";
+import "./main.css";
+
+const container = document.getElementById("root") as Element;
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <Router>
+      <ReloadPrompt />
+      <App />
+    </Router>
+  </React.StrictMode>
+);

package/src/pages/cover/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Article } from "@bbki.ng/components";
+
+export const Cover = (props: { className: string }) => {
+  return (
+    <Article title="">
+      <div className="bg-white">This page intentionally left blank</div>
+    </Article>
+  );
+};

package/src/pages/extensions/png/consts.ts

@@ -0,0 +1,9 @@
+import { ImgList } from "@/components";
+import { PHOTO_PROJECTS, ROUTES } from "@/constants";
+
+export const ProjectList = PHOTO_PROJECTS.map(
+  ({ name, images: imgList, description }) => ({
+    path: name,
+    name,
+  })
+);

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

@@ -0,0 +1,41 @@
+import React, { useCallback, useEffect } from "react";
+import classnames from "classnames";
+import { useProjects } from "@/hooks/use_projects";
+import { Link, Gallery, ImageRenderer } from "@bbki.ng/components";
+import { MySuspense } from "@/components";
+import { imageFormatter } from "@/utils";
+
+const Projects = () => {
+  const { projects } = useProjects("", true);
+  const renderImage: ImageRenderer = useCallback(
+    (img, index, col) => {
+      const project = projects[index];
+      return (
+        <div
+          className={classnames("mb-128", {
+            "md:mr-64": col === 0,
+            "md:ml-64": col !== 0,
+          })}
+        >
+          <Link to={`/projects/${project.name}`}>{img}</Link>
+        </div>
+      );
+    },
+    [projects]
+  );
+
+  return (
+    <Gallery
+      images={projects.map((p: any) => p.cover).map(imageFormatter)}
+      imageRenderer={renderImage}
+    />
+  );
+};
+
+export default () => {
+  return (
+    <MySuspense>
+      <Projects />
+    </MySuspense>
+  );
+};

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

@@ -0,0 +1,63 @@
+import React, { useContext, 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 { usePaths } from "@/hooks";
+
+const ProjectDetail = () => {
+  const { id } = useParams();
+  const { setIsLoading } = useContext(GlobalLoadingContext);
+  const uploader = useUploader();
+  const { projects, refresh } = useProjects(id, true);
+
+  useEffect(() => {
+    return () => {
+      refresh().then(() => {});
+    };
+  }, []);
+
+  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>
+  );
+
+  return (
+    <>
+      <Gallery images={projects.images.map(imageFormatter)}>
+        {renderUploader()}
+      </Gallery>
+      <Nav paths={usePaths()} mini className="justify-center py-32 md:hidden" />
+    </>
+  );
+};
+
+export default () => {
+  return (
+    <MySuspense>
+      <ProjectDetail />
+    </MySuspense>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import { MdxArticleList } from "@/articles";
+import { withArticleWrapper } from "@/components";
+import { MdxArticle } from "@/types/articles";
+import { Article, NotFound } from "@bbki.ng/components";
+import { useParams } from "react-router-dom";
+
+type TArticleMap = {
+  [key: string]: ReactElement;
+};
+
+const ArticleMap: TArticleMap = {};
+
+MdxArticleList.forEach((article: unknown) => {
+  const { meta, default: component } = article as MdxArticle;
+  const Article = withArticleWrapper(component);
+  ArticleMap[meta.title] = <Article {...meta} />;
+});
+
+export default () => {
+  const { title } = useParams();
+  if (!title || !ArticleMap[title]) {
+    return <NotFound />;
+  }
+  return ArticleMap[title];
+};

package/src/pages/extensions/txt/consts.ts

@@ -0,0 +1,8 @@
+import { MdxArticleList } from "@/articles";
+
+export const ArticleList = MdxArticleList.map(({ meta }) => {
+  return {
+    to: meta.title,
+    name: meta.title,
+  };
+});

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { ArticleList } from "./consts";
+// import Tags from "@/pages/tags";
+import { LinkList, LinkProps } from "@bbki.ng/components";
+import { useRouteName } from "@/hooks";
+
+type TxtProps = {
+  title?: string;
+  articleList?: LinkProps[];
+};
+
+export default (props: TxtProps) => {
+  const name = useRouteName();
+  return (
+    <LinkList
+      links={props.articleList || ArticleList}
+      title={props.title || name}
+      // description={<Tags inline className="ml-0" withAll />}
+    />
+  );
+};

package/src/pages/index.tsx

@@ -0,0 +1,14 @@
+import React, { lazy, Suspense } from "react";
+import { minDelay } from "@/utils";
+
+const NowLazy = lazy(() => minDelay(import("./now")));
+const NowPage = () => {
+  return (
+    <Suspense fallback={null}>
+      <NowLazy />
+    </Suspense>
+  );
+};
+
+export { Cover } from "./cover";
+export { NowPage };

package/src/pages/login/index.tsx

@@ -0,0 +1,33 @@
+import React, { 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";
+
+export const Login = () => {
+  const [loading, setLoading] = useState(false);
+
+  const session = useSupabaseSession();
+  if (session) {
+    return <Navigate to="/" />;
+  }
+
+  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>
+    </ArticlePage>
+  );
+};

package/src/pages/now/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { default as MdxArticleComp, meta } from "@/articles/now.mdx";
+import { withArticleWrapper } from "@/components";
+
+const Article = withArticleWrapper(MdxArticleComp);
+
+export default () => <Article {...meta} />;