@bbki.ng/site 5.4.21 → 5.4.22

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 5.4.22
+
+### Patch Changes
+
+- f40a245: bug fix
+
 ## 5.4.21
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.21",
+  "version": "5.4.22",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

package/src/blog/app.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
 import { Nav, NotFound, Page } from '@bbki.ng/components';
 import { HotKeyNav } from './components';
@@ -20,31 +20,31 @@ import { ThreeColLayout, ErrorBoundary } from '@bbki.ng/components';
 import { useDynamicLogo } from './hooks/use_dynamic_logo';
 
 const Layout = () => {
+  const paths = usePaths();
   const { isLoading } = useContext(GlobalLoadingContext);
   const logo = useDynamicLogo();
+
+  const middleRenderer = useMemo(() => {
+    return () => (
+      <ErrorBoundary>
+        <Outlet />
+      </ErrorBoundary>
+    );
+  }, []);
+
   return (
     <Page
       nav={
         <AppCtxMenu>
           <Nav
-            paths={usePaths()}
+            paths={paths}
             className="gradient-blur-cover select-none"
             loading={isLoading}
             customLogo={logo}
           />
         </AppCtxMenu>
       }
-      main={
-        <ThreeColLayout
-          middleRenderer={() => {
-            return (
-              <ErrorBoundary>
-                <Outlet />
-              </ErrorBoundary>
-            );
-          }}
-        />
-      }
+      main={<ThreeColLayout middleRenderer={middleRenderer} />}
     />
   );
 };

package/src/blog/components/index.tsx

