Merge pull request #1 from tymur999/articles-canvas

articles canvas mode
2026-04-13 01:27:05 -05:00
parent 8c47404d02 0aa0cc72a7
commit ab9044651c
7 changed files with 65 additions and 69 deletions
--- a/src/articles/ArticleContext.tsx
+++ b/src/articles/ArticleContext.tsx
@@ -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>;
-}
--- 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)}>
--- 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 ? (
--- 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
--- 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
+  border-radius: 999px
--- 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>
 );
--- 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]} />