@bbki.ng/site 5.4.25 → 5.4.27

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @bbki.ng/site
 
+## 5.4.27
+
+### Patch Changes
+
+- 1ab4d7c: update animation
+- Updated dependencies [1ab4d7c]
+  - @bbki.ng/ui@0.1.2
+
+## 5.4.26
+
+### Patch Changes
+
+- 282af74: update ui components
+- 558e40b: update compoennts
+- Updated dependencies [282af74]
+- Updated dependencies [558e40b]
+  - @bbki.ng/ui@0.1.1
+
 ## 5.4.25
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.25",
+  "version": "5.4.27",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -14,7 +14,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
     "swr": "^2.2.5",
-    "@bbki.ng/components": "5.2.14"
+    "@bbki.ng/ui": "0.1.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",
@@ -57,8 +57,7 @@
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0",
-    "@bbki.ng/config": "1.0.6",
-    "@bbki.ng/stylebase": "3.1.7"
+    "@bbki.ng/config": "1.0.6"
   },
   "author": "bbbottle",
   "license": "MIT",

package/src/blog/app.tsx

@@ -1,34 +1,23 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
-import { Nav, NotFound, Page } from '@bbki.ng/components';
 import { Cover, Streaming } from './pages';
+import { Nav, NotFound, Page, Grid, ErrorBoundary } from '@bbki.ng/ui';
 
 import ArticlePage from '@/pages/extensions/txt/article';
 import Txt from '@/pages/extensions/txt';
 
 import { usePaths } from '@/hooks';
-import { Login } from '@/pages/login';
 import { SWR } from '@/swr';
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
-import { ThreeColLayout, ErrorBoundary } from '@bbki.ng/components';
 import { useDynamicLogo } from './hooks/use_dynamic_logo';
