articles list reader animation

.idea/dataSources.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="postgres@tymur999srv" uuid="17303c19-0923-4ed6-ae47-bceb69a2958e">
+      <driver-ref>postgresql</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>org.postgresql.Driver</jdbc-driver>
+      <jdbc-url>jdbc:postgresql://tymur999srv:5432/postgres</jdbc-url>
+      <jdbc-additional-properties>
+        <property name="com.intellij.clouds.kubernetes.db.host.port" />
+        <property name="com.intellij.clouds.kubernetes.db.enabled" value="false" />
+        <property name="com.intellij.clouds.kubernetes.db.container.port" />
+      </jdbc-additional-properties>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>

src/articles/ArticlesList.tsx

@@ -1,17 +1,9 @@
-import {Article} from "./articles";
-import allBlack from "../img/IMG_3095.jpg";
-import {lazy, useState} from "react";
+import {Article, ARTICLES} from "./articles";
+import {useState} from "react";
 import "./list.sass";
 import {ReactComponent as BoxSvg} from "../img/blog-box.svg";
 import {Reader} from "./Reader";
 
-const ARTICLES: Article[] = [{
-  name: "My high school experience",
-  description: "My first program, winning two senior superlatives, and why (and how) I chose Georgia Tech",
-  thumbnail: allBlack,
-  published: new Date(),
-  article: lazy(() => import("../about/About.mdx"))
-}];
 
 export function ArticlesList() {
   const [reading, setReading] = useState<Article | null>(null);
@@ -21,14 +13,12 @@ export function ArticlesList() {
     <section className="articles">
       {
         ARTICLES.map(a =>
-          <BlogBox article={a} setReading={setReading}/>
+          <BlogBox key={a.name} article={a} setReading={setReading}/>
         )
       }
-      {
-        reading && <Reader {...reading}/>
-      }
     </section>
     <section className="spacer"/>
+    <Reader post={reading} setPost={setReading} />
   </main>
 }
 

src/articles/Reader.tsx

@@ -1,5 +1,41 @@
 import {Article} from "./articles";
+import {motion} from "framer-motion";
+import {useAnimate} from "motion/react";
+import {TargetAndTransition} from "motion";
+import {useEffect} from "react";
 
-export function Reader(article: Article) {
-  return <div>{article.name}</div>
+type Transition = "open" | "closed";
+const READER : Record<Transition, TargetAndTransition> = {
+  closed : { opacity: 0 },
+  open : { opacity: 1 }
+};
+
+type Props = { post: Article | null, setPost: (_: Article | null) => void };
+export function Reader({ post, setPost }: Props) {
+  const [ scope, animate ]= useAnimate<HTMLElement>();
+
+  useEffect(() => {
+    if(post && scope.current) {
+      animate(scope.current, READER.open);
+    }
+  }, [post, scope]);
+
+  function handleClose() {
+    animate(scope.current, READER.closed)
+      .then(() => setPost(null));
+  }
+
+  return post ? (
+    <motion.article
+      key="reader"
+      ref={scope}
+      initial={READER.closed}
+      animate={READER.open}
+      onClick={handleClose}
+      className="reader link">
+        <section onClick={e => e.stopPropagation()}>
+          <post.article/>
+        </section>
+    </motion.article>
+  ) : <></>;
 }

src/articles/articles.ts

@@ -1,6 +1,7 @@
 import {Path} from "../router/router";
 import {MDXContent} from "mdx/types";
-import type {LazyExoticComponent} from "react";
+import {lazy, LazyExoticComponent} from "react";
+import allBlack from "../img/IMG_3095.jpg";
 
 export interface Article {
   name: string,
@@ -10,4 +11,14 @@ export interface Article {
   published: Date,
   // lazy load article content
   article: MDXContent | LazyExoticComponent<MDXContent>
-}
+}
+
+export const ARTICLES: Article[] = [
+  {
+    name: "My high school experience",
+    description: "My first program, winning two senior superlatives, and why (and how) I chose Georgia Tech",
+    thumbnail: allBlack,
+    published: new Date(Date.parse("3/15/2026")),
+    article: lazy(() => import("./mdx/high-school.mdx"))
+  }
+];

src/articles/list.sass

@@ -7,7 +7,6 @@ $entry-width: 400px
   min-height: 100vh
 
   button
-    z-index: 999
     display: flex
     flex-direction: column
     max-width: $entry-width
@@ -53,3 +52,19 @@ $entry-width: 400px
   flex-direction: column
   align-items: center
   flex-wrap: wrap
+
+.reader
+  &, > section
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
+  width: 100vw
+  height: 100vh
+  background: rgba(0,0,0,0.5)
+  > section
+    background: white
+    color: black
+    width: 75vw
+    height: 75vh

src/articles/mdx/high-school.mdx

@@ -0,0 +1 @@
+# My high school experience