author, resolve prefix url, book card

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 .cache/
 public
 .idea
+/static/db/
+/static/imgs/

gatsby-config.js

@@ -3,4 +3,5 @@ module.exports = {
     siteUrl: `https://www.yourdomain.tld`,
   },
   plugins: [`gatsby-plugin-react-helmet`],
+  pathPrefix: `/answers`,
 };

package.json

@@ -10,8 +10,8 @@
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
-    "build": "gatsby build",
-    "serve": "gatsby serve",
+    "build": "gatsby build --prefix-paths",
+    "serve": "gatsby serve --prefix-paths",
     "clean": "gatsby clean"
   },
   "dependencies": {

src/decoders.ts

@@ -4,6 +4,7 @@ export const Item = struct({
   attr: partial({
     q: string,
     a: string,
+    author: string,
   }),
   sha1: string,
 });

src/pages/recursive.tsx

@@ -1,19 +1,27 @@
 import * as React from "react";
+import { useEffect, useState } from "react";
 import { TreeTem, TreeTemT } from "../decoders";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import Typography from "@mui/material/Typography";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { useEffect, useState } from "react";
-import { either } from "fp-ts";
+import { array, either } from "fp-ts";
 import MathMD from "./mathmd";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 
 import ShareIcon from "@mui/icons-material/Share";
 import { useAppDispatch } from "../state/hooks";
 import { sha1Slice } from "../state/slice";
+import Stack from "@mui/material/Stack";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import { pipe } from "fp-ts/function";
+import { pair, relPath, relURL } from "../util";
+import { fst, snd } from "fp-ts/Tuple";
+import CardActionArea from "@mui/material/CardActionArea";
+
 type State =
   | {
       type: "loading";
@@ -26,12 +34,13 @@ type State =
       type: "error";
       msg: string;
     };
+
 export default function Recursive(props: { sha1: string }) {
   const [state, setState] = useState<State>({ type: "loading" });
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    fetch("/db/" + props.sha1 + ".json")
+    fetch(relPath("db", props.sha1 + ".json"))
       .then((x) => x.json())
       .then(TreeTem.decode)
       .then(
@@ -54,12 +63,45 @@ export default function Recursive(props: { sha1: string }) {
       return <div>{state.msg}</div>;
     case "treeTem":
       const { treeTem } = state;
+      const { left: nonBooks, right: books } = pipe(
+        treeTem.kids,
+        array.map((kid) =>
+          kid.attr.author === undefined
+            ? either.left(kid)
+            : either.right(pair(kid.attr.author, kid))
+        ),
+        array.separate
+      );
       return (
         <div>
           {treeTem.item.attr.q && <MathMD htmlString={treeTem.item.attr.q} />}
           <Divider variant="middle" />
           {treeTem.item.attr.a && <MathMD htmlString={treeTem.item.attr.a} />}
-          {treeTem.kids.map((item) => (
+
+          <Stack direction="row" spacing={2} alignItems="flex-start">
+            {books.map((item) => (
+              <Card sx={{ width: 275 }}>
+                <CardActionArea
+                  onClick={() => {
+                    window.location.href =
+                      relURL() +
+                      ("?" +
+                        new URLSearchParams({
+                          sha1: snd(item).sha1,
+                        }).toString());
+                  }}
+                >
+                  <CardContent>
+                    <Typography variant="h5" component="div">
+                      {snd(item).title}
+                    </Typography>
+                    <Typography color="text.secondary">{fst(item)}</Typography>
+                  </CardContent>
+                </CardActionArea>
+              </Card>
+            ))}
+          </Stack>
+          {nonBooks.map((item) => (
             <Accordion
               TransitionProps={{ unmountOnExit: true }}
               key={item.sha1}

src/pages/root.tsx

@@ -8,6 +8,7 @@ import Typography from "@mui/material/Typography";
 import ShareDialogue from "./share-dialogue";
 import { ThemeProvider } from "@mui/material";
 import { commonTheme } from "../theme";
+import { relURL } from "../util";
 
 export default function Root() {
   let sha1 = "";
@@ -25,7 +26,7 @@ export default function Root() {
             variant="h6"
             component="div"
             sx={{ flexGrow: 1 }}
-            onClick={() => window.location.replace(window.location.origin)}
+            onClick={() => (window.location.href = relURL().toString())}
             style={{ cursor: "pointer" }}
           >
             My Answers to Math Books

src/pages/share-dialogue.tsx

@@ -6,14 +6,15 @@ import { sha1Slice } from "../state/slice";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import { relURL } from "../util";
 
 export default function ShareDialogue() {
   const shareSha1 = useAppSelector((state) => state.sha1.sha1);
   const dispatch = useAppDispatch();
 
   let link = "";
   if (typeof window !== "undefined") {
-    const url = new URL(window.location.href);
+    const url = relURL();
     url.searchParams.append("sha1", shareSha1);
     link = url.toString();
   }

src/util.ts

@@ -0,0 +1,26 @@
+export function pair<A, B>(a: A, b: B): [A, B] {
+  return [a, b];
+}
+
+function joinSlash(x: string, y: string) {
+  if (x.endsWith("/")) {
+    if (y.startsWith("/")) return x + y.slice(1);
+    else return x + y;
+  } else {
+    if (y.startsWith("/")) return x + y;
+    else return x + "/" + y;
+  }
+}
+function joinSlashs(...xs: string[]) {
+  return xs.reduce(joinSlash);
+}
+
+export function relPath(...xs: string[]) {
+  return joinSlashs(window.location.pathname, ...xs);
+}
+
+export function relURL(...xs: string[]) {
+  const u = new URL(window.location.origin);
+  u.pathname = relPath(...xs);
+  return u;
+}