-import { EffectContextProvider } from './components/effect-layer/EffectContextProvider';
 
 const Layout = () => {
   const paths = usePaths();
   const { isLoading } = useContext(GlobalLoadingContext);
   const logo = useDynamicLogo();
 
-  const middleRenderer = useMemo(() => {
-    return () => (
-      <ErrorBoundary>
-        <Outlet />
-      </ErrorBoundary>
-    );
-  }, []);
-
   return (
     <Page
       nav={
@@ -39,7 +28,13 @@ const Layout = () => {
           customLogo={logo}
         />
       }
-      main={<ThreeColLayout middleRenderer={middleRenderer} />}
+      main={
+        <Grid leftAside={<div />}>
+          <ErrorBoundary>
+            <Outlet />
+          </ErrorBoundary>
+        </Grid>
+      }
     />
   );
 };

package/src/blog/components/Auth.tsx

@@ -1,16 +1,12 @@
-import { Role, useRole } from "@/hooks/use_role";
-import React from "react";
-import { Navigate } from "react-router-dom";
+import { Role, useRole } from '@/hooks/use_role';
+import React from 'react';
+import { Navigate } from 'react-router-dom';
 
-export const Auth = (props: {
-  children: any;
-  shouldRedirect?: boolean;
-  role?: Role[];
-}) => {
+export const Auth = (props: { children: any; shouldRedirect?: boolean; role?: Role[] }) => {
   const myRole = useRole();
 
   if (props.role && !props.role.includes(myRole)) {
-    return props.shouldRedirect ? <Navigate to={"/login"} /> : null;
+    return props.shouldRedirect ? <Navigate to={'/login'} /> : null;
   }
 
   return props.children;

package/src/blog/components/DelayFadeIn/DelayFadeIn.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import cls from "classnames";
+import React, { useEffect } from 'react';
+import cls from 'classnames';
 
 export type DelayFadeInProps = {
   children: any;
@@ -19,9 +19,9 @@ export const DelayFadeIn = (props: DelayFadeInProps) => {
     };
   }, []);
 
-  const className = cls("transition-opacity", {
-    "opacity-100": show,
-    "opacity-0": !show,
+  const className = cls('transition-opacity', {
+    'opacity-100': show,
+    'opacity-0': !show,
   });
 
   return <div className={className}>{props.children}</div>;

package/src/blog/components/Pochacco/xwy.tsx

@@ -1,14 +1,8 @@
-import React from "react";
+import React from 'react';
 
 export const Crows = () => {
   return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.821 17.5305C10.709 18.17 9.68345 19.4423 9.22624 20.1359C9.11159 20.3099 9.21615 20.5428 9.42038 20.5839L12.67 21.2381C12.8291 21.2702 12.9328 21.4275 12.9084 21.5879C11.3004 32.1653 21.5275 36.7547 28.6638 33.0597C28.7443 33.018 28.8408 33.0139 28.9245 33.0487C32.8032 34.6598 35.967 34.5662 37.8217 34.3099C38.131 34.2671 38.1505 33.841 37.855 33.7401C29.1343 30.7633 26.0152 24.5245 25.5144 18.8022C25.3835 17.3066 23.8172 13.2016 19.2675 13.0058C15.7934 12.8563 13.6137 15.6103 13.0319 17.325C12.9986 17.4231 12.9201 17.5004 12.821 17.5305Z"
         fill="#FBD1D2"

package/src/blog/components/Spinner.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect } from "react";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+import React, { useContext, useEffect } from 'react';
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 
 export const Spinner = (props: { disableDotIndicator?: boolean }) => {
   const { disableDotIndicator } = props;

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

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Tags, Article, Button } from '@bbki.ng/components';
+import { Button, Article } from '@bbki.ng/ui';
 import { ROUTES } from '@/constants';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
@@ -30,7 +30,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
         title={title}
         date={props.date}
         description={description}
-        className={`${props.className} mb-128`}
+        className={`${props.className} mt-32`}
         loading={false}
       >
         <article className={articleCls}>{props.children}</article>
@@ -41,7 +41,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
       <div className="">
         <Button
           className=""
-          btnType="button"
+          type="button"
           onClick={() => {
             navgation(-1);
           }}

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, ReactNode } from "react";
-import { EffectLayer } from "@/components/effect-layer/EffectLayer";
+import React, { createContext, ReactNode } from 'react';
+
+import { EffectLayer } from '@/components/effect-layer/EffectLayer';
 
 const EffectContext = createContext<any>({});
 

package/src/blog/components/effect-layer/EffectLayer.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import { Canvas } from "@bbki.ng/components";
-import frag from "./main.frag";
-import vert from "./shader.vert";
-import cls from "classnames";
-import uniforms from "./uniforms";
-import { useRender } from "@/components/effect-layer/hooks/useRender";
+import React from 'react';
+import { Canvas } from '@bbki.ng/ui';
+import frag from './main.frag';
+import vert from './shader.vert';
+import cls from 'classnames';
+import uniforms from './uniforms';
+import { useRender } from '@/components/effect-layer/hooks/useRender';
 
 export const EffectLayer = () => {
   const canvasDefaultCls = cls(
-    "fixed",
-    "top-0",
-    "left-0",
-    "h-full",
-    "pointer-events-none",
-    "w-full",
-    "z-999"
+    'fixed',
+    'top-0',
+    'left-0',
+    'h-full',
+    'pointer-events-none',
+    'w-full',
+    'z-999'
   );
 
   const { onRender } = useRender();

package/src/blog/components/effect-layer/effects/spiral.frag

@@ -0,0 +1,93 @@
+uniform float uLoading;
+uniform float uSpiralProgress;
+uniform float uSpiralOpacity;
+
+const float PI2 = 3.141592653589793 * 2.0;
+
+vec3 spiralCurve(float _percent) {
+  const float _length = 0.3;
+  const float radius = 0.056;
+  float t = mod(_percent, 0.25) / 0.25;
+  t = mod(_percent, 0.25) - (2.0 * (1.0 - t) * t * -0.0185 + t * t * 0.25);
+  float x = _length * sin(PI2 * _percent);
+  float y = radius * cos(PI2 * 3.0 * _percent);
+
+  if (
+    floor(_percent / 0.25) == 0.0
+    || floor(_percent / 0.25) == 2.0
+  ) {
+    t = t * -1.0;
+  }
+  float z = radius * sin(PI2 * 2.0 * (_percent - t));
+  return vec3(x, y, z);
+}
+
+vec3 rotateXVec3(vec3 v, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec3(
+    v.x,
+    v.y * c - v.z * s,
+    v.y * s + v.z * c
+  );
+}
+
+void drawSpiral(vec2 uv) {
+  if (uLoading < 0.5) {
+    return;
+  }
+
+  float aspect = uResolution.x / uResolution.y;
+  vec2 center = vec2(0.5, 0.6);
+  vec2 p = uv - center;
+  p.x *= aspect;
+
+  float scale = 4.0;
+  p *= scale;
+
+  // early exit: spiral fits within radius ~0.35 in curve space
+  if (length(p) > 0.5) {
+    return;
+  }
+
+  float minDist = 1.0;
+
+  const int SAMPLES = 80;
+  vec2 prevProjected;
+  for (int i = 0; i < SAMPLES; i++) {
+    float pct = float(i) / float(SAMPLES);
+    vec3 pos3d = spiralCurve(pct);
+    vec3 rotated = rotateXVec3(pos3d, uSpiralProgress);
+    vec2 projected = rotated.xy;
+
+    if (i > 0) {
+      // distance from point to line segment
+      vec2 ab = projected - prevProjected;
+      vec2 ap = p - prevProjected;
+      float t = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0);
+      vec2 closest = prevProjected + t * ab;
+      float d = distance(p, closest);
+      minDist = min(minDist, d);
+    }
+
+    prevProjected = projected;
+  }
+
+  // close the loop: connect last sample back to first
+  vec3 firstPos = spiralCurve(0.0);
+  vec3 firstRotated = rotateXVec3(firstPos, uSpiralProgress);
+  vec2 firstProjected = firstRotated.xy;
+  vec2 ab = firstProjected - prevProjected;
+  vec2 ap = p - prevProjected;
+  float tc = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0);
+  vec2 closest = prevProjected + tc * ab;
+  float dc = distance(p, closest);
+  minDist = min(minDist, dc);
+
+  float lineWidth = 0.002;
+  float alpha = 1.0 - smoothstep(0.0, lineWidth, minDist);
+
+  float spiralAlpha = alpha * 0.8 * uSpiralOpacity;
+  gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.0), spiralAlpha);
+  gl_FragColor.a = max(gl_FragColor.a, spiralAlpha);
+}

