npm - @bbki.ng/site - Versions diffs - 2.0.29 → 2.0.31 - Mend

@bbki.ng/site 2.0.29 → 2.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +4 -0
package/index.html +2 -2
package/package.json +3 -3
package/src/blog/app.tsx +42 -49
package/src/blog/hooks/use_blog_scroll_pos_restoration.ts +73 -0
package/src/blog/hooks/use_clipboard_content.ts +16 -17
package/src/blog/main.css +6 -0
package/src/blog/pages/extensions/txt/article.tsx +4 -6
package/src/blog/pages/extensions/txt/index.tsx +5 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # @bbki.ng/site
+## 2.0.31
+## 2.0.30
 ## 2.0.29
 ## 2.0.28

package/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en" class="h-full no-scrollbar">
   <head>
     <title>bbki.ng</title>
-    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="baby king" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link
@@ -41,7 +41,7 @@
   </head>
   <body class="h-full m-0 flex flex-col font-mono">
-    <div id="blog" class="flex-grow noto-serif"></div>
+    <div id="blog" class="flex-grow noto-serif no-scrollbar"></div>
     <script type="module" src="/src/index.tsx"></script>
     <script type="module">
       // Import the functions you need from the SDKs you need

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "react-cusdis": "^2.1.3",
     "react-dom": "^18.0.0",
     "react-hotkeys-hook": "^3.4.3",
-    "react-router-dom": "6",
+    "react-router-dom": "6.30.2",
     "sonner": "1.4.0",
     "swr": "^2.2.5",
     "vaul": "1.1.2"
@@ -59,7 +59,7 @@
     "tailwindcss": "^3.0.7",
     "ts-jest": "^27.1.1",
     "typescript": "^4.5.4",
-    "vite": "5.0.0",
+    "vite": "7.2.4",
     "vite-plugin-cross-origin-isolation": "0.1.6",
     "vite-plugin-glsl": "1.2.1",
     "vite-plugin-mdx": "^3.5.8",

package/src/blog/app.tsx CHANGED Viewed

@@ -5,7 +5,6 @@ import { HotKeyNav } from "./components";
 import { threeColWrapper } from "@/components/with_wrapper";
 import { Cover } from "./pages";
-import Png from "@/pages/extensions/png";
 import ArticlePage from "@/pages/extensions/txt/article";
 import NowPage from "@/pages/now";
 import PhotoProjects from "@/pages/extensions/png/png_projects";
@@ -22,35 +21,32 @@ import { AppCtxMenu } from "@/components/app_ctx_menu";
 import { Pochacco, PochaccoPose } from "@/components/Pochacco/Pochacco";
 import { Role, useRole } from "@/hooks/use_role";
 import { BotRedirect } from "@/pages/bot";
-import { PluginInit } from "@/components/plugin/PluginInit";
 import { BBContext } from "@/context/bbcontext";
 import { PluginContentPage } from "@/components/plugin/PluginContentPage";
 import { PluginRoutes } from "@/components/plugin/PluginRoutes";
-import {useClipboardToPost} from "@/hooks/use_clipboard_to_post";
-import {useSharedStringToPost} from "@/hooks/use_shared_string_to_post";
+import { useClipboardToPost } from "@/hooks/use_clipboard_to_post";
+import { useSharedStringToPost } from "@/hooks/use_shared_string_to_post";
 const Layout = () => {
   const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
   const role = useRole();
   const isQueen = role === Role.QUEEN;
   return (
-    <>
-      <Page
-        nav={
-          <AppCtxMenu>
-            <Nav
-              paths={usePaths()}
-              className="gradient-blur-cover select-none"
-              loading={isLoading}
-              customLogo={
-                isQueen ? <Pochacco pose={PochaccoPose.Watching} /> : null
-              }
-            />
-          </AppCtxMenu>
-        }
-        main={<Outlet />}
-      />
-    </>
+    <Page
+      nav={
+        <AppCtxMenu>
+          <Nav
+            paths={usePaths()}
+            className="gradient-blur-cover select-none"
+            loading={isLoading}
+            customLogo={
+              isQueen ? <Pochacco pose={PochaccoPose.Watching} /> : null
+            }
+          />
+        </AppCtxMenu>
+      }
+      main={<Outlet />}
+    />
   );
 };
