@bbki.ng/site 0.0.17

package/src/components/comment/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+import { ReactCusdis } from "react-cusdis";
+import { BgColors } from "@/types/color";
+import { CUSDIS_ATTRS, CUSDIS_OFFICIAL_SITE_ADDRESS } from "@/constants/cusdis";
+import { useCusidsEvent } from "@/components/comment/use_cusdis_event";
+import { CornerPromptBox } from "@/components";
+import { Link, LinkColor } from "@bbki.ng/components";
+
+type CommentProps = {
+  title: string;
+};
+
+export const Comment = (props: CommentProps) => {
+  const path = location.href;
+  const cusdisAttrs = Object.assign({}, CUSDIS_ATTRS, {
+    pageTitle: props.title,
+    pageUrl: path,
+    pageId: path,
+  });
+
+  const [ready, setReady] = useState(false);
+  const [showBox, setShowBox] = useState(false);
+
+  useCusidsEvent({
+    handleCommentLoaded: () => {
+      setReady(true);
+    },
+    handleCommentSent: () => {
+      setShowBox(true);
+    },
+  });
+
+  return (
+    <div
+      className={classnames(
+        "overflow-hidden",
+        "transition-all",
+        BgColors.WHITE_GRAY,
+        {
+          "max-h-0": !ready,
+          "p-5": ready,
+          "mb-8": ready,
+        }
+      )}
+    >
+      <ReactCusdis attrs={cusdisAttrs} />
+      <CornerPromptBox
+        autoCancelAfter={3000}
+        content="评论已发送，等待 18+ 内容审核。"
+        showBox={showBox}
+        cancelLabel="关闭"
+        onCancel={() => {
+          console.log("cancel");
+          setShowBox(false);
+        }}
+      />
+      <div className="text-center">
+        <Link
+          to={CUSDIS_OFFICIAL_SITE_ADDRESS}
+          external
+          color={LinkColor.GRAY}
+          className="px-1"
+        >
+          powered by discus
+        </Link>
+      </div>
+    </div>
+  );
+};

package/src/components/comment/use_cusdis_event.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { cusdisEvent } from "../../types/cusdis";
+
+type cusdisEventHandlers = {
+  handleCommentLoaded?: () => void;
+  handleCommentSent?: () => void;
+};
+
+const noop = () => null;
+
+export const useCusidsEvent = (handlers: cusdisEventHandlers) => {
+  const { handleCommentLoaded = noop, handleCommentSent = noop } = handlers;
+  const onMessage = (e: MessageEvent) => {
+    try {
+      const msg = JSON.parse(e.data);
+      if (msg.from === "cusdis") {
+        switch (msg.event) {
+          case cusdisEvent.COMMENTS_LOADED:
+            handleCommentLoaded();
+            break;
+          case cusdisEvent.COMMENT_SENT:
+            handleCommentSent();
+            break;
+          default:
+            return;
+        }
+      }
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, []);
+};

package/src/components/corner_prompt_box/index.tsx

@@ -0,0 +1,63 @@
+import React, { EventHandler, useEffect } from "react";
+import { PopConfirm } from "@bbki.ng/components";
+import classNames from "classnames";
+
+type cornerPromptBoxProps = {
+  okLabel?: string;
+  onOk?: (() => void) | null;
+  onCancel?: (() => void) | null;
+  cancelLabel?: string;
+  autoCancelAfter?: number;
+  content: string;
+  showBox: boolean;
+  className?: string;
+};
+
+export const CornerPromptBox = (props: cornerPromptBoxProps) => {
+  const { onOk, onCancel, content, showBox, autoCancelAfter, className } =
+    props;
+
+  useEffect(() => {
+    if (!autoCancelAfter || !onCancel || !showBox) {
+      return;
+    }
+    const timerId = setTimeout(() => {
+      onCancel();
+    }, autoCancelAfter);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [showBox]);
+
+  const handleOk = async () => {
+    if (!onOk) {
+      return;
+    }
+    return onOk();
+  };
+
+  if (!showBox) {
+    return null;
+  }
+
+  return (
+    <div className="p-0 m-0 w-0 h-0">
+      <div
+        className={classNames(
+          "left-0 bottom-0 m-32 z-10 bg-white fixed",
+          className
+        )}
+      >
+        <PopConfirm
+          onOk={handleOk}
+          onCancel={
+            onCancel as EventHandler<React.MouseEvent<HTMLButtonElement>>
+          }
+        >
+          {content}
+        </PopConfirm>
+      </div>
+    </div>
+  );
+};

package/src/components/disabled_text/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import classnames from "classnames";
+
+type disabledTextProps = {
+  children: any;
+  className?: string;
+};
+
+export const DisabledText = (props: disabledTextProps) => {
+  return (
+    <span className={classnames("text-gray-400", props.className)}>
+      {props.children}
+    </span>
+  );
+};
+
+export const SmallDisabledText = (props: disabledTextProps) => {
+  return (
+    <small>
+      <DisabledText>{props.children}</DisabledText>
+    </small>
+  );
+};

package/src/components/fade_out_cover/index.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import classnames from "classnames";
+import { DEFAULT_DELAY } from "@/constants";
+
+type FadeOutCoverProps = {
+  duration: number; // ms
+  coverColor: string;
+};
+
+export const FadeOutCover: FunctionComponent<FadeOutCoverProps> = (props) => {
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setHidden(true);
+    }, props.duration || DEFAULT_DELAY);
+    return () => {
+      clearTimeout(id);
+    };
+  }, []);
+  return (
+    <div
+      style={{
+        backgroundColor: props.coverColor || "#fff",
+      }}
+      className={classnames(
+        "transition-opacity",
+        "h-full",
+        "w-full",
+        "absolute",
+        "opacity-100",
+        {
+          "opacity-0": hidden,
+        }
+      )}
+    />
+  );
+};