package/src/blog/components/effect-layer/hooks/useRender.ts

@@ -1,25 +1,72 @@
-import { useCallback, useState } from "react";
-import { useMousePosition } from "@/hooks/use_mouse_position";
-import { useResolution } from "@/components/effect-layer/hooks/useResolution";
+import { useCallback, useContext, useRef } from 'react';
+import { useMousePosition } from '@/hooks/use_mouse_position';
+import { useResolution } from '@/components/effect-layer/hooks/useResolution';
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+
+const SPIRAL_ACCEL = 0.005;
+const SPIRAL_MAX_SPEED = 0.2;
+const FADE_SPEED = 0.04; // ~0→1 in 25 frames (~400ms at 60fps)
+const MIN_DURATION = 800;
 
 export const useRender = () => {
   const pos = useMousePosition();
   const resolution = useResolution();
+  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
+  const loadingRef = useRef(false);
+  loadingRef.current = isLoading || isFontLoading;
+
+  const spiralSpeedRef = useRef(0);
+  const spiralOpacityRef = useRef(0);
+  const loadingStartRef = useRef(0);
+  const wasLoadingRef = useRef(false);
+
+  const onRender = useCallback((inst: any) => {
+    if (inst == null) {
+      return;
+    }
+
+    inst.uniforms.uResolution.value[0] = inst.gl.canvas.width;
+    inst.uniforms.uResolution.value[1] = inst.gl.canvas.height;
+
+    inst.uniforms.uMouse.value[0] = pos.current.x;
+    inst.uniforms.uMouse.value[1] = pos.current.y;
+
+    const now = performance.now();
+    const loading = loadingRef.current;
+
+    // track when loading starts
+    if (loading && !wasLoadingRef.current) {
+      loadingStartRef.current = now;
+    }
+    wasLoadingRef.current = loading;
+
+    // determine if spiral should be visible (loading OR within min duration)
+    const elapsed = now - loadingStartRef.current;
+    const inMinDuration = !loading && loadingStartRef.current > 0 && elapsed < MIN_DURATION;
+    const shouldShow = loading || inMinDuration;
 
-  const onRender = useCallback(
-    (inst: any) => {
-      if (inst == null) {
-        return;
+    // fade in/out
+    if (shouldShow) {
+      spiralOpacityRef.current = Math.min(1, spiralOpacityRef.current + FADE_SPEED);
+    } else {
+      spiralOpacityRef.current = Math.max(0, spiralOpacityRef.current - FADE_SPEED);
+      if (spiralOpacityRef.current === 0) {
+        loadingStartRef.current = 0;
       }
+    }
 
-      inst.uniforms.uResolution.value[0] = inst.gl.canvas.width;
-      inst.uniforms.uResolution.value[1] = inst.gl.canvas.height;
+    inst.uniforms.uLoading.value[0] = spiralOpacityRef.current > 0 ? 1.0 : 0.0;
+    inst.uniforms.uSpiralOpacity.value[0] = spiralOpacityRef.current;
 
-      inst.uniforms.uMouse.value[0] = pos.current.x;
-      inst.uniforms.uMouse.value[1] = pos.current.y;
-    },
-    []
-  );
+    if (spiralOpacityRef.current > 0) {
+      // accelerate to max speed before fade out
+      const accel = inMinDuration ? SPIRAL_ACCEL * 4 : SPIRAL_ACCEL;
+      spiralSpeedRef.current = Math.min(SPIRAL_MAX_SPEED, spiralSpeedRef.current + accel);
+    } else {
+      spiralSpeedRef.current = 0;
+    }
+    inst.uniforms.uSpiralProgress.value[0] += spiralSpeedRef.current;
+  }, []);
 
   return { onRender };
 };

package/src/blog/components/effect-layer/hooks/useResolution.ts

@@ -1,20 +1,17 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 export const useResolution = () => {
-  const resolution = useRef<[number, number]>([
-    window.innerWidth,
-    window.innerHeight,
-  ]);
+  const resolution = useRef<[number, number]>([window.innerWidth, window.innerHeight]);
 
   const updateResolution = () => {
     resolution.current = [window.innerWidth, window.innerHeight];
   };
 
   useEffect(() => {
-    window.addEventListener("resize", updateResolution);
+    window.addEventListener('resize', updateResolution);
 
     return () => {
-      window.removeEventListener("resize", updateResolution);
+      window.removeEventListener('resize', updateResolution);
     };
   }, []);
 

package/src/blog/components/effect-layer/main.frag

@@ -7,6 +7,7 @@ uniform float uDevicePixelRatio;
 #define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
 
 #include "effects/grain.frag"
+#include "effects/spiral.frag"
 //#include "shapes/circle.frag"
 
 
@@ -21,4 +22,7 @@ void main() {
 
   // draw grain on nav
   drawGrainOnNav(uv);
+
+  // draw loading spiral
+  drawSpiral(uv);
 }

package/src/blog/components/effect-layer/uniforms.ts

@@ -1,20 +1,30 @@
 export default {
   uResolution: {
-    type: "vec2",
-    value: [
-      innerWidth, innerHeight,
-    ],
+    type: 'vec2',
+    value: [innerWidth, innerHeight],
   },
   uDevicePixelRatio: {
-    type: "float",
+    type: 'float',
     value: [devicePixelRatio],
   },
   pi: {
-    type: "float",
+    type: 'float',
     value: [Math.PI],
   },
   uMouse: {
-    type: "vec2",
+    type: 'vec2',
     value: [0, 0],
-  }
-}
+  },
+  uLoading: {
+    type: 'float',
+    value: [0.0],
+  },
+  uSpiralProgress: {
+    type: 'float',
+    value: [0.0],
+  },
+  uSpiralOpacity: {
+    type: 'float',
+    value: [0.0],
+  },
+};

