From 0aa0cc72a7bca9441ae0e1cea920d07fefaa5c61 Mon Sep 17 00:00:00 2001
From: tymur999 <tymur.arsent@gmail.com>
Date: Mon, 13 Apr 2026 01:26:21 -0500
Subject: [PATCH] articles canvas mode

---
 src/articles/ArticleContext.tsx | 44 ----------------------
 src/articles/ArticlesList.tsx   | 65 ++++++++++++++++++++++++++-------
 src/articles/Reader.tsx         |  7 ++--
 src/articles/list.sass          |  6 +++
 src/articles/reader.sass        |  3 +-
 src/index.tsx                   |  7 +---
 src/index/Canvas.tsx            |  2 +-
 7 files changed, 65 insertions(+), 69 deletions(-)
 delete mode 100644 src/articles/ArticleContext.tsx

diff --git a/src/articles/ArticleContext.tsx b/src/articles/ArticleContext.tsx
deleted file mode 100644
index b3e6ec7..0000000
--- a/src/articles/ArticleContext.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {createContext, PropsWithChildren, useContext, useEffect, useState} from "react";
-import {Reader} from "./Reader";
-import {Article, ARTICLES} from "./articles";
-import {useRouter} from "../router/RouterContext";
-import {Path} from "../router/router";
-
-const articleContext =
-  createContext<ReturnType<typeof useState<Article | undefined>>>([undefined, function(){}]);
-
-export function useArticle() {
-  return useContext(articleContext);
-}
-
-const ARTICLE_QUERY = "a";
-export default function ArticleProvider({ children }: PropsWithChildren) {
-  const [article, setArticle] = useState<Article | undefined>(undefined);
-  const router = useRouter();
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    if(params.has(ARTICLE_QUERY)) {
-      const id = Number.parseInt(params.get(ARTICLE_QUERY)!);
-      setArticle(ARTICLES[id]);
-    }
-  }, [setArticle]);
-
-  useEffect(() => {
-    if(!article) {
-      // query param
-      const params = new URLSearchParams(location.search);
-      if(params.has(ARTICLE_QUERY)) {
-        router.replacePage(location.pathname as Path);
-      }
-    } else {
-      const id = ARTICLES.indexOf(article);
-      router.replacePage(`${location.pathname}?${ARTICLE_QUERY}=${id}` as Path);
-    }
-  }, [article]);
-
-  return <articleContext.Provider value={[article, setArticle]}>
-    <Reader/>
-    {children}
-  </articleContext.Provider>;
-}
\ No newline at end of file
diff --git a/src/articles/ArticlesList.tsx b/src/articles/ArticlesList.tsx
index 3698d1a..d4a1136 100644
--- a/src/articles/ArticlesList.tsx
+++ b/src/articles/ArticlesList.tsx
@@ -1,28 +1,67 @@
-import {useArticle} from "./ArticleContext";
 import "./list.sass";
 import {ReactComponent as BoxSvg} from "../img/blog-box.svg";
 import {Article, ARTICLES} from "./articles";
 import {motion} from "motion/react";
 import {AnimateFade} from "../animations";
+import {Canvas} from "@react-three/fiber";
+import {Environment, Html, OrbitControls} from "@react-three/drei";
+import MilkyWay from "../img/2k_stars_milky_way.jpg";
+import {Sun} from "../index/Canvas";
+import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing";
+import {useEffect, useState} from "react";
+import {Reader} from "./Reader";
+import {useRouter} from "../router/RouterContext";
+import {Path} from "../router/router";
 
+const ARTICLE_QUERY = "a";
 const main = AnimateFade();
 export default function ArticlesList() {
-  return <motion.main animate={main.animate} initial={main.initial} className="art-ctr">
-    <section className="spacer"/>
-    <section className="articles">
-      {
-        ARTICLES.map(a =>
-          <BlogBox key={a.name} article={a} />
-        )
+  const [article, setArticle] = useState<Article | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    if(params.has(ARTICLE_QUERY)) {
+      const id = Number.parseInt(params.get(ARTICLE_QUERY)!);
+      setArticle(ARTICLES[id] ?? null);
+    }
+  }, [setArticle]);
+
+  useEffect(() => {
+    if(!article) {
+      // query param
+      const params = new URLSearchParams(location.search);
+      if(params.has(ARTICLE_QUERY)) {
+        router.replacePage(location.pathname as Path);
       }
-    </section>
-    <section className="spacer"/>
+    } else {
+      const id = ARTICLES.indexOf(article);
+      router.replacePage(`${location.pathname}?${ARTICLE_QUERY}=${id}` as Path);
+    }
+  }, [article]);
+
+
+  return <motion.main animate={main.animate} initial={main.initial} className="art-ctr">
+    <Canvas camera={{position: [0,0,20]}}>
+      <Environment background files={MilkyWay}/>
+      <EffectComposer>
+        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+      <Sun/>
+      <OrbitControls enablePan={false} enableZoom />
+      <Html className="articles" zIndexRange={[100,0]} prepend center transform>
+        {
+          ARTICLES.map(a => <BlogBox setReading={setArticle} article={a}/>)
+        }
+      </Html>
+    </Canvas>
+    <Reader post={article} setPost={setArticle}/>
   </motion.main>
 }
 