package/src/components/footer/footer_links.ts

@@ -0,0 +1,13 @@
+import { pathObj } from "@/types/path";
+import { GITHUB_REPO_ADDRESS, ROUTES } from "@/constants";
+
+export const FooterLinks: pathObj[] = [
+  {
+    name: "blog",
+    path: ROUTES.BLOG,
+  },
+  // {
+  //   text: "contributing",
+  //   link: "https://github.com/bbbottle/bbki.ng/blob/main/CONTRIBUTING.md",
+  // },
+];

package/src/components/footer/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { pathObj } from "@/types/path";
+import { TextColors } from "@/types/color";
+// import { List } from "../list";
+import { FooterLinks } from "./footer_links";
+import { Link, LinkColor } from "@bbki.ng/components";
+
+export const Footer = () => {
+  const renderFooterLink = (l: pathObj) => {
+    return (
+      <Link to={l.path as string} color={LinkColor.GRAY}>
+        {l.name}
+      </Link>
+    );
+  };
+
+  return renderFooterLink(FooterLinks[0]);
+  // return (
+  //   <List items={FooterLinks} itemRenderer={renderFooterLink} horizontal />
+  // );
+};

package/src/components/hotkey_nav/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useHotkeys } from "react-hotkeys-hook";
+import { GITHUB_REPO_ADDRESS, ROUTES } from "@/constants";
+
+enum HotKeys {
+  i = "i",
+  e = "e",
+  c = "c",
+  t = "t",
+  p = "p",
+  a = "a",
+  f = "f",
+  b = "b",
+  h = "h",
+  s = "s",
+  T = "shift+t",
+}
+
+const KEY_ROUTES = [
+  { key: HotKeys.i, route: ROUTES.INDEX },
+  { key: HotKeys.c, route: ROUTES.CONTENT },
+  { key: HotKeys.h, route: ROUTES.HELP },
+  { key: HotKeys.T, route: ROUTES.TAGS },
+];
+
+export const HotKeyNav = (props: any) => {
+  const nav = useNavigate();
+  const goto = (path: string) => {
+    nav(path);
+  };
+
+  useHotkeys(HotKeys.b, () => {
+    nav(-1);
+  });
+  useHotkeys(HotKeys.f, () => {
+    nav(1);
+  });
+  useHotkeys(HotKeys.s, () => {
+    window.open(GITHUB_REPO_ADDRESS);
+  });
+
+  KEY_ROUTES.map(({ key, route }) => {
+    useHotkeys(key, () => {
+      goto(route);
+    });
+  });
+
+  return props.children;
+};

package/src/components/img_list/index.tsx

