diff --git a/docs/0-get-started.mdx b/docs/0-get-started.mdx new file mode 100644 index 0000000..7833b75 --- /dev/null +++ b/docs/0-get-started.mdx @@ -0,0 +1,39 @@ +--- +sidebar_position: 0 +title: Get started +slug: get-started +--- + +import Card from "../src/components/ActionCard"; +import { grid } from "../src/components/grid"; +import { Stack } from "@mui/material"; +import imageA from "./image-3.png"; +import imageB from "./30531.png"; +import imageC from "./image-9.png"; + +# Hey there! + +We're excited to have you here. 😊 + +Posthoc is a way to build quick-and-dirty visualisations ✨ for sequential decision-making algorithms, such as search algorithms. 🚀 Just print logs as [search traces](./search-trace) and drop those into the [Posthoc visualiser](./visualiser/overview). + + + open("https://posthoc.pathfinding.ai")} + image={imageA} + /> + open("https://youtu.be/qVpHPYRi6GY")} + image={imageB} + /> + open("http://localhost:3000/docs/overview")} + image={imageC} + /> + diff --git a/docs/2-search-trace.md b/docs/2-search-trace.md index 57fdfd3..ab158ba 100644 --- a/docs/2-search-trace.md +++ b/docs/2-search-trace.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 2 --- # Search trace diff --git a/docs/3-visualiser/overview.md b/docs/3-visualiser/overview.md index c8bd6d7..f90694b 100644 --- a/docs/3-visualiser/overview.md +++ b/docs/3-visualiser/overview.md @@ -8,7 +8,6 @@ Posthoc visualises [search traces](/docs/search-trace). It gives you a variety o tools to help you analyse and debug your algorithm. It's quick to get started and install-free — even better, it's robust and performant enough to support the largest of problem instances. - ![Complex view](../complex-view.png) ## Get Posthoc diff --git a/docs/30531.png b/docs/30531.png new file mode 100644 index 0000000..df838e9 Binary files /dev/null and b/docs/30531.png differ diff --git a/docs/4-visualiser-adapter-protocol.md b/docs/4-visualiser-adapter-protocol.md index 257201f..1293949 100644 --- a/docs/4-visualiser-adapter-protocol.md +++ b/docs/4-visualiser-adapter-protocol.md @@ -1,4 +1,5 @@ --- +sidebar_position: 4 title: Visualiser Adapter Protocol ⚠️ --- diff --git a/docs/image-3.png b/docs/image-3.png new file mode 100644 index 0000000..942222d Binary files /dev/null and b/docs/image-3.png differ diff --git a/docs/image-5.png b/docs/image-5.png new file mode 100644 index 0000000..1d464d6 Binary files /dev/null and b/docs/image-5.png differ diff --git a/docs/image-9.png b/docs/image-9.png new file mode 100644 index 0000000..ffce041 Binary files /dev/null and b/docs/image-9.png differ diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx new file mode 100644 index 0000000..f3fc846 --- /dev/null +++ b/src/components/ActionCard.tsx @@ -0,0 +1,65 @@ +import { ArrowForwardOutlined } from "@mui/icons-material"; +import { + Box, + ButtonBase, + Card, + CardProps, + Stack, + Typography, +} from "@mui/material"; +import { ReactNode } from "react"; + +type Props = { + primary?: ReactNode; + secondary?: ReactNode; + image?: string; +}; + +export default function ActionCard({ + primary, + secondary, + image, + ...props +}: Props & CardProps) { + return ( + t.shape.borderRadius, + p: 0, + }} + > + t.shape.borderRadius, + border: (t) => `1px solid ${t.palette.divider}`, + ...props.sx, + }} + > + + + + + + {primary} + + {secondary} + + + + + ); +} diff --git a/src/components/grid.tsx b/src/components/grid.tsx new file mode 100644 index 0000000..8c3669b --- /dev/null +++ b/src/components/grid.tsx @@ -0,0 +1,5 @@ +export const grid = (size: number) => ({ + display: "grid", + gridAutoFlow: "row", + gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`, +}); diff --git a/src/components/theme.ts b/src/components/theme.ts index d1cc479..5ff0f8d 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -15,9 +15,9 @@ export type Shade = keyof (typeof colors)[AccentColor]; export const { common, ...accentColors } = colors; const shadow = ` - 0px 4px 9px -1px rgb(0 0 0 / 4%), + 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 / 4%) + 0px 10px 48px 0px rgb(0 0 0 / 2%) `; export const getShade = ( diff --git a/src/pages/en-au.json b/src/pages/en-au.json index e36a92b..12f3535 100644 --- a/src/pages/en-au.json +++ b/src/pages/en-au.json @@ -44,7 +44,7 @@ "heroTitle": "Understand decision-making processes intuitively.", "heroSubtitle": "Posthoc is a zero-commitment visualiser that is useful from the get-go.", "heroCallToAction": "Get started", - "heroCallToActionUrl": "./docs/overview", + "heroCallToActionUrl": "./docs/get-started", "demoSectionTitle": "Accepted into the ICAPS 24 Demo Track", "demoSectionSubtitle": "We're excited to present Posthoc to the search and planning community", "featuresSectionTitle": "Features", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 93720bd..e9f5a78 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -45,15 +45,10 @@ import { import { createPortal } from "react-dom"; import { makeTheme, usePaper } from "../components/theme"; import l10n from "./en-au.json"; +import { grid } from "../components/grid"; const theme = makeTheme("dark"); -const grid = (size: number) => ({ - display: "grid", - gridAutoFlow: "row", - gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`, -}); - const getShowVideoOpacityStyle = (showVideo?: boolean): SxProps => ({ opacity: +!showVideo, transition: (t) => t.transitions.create("opacity"),