@@ -6,16 +6,10 @@ 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 { Tags } from './tags';
-
 export { MySuspense } from './my_suspense';
 
 export const CenterLinkList = (props: any) => {

package/src/blog/hooks/use_authed_fetcher.ts

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

package/src/blog/hooks/use_shared_string_to_post.ts

@@ -1,23 +1,23 @@
-import {useEffect} from "react";
-import {useAuthedStringPost} from "@/hooks/use_authed_string_post";
+import { useEffect } from 'react';
+import { useAuthedStringPost } from '@/hooks/use_authed_string_post';
 
 export const useSharedStringToPost = () => {
-    const post = useAuthedStringPost();
+  const post = useAuthedStringPost();
 
-    useEffect(() => {
-        const handleSharedString = (event: MessageEvent) => {
-            if (event.data && typeof event.data === "string") {
-                const content = event.data;
-                if (content) {
-                    post(content);
-                }
-            }
+  useEffect(() => {
+    const handleSharedString = (event: MessageEvent) => {
+      if (event.data && typeof event.data === 'string') {
+        const content = event.data;
+        if (content) {
+          post(content);
         }
+      }
+    };
 
-        window.addEventListener("message", handleSharedString);
+    window.addEventListener('message', handleSharedString);
 
-        return () => {
-            window.removeEventListener("message", handleSharedString);
-        }
-    }, []);
-}
+    return () => {
+      window.removeEventListener('message', handleSharedString);
+    };
+  }, [post]);
+};

package/src/blog/hooks/use_streaming.ts

@@ -1,13 +1,13 @@
-import useSWR from "swr";
-import useSWRInfinite from "swr/infinite";
-import { baseFetcher, withBBApi } from "@/utils";
-import { API_CF_ENDPOINT } from "@/constants/routes";
-import { useContext, useEffect, useState, useCallback } from "react";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { baseFetcher, withBBApi } from '@/utils';
+import { API_CF_ENDPOINT } from '@/constants/routes';
+import { useContext, useEffect, useState, useCallback } from 'react';
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 
 // In dev, use /api prefix to leverage Vite proxy to localhost:8787
-const isProd = typeof window !== "undefined" && /^https:\/\/bbki.ng/.test(window.location.href);
-const API_BASE = !isProd ? "/api" : API_CF_ENDPOINT;
+const isProd = typeof window !== 'undefined' && /^https:\/\/bbki.ng/.test(window.location.href);
+const API_BASE = !isProd ? '/api' : API_CF_ENDPOINT;
 
 export type StreamingItem = {
   id: string;
@@ -38,13 +38,13 @@ function buildStreamingUrl(params: StreamingQueryParams = {}): string {
   const url = new URL(`${API_BASE}/streaming`, !isProd ? window.location.origin : undefined);
 
   if (params.before) {
-    url.searchParams.set("before", params.before);
+    url.searchParams.set('before', params.before);
   }
   if (params.after) {
-    url.searchParams.set("after", params.after);
+    url.searchParams.set('after', params.after);
   }
   if (params.offset) {
-    url.searchParams.set("offset", params.offset.toString());
+    url.searchParams.set('offset', params.offset.toString());
   }
 
   return !isProd ? url.pathname + url.search : url.toString();
@@ -61,11 +61,11 @@ async function fetchStreaming(params: StreamingQueryParams = {}): Promise<Stream
 
 // SWR key generator for streaming queries
 const getStreamingKey = (params: StreamingQueryParams) => {
-  const parts = ["streaming"];
+  const parts = ['streaming'];
   if (params.before) parts.push(`before=${params.before}`);
   if (params.after) parts.push(`after=${params.after}`);
   if (params.offset) parts.push(`offset=${params.offset}`);
-  return parts.join("?");
+  return parts.join('?');
 };
 
 interface UseStreamingOptions {
@@ -91,12 +91,12 @@ export function useStreaming(options: UseStreamingOptions = {}) {
 
   const isLoading = !data && !error;
 
-  const [_, forceUpdate] = useState(0);
+  const [, forceUpdate] = useState(0);
 
   // make rerender when customElement defined
   useEffect(() => {
-    customElements.whenDefined("bb-msg-history").then(() => {
-      forceUpdate((prev) => prev + 1);
+    customElements.whenDefined('bb-msg-history').then(() => {
+      forceUpdate(prev => prev + 1);
     });
   }, []);
 

package/src/blog/hooks/use_supa_session.ts

@@ -1,10 +1,10 @@
-import { createClient, Session } from "@supabase/supabase-js";
-import { SUPABASE } from "@/constants";
-import { useEffect, useState } from "react";
-import { BBKingSession } from "@/types/supabase";
+import { createClient, Session } from '@supabase/supabase-js';
+import { SUPABASE } from '@/constants';
+import { useEffect, useMemo, useState } from 'react';
+import { BBKingSession } from '@/types/supabase';
 
 export const useSupabaseSession = (): BBKingSession | null => {
-  const supabase = createClient(SUPABASE.URL, SUPABASE.ANNO);
+  const supabase = useMemo(() => createClient(SUPABASE.URL, SUPABASE.ANNO), []);
 
   const extendSess = (sess: Session | null) => {
     if (!sess) {
@@ -20,12 +20,13 @@ export const useSupabaseSession = (): BBKingSession | null => {
   const [session, setSession] = useState(extendSess(supabase.auth.session()));
 
   useEffect(() => {
-    supabase.auth.onAuthStateChange((event, session) => {
-      if (event === "SIGNED_IN") {
+    const { data: subscription } = supabase.auth.onAuthStateChange((event, session) => {
+      if (event === 'SIGNED_IN') {
         setSession(extendSess(session));
       }
     });
-  }, []);
+    return () => subscription?.unsubscribe();
+  }, [supabase]);
 
   return session;
 };

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

@@ -28,11 +28,9 @@ const Posts = (props: TxtProps) => {
     return <CenterLinkList links={props.articleList} />;
   }
 
-  const links = [...titleList];
-
   return (
     <CenterLinkList
-      links={props.articleList || links}
+      links={props.articleList || titleList}
       loading={isLoading}
       footer={
         <Button onClick={gotoTop} className="mt-128">

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

@@ -1,29 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-type aspectRatioBoxProps = {
-  width: number | string;
-  hwRatio: number;
-  className?: string;
-  children?: any;
-};
-
-export const AspectRatioBox = (props: aspectRatioBoxProps) => {
-  const { className, width, hwRatio, children } = props;
-  const innerStyle = {
-    width: "100%",
-    paddingTop: `${hwRatio * 100}%`,
-  };
-
-  return (
-    <div
-      style={{ width, maxWidth: "100%" }}
-      className={classnames(className, "relative")}
-    >
-      <div style={innerStyle} />
-      {children && (
-        <div className="absolute top-0 bottom-0 left-0 right-0">{children}</div>
-      )}
-    </div>
-  );
-};

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/pages/upload/index.tsx

@@ -1,39 +0,0 @@
-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>}
-        {source && (
-          <Button className="m-16" onClick={() => copyToClipboard(source)}>
-            复制代码
-          </Button>
-        )}
-      </>
-    </ArticlePage>
-  );
-};
-
-export const UploadPage = Upload;