@bbki.ng/site 5.4.21 → 5.4.24

package/src/blog/components/reaction/oh_reaction.tsx

@@ -1,105 +0,0 @@
-import React, {
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { BlinkDot, Button, ButtonType } from "@bbki.ng/components";
-import { faces, hearts, ReactionEmojiPair, sadFaces } from "./emojis";
-import { ShareBtn } from "../share/share-btn";
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "open-heart": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement> & {
-          href?: string;
-          emoji?: string;
-          ariaDisabled?: boolean;
-          onClick?: React.MouseEventHandler<HTMLElement>;
-        },
-        HTMLElement
-      >;
-    }
-  }
-}
-
-const useHeartSent = (val: string) => {
-  const [sent, setSent] = useState(false);
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const handleSent = (evt: Event) => {
-    const targetVal = (evt.target as HTMLElement).getAttribute("emoji");
-
-    if (targetVal == val) setSent(true);
-    setIsLoading(false);
-  };
-
-  useEffect(() => {
-    addEventListener("open-heart", handleSent);
-
-    return () => {
-      removeEventListener("open-heart", handleSent);
-    };
-  }, []);
-
-  return sent;
-};
-
-export const OpenHeartReaction = (props: {
-  title: string;
-  emojiPair: ReactionEmojiPair;
-}) => {
-  const { title, emojiPair = hearts } = props;
-  const sent = useHeartSent(emojiPair.val);
-
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const ohRef = useRef<HTMLElement>(null);
-
-  const pressed = () => ohRef.current?.getAttribute("aria-pressed");
-
-  const handleHeartClick = () => {
-    if (sent || pressed()) {
-      return;
-    }
-
-    setIsLoading(true);
-  };
-
-  return (
-    <open-heart
-      ref={ohRef}
-      href={`https://oh.bbki.ng/?id=${title}`}
-      emoji={emojiPair.val}
-    >
-      <Button
-        size="small"
-        type={ButtonType.GHOST}
-        className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
-        onClick={handleHeartClick}
-      >
-        {sent || pressed() ? emojiPair.on : emojiPair.off}
-      </Button>
-    </open-heart>
-  );
-};
-
-export const Reaction = (props: { title: string; url: string }) => {
-  return (
-    <div className="flex items-center">
-      <OpenHeartReaction title={props.title} emojiPair={hearts} />
-      <OpenHeartReaction title={props.title} emojiPair={faces} />
-      <OpenHeartReaction title={props.title} emojiPair={sadFaces} />
-
-      <ShareBtn
-        shareInfo={{
-          title: props.title,
-          url: props.url,
-        }}
-      />
-    </div>
-  );
-};

package/src/blog/components/reload_prompt/index.tsx

@@ -1,51 +0,0 @@
-import { useEffect } from "react";
-import { toast } from "sonner";
-
-// @ts-ignore
-import { useRegisterSW } from "virtual:pwa-register/react";
-
-export const ReloadPrompt = () => {
-  const {
-    needRefresh: [needRefresh, setNeedRefresh],
-    updateServiceWorker,
-  } = useRegisterSW({
-    onRegisterError(error: any) {
-      console.log("SW registration error", error);
-    },
-    onRegisteredSW(swScriptUrl: string, r: ServiceWorkerRegistration) {
-      console.log("SW registered: ", swScriptUrl, r);
-    },
-    onOfflineReady() {
-      console.log("App is offline-ready");
-    },
-  });
-
-  useEffect(() => {
-    if (needRefresh) {
-      toast("", {
-        description: "发现新版本，是否更新？",
-        duration: 10000,
-        position: "bottom-right",
-        actionButtonStyle: {
-          backgroundColor: "#fff",
-          color: "rgb(37,99,235)",
-        },
-        action: {
-          label: "是",
-          onClick: () => {
-            updateServiceWorker(false).then(() => {
-              // @ts-ignore
-              toast("", {
-                description: `已更新`,
-                position: "bottom-right",
-              });
-              setNeedRefresh(false);
-            });
-          },
-        },
-      });
-    }
-  }, [needRefresh]);
-
-  return null;
-};

package/src/blog/components/tags/index.tsx

@@ -1,52 +0,0 @@
-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}
-    />
-  );
-};

package/src/blog/components/video_player/index.tsx

