Update site

docs/0-get-started.mdx

@@ -21,19 +21,19 @@ Posthoc is a way to build simple and effective visualisations ✨ for sequential
   <Card
     primary="Try Posthoc"
     secondary="Dive right into Posthoc and try out some examples."
-    onClick={() => open("https://posthoc-app.pathfinding.ai")}
+    href={"https://posthoc-app.pathfinding.ai"}
     image={imageA}
   />
   <Card
     primary="Watch the primer"
     secondary="Watch our ICAPS 24 demo video, which explains how Posthoc works."
-    onClick={() => open("https://youtu.be/qVpHPYRi6GY")}
+    href={"https://youtu.be/qVpHPYRi6GY"}
     image={imageB}
   />
   <Card
     primary="Read the docs"
     secondary="Ready to build your own visualisations? Continue exploring our documentation."
-    onClick={() => open("/docs/overview")}
+    href={"/docs/overview"}
     image={imageC}
   />
 </Stack>

src/components/ActionCard.tsx

@@ -1,7 +1,9 @@
 import { ArrowForwardOutlined } from "@mui/icons-material";
 import {
   Box,
+  Button,
   ButtonBase,
+  ButtonProps,
   Card,
   CardProps,
   Stack,
@@ -19,10 +21,12 @@ export default function ActionCard({
   primary,
   secondary,
   image,
+  href,
   ...props
-}: Props & CardProps) {
+}: Props & CardProps & ButtonProps) {
   return (
-    <ButtonBase
+    <Button
+      href={href}
       sx={{
         borderRadius: (t) => t.shape.borderRadius,
         p: 0,
@@ -60,6 +64,6 @@ export default function ActionCard({
           </Stack>
         </Box>
       </Card>
-    </ButtonBase>
+    </Button>
   );
 }

src/components/AppBar.tsx

@@ -1,27 +1,21 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import {
   CloseOutlined as CloseIcon,
   DarkModeOutlined,
   LightModeOutlined,
   DragHandleOutlined as MenuIcon,
   LaunchOutlined as OpenIcon,
 } from "@mui/icons-material";
-import {
-  Box,
-  Button,
-  IconButton,
-  Stack,
-  Typography,
-  useScrollTrigger,
-} from "@mui/material";
+import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
 import PopupState, { bindTrigger } from "material-ui-popup-state";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import { l10n } from "../l10n";
 import { Logo } from "./Logo";
 import { useMode } from "./ModeContext";
 import { space } from "./space";
 import { usePaper } from "./theme";
 import { useSm } from "./useSm";
-import BrowserOnly from "@docusaurus/BrowserOnly";
-import { l10n } from "../l10n";
 
 export function AppBar() {
   const sm = useSm();
@@ -47,16 +41,19 @@ function AppBarBody() {
   const [mode, setMode] = useMode();
   const sm = useSm();
   const paper = usePaper();
-  const top = useScrollTrigger({
-    threshold: 0,
-    disableHysteresis: true,
-    target: document.body,
-  });
+  const [top, setTop] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    const f = () => {
+      const st = document.documentElement.scrollTop + document.body.scrollTop;
+      setTop(st === 0);
+      if (!cancelled) requestAnimationFrame(f);
+    };
+    f();
+    return () => void (cancelled = true);
+  }, [setTop]);
   const menu = l10n.sections.map(({ url, label }) => (
-    <Button
-      sx={{ py: 1.5, px: 2, borderRadius: 32 }}
-      onClick={() => (location.href = url)}
-    >
+    <Button sx={{ py: 1.5, px: 2, borderRadius: 32 }} href={url}>
       <Typography color="text.primary" variant="button">
         {label}
       </Typography>
@@ -66,7 +63,8 @@ function AppBarBody() {
     <Button
       startIcon={<OpenIcon sx={{ color: "primary.main" }} />}
       sx={{ py: 1.5, px: 2, borderRadius: 32 }}
-      onClick={() => open(l10n.appUrl)}
+      href={l10n.appUrl}
+      target="_blank"
     >
       <Typography color="text.primary" variant="button">
         {l10n.openAppLabel}
@@ -90,12 +88,21 @@ function AppBarBody() {
         p: 2,
         px: 1.5,
         mx: "auto",
-        ...(top ? paper(1) : {}),
+        transition: (t) => t.transitions.create("box-shadow"),
+        ...(!top
+          ? {
+              ...paper(1),
+              boxShadow: `
+                0px 4px 3px -2px rgb(0 0 0 / 4%),
+                0px 5px 24px 0px rgb(0 0 0 / 4%),
+                0px 10px 48px 0px rgb(0 0 0 / 2%)
+              `,
+            }
+          : {}),
         width: 1000 + 8 * 4,
         maxWidth: "100%",
         height: 64,
         borderRadius: 32,
-        boxShadow: (t) => t.shadows[4],
       }}
     >
       <Box sx={{ pr: 2, pl: 0.5, height: 32, minWidth: 32 }}>

src/components/Footer.tsx

@@ -4,12 +4,14 @@ import { l10n } from "../l10n";
 import { Logo } from "./Logo";
 import { useSm } from "./useSm";
 import { space } from "./space";
+import { usePaper } from "./theme";
 
 export function Footer() {
   const sm = useSm();
+  const paper = usePaper();
   return (
     <>
-      <Box p={3}>
+      <Box p={3} sx={paper(1)}>
         <Stack
           gap={4}
           sx={{
@@ -34,6 +36,7 @@ export function Footer() {
                   </Typography>
                   {links.map(({ label, url }) => (
                     <Button
+                      href={url}
                       sx={{
                         width: "100%",
                         px: 2,
@@ -42,7 +45,6 @@ export function Footer() {
                         justifyContent: "flex-start",
                         textAlign: "left",
                       }}
-                      onClick={() => open(url)}
                     >
                       <Typography variant="subtitle2" color="text.primary">
                         {label}

src/components/Gallery.tsx

@@ -205,9 +205,9 @@ export function Gallery() {
                     scrollSnapAlign: "center",
                   }}
                 >
-                  <ButtonBase
-                    disableRipple
-                    disableTouchRipple
+                  <Button
+                    // disableRipple
+                    // disableTouchRipple
                     sx={{
                       boxShadow: (t) =>
                         `0px 16px 32px ${alpha(
@@ -341,7 +341,7 @@ export function Gallery() {
                         Open in Posthoc
                       </Button>
                     </Stack>
-                  </ButtonBase>
+                  </Button>
                 </Box>
               )
             )}

src/components/GetStartedButton.tsx

@@ -14,10 +14,11 @@ export function GetStartedButton() {
         borderRadius: 32,
         // Light text rendering bias
         fontWeight: mode === "dark" ? 600 : 500,
+        "&:hover": { color: "secondary.contrastText" },
       }}
       variant="contained"
       endIcon={<ArrowForward />}
-      onClick={() => (location.href = l10n.heroCallToActionUrl)}
+      href={l10n.heroCallToActionUrl}
     >
       {l10n.heroCallToAction}
     </Button>

src/components/Hero.tsx

@@ -55,7 +55,7 @@ export function Hero() {
       <Stack direction="row" flexWrap="wrap" gap={2} sx={{ pt: sm ? 0 : 4 }}>
         <GetStartedButton />
         <Button
-          onClick={() => open(l10n.demoVideoUrl)}
+          href={l10n.demoVideoUrl}
           startIcon={<ShowVideoIcon />}
           sx={{
             mx: "auto",

src/css/custom.css

@@ -1,5 +1,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
+
+body {
+  overflow-y: scroll;
+}
+
 html,
 body {
   overflow-x: hidden;

src/l10n/en-au.json

@@ -174,22 +174,38 @@
   "team": [
     {
       "name": "Kevin Zheng",
-      "title": "Posthoc lead developer",
-      "avatar": null,
-      "github": "https://github.com/Spaaaacccee"
+      "title": "Dept. of Data Science & AI",
+      "avatar": "/img/kzheng.png",
+      "github": "https://github.com/spaaaacccee"
     },
     {
-      "name": "Dr Daniel Harabor",
-      "title": "Associate professor",
-      "avatar": null,
-      "github": "https://harabor.net/daniel"
+      "name": "Daniel Harabor",
+      "title": "Dept. of Data Science & AI",
+      "avatar": "https://research.monash.edu/files-asset/19414730/Screen_Shot_2016_12_13_at_9.08.09_AM.png?w=160&f=webp",
+      "github": "https://research.monash.edu/en/persons/daniel-harabor"
     },
     {
-      "name": "Dr Michael Wybrow",
-      "title": "Associate professor",
-      "avatar": null,
-      "github": "https://harabor.net/daniel"
+      "name": "Michael Wybrow",
+      "title": "Dept. of Human Centred Computing",
+      "avatar": "https://research.monash.edu/files-asset/248360374/profile+photo?w=160&f=webp",
+      "github": "https://research.monash.edu/en/persons/michael-wybrow"
     }
   ],
+  "teamContributorTitle": "With unwavering support and generous contributions from",
+  "contributors": [
+    "Francis Anthony",
+    "Karan Batta",
+    "Jay Wingate",
+    "Leo Whitehead",
+    "Can Wang",
+    "Rory Tobin-Underwood",
+    "Mike Chen",
+    "Yue Zhang",
+    "Thomas Nobes",
+    "Ryan Hechenberger",
+    "Mark Carlson",
+    "Andy Li",
+    "(incomplete list)"
+  ],
   "footerCopyright": "Copyright © 2024 Monash University"
 }

src/pages/index.tsx

@@ -1,10 +1,12 @@
-import { PlayArrowOutlined } from "@mui/icons-material";
+import { ArrowDownwardOutlined, PlayArrowOutlined } from "@mui/icons-material";
 import {
   Avatar,
   Box,
   Button,
   CssBaseline,
+  Divider,
   Stack,
+  Typography,
   useTheme,
 } from "@mui/material";
 import Root from "@theme/Root";
@@ -22,8 +24,8 @@ import { SectionTitle } from "../components/SectionTitle";
 import { grid } from "../components/grid";
 import { useSm } from "../components/useSm";
 import { useTitleBar } from "../components/useTitleBar";
-import "./index.module.css";
 import { l10n } from "../l10n";
+import "./index.module.css";
 
 function Content() {
   const sm = useSm();
@@ -95,31 +97,55 @@ function Content() {
                   {l10n.playVideo}
                 </Button>
               </Button>
-
+            </Box>
+            <Box sx={{ pb: 4 }}>
+              <SectionTitle title={l10n.endCallToActionTitle} />
+              <GetStartedButton />
+            </Box>
+            <Box sx={{ pb: 16 }}>
               <SectionTitle
                 anchor="team"
-                title={l10n.teamSectionTitle}
+                title={<ArrowDownwardOutlined />}
                 subtitle={l10n.teamSectionSubtitle}
               />
               <Stack gap={4} sx={grid(260)}>
                 {map(l10n.team, ({ avatar, name, title, github }) => (
-                  <Button
-                    sx={{ p: 0 }}
-                    onClick={() => !!github && open(github)}
-                  >
+                  <Button sx={{ p: 0 }} href={github}>
                     <Card
-                      sx={{ py: 6, width: "100%", color: "text.primary" }}
-                      image={<Avatar sx={{ mb: 4, width: 64, height: 64 }} />}
+                      sx={{
+                        py: 6,
+                        width: "100%",
+                        height: "100%",
+                        color: "text.primary",
+                      }}
+                      image={
+                        <Avatar
+                          src={avatar}
+                          sx={{ mb: 4, width: 64, height: 64 }}
+                        />
+                      }
                       title={name}
-                      subtitle={title}
+                      subtitle={
+                        <span style={{ whiteSpace: "pre" }}>{title}</span>
+                      }
                     />
                   </Button>
                 ))}
               </Stack>
-            </Box>
-            <Box sx={{ pb: 16 }}>
-              <SectionTitle anchor="team" title={l10n.endCallToActionTitle} />
-              <GetStartedButton />
+              <Typography
+                variant="subtitle2"
+                color="text.primary"
+                sx={{ py: 8 }}
+              >
+                {l10n.teamContributorTitle}
+              </Typography>
+              <Stack gap={4} sx={grid(200)}>
+                {map(l10n.contributors, (s) => (
+                  <Typography color="text.primary" variant="subtitle2">
+                    {s}
+                  </Typography>
+                ))}
+              </Stack>
             </Box>
           </Box>
           <Footer />