@bbki.ng/site 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.7.0
+
+## 1.6.4
+
 ## 1.6.3
 
 ## 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "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.5.3",
+    "@bbki.ng/components": "workspace:2.5.4",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.4.3",
+    "@bbki.ng/stylebase": "workspace:0.4.4",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",
@@ -58,6 +58,7 @@
     "ts-jest": "^27.1.1",
     "typescript": "^4.5.4",
     "vite": "5.0.0",
+    "vite-plugin-glsl": "1.2.1",
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0"

package/src/app.tsx

@@ -65,7 +65,6 @@ export const App = () => {
   return (
     <SWR>
       <HotKeyNav>
-        {/*<Stickers />*/}
         <GlobalLoadingStateProvider>
           <Routes>
             <Route path="/" element={<Layout />}>

package/src/components/article/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import { Tags, Article } from "@bbki.ng/components";
 import { ROUTES } from "@/constants";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
+import classNames from "classnames";
 
 type ArticlePageProps = {
   tags?: string[];
@@ -22,6 +23,10 @@ export const ArticlePage = (props: ArticlePageProps) => {
     return props.children;
   }
 
+  const articleCls = classNames("prose", {
+    "mb-20": tagNames,
+  });
+
   return (
     <DelayFadeIn delay={200}>
       <Article
@@ -29,7 +34,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
         description={description}
         className={props.className}
       >
-        <article className="prose mb-20">{props.children}</article>
+        <article className={articleCls}>{props.children}</article>
       </Article>
       {tagNames && <Tags tags={tags} />}
     </DelayFadeIn>

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Canvas } from "@bbki.ng/components";
+import frag from "./shader.frag";
+import vert from "./shader.vert";
+import cls from "classnames";
+import uniforms from "./uniforms";
+
+const canvasDefaultCls = cls(
+  "fixed",
+  "top-0",
+  "left-0",
+  "h-full",
+  "pointer-events-none",
+  "w-full",
+  "z-[999]"
+);
+
+export const EffectLayer = () => {
+  return (
+    <Canvas
+      className={canvasDefaultCls}
+      uniforms={uniforms}
+      fragment={frag}
+      vertex={vert}
+    />
+  );
+};

package/src/components/effect-layer/attributes.ts

@@ -0,0 +1,15 @@
+export default [
+  {
+    name: "aPos",
+    size: 2,
+    data: (i: number, total: number) => {
+      const col = Math.sqrt(total);
+      const row = col;
+
+      const x = (i % col) / col;
+      const y = Math.floor(i / row) / row;
+
+      return [x, y];
+    },
+  },
+];

package/src/components/effect-layer/shader.frag

@@ -0,0 +1,37 @@
+precision mediump float;
+
+uniform vec2 uResolution;
+uniform float uProgress;
+uniform float uDevicePixelRatio;
+
+float rand(vec2 co){
+  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 grain(vec4 fragColor, vec2 uv){
+  vec4 color = fragColor;
+  float diff = (rand(uv) - 0.0) * 0.09;
+  color.r += diff;
+  color.g += diff;
+  color.b += diff;
+  return color;
+}
+
+vec4 randGrain(vec2 uv) {
+  vec4 color = vec4(0.0, 0.0, 0.0, 0.1);
+  color.a = rand(uv + uProgress) * 0.1;
+  return grain(color, uv);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy/uResolution;
+
+  float navHeight = 64. * uDevicePixelRatio / uResolution.y;
+
+  if (uv.y <= navHeight) {
+      gl_FragColor = randGrain(uv);
+  } else {
+      gl_FragColor = vec4(0., 0., 0., 0.);
+  }
+
+}

package/src/components/effect-layer/shader.vert

@@ -0,0 +1,9 @@
+attribute vec3 aPosition;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uModelMatrix;
+uniform mat4 uViewMatrix;
+
+void main(){
+    gl_Position= uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(aPosition, 1.);
+}

package/src/components/effect-layer/uniforms.ts

@@ -0,0 +1,14 @@
+export default {
+  uResolution: {
+    type: "vec2",
+    value: [innerWidth, innerHeight],
+  },
+  uDevicePixelRatio: {
+    type: "float",
+    value: [devicePixelRatio],
+  },
+  pi: {
+    type: "float",
+    value: [Math.PI],
+  },
+}

package/src/components/effect-layer/useRenderHandler.ts

@@ -0,0 +1,6 @@
+import {useCallback} from "react";
+
+export const useRenderHandler = () => {
+  return useCallback((inst: any) => {
+  }, [])
+}

package/src/hooks/use_mouse_position.ts

@@ -0,0 +1,14 @@
+import {useEffect, useState} from "react";
+
+export const useMousePosition = () => {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    const updateMousePosition = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", updateMousePosition);
+    return () => window.removeEventListener("mousemove", updateMousePosition);
+  }, []);
+
+  return mousePosition;
+}

package/src/main.tsx

@@ -7,6 +7,7 @@ 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);
@@ -18,6 +19,7 @@ root.render(
       <Toaster />
       <Logger />
       <ReloadPrompt />
+      <EffectLayer />
     </Router>
   </React.StrictMode>
 );

package/src/pages/cover/index.tsx

@@ -1,25 +1,28 @@
 import React from "react";
 import { CenterLinkList } from "@/components";
+import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 export const Cover = (props: { className: string }) => {
   return (
-    <CenterLinkList
-      className="select-none"
-      links={[
-        {
-          to: "/projects",
-          name: "cd ./projects",
-        },
-        {
-          to: "/blog",
-          name: "cd ./blog",
-        },
-        {
-          to: "/now",
-          name: "cd ./now",
-        },
-      ]}
-      title=""
-    />
+    <>
+      <CenterLinkList
+        className="select-none"
+        links={[
+          {
+            to: "/projects",
+            name: "cd ./projects",
+          },
+          {
+            to: "/blog",
+            name: "cd ./blog",
+          },
+          {
+            to: "/now",
+            name: "cd ./now",
+          },
+        ]}
+        title=""
+      />
+    </>
   );
 };

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

@@ -8,6 +8,7 @@ import { ImageUploader } from "@/components/ImageUploader";
 import classnames from "classnames";
 import { ImageRenderer } from "@bbki.ng/components/lib";
 import { ImgCtxMenu } from "@/components/Img_ctx_menu";
+import {EffectLayer} from "@/components/effect-layer/EffectLayer";
 
 const ProjectDetail = () => {
   const { id } = useParams();

package/src/types/glsl.d.ts

@@ -0,0 +1,8 @@
+declare module '*.frag' {
+  const file: string;
+  export default file;
+}
+declare module '*.vert' {
+  const file: string;
+  export default file;
+}

package/vite.config.js

@@ -11,6 +11,7 @@ import rehypeSlug from "rehype-slug";
 import rehypeHighlight from "rehype-highlight";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import react from "@vitejs/plugin-react";
+import glsl from 'vite-plugin-glsl';
 
 const options = {
   remarkPlugins: [
@@ -51,6 +52,7 @@ export default defineConfig({
   plugins: [
     react(),
     mdx(options),
+    glsl(),
     VitePWA({
       injectRegister: "auto",
       includeAssets: [