Update landing site

ShortestPathLab · Jul 29, 2024 · 0151dac · 0151dac
1 parent c3e8da2
commit 0151dac
Show file tree

Hide file tree

Showing 28 changed files with 334 additions and 322 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 
 const config: Config = {
-  title: "Posthoc - The Visualisation Framework for Search",
+  title: "Posthoc - The visualisation framework for search",
   tagline:
     "Posthoc is a way to create simple and effective visualisations from logs to help you understand search.",
   favicon: "img/favicon.ico",

diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -6,7 +6,14 @@ import {
   DragHandleOutlined as MenuIcon,
   LaunchOutlined as OpenIcon,
 } from "@mui/icons-material";
-import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  Typography,
+  useScrollTrigger,
+} from "@mui/material";
 import PopupState, { bindTrigger } from "material-ui-popup-state";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
@@ -16,19 +23,17 @@ import { useMode } from "./ModeContext";
 import { space } from "./space";
 import { usePaper } from "./theme";
 import { useSm } from "./useSm";
+import { PAGE_WIDTH } from "../config";
 
 export function AppBar() {
-  const sm = useSm();
   return (
     <Box
       sx={{
         width: "100%",
         position: "sticky",
-        px: sm ? 1 : 2,
-        pt: sm ? 1 : 4,
         top: 0,
         left: 0,
-        height: 64,
+        height: 72,
         zIndex: (t) => t.zIndex.appBar,
       }}
     >
@@ -42,6 +47,7 @@ function AppBarBody() {
   const sm = useSm();
   const paper = usePaper();
   const [top, setTop] = useState(true);
+  const scrolling = useScrollTrigger();
   useEffect(() => {
     let cancelled = false;
     const f = () => {
@@ -81,87 +87,93 @@ function AppBarBody() {
   );
   return (
     <Stack
-      gap={1}
-      alignItems="center"
-      direction="row"
       sx={{
-        p: 2,
-        px: 1.5,
-        mx: "auto",
-        transition: (t) => t.transitions.create("box-shadow"),
-        ...(!top
-          ? {
+        width: "100%",
+        transition: (t) =>
+          t.transitions.create(["box-shadow", "padding-top", "transform"]),
+        ...(top
+          ? { paddingTop: sm ? 0 : 2 }
+          : {
               ...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,
+              borderBottom: (t) => `1px solid ${t.palette.divider}`,
+              borderRadius: 0,
+            }),
+        ...(scrolling && {
+          transform: `translateY(-100%)`,
+        }),
       }}
     >
-      <Box sx={{ pr: 2, pl: 0.5, height: 32, minWidth: 32 }}>
-        <Logo />
-      </Box>
-      {sm ? (
-        <>
-          <Box sx={{ flex: 1 }}></Box>
-          {openPosthoc}
-          <PopupState variant="popover">
-            {(state) => (
-              <>
-                <IconButton {...bindTrigger(state)}>
-                  <MenuIcon />
-                </IconButton>
-                {createPortal(
-                  <Box
-                    sx={{
-                      ...(state.isOpen
-                        ? { opacity: 1 }
-                        : {
-                            opacity: 0,
-                            pointerEvents: "none",
-                          }),
-                      ...paper(0),
-                      transition: (t) =>
-                        t.transitions.create(["opacity", "backdrop-filter"]),
-                      position: "fixed",
-                      zIndex: (t) => t.zIndex.modal,
-                      top: 0,
-                      left: 0,
-                      width: "100dvw",
-                      height: "100vh",
-                      borderRadius: 0,
-                    }}
-                  >
-                    <Stack gap={4} p={2.5} alignItems="flex-end">
-                      <IconButton onClick={state.close}>
-                        <CloseIcon />
-                      </IconButton>
-                      {darkToggle}
-                      {menu}
-                      {openPosthoc}
-                    </Stack>
-                  </Box>,
-                  document.body
-                )}
-              </>
-            )}
-          </PopupState>
-        </>
-      ) : (
-        <>
-          {menu}
-          {space()}
-          {openPosthoc}
-          {darkToggle}
-        </>
-      )}
+      <Stack
+        gap={1}
+        alignItems="center"
+        direction="row"
+        sx={{
+          p: 2,
+          px: 1.5,
+          mx: "auto",
+          width: PAGE_WIDTH + 8 * 4,
+          maxWidth: "100%",
+          height: 72,
+        }}
+      >
+        <Box sx={{ pr: 2, pl: 0.5, height: 28, minWidth: 28 }}>
+          <Logo />
+        </Box>
+        {sm ? (
+          <>
+            <Box sx={{ flex: 1 }}></Box>
+            {openPosthoc}
+            <PopupState variant="popover">
+              {(state) => (
+                <>
+                  <IconButton {...bindTrigger(state)}>
+                    <MenuIcon />
+                  </IconButton>
+                  {createPortal(
+                    <Box
+                      sx={{
+                        ...(state.isOpen
+                          ? { opacity: 1 }
+                          : {
+                              opacity: 0,
+                              pointerEvents: "none",
+                            }),
+                        ...paper(0),
+                        transition: (t) =>
+                          t.transitions.create(["opacity", "backdrop-filter"]),
+                        position: "fixed",
+                        zIndex: (t) => t.zIndex.modal,
+                        top: 0,
+                        left: 0,
+                        width: "100dvw",
+                        height: "100vh",
+                        borderRadius: 0,
+                      }}
+                    >
+                      <Stack gap={4} p={2.5} alignItems="flex-end">
+                        <IconButton onClick={state.close}>
+                          <CloseIcon />
+                        </IconButton>
+                        {darkToggle}
+                        {menu}
+                        {openPosthoc}
+                      </Stack>
+                    </Box>,
+                    document.body
+                  )}
+                </>
+              )}
+            </PopupState>
+          </>
+        ) : (
+          <>
+            {menu}
+            {space()}
+            {openPosthoc}
+            {darkToggle}
+          </>
+        )}
+      </Stack>
     </Stack>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,6 +5,7 @@ import { Logo } from "./Logo";
 import { useSm } from "./useSm";
 import { space } from "./space";
 import { usePaper } from "./theme";
+import { PAGE_WIDTH } from "../config";
 
 export function Footer() {
   const sm = useSm();
@@ -16,7 +17,7 @@ export function Footer() {
           gap={4}
           sx={{
             maxWidth: "100%",
-            width: 1000,
+            width: PAGE_WIDTH,
             px: sm ? 0 : 3,
             py: 4,
             m: "0 auto",