package/src/blog/components/index.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import { LinkList } from '@bbki.ng/components';
-import { BlurCover } from '@bbki.ng/components';
-
-export { withArticleWrapper } from './with_wrapper';
+import { LinkList } from '@bbki.ng/ui';
 
 export { MySuspense } from './my_suspense';
 
@@ -10,7 +7,6 @@ export const CenterLinkList = (props: any) => {
   return (
     <div className="flex justify-center relative p-16 h-full">
       <LinkList {...props} />
-      <BlurCover status={props.loading ? 'show' : 'silent'} />
     </div>
   );
 };

package/src/blog/components/my_suspense.tsx

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

package/src/blog/components/share/share-btn.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonType } from '@bbki.ng/components';
+import { Button } from '@bbki.ng/ui';
 import { ShareIcon } from './share-icon';
 
 export const ShareBtn = ({ shareInfo }: { shareInfo: ShareData }) => {
@@ -17,9 +17,9 @@ export const ShareBtn = ({ shareInfo }: { shareInfo: ShareData }) => {
 
   return (
     <Button
-      size="small"
+      size="sm"
       className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
-      type={ButtonType.GHOST}
+      variant="ghost"
       onClick={handleShare}
     >
       <ShareIcon />

package/src/blog/components/share/share-icon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export const ShareIcon = () => (
   <svg

package/src/blog/constants/routes.ts

@@ -13,7 +13,7 @@ export const ROUTE_NAME = {
   unknown: '未知',
 };
 
-export const GITHUB_REPO_ADDRESS = 'https://github.com/bbbottle/bottle/tree/main/packages/site';
+export const GITHUB_REPO_ADDRESS = 'https://github.com/bbbottle/bottle/tree/main/apps/site';
 export const API_ENDPOINT = 'https://cf.bbki.ng';
 export const API = {
   POSTS: 'posts',

package/src/blog/context/global_loading_state_provider.tsx

@@ -1,11 +1,5 @@
-import React, {
-  createContext,
-  ReactNode,
-  useState,
-  Dispatch,
-  SetStateAction,
-} from "react";
-import { useFontLoading } from "@/hooks/use_font_loading";
+import React, { createContext, ReactNode, useState, Dispatch, SetStateAction } from 'react';
+import { useFontLoading } from '@/hooks/use_font_loading';
 
 type LoadingContext = {
   isLoading: boolean;

package/src/blog/context/global_routes_provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useState } from "react";
+import React, { createContext, ReactNode, useState } from 'react';
 
 type routeInfo = {
   name: string;
@@ -18,14 +18,14 @@ export const GlobalRoutesContext = createContext<GlobalRoutesContextType>({
 });
 
 export const GlobalRoutesProvider = (props: { children: ReactNode }) => {
-  const [routesMap, setRoutesMap] = useState<{[key: string]: routeInfo}>({});
+  const [routesMap, setRoutesMap] = useState<{ [key: string]: routeInfo }>({});
 
   const addGlobalRoute = (r: routeInfo) => {
-    setRoutesMap((prev) => ({ ...prev, [r.name]: r }));
+    setRoutesMap(prev => ({ ...prev, [r.name]: r }));
   };
 
   const removeGlobalRoute = (routeName: string) => {
-    setRoutesMap((prev) => {
+    setRoutesMap(prev => {
       const copy = { ...prev };
       delete copy[routeName];
       return copy;
@@ -35,9 +35,7 @@ export const GlobalRoutesProvider = (props: { children: ReactNode }) => {
   const globalRoutes = Object.values(routesMap);
 
   return (
-    <GlobalRoutesContext.Provider
-      value={{ globalRoutes, addGlobalRoute, removeGlobalRoute }}
-    >
+    <GlobalRoutesContext.Provider value={{ globalRoutes, addGlobalRoute, removeGlobalRoute }}>
       {props.children}
     </GlobalRoutesContext.Provider>
   );

package/src/blog/hooks/use_blog_scroll_pos_restoration.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef } from "react";
-import { useLocation } from "react-router-dom";
+import { useCallback, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 
-const SCROLL_STORAGE_KEY = "div-scroll-positions";
+const SCROLL_STORAGE_KEY = 'div-scroll-positions';
 
 function getScrollPositions(): Record<string, number> {
   const stored = sessionStorage.getItem(SCROLL_STORAGE_KEY);
@@ -16,7 +16,7 @@ function saveScrollPosition(key: string, position: number) {
 
 export function useBlogScrollReset() {
   useEffect(() => {
-    const element = document.getElementById("blog");
+    const element = document.getElementById('blog');
     if (!element) return;
 
     element.scrollTop = 0;
@@ -24,13 +24,13 @@ export function useBlogScrollReset() {
 }
 
 export function useBlogScroll() {
-  const element = document.getElementById("blog");
+  const element = document.getElementById('blog');
 
   const gotoTop = useCallback(() => {
     if (!element) return;
 
     const id = setTimeout(() => {
-      element.scrollTo({ top: 0, behavior: "smooth" });
+      element.scrollTo({ top: 0, behavior: 'smooth' });
     }, 150);
 
     return () => clearTimeout(id);
@@ -45,7 +45,7 @@ export function useBlogScrollRestoration(debounceMs: number = 100) {
   const location = useLocation();
   const isFirstRender = useRef(true);
   const scrollTimeoutRef = useRef<number>();
-  const element = document.getElementById("blog");
+  const element = document.getElementById('blog');
   const scrollKey = `blog`;
 
   // Restore scroll position on mount
@@ -82,10 +82,10 @@ export function useBlogScrollRestoration(debounceMs: number = 100) {
       }, debounceMs);
     };
 
-    element.addEventListener("scroll", handleScroll, { passive: true });
+    element.addEventListener('scroll', handleScroll, { passive: true });
 
     return () => {
-      element.removeEventListener("scroll", handleScroll);
+      element.removeEventListener('scroll', handleScroll);
     };
   }, []);
 }

package/src/blog/hooks/use_font_loading.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { changeFont } from "@/utils";
-import { FontType } from "@/types/font";
+import { useEffect, useState } from 'react';
+import { changeFont } from '@/utils';
+import { FontType } from '@/types/font';
 
 export const useFontLoading = () => {
   const [isFontLoading, setIsFontLoading] = useState(false);

package/src/blog/hooks/use_mouse_position.ts

@@ -1,7 +1,7 @@
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from 'react';
 
 export const useMousePosition = () => {
-  const posRef = useRef<{x: number, y:number}>({x: 0, y: 0});
+  const posRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   useEffect(() => {
     const updateMousePosition = (e: MouseEvent) => {
       posRef.current = {
@@ -9,9 +9,9 @@ export const useMousePosition = () => {
         y: e.clientY,
       };
     };
-    window.addEventListener("mousemove", updateMousePosition);
-    return () => window.removeEventListener("mousemove", updateMousePosition);
+    window.addEventListener('mousemove', updateMousePosition);
+    return () => window.removeEventListener('mousemove', updateMousePosition);
   }, []);
 
   return posRef;
-}
+};

package/src/blog/hooks/use_pathname.ts

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

package/src/blog/hooks/use_paths.ts

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

package/src/blog/hooks/use_posts.ts

@@ -28,6 +28,7 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
       : data.map((p: any) => ({
           name: p.title,
           to: p.title,
+          children: p.title,
         }));
 
   useEffect(() => {

package/src/blog/main.css

@@ -1,6 +1,5 @@
-@import "tailwindcss";
-@import "@bbki.ng/stylebase";
-@source "../../node_modules/@bbki.ng/components/";
+@import 'tailwindcss';
+@import '@bbki.ng/ui/styles';
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -40,7 +39,7 @@
 
 * {
   -webkit-user-drag: none;
-  -webkit-font-smoothing: "antialiased";
+  -webkit-font-smoothing: 'antialiased';
   font-weight: 400 !important;
 }
 
@@ -69,7 +68,7 @@ body {
 }
 
 .noto-serif {
-  font-family: "Menlo", "Consolas", "Noto Serif SC", monospace;
+  font-family: 'Menlo', 'Consolas', 'Noto Serif SC', monospace;
   font-weight: 400;
   font-style: normal;
 }

package/src/blog/pages/bot/index.tsx

@@ -1,10 +1,10 @@
-import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 export const BotRedirect = () => {
   const [param] = useSearchParams();
 
-  const code = param.get("code");
+  const code = param.get('code');
 
   useEffect(() => {
     window.location.href = `https://t.me/BBKingsBot?start=${code}`;

package/src/blog/pages/cover/index.tsx

@@ -14,10 +14,12 @@ export const Cover = (props: { className?: string }) => {
           {
             to: '/blog',
             name: 'cd ./blog',
+            children: 'cd ./blog',
           },
           {
             to: '/now',
             name: 'cd ./now',
+            children: 'cd ./now',
           },
           ...pluginEntry,
         ]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NotFound } from '@bbki.ng/components';
+import { NotFound } from '@bbki.ng/ui';
 import { useParams } from 'react-router-dom';
 import { usePosts } from '@/hooks/use_posts';
 import { ArticlePage } from '@/components/article';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinkProps, Button } from '@bbki.ng/components';
+import { LinkProps, Button } from '@bbki.ng/ui';
 import { usePosts } from '@/hooks/use_posts';
 import { CenterLinkList } from '@/components';
 import { useBlogScroll, useBlogScrollRestoration } from '@/hooks/use_blog_scroll_pos_restoration';
@@ -29,7 +29,7 @@ export default (props: TxtProps) => {
       links={props.articleList || titleList}
       loading={isLoading}
       footer={
-        <Button onClick={gotoTop} className="mt-128">
+        <Button onClick={gotoTop} className="mt-32">
           <svg
             data-testid="geist-icon"
             height="16"

package/src/blog/pages/index.tsx

@@ -1,2 +1,2 @@
-export { Cover } from "./cover";
-export { default as Streaming } from "./streaming";
+export { Cover } from './cover';
+export { default as Streaming } from './streaming';

package/src/blog/pages/streaming/arrow-down.tsx

@@ -1,26 +1,26 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames';
+import React from 'react';
 
 export const ArrowDownIcon = ({ show }: { show: boolean }) => (
-    <svg
-        data-testid="geist-icon"
-        height="16"
-        stroke-linejoin="round"
-        viewBox="0 0 16 16"
-        width="16"
-        style={{
-        rotate: '180deg'
-        }}
-        className={classNames("transition-opacity duration-200 inline-block", {
-        "opacity-0": !show,
-        "opacity-100": show,
-        })}
-    >
-        <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
-        fill="currentColor"
-        ></path>
-    </svg>
-)
+  <svg
+    data-testid="geist-icon"
+    height="16"
+    stroke-linejoin="round"
+    viewBox="0 0 16 16"
+    width="16"
+    style={{
+      rotate: '180deg',
+    }}
+    className={classNames('transition-opacity duration-200 inline-block', {
+      'opacity-0': !show,
+      'opacity-100': show,
+    })}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);

package/src/blog/pages/streaming/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useStreaming, StreamingItem } from '@/hooks/use_streaming';
 import { formatStreamingData } from '@/utils/streaming';
-import { Article, Button, ButtonType, Panel } from '@bbki.ng/components';
+import { Button, Panel } from '@bbki.ng/ui';
 import { useScrollBtnVisibility } from './useScrollBtnVisibility';
 import classNames from 'classnames';
 import { ArrowDownIcon } from './arrow-down';
@@ -62,17 +62,13 @@ const Streaming = () => {
     };
   }, [isLoading, formattedData]);
 
-  if (isError) {
-    return <div className="p-8 text-center text-gray-500">加载失败</div>;
-  }
-
-  if (isLoading) {
+  if (isLoading || isError) {
     return null;
   }
 
   return (
     <>
-      <Panel className="!p-[10px]">
+      <Panel className="p-2.5! mt-32">
         <bb-msg-history
           // infinite
           hide-scroll-bar
@@ -85,7 +81,7 @@ const Streaming = () => {
       </Panel>
       {scrolled ? (
         <Button
-          className="mt-64"
+          className="mt-32"
           transparent={!showScrollBtn}
           onClick={() => {
             bbMsgHistoryRef.current?.scrollToBottom();

package/src/blog/pages/streaming/useScrollBtnVisibility.ts

@@ -1,27 +1,27 @@
-import { useEffect, useState } from "react";
-import { BbMsgHistoryElement } from ".";
+import { useEffect, useState } from 'react';
+import { BbMsgHistoryElement } from '.';
 
 export const useScrollBtnVisibility = (ele: BbMsgHistoryElement) => {
-    const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-    useEffect(() => {
-        if (!ele) {
-            return;
-        }
+  useEffect(() => {
+    if (!ele) {
+      return;
+    }
 
-        const handleShow = () => setVisible(true);
-        const handleHide = () => setVisible(false);
+    const handleShow = () => setVisible(true);
+    const handleHide = () => setVisible(false);
 
-        ele.addEventListener("bb-scrollbuttonshow", handleShow);
-        ele.addEventListener("bb-scrollbuttonhide", handleHide);
+    ele.addEventListener('bb-scrollbuttonshow', handleShow);
+    ele.addEventListener('bb-scrollbuttonhide', handleHide);
 
-        console.log("add event listeners");
+    console.log('add event listeners');
 
-        return () => {
-            ele.removeEventListener("bb-scrollbuttonshow", handleShow);
-            ele.removeEventListener("bb-scrollbuttonhide", handleHide);
-        };
-    }, [ele])
+    return () => {
+      ele.removeEventListener('bb-scrollbuttonshow', handleShow);
+      ele.removeEventListener('bb-scrollbuttonhide', handleHide);
+    };
+  }, [ele]);
 
-    return visible;
-}
+  return visible;
+};

package/src/blog/types/articles.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 
 export type MdxArticle = {
   default: FunctionComponent<any>;

package/src/blog/types/color.ts

@@ -1,21 +1,21 @@
 export enum TextColors {
-  GRAY = "text-gray-400",
-  RED = "text-red-500",
-  BLUE = "text-blue-600",
+  GRAY = 'text-gray-400',
+  RED = 'text-red-500',
+  BLUE = 'text-blue-600',
 }
 
 export enum BgColors {
-  WHITE_GRAY = "bg-gray-50",
-  LIGHT_GRAY = "bg-gray-100",
-  GRAY = "bg-gray-400",
-  RED = "bg-red-500",
-  BLUE = "bg-blue-600",
-  LIGHT_BLUE = "bg-blue-300",
-  WHITE_BLUE = "bg-blue-100",
+  WHITE_GRAY = 'bg-gray-50',
+  LIGHT_GRAY = 'bg-gray-100',
+  GRAY = 'bg-gray-400',
+  RED = 'bg-red-500',
+  BLUE = 'bg-blue-600',
+  LIGHT_BLUE = 'bg-blue-300',
+  WHITE_BLUE = 'bg-blue-100',
 }
 
 export enum HoveredTextColors {
-  GRAY = "hover:bg-gray-100",
-  RED = "hover:bg-red-100",
-  BLUR = "hover:bg-blue-100",
+  GRAY = 'hover:bg-gray-100',
+  RED = 'hover:bg-red-100',
+  BLUR = 'hover:bg-blue-100',
 }

package/src/blog/types/cusdis.ts

@@ -1,4 +1,4 @@
 export enum cusdisEvent {
-  COMMENTS_LOADED = "COMMENTS_LOADED",
-  COMMENT_SENT = "COMMENT_SENT",
+  COMMENTS_LOADED = 'COMMENTS_LOADED',
+  COMMENT_SENT = 'COMMENT_SENT',
 }

package/src/blog/types/font.ts

@@ -1,4 +1,4 @@
 export enum FontType {
-  NotoSerifSC = "noto-serif",
-  Mono = "font-mono",
+  NotoSerifSC = 'noto-serif',
+  Mono = 'font-mono',
 }

package/src/blog/types/oss.ts

@@ -1,9 +1,9 @@
 export enum ossProcessType {
-  THUMBNAIL = "thumbnail",
-  WEBP = "webp",
-  NULL = "null",
-  oWEBP = "owebp",
-  PROG = "prog",
+  THUMBNAIL = 'thumbnail',
+  WEBP = 'webp',
+  NULL = 'null',
+  oWEBP = 'owebp',
+  PROG = 'prog',
 }
 
 export interface UploadResult {

package/src/blog/types/path.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 
 export interface pathObj {
   path?: string;

package/src/blog/types/photo.ts

@@ -1,4 +1,4 @@
-import { ossProcessType } from "@/types/oss";
+import { ossProcessType } from '@/types/oss';
 
 export interface Photo {
   src: string;

package/src/blog/utils/streaming.ts

@@ -1,27 +1,29 @@
-import { StreamingItem } from "@/hooks/use_streaming";
+import { StreamingItem } from '@/hooks/use_streaming';
 
 // Format: "author: content" (with optional timestamp)
 // Timestamp format: YYYY-mm-dd HH:MM:SS
 export const formatStreamingData = (items: StreamingItem[]): string => {
   if (!items || items.length === 0) {
-    return "";
+    return '';
   }
   // Reverse to show oldest first (bb-msg-history appends to bottom)
   return [...items]
     .reverse()
-    .map((item) => {
+    .map(item => {
       const time = item.createdAt
-        ? new Date(item.createdAt).toLocaleString("zh-CN", {
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-            hour: "2-digit",
-            minute: "2-digit",
-            second: "2-digit",
-            hour12: false,
-          }).replace(/\//g, "-")
-        : "";
+        ? new Date(item.createdAt)
+            .toLocaleString('zh-CN', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+              hour12: false,
+            })
+            .replace(/\//g, '-')
+        : '';
       return time ? `[${time}] ${item.author}: ${item.content}` : `${item.author}: ${item.content}`;
     })
-    .join("\n");
+    .join('\n');
 };

package/src/index.tsx

@@ -1,5 +1,5 @@
-import { RenderBlogInto } from "./blog";
+import { RenderBlogInto } from './blog';
 
-const blogContainer = document.getElementById("blog") as Element;
+const blogContainer = document.getElementById('blog') as Element;
 
 RenderBlogInto(blogContainer);

package/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "jsx": "react",
     "noEmit": true,
+    "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/blog/*"]

package/vite.config.js

@@ -40,7 +40,6 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src/blog'),
-      // "@bbki.ng/commponents": path.resolve(__dirname, "../components/lib"),
     },
     // preserveSymlinks: true,
   },

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

@@ -1,35 +0,0 @@
-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> =>
-  (props: any) => {
-    return (
-      <>
-        <ArticlePage {...props}>
-          <Component />
-        </ArticlePage>
-      </>
-    );
-  };
-
-export const threeColWrapper =
-  <T extends object>(Component: any, catchError: boolean = true) =>
-  (props: T) => {
-    return (
-      <ThreeColLayout
-        middleRenderer={() => {
-          if (!catchError) {
-            return <Component {...props} />;
-          }
-          return (
-            <ErrorBoundary>
-              <Component {...props} />
-            </ErrorBoundary>
-          );
-        }}
-      />
-    );
-  };