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() { const [article, setArticle] = useState
(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); } } else { const id = ARTICLES.indexOf(article); router.replacePage(`${location.pathname}?${ARTICLE_QUERY}=${id}` as Path); } }, [article]); return { ARTICLES.map(a => ) } } function BlogBox(props: { article: Article, setReading: (_: Article | null) => void }) { const {article, setReading, article: {name, description, thumbnail, published} } = props; return ( ) }