@@ -63,43 +59,40 @@ const TagsResultInMidCol = threeColWrapper(TagsResult);
 const CoverInMidCol = threeColWrapper(Cover);
 export const App = () => {
+  useClipboardToPost();
-    useClipboardToPost();
+  useSharedStringToPost();
-    useSharedStringToPost();
-    return (
+  return (
     <SWR>
-      {/*<EffectContextProvider>*/}
       <HotKeyNav>
         <BBContext>
-          {/*<PluginInit>*/}
-            <Routes>
-              <Route path="/" element={<Layout />}>
-                <Route index element={<CoverInMidCol />} />
+          <Routes>
+            <Route path="/" element={<Layout />}>
+              <Route index element={<CoverInMidCol />} />
-                <Route path="blog" element={<ContentInMidCol />} />
-                <Route path="blog/:title" element={<ArticleInMidCol />} />
-                <Route path="blog/:title/:id" element={<PhotoProjects />} />
-                <Route path="tags" element={<TagsInMidCol />} />
-                <Route path="tags/:tag" element={<TagsResultInMidCol />} />
-                <Route path="bot" element={<BotRedirect />} />
-                <Route path="now" element={<NowInMidCol />} />
-                <Route path="login" element={<LoginInMidCol />} />
-                <Route path="upload" element={<UploadPage />} />
-                <Route path="/plugins" element={<PluginRoutes />} />
-                <Route
-                  path="/plugins/:pluginRoute"
-                  element={<PluginContentPage />}
-                />
+              <Route path="blog" element={<Outlet />}>
+                <Route path="" element={<ContentInMidCol />} index />
+                <Route path=":title" element={<ArticleInMidCol />} />
               </Route>
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          {/*</PluginInit>*/}
+              <Route path="blog/:title/:id" element={<PhotoProjects />} />
+              <Route path="tags" element={<TagsInMidCol />} />
+              <Route path="tags/:tag" element={<TagsResultInMidCol />} />
+              <Route path="bot" element={<BotRedirect />} />
+              <Route path="now" element={<NowInMidCol />} />
+              <Route path="login" element={<LoginInMidCol />} />
+              <Route path="upload" element={<UploadPage />} />
+              <Route path="/plugins" element={<PluginRoutes />} />
+              <Route
+                path="/plugins/:pluginRoute"
+                element={<PluginContentPage />}
+              />
+            </Route>
+            <Route path="*" element={<NotFound />} />
+          </Routes>
         </BBContext>
       </HotKeyNav>
-      {/*</EffectContextProvider>*/}
     </SWR>
   );
 };

package/src/blog/hooks/use_blog_scroll_pos_restoration.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+const SCROLL_STORAGE_KEY = "div-scroll-positions";
+function getScrollPositions(): Record<string, number> {
+  const stored = sessionStorage.getItem(SCROLL_STORAGE_KEY);
+  return stored ? JSON.parse(stored) : {};
+}
+function saveScrollPosition(key: string, position: number) {
+  const positions = getScrollPositions();
+  positions[key] = position;
+  sessionStorage.setItem(SCROLL_STORAGE_KEY, JSON.stringify(positions));
+}
+export function useBlogScrollReset() {
+  useEffect(() => {
+    const element = document.getElementById("blog");
+    if (!element) return;
+    element.scrollTop = 0;
+  }, []);
+}
+export function useBlogScrollRestoration(debounceMs: number = 100) {
+  const location = useLocation();
+  const isFirstRender = useRef(true);
+  const scrollTimeoutRef = useRef<number>();
+  const element = document.getElementById("blog");
+  const scrollKey = `blog`;
+  // Restore scroll position on mount
+  useEffect(() => {
+    if (!isFirstRender.current || !element) return;
+    const positions = getScrollPositions();
+    const savedPosition = positions[scrollKey];
+    if (!savedPosition) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      element.scrollTop = savedPosition;
+    });
+    isFirstRender.current = false;
+  }, []);
+  // Save scroll position with debouncing
+  useEffect(() => {
+    if (!element) return;
+    const handleScroll = () => {
+      // Clear previous timeout
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      // Debounce the save operation
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        if (element) {
+          saveScrollPosition(scrollKey, element.scrollTop);
+        }
+      }, debounceMs);
+    };
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+}

package/src/blog/hooks/use_clipboard_content.ts CHANGED Viewed

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

package/src/blog/main.css CHANGED Viewed

@@ -14,6 +14,12 @@ body {
 #blog {
   overflow: auto;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none;
+}
+#blog::-webkit-scrollbar {
+  display: none;
 }
 .noto-serif {

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

@@ -3,13 +3,14 @@ import { MdxArticleList } from "@/articles";
 import { withArticleWrapper } from "@/components";
 import { MdxArticle } from "@/types/articles";
 import { NotFound, DropZone } from "@bbki.ng/components";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { usePosts } from "@/hooks/use_posts";
 import { ArticlePage } from "@/components/article";
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 import { useFile2Post } from "@/hooks/use_file_to_post";
 import { useAuthed } from "@/hooks/use_authed";
 import { ArticleCtxMenu } from "@/components/article_ctx_menu";
+import { useBlogScrollReset } from "@/hooks/use_blog_scroll_pos_restoration";
 type TArticleMap = {
   [key: string]: ReactElement;
@@ -28,14 +29,11 @@ export default () => {
   const { posts, isError, isLoading } = usePosts(title);
   const { setIsLoading } = useContext(GlobalLoadingContext);
-  useEffect(() => {
-    // scroll to top
-    window.scrollTo(0, 0);
-  }, []);
   const reader = useFile2Post();
   const isKing = useAuthed();
+  useBlogScrollReset();
   if (!title) {
     return <NotFound />;
   }

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

@@ -6,7 +6,9 @@ import { CenterLinkList } from "@/components";
 import { useAuthed } from "@/hooks/use_authed";
 import { useFile2Post } from "@/hooks/use_file_to_post";
 import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
-import {useClipboardToPost} from "@/hooks/use_clipboard_to_post";
+import { useClipboardToPost } from "@/hooks/use_clipboard_to_post";
+import { useLocation } from "react-router-dom";
+import { useBlogScrollRestoration } from "@/hooks/use_blog_scroll_pos_restoration";
 type TxtProps = {
   title?: string;
@@ -18,6 +20,8 @@ const Posts = (props: TxtProps) => {
   const isGlobalLoading = useSafeArticleLoading(0.2, 5);
+  useBlogScrollRestoration();
   if (isLoading) {
     return null;
   }