@bbki.ng/site 2.0.40 → 2.0.42

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 2.0.42
+
+## 2.0.41
+
 ## 2.0.40
 
 ## 2.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@extism/extism": "2.0.0-rc11",
-    "@bbki.ng/components": "workspace:2.6.10",
+    "@bbki.ng/components": "workspace:2.6.11",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/blog/hooks/use_blog_scroll_pos_restoration.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
 
 const SCROLL_STORAGE_KEY = "div-scroll-positions";
@@ -23,6 +23,24 @@ export function useBlogScrollReset() {
   }, []);
 }
 
+export function useBlogScroll() {
+  const element = document.getElementById("blog");
+
+  const gotoTop = useCallback(() => {
+    if (!element) return;
+
+    const id = setTimeout(() => {
+      element.scrollTo({ top: 0, behavior: "smooth" });
+    }, 150);
+
+    return () => clearTimeout(id);
+  }, [element]);
+
+  return {
+    gotoTop,
+  };
+}
+
 export function useBlogScrollRestoration(debounceMs: number = 100) {
   const location = useLocation();
   const isFirstRender = useRef(true);

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ArticleList } from "./consts";
-import { LinkProps, DropZone } from "@bbki.ng/components";
+import { LinkProps, DropZone, Button } from "@bbki.ng/components";
 import { usePosts } from "@/hooks/use_posts";
 import { CenterLinkList } from "@/components";
 import { useAuthed } from "@/hooks/use_authed";
@@ -8,7 +8,10 @@ import { useFile2Post } from "@/hooks/use_file_to_post";
 import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 import { useClipboardToPost } from "@/hooks/use_clipboard_to_post";
 import { useLocation } from "react-router-dom";
-import { useBlogScrollRestoration } from "@/hooks/use_blog_scroll_pos_restoration";
+import {
+  useBlogScroll,
+  useBlogScrollRestoration,
+} from "@/hooks/use_blog_scroll_pos_restoration";
 
 type TxtProps = {
   title?: string;
@@ -22,6 +25,8 @@ const Posts = (props: TxtProps) => {
 
   useBlogScrollRestoration();
 
+  const { gotoTop } = useBlogScroll();
+
   if (isLoading) {
     return null;
   }
@@ -36,6 +41,24 @@ const Posts = (props: TxtProps) => {
     <CenterLinkList
       links={props.articleList || links}
       loading={isGlobalLoading}
+      footer={
+        <Button onClick={gotoTop} className="mt-128">
+          <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>
+      }
     />
   );
 };