@bbki.ng/site 1.0.13 → 1.0.15

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.0.15
+
+## 1.0.14
+
 ## 1.0.13
 
 ## 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.1.32",
+    "@bbki.ng/components": "workspace:2.1.33",
     "@supabase/supabase-js": "^1.30.6",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/app.tsx

@@ -39,6 +39,7 @@ const Layout = () => {
 
 const NowInMidCol = threeColWrapper(NowPage);
 const ContentInMidCol = threeColWrapper(Txt);
+const ProjectsInMidCol = threeColWrapper(Png);
 const ArticleInMidCol = threeColWrapper(ArticlePage);
 const TagsInMidCol = threeColWrapper(Tags);
 const LoginInMidCol = threeColWrapper(Login);
@@ -55,7 +56,7 @@ export const App = () => {
             <Route path="/" element={<Layout />}>
               <Route index element={<CoverInMidCol />} />
 
-              <Route path="/projects" element={<Png />} />
+              <Route path="/projects" element={<ProjectsInMidCol />} />
               <Route path="/projects/:id" element={<PhotoProjects />} />
 
               <Route path="blog" element={<ContentInMidCol />} />

package/src/components/with_wrapper/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FunctionComponent } from "react";
 import { ArticlePage } from "@/components/article";
-import { ThreeColLayout, ErrorBoundary, Link } from "@bbki.ng/components";
+import { ThreeColLayout, ErrorBoundary } from "@bbki.ng/components";
 
 export const withArticleWrapper =
   (Component: FunctionComponent<any>): FunctionComponent<any> =>
@@ -16,15 +16,20 @@ export const withArticleWrapper =
   };
 
 export const threeColWrapper =
-  <T extends object>(Component: any) =>
+  <T extends object>(Component: any, catchError: boolean = true) =>
   (props: T) => {
     return (
       <ThreeColLayout
-        middleRenderer={() => (
-          <ErrorBoundary>
-            <Component {...props} />
-          </ErrorBoundary>
-        )}
+        middleRenderer={() => {
+          if (!catchError) {
+            return <Component {...props} />;
+          }
+          return (
+            <ErrorBoundary>
+              <Component {...props} />
+            </ErrorBoundary>
+          );
+        }}
       />
     );
   };

package/src/global_loading_state_provider.tsx

@@ -4,7 +4,9 @@ import React, {
   useState,
   Dispatch,
   SetStateAction,
+  useEffect,
 } from "react";
+import { useLocation, useRoutes } from "react-router-dom";
 
 type LoadingContext = {
   isLoading: boolean;
@@ -18,6 +20,11 @@ export const GlobalLoadingContext = createContext<LoadingContext>({
 
 export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsLoading(false);
+  }, [location.pathname]);
 
   return (
     <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>

package/src/hooks/use_posts.ts

@@ -11,19 +11,22 @@ export const usePosts = (name: string = "", suspense?: boolean) => {
 
   let isLoading = !data && !error;
   const { setIsLoading } = useContext(GlobalLoadingContext);
-  const titleList = isLoading
-    ? []
-    : data.map((p: any) => ({
-        name: p.title,
-        to: p.title,
-      }));
+  const titleList =
+    isLoading || error
+      ? []
+      : data.map((p: any) => ({
+          name: p.title,
+          to: p.title,
+        }));
 
   useEffect(() => {
     setIsLoading(isLoading);
   }, [isLoading]);
 
   const posts =
-    isLoading || name == "" ? data : data.find((p: any) => p.title == name);
+    isLoading || name == "" || error
+      ? data
+      : data.find((p: any) => p.title == name);
 
   return {
     posts: posts,

package/src/pages/cover/index.tsx

@@ -7,14 +7,14 @@ export const Cover = (props: { className: string }) => {
       links={[
         {
           to: "/projects",
-          name: "ls *.png",
+          name: "cd ./projects",
         },
         {
           to: "/blog",
-          name: "ls *.md",
+          name: "cd ./blog",
         },
       ]}
-      title="history"
+      title=" "
     />
   );
 };

package/src/pages/extensions/png/index.tsx

@@ -1,35 +1,17 @@
-import React, { useCallback, useEffect } from "react";
-import classnames from "classnames";
+import React from "react";
 import { useProjects } from "@/hooks/use_projects";
-import { Link, Gallery, ImageRenderer } from "@bbki.ng/components";
+import { Link, Gallery, ImageRenderer, LinkList } from "@bbki.ng/components";
 import { MySuspense } from "@/components";
-import { imageFormatter } from "@/utils";
 
 const Projects = () => {
   const { projects } = useProjects("", true);
-  const renderImage: ImageRenderer = useCallback(
-    (img, index, col) => {
-      const project = projects[index];
-      return (
-        <div
-          className={classnames("mb-128", {
-            "md:mr-64": col === 0,
-            "md:ml-64": col !== 0,
-          })}
-        >
-          <Link to={`/projects/${project.name}`}>{img}</Link>
-        </div>
-      );
-    },
-    [projects]
-  );
 
-  return (
-    <Gallery
-      images={projects.map((p: any) => p.cover).map(imageFormatter)}
-      imageRenderer={renderImage}
-    />
-  );
+  const links = projects.map((p: any) => ({
+    to: `/projects/${p.name}`,
+    name: p.name,
+  }));
+
+  return <LinkList links={links} title="图片" />;
 };
 
 export default () => {

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useContext } from "react";
 import { MdxArticleList } from "@/articles";
 import { withArticleWrapper } from "@/components";
 import { MdxArticle } from "@/types/articles";
@@ -6,6 +6,7 @@ import { NotFound, Link } from "@bbki.ng/components";
 import { useParams } from "react-router-dom";
 import { usePosts } from "@/hooks/use_posts";
 import { ArticlePage } from "@/components/article";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
 
 type TArticleMap = {
   [key: string]: ReactElement;
@@ -22,12 +23,14 @@ MdxArticleList.forEach((article: unknown) => {
 export default () => {
   const { title } = useParams();
   const { posts, isError, isLoading } = usePosts(title);
+  const { setIsLoading } = useContext(GlobalLoadingContext);
 
   if (!title) {
     return <NotFound />;
   }
 
   if (ArticleMap[title]) {
+    setIsLoading(false);
     return ArticleMap[title];
   }
 

package/src/utils/index.ts

@@ -67,7 +67,13 @@ export const getEnv = () => {
 };
 
 export const baseFetcher = (resource: string, init: RequestInit = {}) =>
-  fetch(resource, init).then((res) => res.json());
+  fetch(resource, init).then((res) => {
+    if (!res.ok) {
+      throw new Error("An error occurred while fetching the data.");
+    }
+
+    return res.json();
+  });
 
 export const withToken =
   (fetcher: Fetcher) =>