@bbki.ng/site 5.5.18 → 5.5.20

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bbki.ng/site
 
+## 5.5.20
+
+### Patch Changes
+
+- 6748bb3: fix null pointer exception
+
+## 5.5.19
+
+### Patch Changes
+
+- 3edea98: fix base url config
+- Updated dependencies [3edea98]
+  - @bbki.ng/ui@0.2.13
+
 ## 5.5.18
 
 ### Patch Changes

package/index.d.ts

@@ -1,12 +1,11 @@
-import React from 'react';
+/// <reference types="vite/client" />
 
-declare const GLOBAL_BBKING_VERSION: string;
-declare const GLOBAL_COMMIT_HASH: string;
-interface ImportMeta {
-  glob: (pattern: string) => Record<string, () => Promise<unknown>>;
-}
+import type React from 'react';
 
 declare global {
+  const GLOBAL_BBKING_VERSION: string;
+  const GLOBAL_COMMIT_HASH: string;
+
   namespace JSX {
     interface IntrinsicElements {
       'bb-img': React.DetailedHTMLProps<
@@ -16,3 +15,5 @@ declare global {
     }
   }
 }
+
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.18",
+  "version": "5.5.20",
   "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/ui": "0.2.12"
+    "@bbki.ng/ui": "0.2.13"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",
@@ -57,7 +57,7 @@
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0",
-    "@bbki.ng/config": "1.0.8"
+    "@bbki.ng/config": "1.0.9"
   },
   "author": "bbbottle",
   "license": "MIT",

package/src/blog/app.tsx