-function BlogBox(props: { article: Article }) {
-  const {article, article: {name, description, thumbnail, published} } = props;
-  const [, setReading] = useArticle();
+function BlogBox(props: { article: Article, setReading: (_: Article | null) => void }) {
+  const {article, setReading, article: {name, description, thumbnail, published} } = props;
 
   return (
     <button className="link" onClick={() => setReading(article)}>
diff --git a/src/articles/Reader.tsx b/src/articles/Reader.tsx
index d9d0845..c3a9327 100644
--- a/src/articles/Reader.tsx
+++ b/src/articles/Reader.tsx
@@ -1,4 +1,3 @@
-import {useArticle} from "./ArticleContext";
 import {animate, motion} from "framer-motion";
 import {useEffect} from "react";
 import {AnimateFade, AnimateTemplate} from "../animations";
@@ -6,11 +5,11 @@ import "./reader.sass";
 import {ExternalLink} from "../router/Link";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faClose} from "@fortawesome/free-solid-svg-icons/faClose";
+import {Article} from "./articles";
 
 const READER : AnimateTemplate = AnimateFade();
 
-export function Reader() {
-  const [post, setPost] = useArticle();
+export function Reader({post, setPost}: {post: Article | null, setPost: (_: Article | null) => void}) {
 
   useEffect(() => {
     function pressEscape(e: KeyboardEvent) {
@@ -23,7 +22,7 @@ export function Reader() {
 
   function handleClose() {
     animate(".reader", READER.initial)
-      .then(() => setPost(undefined));
+      .then(() => setPost(null));
   }
 
   return post ? (
diff --git a/src/articles/list.sass b/src/articles/list.sass
index 0b1e76d..a4efbc8 100644
--- a/src/articles/list.sass
+++ b/src/articles/list.sass
@@ -1,6 +1,11 @@
 @use "../nav/nav"
 @use "../index"
 $entry-width: 400px
+
+canvas
+  width: 100vw
+  height: calc(100vh - 100px)
+
 .blog-box
   display: flex
   flex-direction: column
@@ -39,6 +44,7 @@ $entry-width: 400px
     color: grey
 
 .articles
+  z-index: -999
   display: flex
   flex-grow: 3
   justify-content: center
diff --git a/src/articles/reader.sass b/src/articles/reader.sass
index 1fb9af6..155f084 100644
--- a/src/articles/reader.sass
+++ b/src/articles/reader.sass
@@ -23,7 +23,6 @@
     align-items: center
     border-radius: 15px
     margin: auto
-    padding: 30px
     overflow-y: scroll
     overflow-x: hidden
     background: white
@@ -64,4 +63,4 @@
   font-weight: bold
   color: red !important
   background: white
-  border-radius: 15px
\ No newline at end of file
+  border-radius: 999px
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index f88d72e..65069e5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,6 @@ import {RouterProvider} from "./router/RouterContext";
 import "@fontsource/inter"; // Defaults to weight 400
 import "@fontsource/neuton";
 import {Routes} from "./router/Route";
-import ArticleProvider from "./articles/ArticleContext";
 
 const Nav = React.lazy(() => import("./nav/Nav"));
 
@@ -16,10 +15,8 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <RouterProvider>
-      <ArticleProvider>
-        <Nav/>
-        <Routes/>
-      </ArticleProvider>
+      <Nav/>
+      <Routes/>
     </RouterProvider>
   </React.StrictMode>
 );
diff --git a/src/index/Canvas.tsx b/src/index/Canvas.tsx
index 2c6599c..c0439a3 100644
--- a/src/index/Canvas.tsx
+++ b/src/index/Canvas.tsx
@@ -45,7 +45,7 @@ export default function Canvas() {
   )
 }
 
-function Sun() {
+export function Sun() {
   return (
     <mesh position={[-100, 0, -100]}>
       <sphereGeometry args={[5, 32, 32]} />