query param reader

src/articles/ArticleContext.tsx

@@ -1,6 +1,8 @@
-import {createContext, PropsWithChildren, useContext, useState} from "react";
+import {createContext, PropsWithChildren, useContext, useEffect, useState} from "react";
 import {Reader} from "./Reader";
-import {Article} from "./articles";
+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(){}]);
@@ -9,9 +11,33 @@ export function useArticle() {
   return useContext(articleContext);
 }
 
+const ARTICLE_QUERY = "a";
 export default function ArticleProvider({ children }: PropsWithChildren) {
-  const state = useState<Article | undefined>(undefined);
+  const [article, setArticle] = useState<Article | undefined>(undefined);
-  return <articleContext.Provider value={state}>
+  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>;

src/articles/mdx/high-school.mdx

@@ -6,7 +6,7 @@ import {ReactComponent as K8s} from "../../img/Kubernetes Logo Vector.svg";
 
 # My high school experience
 
-<img className="thumbnail" src={allBlack} alt="turtleneck thumbnail"/>
+<img className="thumbnail" src={allBlack} width={400} alt="turtleneck thumbnail"/>
 
 My first coding experience was in middle school playing Code Combat.
 You could say Python is the first language I learned, not particularly uncommon.

src/router/Route.tsx

@@ -13,8 +13,10 @@ export const ROUTES: Routes = [
 function Route(props: PropsWithChildren & {route: Route}) {
   const {route: [path], children} = props;
   const router = useRouter();
+  // remove search params
+  const [cleanPath] = /\/?\w*[^?]/.exec(router.current) ?? [path];
 
-  return <>{router.current === path && children}</>
+  return <>{cleanPath === path && children}</>
 }