@@ -1,82 +0,0 @@
-import React, { ReactEventHandler, useEffect, useState } from "react";
-import classnames from "classnames";
-import { useVideoControls, useVideoEleHeight, useVideoProgress } from "@/hooks";
-import { BlurCover, ProgressBar } from "@/components";
-import { BgColors, TextColors } from "@/types/color";
-import { AspectRatioBox } from "@/components/aspect_ratio_box";
-
-const VIDEO_TAG_ASPECT_RATIO = 0.5624910522548318;
-
-type videoPlayProps = {
-  src: string;
-  className?: string;
-};
-
-export const VideoPlayer = (props: videoPlayProps) => {
-  const { src, className } = props;
-  const [hovered, setHovered] = useState(false);
-  const [showPlayer, setShowPlayer] = useState(false);
-  const { videoRef, toggle, isPlay } = useVideoControls();
-  const { progress, onTimeUpdate } = useVideoProgress();
-  const VideoHeight = useVideoEleHeight(videoRef);
-
-  useEffect(() => {
-    if (!videoRef.current) {
-      return;
-    }
-    videoRef.current.load();
-  }, []);
-
-  const onPlayerReady: ReactEventHandler = () => {
-    setShowPlayer(true);
-  };
-
-  const cls = classnames({ hidden: !showPlayer });
-
-  return (
-    <div
-      className={classnames(
-        "flex flex-col relative cursor-pointer",
-        className,
-        BgColors.LIGHT_GRAY
-      )}
-      onClick={async () => {
-        await toggle();
-        if (!isPlay) {
-          setHovered(false);
-        }
-      }}
-      onMouseEnter={() => {
-        setHovered(true);
-      }}
-      onMouseLeave={() => {
-        setHovered(false);
-      }}
-    >
-      <AspectRatioBox
-        width="100%"
-        hwRatio={VIDEO_TAG_ASPECT_RATIO}
-        className={BgColors.LIGHT_GRAY}
-      >
-        <video
-          playsInline
-          ref={videoRef}
-          src={src}
-          className={cls}
-          onTimeUpdate={onTimeUpdate}
-          onCanPlayThrough={onPlayerReady}
-        />
-      </AspectRatioBox>
-      {hovered && showPlayer && (
-        <BlurCover
-          textColor={isPlay ? TextColors.RED : TextColors.BLUE}
-          height={VideoHeight}
-          visibleOnHover
-        >
-          {isPlay ? "pause" : "play"}
-        </BlurCover>
-      )}
-      {showPlayer && <ProgressBar progress={progress} />}
-    </div>
-  );
-};

package/src/blog/global/mdx.d.ts

@@ -1,9 +0,0 @@
-declare module "*.mdx" {
-  let MDXComponent: (props: any) => JSX.Element;
-  export default MDXComponent;
-  export const meta: {
-    tags?: string[];
-    title: string;
-    created_at?: string;
-  };
-}

package/src/blog/hooks/useLoadingIndicator.ts

@@ -1,12 +0,0 @@
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { useContext } from "react";
-
-export const useLoadingIndicator = () => {
-  const globalCtx = useContext(GlobalLoadingContext);
-
-  return {
-    setVisibility: globalCtx.setIsLoading,
-    isVisible: globalCtx.isLoading,
-    isFontLoading: globalCtx.isFontLoading,
-  };
-};

package/src/blog/hooks/useScrollToTop.ts

@@ -1,24 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
-
-export const useScrollToTop = (excludePath = "") => {
-  const { pathname } = useLocation();
-
-  const resetScroll = () => {
-    if (excludePath && pathname.includes(excludePath)) {
-      return;
-    }
-    setTimeout(() => {
-      window.scrollTo(0, 0);
-    }, 0);
-  };
-
-  useEffect(() => {
-    window.addEventListener("popstate", resetScroll);
-    return () => {
-      window.removeEventListener("popstate", resetScroll);
-    };
-  }, []);
-
-  useEffect(resetScroll, [pathname]);
-};

package/src/blog/hooks/useTransitionCls.ts

@@ -1,36 +0,0 @@
-import React, { useEffect } from "react";
-import classnames from "classnames";
-
-interface TransOption {
-  originCls?: string;
-  opacity?: boolean;
-  offset?: boolean;
-  blur?: boolean;
-}
-
-const defaultOpt = {
-  originCls: "",
-  opacity: true,
-  offset: true,
-  blur: true,
-};
-
-export const useTransitionCls = (options: TransOption = defaultOpt) => {
-  const [visible, setVisible] = React.useState(false);
-  const { originCls, opacity, offset, blur } = options;
-
-  const cls = classnames(originCls, "transition-all", "duration-500", {
-    "blur-xs": !visible && blur,
-    "blur-none": visible && blur,
-    "translate-y-0": visible && offset,
-    "translate-y-8": !visible && offset,
-    "opacity-10": !visible && opacity,
-    "opacity-100": visible && opacity,
-  });
-
-  useEffect(() => {
-    setVisible(true);
-  }, []);
-
-  return cls;
-};

package/src/blog/hooks/use_authed.ts

@@ -1,7 +0,0 @@
-import { useSupabaseSession } from "@/hooks/use_supa_session";
-
-export const useAuthed = (): boolean => {
-  const { access_token: token, isKing } = useSupabaseSession() || {};
-
-  return !(!token || !isKing);
-};

package/src/blog/hooks/use_authed_fetcher.ts

