Update about page and reorder docs

Author: spaaaacccee

client/src/pages/docs/about/about.md client/src/pages/docs/about/about.mdxclient/src/pages/docs/about/about.md renamed to client/src/pages/docs/about/about.mdx

@@ -1,3 +1,26 @@
+import { CodeBlock } from 'components/CodeBlock';
+import { Link } from 'components/Link';
+
 Multi-Agent Path Finding (MAPF) is a combinatorial problem that asks us to compute collision-free paths for teams of cooperative agents. Many works appear on this topic each year, and a large number of substantial advancements and improvements have been reported. Yet measuring overall progress in MAPF is difficult: there are many potential competitors, and the computational burden for comprehensive experimentation is prohibitively large. Moreover, detailed data from past experimentation is usually unavailable.
 
 This online platform introduces a set of methodological and visualisation tools which can help the community establish clear indicators for state-of-the-art MAPF performance and which can facilitate large-scale comparisons between MAPF solvers. Our objectives are to lower the barrier of entry for new researchers and to further promote the study of MAPF.
+
+### Cite our paper
+
+If you've found this platform useful, please consider citing our paper:
+<CodeBlock>
+{
+`@misc{MAPF_Tracker,
+    doi         = {10.48550/arXiv.2305.08446},
+    url         = {https://arxiv.org/abs/2305.08446},
+    author      = {Bojie Shen
+                   and Zhe Chen
+                   and Muhammad Aamir Cheema
+                   and Daniel D. Harabor
+                   and Peter J. Stuckey},
+    title       = {Tracking Progress in Multi-Agent Path Finding},
+    publisher   = {arXiv},
+    year        = {2023}
+}`.trim()
+}
+</CodeBlock>

client/src/pages/docs/about/index.tsx

@@ -6,22 +6,42 @@ import {
   ListItemAvatar,
   ListItemText,
   Stack,
+  Tooltip,
   Typography,
 } from "@mui/material";
-import { Prose } from "layout";
+import { Grid, Prose } from "layout";
 import { filter } from "lodash";
-import Content from "./about.md";
+import Content from "./about.mdx";
 import { people } from "./people";
 import { ArticleLayout } from "layout/ArticleLayout";
 import { useSm } from "components/dialog/useSmallDisplay";
+import { ArticleCard } from "../ArticleCard";
+import { pages } from "../pages";
 
 export function About() {
   const sm = useSm();
   return (
     <Stack direction={sm ? "column" : "row"} spacing={2}>
-      <Prose sx={{ flex: 1 }}>
-        <Content />
-      </Prose>
+      <Stack sx={{ gap: 2, flex: 1 }}>
+        <Prose>
+          <Content />
+        </Prose>
+        <Stack sx={{ gap: 2 }}>
+          <Typography variant="overline" color="text.secondary">
+            Read the docs
+          </Typography>
+          <Grid width={280} gap={2}>
+            {filter(pages(), (p) => ["cite"].includes(p.value)).map((page) => (
+              <Tooltip key={page?.value} title="Open this article in a new tab">
+                <ArticleCard
+                  page={page}
+                  onClick={() => open(`/docs/${page.value}`, "_blank")}
+                />
+              </Tooltip>
+            ))}
+          </Grid>
+        </Stack>
+      </Stack>
       <Stack sx={{ flex: 1, gap: 2 }}>
         {["Advisors", "Developers"].map((group) => (
           <Card sx={{ py: 1, px: 1 }} key={group}>
@@ -37,7 +57,7 @@ export function About() {
                     </ListItemAvatar>
                     <ListItemText primary={`${name}`} secondary={affiliation} />
                   </ListItem>
-                )
+                ),
               )}
             </List>
           </Card>

client/src/pages/docs/pages.tsx

@@ -19,20 +19,21 @@ export const submissionInstructions = () =>
   find(pages(), { value: "how-to-submit" });
 
 export const pages = () => [
-  createArticlePage({
-    key: "cite",
-    title: "Read and cite the paper",
-    icon: <ArticleRounded />,
-    content: <CitePage />,
-    description: "Here's how to cite MAPF tracker when you use the system",
-  }),
   createArticlePage({
     key: "system-demo",
     title: "Watch our system demo",
     icon: <AnimationRounded />,
     content: <DemoPage />,
     description: "Take 5 minutes to watch our ICAPS 2023 system demonstration",
   }),
+  createArticlePage({
+    key: "how-to-submit",
+    title: "Submitting data to MAPF Tracker",
+    icon: <UploadFileRounded />,
+    content: <SubmissionInstructionsPage />,
+    description:
+      "Quick-start guide on how to submit your results to the platform",
+  }),
   createArticlePage({
     key: "problem-definition",
     title: "Problem model",
@@ -48,11 +49,10 @@ export const pages = () => [
     description: "How do I read or write a solution?",
   }),
   createArticlePage({
-    key: "how-to-submit",
-    title: "Submitting data to MAPF Tracker",
-    icon: <UploadFileRounded />,
-    content: <SubmissionInstructionsPage />,
-    description:
-      "Quick-start guide on how to submit your results to the platform",
+    key: "cite",
+    title: "Read and cite the paper",
+    icon: <ArticleRounded />,
+    content: <CitePage />,
+    description: "Here's how to cite MAPF tracker when you use the system",
   }),
 ];