@@ -1,75 +1,32 @@
-import React, { useContext } from 'react';
-import { Outlet, Route, Routes, useNavigate } from 'react-router-dom';
-import { Logo, Nav, NotFound, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
+import React from 'react';
+import { Outlet, Route, Routes } from 'react-router-dom';
+import { NotFound } from '@bbki.ng/ui';
 
-import { usePaths } from '@/hooks';
 import ArticlePage from '@/pages/extensions/txt/article';
 import Txt from '@/pages/extensions/txt';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
 import { Slot } from '#/core/components/SlotComp';
 import { usePlugins } from '#/core/hooks/use_plugins';
 import { SWR } from '@/swr';
+import type { PluginID } from '#/types/plugin';
 
 import { Cover, Streaming } from './pages';
+import { usePluginEntries } from './hooks/use_plugin_entries';
+import { BaseLayout } from './components/BaseLayout';
 
-const Layout = () => {
-  const paths = usePaths();
-  const { isLoading } = useContext(GlobalLoadingContext);
-
-  const nav = useNavigate();
-
-  const defaultLogo = (
-    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
-  );
-
-  return (
-    <Page
-      nav={
-        <Nav
-          paths={paths}
-          className="gradient-blur-cover select-none"
-          loading={isLoading}
-          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
-          style={{
-            paddingTop: 'var(--safe-top)',
-            transition: 'all .2s ease-in-out',
-          }}
-        />
-      }
-      main={
-        <Grid
-          leftAside={
-            <div className="py-32 px-6">
-              <Slot name="leftCol" data={paths} />
-            </div>
-          }
-          rightAside={
-            <div className="py-32 px-6">
-              <Slot name="rightCol" data={paths} />
-            </div>
-          }
-        >
-          <Container className="py-32">
-            <ErrorBoundary>
-              <Outlet />
-            </ErrorBoundary>
-          </Container>
-        </Grid>
-      }
-    />
-  );
-};
+const APP_PLUGIN_IDS: Array<PluginID> = ['sticker', 'xwy', 'extra-cd' /*'extra-entry'*/];
 
 export const App = () => {
-  usePlugins(['sticker', 'xwy', 'extra-cd']);
+  usePlugins(APP_PLUGIN_IDS);
+
+  const pluginEntries = usePluginEntries();
 
   return (
     <SWR>
       <BBContext>
         <Routes>
-          <Route path="/" element={<Layout />}>
+          <Route path="/" element={<BaseLayout />}>
             <Route index element={<Cover />} />
 
             <Route path="blog" element={<Outlet />}>
@@ -79,6 +36,13 @@ export const App = () => {
 
             <Route path="bot" element={<BotRedirect />} />
             <Route path="now" element={<Streaming />} />
+            {pluginEntries?.map(route => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={<Slot name="route" data={route} />}
+              />
+            ))}
           </Route>
           <Route path="*" element={<NotFound />} />
         </Routes>

package/src/blog/components/BaseLayout.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { useNavigate, Outlet } from 'react-router-dom';
+import { Logo, Nav, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
+
+import { Slot } from '#/core/components/SlotComp';
+import { usePaths } from '@/hooks';
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+
+export const BaseLayout = () => {
+  const paths = usePaths();
+  const { isLoading } = useContext(GlobalLoadingContext);
+
+  const nav = useNavigate();
+
+  const defaultLogo = (
+    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
+  );
+
+  return (
+    <Page
+      nav={
+        <Nav
+          paths={paths}
+          className="gradient-blur-cover select-none"
+          loading={isLoading}
+          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
+          style={{
+            paddingTop: 'var(--safe-top)',
+            transition: 'all .2s ease-in-out',
+          }}
+        />
+      }
+      main={
+        <Grid
+          leftAside={
+            <div className="py-32 px-6">
+              <Slot name="leftCol" data={paths} />
+            </div>
+          }
+          rightAside={
+            <div className="py-32 px-6">
+              <Slot name="rightCol" data={paths} />
+            </div>
+          }
+        >
+          <Container className="py-32">
+            <ErrorBoundary>
+              <Outlet />
+            </ErrorBoundary>
+          </Container>
+        </Grid>
+      }
+    />
+  );
+};

package/src/blog/components/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { LinkList } from '@bbki.ng/ui';
+import { LinkList, LinkListProps } from '@bbki.ng/ui';
 
-export { MySuspense } from './my_suspense';
-
-export const CenterLinkList = (props: any) => {
+export const CenterLinkList = (props: LinkListProps) => {
   return (
     <div className="flex justify-center relative h-full">
       <LinkList {...props} />

package/src/blog/context/global_loading_state_provider.tsx

@@ -1,19 +1,15 @@
 import React, { createContext, ReactNode, useState, useCallback, useMemo } from 'react';
 
-import { useFontLoading } from '@/hooks/use_font_loading';
-
 type LoadingStates = Map<string, boolean>;
 
 type LoadingContext = {
   isLoading: boolean;
-  isFontLoading: boolean;
   register: (id: string) => void;
   setLoading: (id: string, loading: boolean) => void;
   unregister: (id: string) => void;
 };
 
 export const GlobalLoadingContext = createContext<LoadingContext>({
-  isFontLoading: false,
   isLoading: false,
   register: () => {},
   setLoading: () => {},
@@ -22,7 +18,6 @@ export const GlobalLoadingContext = createContext<LoadingContext>({
 
 export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
   const [loadingStates, setLoadingStates] = useState<LoadingStates>(new Map());
-  const isFontLoading = useFontLoading();
 
   const register = useCallback((id: string) => {
     setLoadingStates(prev => {
@@ -49,18 +44,17 @@ export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
   }, []);
 
   const isLoading = useMemo(() => {
-    return Array.from(loadingStates.values()).some(Boolean) || isFontLoading;
-  }, [loadingStates, isFontLoading]);
+    return Array.from(loadingStates.values()).some(Boolean);
+  }, [loadingStates]);
 
   const contextValue = useMemo(
     () => ({
       isLoading,
-      isFontLoading,
       register,
       setLoading,
       unregister,
     }),
-    [isLoading, isFontLoading, register, setLoading, unregister]
+    [isLoading, register, setLoading, unregister]
   );
 
   return (

package/src/blog/hooks/use_loading.ts

@@ -20,7 +20,7 @@ export function useGlobalLoading(id: string | undefined, loading: boolean | unde
     return () => {
       unregister(id);
     };
-  }, [id, loading]);
+  }, [id, loading, register, setLoading, unregister]);
 
   return isLoading;
 }

package/src/blog/hooks/use_plugin_entries.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type PathRouteProps } from 'react-router-dom';
+
+import { useMiddlewareRunner } from '#/core/hooks';
+
+const protectedRoutesSet = new Set<string>([
+  '/bot',
+  '/now',
+  '/',
+  '/blog',
+  '/blog/:title',
+  'default',
+]);
+
+type PluginRoute = Omit<PathRouteProps, 'element'>;
+
+export const usePluginEntries = () => {
+  const [fullRoutes, setFullRoutes] = useState<Array<PluginRoute>>([]);
+  const runRef = useRef<(input: Array<PluginRoute>) => Promise<Array<PluginRoute>>>(() =>
+    Promise.resolve([])
+  );
+
+  const onMiddlewareChange = useCallback(() => {
+    runRef.current([]).then(setFullRoutes);
+  }, []);
+
+  const { run } = useMiddlewareRunner<Array<PluginRoute>>({
+    hookPoint: 'extendedRoutes',
+    onMiddlewareChange,
+  });
+
+  runRef.current = run;
+
+  useEffect(() => {
+    run([]).then(setFullRoutes);
+  }, [run]);
+
+  const safeRoutes = fullRoutes?.filter(route => {
+    if ('path' in route) {
+      return !protectedRoutesSet.has(route.path);
+    }
+    return false;
+  }) as Array<PluginRoute>;
+
+  console.log('safe plugin routes:', safeRoutes);
+
+  return safeRoutes ?? [];
+};

package/src/blog/hooks/use_posts.ts

@@ -1,10 +1,11 @@
 import useSWR from 'swr';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useGlobalLoading } from '@/hooks';
 import { baseFetcher } from '@/utils';
 import { API_ENDPOINT } from '@/constants/routes';
-import { useMiddlewareTransData } from '#/core/hooks';
+import { IPost } from '#/types/posts';
+import { useMiddlewareRunner } from '#/core/hooks/useMiddlewareTransData';
 
 const isProd = true;
 const POSTS_API = !isProd ? '/api/posts' : `${API_ENDPOINT}/posts`;
@@ -28,34 +29,40 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
   const baseTitleList: TitleListItem[] = useMemo(() => {
     if (!data || swrError) return [];
 
-    return data.map((p: any) => ({
+    return data.map((p: IPost) => ({
       name: p.title,
       to: p.title,
       children: p.title,
     }));
   }, [data, swrError]);
 
+  const [fullTitleList, setFullTitleList] = useState<TitleListItem[]>(baseTitleList);
+
   // Use middleware hook to transform title list
   const {
-    data: titleList,
     loading: isTransforming,
     error: transformError,
-  } = useMiddlewareTransData({
+    run,
+  } = useMiddlewareRunner<TitleListItem[]>({
     hookPoint: 'transformTitleList',
-    baseData: baseTitleList,
-    immediate: baseTitleList.length > 0,
   });
 
+  useEffect(() => {
+    if (baseTitleList.length > 0) {
+      run(baseTitleList).then(setFullTitleList);
+    }
+  }, [baseTitleList, run]);
+
   const gLoading = useGlobalLoading('posts', isDataLoading || isTransforming);
 
   const posts =
     isDataLoading || name === '' || swrError || !data
       ? data
-      : data.find((p: any) => p.title === name);
+      : data.find((p: IPost) => p.title === name);
 
   return {
     posts,
-    titleList: titleList ?? [],
+    titleList: fullTitleList ?? [],
     isError: swrError || transformError,
     isLoading: gLoading,
   };

package/src/blog/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+
 import App from './app';
 import './main.css';
 

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

@@ -1,31 +1,40 @@
-import React, { useContext } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { LinkProps } from '@bbki.ng/ui';
+
 import { CenterLinkList } from '@/components';
-import { GlobalRoutesContext } from '@/context/global_routes_provider';
+import { useMiddlewareRunner } from '#/core/hooks';
+
+export const Cover = (_: { className?: string }) => {
+  const baseEntries: Array<LinkProps> = useMemo(
+    () => [
+      {
+        to: '/blog',
+        children: 'cd ./blog',
+      },
+      {
+        to: '/now',
+        children: 'cd ./now',
+      },
+    ],
+    []
+  );
+
+  const [entries, setEntries] = React.useState<Array<LinkProps>>(baseEntries);
+
+  const { run } = useMiddlewareRunner<Array<LinkProps>>({
+    hookPoint: 'transformCoverEntry',
+    onMiddlewareChange: () => {
+      run(baseEntries).then(setEntries);
+    },
+  });
+
+  useEffect(() => {
+    run(baseEntries).then(setEntries);
+  }, [baseEntries, run]);
 
-export const Cover = (props: { className?: string }) => {
-  const globalRouteCtx = useContext(GlobalRoutesContext);
-  const routes = globalRouteCtx.globalRoutes;
-  const pluginEntry = routes.length > 0 ? [{ to: '/plugins', name: 'cd ./plugins' }] : [];
   return (
     <>
-      <CenterLinkList
-        className="select-none"
-        links={[
-          {
-            to: '/blog',
-            name: 'cd ./blog',
-            children: 'cd ./blog',
-          },
-          {
-            to: '/now',
-            name: 'cd ./now',
-            children: 'cd ./now',
-          },
-          ...pluginEntry,
-        ]}
-        title=""
-        // footer={<Version className="" />}
-      />
+      <CenterLinkList className="select-none" links={entries} />
     </>
   );
 };

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { NotFound } from '@bbki.ng/ui';
 import { useParams } from 'react-router-dom';
+
 import { usePosts } from '@/hooks/use_posts';
 import { ArticlePage } from '@/components/article';
 import { useBlogScrollReset } from '@/hooks/use_blog_scroll_pos_restoration';
 
-export default () => {
+function TxtArticle() {
   const { title } = useParams();
   const { posts, isError, isLoading } = usePosts(title);
 
@@ -19,7 +20,7 @@ export default () => {
     return <NotFound />;
   }
 
-  if (isLoading) {
+  if (isLoading || !posts) {
     return null;
   }
 
@@ -30,4 +31,6 @@ export default () => {
       <div dangerouslySetInnerHTML={{ __html: posts.content }} />
     </ArticlePage>
   );
-};
+}
+
+export default TxtArticle;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 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';
@@ -9,43 +10,46 @@ type TxtProps = {
   articleList?: LinkProps[];
 };
 
-export default (props: TxtProps) => {
-  const { titleList, isLoading, isError } = usePosts();
+const Txt = (props: TxtProps) => {
+  const { titleList, isError } = usePosts();
 
   useBlogScrollRestoration();
 
   const { gotoTop } = useBlogScroll();
 
-  if (isLoading) {
-    return null;
-  }
-
   if (isError) {
-    return <CenterLinkList links={props.articleList} />;
+    return <CenterLinkList links={props.articleList ?? titleList} />;
   }
 
+  const links = props.articleList ?? titleList;
+
   return (
     <CenterLinkList
-      links={props.articleList || titleList}
-      loading={isLoading}
+      links={links}
       footer={
-        <Button onClick={gotoTop} className="mt-32">
-          <svg
-            data-testid="geist-icon"
-            height="16"
-            stroke-linejoin="round"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <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>
-        </Button>
+        links.length > 0 ? (
+          <Button onClick={gotoTop} className="mt-32">
+            <svg
+              data-testid="geist-icon"
+              height="16"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="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>
+          </Button>
+        ) : null
       }
     />
   );
 };
+
+Txt.displayName = 'Txt';
+
+export default Txt;

package/src/blog/swr.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
+
 import { cfApiFetcher } from '@/utils';
 
-export const SWR = (props: { children: any }) => {
+export const SWR = (props: { children: ReactNode }) => {
   return (
     <SWRConfig
       value={{

package/src/blog/types/path.ts

@@ -1,11 +1,4 @@
-import { FunctionComponent } from 'react';
-
 export interface pathObj {
   path?: string;
   name: string;
 }
-
-export interface compPathObj extends pathObj {
-  component: FunctionComponent<any>;
-  componentProps?: any;
-}

package/src/blog/utils/index.ts

@@ -32,24 +32,3 @@ export const withBBApi =
     fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: 'cors' });
 
 export const cfApiFetcher = withBBApi(baseFetcher)(API_ENDPOINT);
-
-export const changeFont = (type: FontType) => {
-  const rootDiv = document.getElementById('root');
-  if (rootDiv == null) {
-    return;
-  }
-
-  if (rootDiv.classList.contains(type)) {
-    return;
-  }
-
-  // remove all font type class
-  for (const fontType in FontType) {
-    rootDiv.classList.remove(fontType);
-  }
-
-  rootDiv.classList.add(type);
-
-  // save font type to local storage
-  localStorage.setItem('font', type);
-};

package/src/core/context/createPluginCtx.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, ComponentType } from 'react';
-import { IHostContext } from '#/types/hostApi';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
 
 /**
  * 创建插件专属的 Context 工具集
@@ -33,15 +34,19 @@ export function createPluginCtx<T>() {
    * const Enhanced = withCtx(picker, BaseComp)(ctx);
    * ctx.api.registerSlot('slotName', Enhanced, pluginId);
    */
-  const withCtx = <P extends { data?: any }>(
+  const withCtx = <P extends IComPropsRegisteredToSlot>(
     ctx: T,
     Component: React.ComponentType<P>
   ): ComponentType<P> => {
-    return (props: P) => (
-      <Ctx.Provider value={ctx}>
-        <Component {...props} />
-      </Ctx.Provider>
-    );
+    const WrappedComponent: React.FC<P> = props => {
+      return (
+        <Ctx.Provider value={ctx}>
+          <Component {...props} />
+        </Ctx.Provider>
+      );
+    };
+
+    return WrappedComponent;
   };
 
   return {