article list init

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

.idea/watcherTasks.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS;Sass" />
 </project>

src/articles/ArticlesList.tsx

@@ -0,0 +1,56 @@
+import {Article} from "./articles";
+import allBlack from "../img/IMG_3095.jpg";
+import {lazy, 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);
+
+  return <main className="art-ctr">
+    <section className="spacer"/>
+    <section className="articles">
+      {
+        ARTICLES.map(a =>
+          <BlogBox article={a} setReading={setReading}/>
+        )
+      }
+      {
+        reading && <Reader {...reading}/>
+      }
+    </section>
+    <section className="spacer"/>
+  </main>
+}
+
+function BlogBox(props: { article: Article, setReading: (_: Article) => void}) {
+  const {article,
+    article: {name, description, thumbnail, published},
+    setReading} = props;
+
+  return (
+    <button className="link" onClick={() => setReading(article)}>
+      <div>
+        <img className="thumbnail" alt={`${name} thumbnail`} src={thumbnail}/>
+        <div className="titles">
+          <h1>{name}</h1>
+          <div className="desc">
+            <h3>{description}</h3>
+            <p>{published.toDateString()}</p>
+          </div>
+        </div>
+      </div>
+      <BoxSvg className='box-wave'/>
+    </button>
+
+  )
+}

src/articles/Reader.tsx

@@ -0,0 +1,5 @@
+import {Article} from "./articles";
+
+export function Reader(article: Article) {
+  return <div>{article.name}</div>
+}

src/articles/articles.ts

@@ -0,0 +1,13 @@
+import {Path} from "../router/router";
+import {MDXContent} from "mdx/types";
+import type {LazyExoticComponent} from "react";
+
+export interface Article {
+  name: string,
+  description: string,
+  // image thumbnail
+  thumbnail: Path,
+  published: Date,
+  // lazy load article content
+  article: MDXContent | LazyExoticComponent<MDXContent>
+}

src/articles/list.sass

@@ -0,0 +1,55 @@
+@use "../nav/nav"
+$entry-width: 400px
+
+.art-ctr
+  display: flex
+  flex-direction: row
+  min-height: 100vh
+
+  button
+    z-index: 999
+    display: flex
+    flex-direction: column
+    max-width: $entry-width
+    margin: nav.$padding * 2
+    &>div
+      background: #282c34
+    color: white
+    padding: 0
+
+.thumbnail
+  width: $entry-width
+  height: 400px
+  object-fit: cover
+  object-position: 0 0
+
+.spacer
+  background: #393984FF
+  width: 33%
+  flex-grow: 1
+
+.titles
+  font-family: Neuton, serif
+  margin: 10px
+  gap: 15px
+  display: flex
+  align-items: center
+
+  >h1
+    flex-grow: 3
+    text-align: left
+
+  >div
+    flex-grow: 1
+    text-align: center
+
+  h4
+    color: grey
+
+.articles
+  display: flex
+  flex-grow: 4
+  margin-top: 100px
+  flex-direction: column
+  align-items: center
+  flex-wrap: wrap