@@ -1,8 +0,0 @@
-import { useSupabaseSession } from "@/hooks/use_supa_session";
-import { apiFetcher, withToken } from "@/utils";
-import { useCallback } from "react";
-
-export const useAuthedFetcher = () => {
-  const { access_token: token } = useSupabaseSession() || {};
-  return useCallback(withToken(apiFetcher)(token), [token]);
-};

package/src/blog/hooks/use_authed_string_post.ts

@@ -1,42 +0,0 @@
-import {useSWRConfig} from "swr";
-import {useAuthed} from "@/hooks/use_authed";
-import {useContext} from "react";
-import {GlobalLoadingContext} from "@/context/global_loading_state_provider";
-import {usePost} from "@/hooks/use_post";
-import {splitPost} from "@/utils";
-import {API} from "@/constants/routes";
-
-export const useAuthedStringPost = () => {
-    const { mutate } = useSWRConfig();
-
-    const isKing = useAuthed();
-
-    const { setIsLoading } = useContext(GlobalLoadingContext);
-
-    const post = usePost();
-
-    return (content: string) => {
-        if (!content) {
-            return;
-        }
-
-        if (!isKing) {
-            return;
-        }
-
-        const postObj = splitPost(content);
-        if (!postObj?.content || !postObj?.title) {
-            return;
-        }
-
-        setIsLoading(true);
-
-        post(postObj.title, postObj.content)
-            .then((r) => {
-                mutate(API.POSTS).then();
-            })
-            .finally(() => {
-                setIsLoading(false);
-            });
-    }
-}

package/src/blog/hooks/use_clipboard_content.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export const useClipboardContent = () => {
-  const [clipboardContent, setClipboardContent] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    const handlePaste = (event: ClipboardEvent) => {
-      if (event.clipboardData) {
-        setClipboardContent(event.clipboardData.getData('text/plain'));
-      }
-    };
-
-    document.addEventListener('paste', handlePaste);
-
-    return () => {
-      document.removeEventListener('paste', handlePaste);
-    };
-  }, []);
-
-  return clipboardContent;
-};

package/src/blog/hooks/use_clipboard_to_post.ts

@@ -1,48 +0,0 @@
-import {useClipboardContent} from "@/hooks/use_clipboard_content";
-import {useSWRConfig} from "swr";
-import {useContext, useEffect} from "react";
-import {GlobalLoadingContext} from "@/context/global_loading_state_provider";
-import {usePost} from "@/hooks/use_post";
-import {API} from "@/constants/routes";
-import {useAuthed} from "@/hooks/use_authed";
-import {toast} from "sonner";
-
-export const useClipboardToPost = () => {
-    const clipboardContent = useClipboardContent();
-
-    const { mutate } = useSWRConfig();
-
-    const { setIsLoading } = useContext(GlobalLoadingContext);
-
-    const post = usePost();
-
-    const firstLine = clipboardContent ? clipboardContent.split("\n")[0] : "";
-    const title = firstLine ? firstLine.trim() : "";
-
-    const restContent = clipboardContent ? clipboardContent.slice(title.length).trim() : "";
-
-    const isKing = useAuthed();
-
-    useEffect(() => {
-        if (!isKing || !restContent || !title) {
-            return;
-        }
-
-        setIsLoading(true);
-
-        post(title, restContent)
-            .then((r) => {
-                mutate(API.POSTS).then(() => {
-                    toast("", {
-                        description: `已更新`,
-                        position: "bottom-right",
-                    });
-                });
-            })
-            .finally(() => {
-                setIsLoading(false);
-            });
-    }, [title, restContent]);
-
-    return null;
-}

package/src/blog/hooks/use_del_img.ts

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

package/src/blog/hooks/use_delete_post.ts

@@ -1,22 +0,0 @@
-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/blog/hooks/use_file_to_post.ts

@@ -1,38 +0,0 @@
-import { useTextPlainFile } from "@/hooks/use_text_plain_file";
-import { useContext, useEffect } from "react";
-import { usePost } from "@/hooks/use_post";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { useAuthedFetcher } from "@/hooks/use_authed_fetcher";
-import { preload, useSWRConfig } from "swr";
-import { API } from "@/constants/routes";
-
-export type fileReader = (f: File) => void;
-export const useFile2Post = (): fileReader => {
-  const { content, title, reader } = useTextPlainFile();
-
-  const { mutate } = useSWRConfig();
-
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const post = usePost();
-
-  useEffect(() => {
-    if (!content || !title) {
-      return;
-    }
-
-    setIsLoading(true);
-
-    post(title, content)
-      .then((r) => {
-        mutate(API.POSTS).then();
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [title, content]);
-
-  return (f: File) => {
-    reader(f);
-  };
-};

package/src/blog/hooks/use_img_loading.ts

@@ -1,16 +0,0 @@
-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/blog/hooks/use_post.ts

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