@bbki.ng/site 1.7.1 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.7.3
+
+## 1.7.2
+
 ## 1.7.1
 
 ## 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {

package/src/app.tsx

@@ -24,6 +24,7 @@ import { UploadPage } from "@/pages/upload";
 import { AppCtxMenu } from "@/components/app_ctx_menu";
 import { Pochacco, PochaccoPose } from "@/components/Pochacco/Pochacco";
 import { Role, useRole } from "@/hooks/use_role";
+import { EffectContextProvider } from "@/components/effect-layer/EffectContextProvider";
 
 const Layout = () => {
   const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
@@ -47,7 +48,6 @@ const Layout = () => {
         main={<Outlet />}
       />
       <BlurCover status={isFontLoading ? "show" : "silent"} />
-      {/*<BlurCover status="show" />*/}
     </>
   );
 };
@@ -64,29 +64,31 @@ const CoverInMidCol = threeColWrapper(Cover);
 export const App = () => {
   return (
     <SWR>
-      <HotKeyNav>
-        <GlobalLoadingStateProvider>
-          <Routes>
-            <Route path="/" element={<Layout />}>
-              <Route index element={<CoverInMidCol />} />
+      <EffectContextProvider>
+        <HotKeyNav>
+          <GlobalLoadingStateProvider>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<CoverInMidCol />} />
 
-              <Route path="/projects" element={<ProjectsInMidCol />} />
-              <Route path="/projects/:id" element={<PhotoProjects />} />
+                <Route path="/projects" element={<ProjectsInMidCol />} />
+                <Route path="/projects/:id" element={<PhotoProjects />} />
 
-              <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="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="now" element={<NowInMidCol />} />
-              <Route path="login" element={<LoginInMidCol />} />
-              <Route path="upload" element={<UploadPage />} />
-            </Route>
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </GlobalLoadingStateProvider>
-      </HotKeyNav>
+                <Route path="now" element={<NowInMidCol />} />
+                <Route path="login" element={<LoginInMidCol />} />
+                <Route path="upload" element={<UploadPage />} />
+              </Route>
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </GlobalLoadingStateProvider>
+        </HotKeyNav>
+      </EffectContextProvider>
     </SWR>
   );
 };

package/src/components/Spinner.tsx

@@ -1,11 +1,8 @@
 import React, { useContext, useEffect } from "react";
 import { GlobalLoadingContext } from "@/global_loading_state_provider";
-import { LoadingSpiral } from "@bbki.ng/components";
 
 export const Spinner = (props: { disableDotIndicator?: boolean }) => {
-  const {
-    disableDotIndicator,
-  } = props;
+  const { disableDotIndicator } = props;
 
   const { setIsLoading } = useContext(GlobalLoadingContext);
 
@@ -19,11 +16,5 @@ export const Spinner = (props: { disableDotIndicator?: boolean }) => {
     };
   }, []);
 
-  return (
-    <div className="h-full w-full grid place-items-center">
-      <LoadingSpiral
-        className="relative -top-128"
-      />
-    </div>
-  );
+  return <div className="h-full w-full grid place-items-center"></div>;
 };

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

@@ -0,0 +1,15 @@
+import React, { createContext, ReactNode } from "react";
+import { EffectLayer } from "@/components/effect-layer/EffectLayer";
+
+const EffectContext = createContext<any>({});
+
+export const EffectContextProvider = (props: { children: ReactNode }) => {
+  return (
+    <EffectContext.Provider value={{}}>
+      <>
+        <EffectLayer />
+        {props.children}
+      </>
+    </EffectContext.Provider>
+  );
+};

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React from "react";
 import { Canvas } from "@bbki.ng/components";
 import frag from "./main.frag";
 import vert from "./shader.vert";
@@ -21,7 +21,9 @@ export const EffectLayer = () => {
 
   return (
     <Canvas
-      style={{ opacity: 0.1 }}
+      style={{
+        opacity: 0.1,
+      }}
       className={canvasDefaultCls}
       uniforms={uniforms}
       fragment={frag}

package/src/components/effect-layer/shapes/spiral.frag

@@ -0,0 +1,14 @@
+void cosCurve(vec2 uv) {
+    float curve = 0.1 * cos((19.25 * uv.x + 3.141592654 * 0.5) + (2.0 * uProgress));
+
+    vec2 p = uv - 0.5;
+
+    float d = length(p);
+
+    gl_FragColor = d > curve ? vec4(1.0) : vec4(0.0);
+
+}
+
+void spiral(vec2 uv) {
+    cosCurve(uv);
+}

package/src/main.tsx

@@ -7,7 +7,6 @@ import "@bbki.ng/components/style";
 import App from "./app";
 import "./main.css";
 import Logger from "@/components/Logger";
-import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 const container = document.getElementById("root") as Element;
 const root = createRoot(container);
@@ -19,7 +18,6 @@ root.render(
       <Toaster />
       <Logger />
       <ReloadPrompt />
-      <EffectLayer />
     </Router>
   </React.StrictMode>
 );