From 0151dac4fa92066ad31a40fcb1d61544d27353cb Mon Sep 17 00:00:00 2001 From: spaaaacccee Date: Mon, 29 Jul 2024 18:22:03 +1000 Subject: [PATCH] Update landing site --- docusaurus.config.ts | 2 +- src/components/AppBar.tsx | 176 ++++++------ src/components/Footer.tsx | 3 +- src/components/Gallery.tsx | 144 +++++----- src/components/GetStartedButton.tsx | 14 +- src/components/Hero.tsx | 33 ++- src/components/Logo.tsx | 2 +- src/components/theme.ts | 21 +- src/config.tsx | 1 + src/l10n/en-au.json | 8 +- src/pages/index.tsx | 250 +++++++++--------- src/theme/Root.js | 2 +- static/img/gallery/astar.png | Bin 369506 -> 197506 bytes static/img/gallery/complex-view.png | Bin 509757 -> 277733 bytes static/img/gallery/image-3.png | Bin 283401 -> 154911 bytes static/img/gallery/image-7.png | Bin 225121 -> 159435 bytes static/img/gallery/mcp.png | Bin 717923 -> 269850 bytes .../gallery/network-bidirectional-a-star.png | Bin 874607 -> 309559 bytes static/img/gallery/polyanya.png | Bin 340233 -> 172523 bytes static/img/gallery/room-detection.png | Bin 394767 -> 199946 bytes .../gallery/temp/astar.png:Zone.Identifier | 0 .../temp/complex-view.png:Zone.Identifier | 0 .../gallery/temp/image-3.png:Zone.Identifier | 0 .../gallery/temp/image-7.png:Zone.Identifier | 0 .../img/gallery/temp/mcp.png:Zone.Identifier | 0 ...k-bidirectional-a-star.png:Zone.Identifier | 0 .../gallery/temp/polyanya.png:Zone.Identifier | 0 .../temp/room-detection.png:Zone.Identifier | 0 28 files changed, 334 insertions(+), 322 deletions(-) create mode 100644 src/config.tsx create mode 100644 static/img/gallery/temp/astar.png:Zone.Identifier create mode 100644 static/img/gallery/temp/complex-view.png:Zone.Identifier create mode 100644 static/img/gallery/temp/image-3.png:Zone.Identifier create mode 100644 static/img/gallery/temp/image-7.png:Zone.Identifier create mode 100644 static/img/gallery/temp/mcp.png:Zone.Identifier create mode 100644 static/img/gallery/temp/network-bidirectional-a-star.png:Zone.Identifier create mode 100644 static/img/gallery/temp/polyanya.png:Zone.Identifier create mode 100644 static/img/gallery/temp/room-detection.png:Zone.Identifier diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c4663ff..52fce8e 100644 --- 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 index f996bca..6c391b3 100644 --- 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 ( 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 ( 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%)`, + }), }} > - - - - {sm ? ( - <> - - {openPosthoc} - - {(state) => ( - <> - - - - {createPortal( - - t.transitions.create(["opacity", "backdrop-filter"]), - position: "fixed", - zIndex: (t) => t.zIndex.modal, - top: 0, - left: 0, - width: "100dvw", - height: "100vh", - borderRadius: 0, - }} - > - - - - - {darkToggle} - {menu} - {openPosthoc} - - , - document.body - )} - - )} - - - ) : ( - <> - {menu} - {space()} - {openPosthoc} - {darkToggle} - - )} + + + + + {sm ? ( + <> + + {openPosthoc} + + {(state) => ( + <> + + + + {createPortal( + + t.transitions.create(["opacity", "backdrop-filter"]), + position: "fixed", + zIndex: (t) => t.zIndex.modal, + top: 0, + left: 0, + width: "100dvw", + height: "100vh", + borderRadius: 0, + }} + > + + + + + {darkToggle} + {menu} + {openPosthoc} + + , + document.body + )} + + )} + + + ) : ( + <> + {menu} + {space()} + {openPosthoc} + {darkToggle} + + )} + ); } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9f8eda9..f6556e8 100644 --- 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", diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx index ff86bac..8e1ed74 100644 --- a/src/components/Gallery.tsx +++ b/src/components/Gallery.tsx @@ -206,9 +206,9 @@ export function Gallery() { }} > diff --git a/src/components/GetStartedButton.tsx b/src/components/GetStartedButton.tsx index bda4de9..a61e149 100644 --- a/src/components/GetStartedButton.tsx +++ b/src/components/GetStartedButton.tsx @@ -1,21 +1,11 @@ import { ArrowForward } from "@mui/icons-material"; -import { Button, useTheme } from "@mui/material"; +import { Button } from "@mui/material"; import { l10n } from "../l10n"; export function GetStartedButton() { - const mode = useTheme().palette.mode; return ( + {l10n.playVideo} - - - - - - - } - subtitle={l10n.teamSectionSubtitle} - /> - - {map(l10n.team, ({ avatar, name, title, github }) => ( - - ))} - - - {l10n.teamContributorTitle} - - - {map(l10n.contributors, (s) => ( - - {s} - - ))} - - - {l10n.teamSupporterTitle} - - - {map(l10n.supporters, (s) => ( - - {s} - - ))} - - + + + + + + + + } + subtitle={l10n.teamSectionSubtitle} + /> + + {map(l10n.team, ({ avatar, name, title, github }) => ( + + ))} + + + {l10n.teamContributorTitle} + + + {map(l10n.contributors, (s) => ( + + {s} + + ))} + + + {l10n.teamSupporterTitle} + + + {map(l10n.supporters, (s) => ( + + {s} + + ))} + -