@@ -0,0 +1,43 @@
+import React, { FunctionComponent, ReactElement, ReactNode } from "react";
+import cls from "classnames";
+import { Photo } from "@/types/photo";
+import { Article, Img } from "@bbki.ng/components";
+
+interface imgListProps {
+  className: string;
+  imgList: Photo[];
+  description?: any;
+  beforeListRenderer?: () => ReactNode;
+}
+
+const BaseImgList: FunctionComponent<imgListProps> = (props: imgListProps) => {
+  const { imgList, className, beforeListRenderer } = props;
+
+  return (
+    <div className={cls("max-h-full no-scrollbar overflow-auto", className)}>
+      {beforeListRenderer && <>{beforeListRenderer()}</>}
+      {imgList.map((img, index) => {
+        const isLast = index === imgList.length - 1;
+        return (
+          <div key={img.src}>
+            <Img {...img} className={cls({ "mb-256": !isLast })} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface TitledImageListProps extends imgListProps {
+  title: string | ReactElement;
+}
+
+export const ImgList = (props: TitledImageListProps) => {
+  const { title, description, ...rest } = props;
+
+  return (
+    <Article title={title} description={description}>
+      <BaseImgList {...rest} />
+    </Article>
+  );
+};

package/src/components/index.tsx

@@ -0,0 +1,27 @@
+export { Footer } from "./footer";
+
+export { DisabledText, SmallDisabledText } from "./disabled_text";
+
+export { ImgList } from "./img_list";
+
+export { withArticleWrapper } from "./with_wrapper";
+
+export { HotKeyNav } from "./hotkey_nav";
+
+export { VideoPlayer } from "./video_player";
+
+export { ProgressBar } from "./progress_bar";
+
+export { BlurCover } from "./blur_cover";
+
+export { ReloadPrompt } from "./reload_prompt";
+
+export { Stickers } from "./stickers";
+
+export { CornerPromptBox } from "./corner_prompt_box";
+
+export { Tags } from "./tags";
+
+export { Comment } from "./comment";
+
+export { MySuspense } from "./my_suspense";

package/src/components/movie_list/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Table, Link, Error } from "@bbki.ng/components";
+import { TableSkeleton } from "@/components/table_skeleton";
+import { useMovies } from "@/hooks";
+
+const CELL_STYLE = {
+  width: 100,
+  maxWidth: 100,
+};
+
+export const MovieList = () => {
+  const { movies, isLoading, isError } = useMovies();
+  if (isError) {
+    return <Error error={isError} />;
+  }
+
+  if (isLoading) {
+    return <TableSkeleton />;
+  }
+
+  const renderHeader = () => {
+    return (
+      <>
+        <Table.HCell style={CELL_STYLE}>名字</Table.HCell>
+        <Table.HCell style={CELL_STYLE}>状态</Table.HCell>
+      </>
+    );
+  };
+
+  const renderRow = (index: number) => {
+    const { name, link, status } = movies[index];
+    return (
+      <>
+        <Table.Cell style={CELL_STYLE}>
+          <Link to={link} external>
+            {name}
+          </Link>
+        </Table.Cell>
+        <Table.Cell style={CELL_STYLE}>{status}</Table.Cell>
+      </>
+    );
+  };
+  return (
+    <Table
+      rowCount={movies.length}
+      rowRenderer={renderRow}
+      headerRenderer={renderHeader}
+    />
+  );
+};

package/src/components/my_suspense.tsx

@@ -0,0 +1,14 @@
+import React, { ReactElement, ReactNode, Suspense } from "react";
+import { Spinner } from "./Spinner";
+import { ErrorBoundary } from "@bbki.ng/components";
+
+export const MySuspense = (props: {
+  children: ReactNode;
+  fallback?: ReactElement;
+}) => {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<Spinner />}>{props.children}</Suspense>
+    </ErrorBoundary>
+  );
+};

package/src/components/progress_bar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import classnames from "classnames";
+import { BgColors } from "@/types/color";
+import { floatNumberToPercentageString } from "@/utils";
+
+type progressBarProps = {
+  bgColor?: BgColors;
+  fgColor?: BgColors;
+  height?: number;
+  progress: number;
+};
+
+export const ProgressBar = (props: progressBarProps) => {
+  const {
+    height = 2,
+    fgColor = BgColors.BLUE,
+    bgColor = BgColors.GRAY,
+    progress,
+  } = props;
+
+  const wrapperCls = classnames("w-full", "text-left", bgColor);
+  const innerBarCls = classnames("h-full", fgColor);
+  return (
+    <div className={wrapperCls} style={{ height }}>
+      <div
+        className={innerBarCls}
+        style={{ width: floatNumberToPercentageString(progress) }}
+      />
+    </div>
+  );
+};

package/src/components/reload_prompt/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+// @ts-ignore
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { CornerPromptBox } from "@/components";
+
+export const ReloadPrompt = () => {
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisterError(error: any) {
+      console.log("SW registration error", error);
+    },
+  });
+
+  const close = () => {
+    // setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  // @ts-ignore
+  const appVer = GLOBAL_BBKING_VERSION;
+  console.log("appVer: ", appVer);
+
+  return (
+    <CornerPromptBox
+      className="z-[1010]"
+      content={`🚀 发现新版本（当前 v${appVer}）。获取更新？`}
+      showBox={needRefresh}
+      onCancel={close}
+      cancelLabel="关闭"
+      onOk={needRefresh ? () => updateServiceWorker(true) : close}
+    />
+  );
+};

package/src/components/stickers/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Img } from "@bbki.ng/components";
+import { NavLink, useLocation } from "react-router-dom";
+
+export const Stickers = () => {
+  const { pathname } = useLocation();
+
+  if (pathname !== "/") {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-128 md:bottom-256 right-16 z-10 md:right-64">
+      <NavLink to="projects">
+        <Img
+          size="large"
+          src="https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/stickers/sticker-water-delivery.jpg"
+          className="-rotate-[32.95deg] relative top-0 md:-top-64 left-64 md:left-[unset]"
+          width={126}
+          height={59}
+          renderedWidth={126}
+        />
+      </NavLink>
+      <NavLink to="404">
+        <Img
+          size="large"
+          src="https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/stickers/sticker-lock.jpg"
+          className="rotate-[10.77deg] relative left-64 md:left-[unset]"
+          width={93}
+          height={50}
+          renderedWidth={93}
+        />
+      </NavLink>
+      <NavLink to="blog">
+        <Img
+          size="large"
+          src="https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/stickers/bar-code.jpg"
+          className="-rotate-[13.37deg] relative top-64 left-64 md:left-[unset] md:right-256 md:top-128"
+          width={176}
+          height={60}
+          renderedWidth={176}
+        />
+      </NavLink>
+    </div>
+  );
+};

package/src/components/table_skeleton/index.tsx

@@ -0,0 +1,40 @@
+import { Skeleton, SkeletonColor, Table } from "@bbki.ng/components";
+import React from "react";
+
+const CELL_STYLE = {
+  width: 100,
+  maxWidth: 100,
+};
+
+export const TableSkeleton = (props: {
+  headers?: string[];
+  cellStyle?: { width: number; maxWidth: number };
+}) => {
+  const { headers, cellStyle = CELL_STYLE } = props;
+  const [name = "名字", status = "状态"] = headers || [];
+  const renderHeader = () => {
+    return (
+      <>
+        <Table.HCell style={cellStyle}>{name}</Table.HCell>
+        <Table.HCell style={cellStyle}>{status}</Table.HCell>
+      </>
+    );
+  };
+
+  const renderRow = () => {
+    return (
+      <>
+        <Table.Cell style={cellStyle}>
+          <Skeleton width={84} height={16} bgColor={SkeletonColor.BLUE} />
+        </Table.Cell>
+        <Table.Cell style={cellStyle}>
+          <Skeleton width={32} height={16} bgColor={SkeletonColor.GRAY} />
+        </Table.Cell>
+      </>
+    );
+  };
+
+  return (
+    <Table rowCount={3} rowRenderer={renderRow} headerRenderer={renderHeader} />
+  );
+};

package/src/components/tags/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import classnames from "classnames";
+import { List, Tag, Link, TitledList } from "@bbki.ng/components";
+import { ROUTES } from "@/constants";
+
+type MyTag =
+  | {
+      path: string;
+      name: string;
+    }
+  | string;
+
+type Tags = {
+  tags: MyTag[];
+  className?: string;
+  inline?: boolean;
+};
+
+export const Tags = (props: Tags) => {
+  const { inline, className, tags } = props;
+
+  const renderTag = (tag: MyTag) => {
+    const TagComp = inline ? Tag : Link;
+    if (typeof tag === "string") {
+      return <TagComp to={`${ROUTES.TAGS}/${tag}`}>{tag}</TagComp>;
+    }
+
+    return <TagComp to={tag.path}>{tag.name}</TagComp>;
+  };
+
+  if (inline) {
+    return (
+      <>
+        <List
+          items={tags}
+          itemRenderer={renderTag}
+          horizontal={inline}
+          className={classnames(className, "inline-flex", "flex-wrap")}
+        />
+      </>
+    );
+  }
+  return (
+    <TitledList
+      title={"标签"}
+      items={tags}
+      itemRenderer={renderTag}
+      horizontal={inline}
+      className={className}
+    />
+  );
+};