diff --git a/docs/1-overview.md b/docs/1-overview.md index 6a23030..a7219e5 100644 --- a/docs/1-overview.md +++ b/docs/1-overview.md @@ -4,19 +4,19 @@ sidebar_position: 1 # Overview -**Visualiser** is a visualiser and debugger for spatially-embedded algorithms, especially pathfinding search. +**Posthoc** is a visualiser and debugger for spatially-embedded algorithms, especially pathfinding search. -![Alt text](image.png) +![Alt text](image-1.png) Understanding how algorithms work can be hard. Luckily, pathfinding problems are often occur in have a spatial environment — navigating through roads, corridors, terrain etc. So, it's natural to reason about them visually. For these problems, rather than staring at `cout`/`print` logs or stepping through the code, it would make more sense to see them run in the context their respective environments. -What's more, Visualiser isn't just for pathfinding search. Visualiser is designed to visualise any sort of decision-making over a 2D or 3D space. +What's more, Posthoc isn't just for pathfinding search. Posthoc is designed to visualise any sort of decision-making over a 2D or 3D space. -## What Can I Use Visualiser For? +## What Can I Use Posthoc For? ### Educational -The Visualiser could be use as an learning tool in for learners' understanding of complex algorithms by providing a conducive environment for visualization. Consider the example of the weighted [A\* search](https://en.wikipedia.org/wiki/A*_search_algorithm) problem. Students often find it challenging to conceptualize how various weights assigned to different grid cells or walkable paths can influence the algorithm's decision-making process. The Visualiser bridges this gap, enabling learners to visually comprehend the impact of these weights on the algorithm's pathfinding capabilities. +The Posthoc could be use as an learning tool in for learners' understanding of complex algorithms by providing a conducive environment for visualization. Consider the example of the weighted [A\* search](https://en.wikipedia.org/wiki/A*_search_algorithm) problem. Students often find it challenging to conceptualize how various weights assigned to different grid cells or walkable paths can influence the algorithm's decision-making process. The Posthoc bridges this gap, enabling learners to visually comprehend the impact of these weights on the algorithm's pathfinding capabilities. ![weighted a star](educational.png) @@ -24,7 +24,7 @@ In the illustration provided, the map is designed to mimic a video game environm ### Algorithm Comparison -The Visualiser is able to visualise more than one trace at a time which enables users to be able to compare algorithms side by side which eases the users to see the difference between 2 or more algorithms or solutions. +The Posthoc is able to visualise more than one trace at a time which enables users to be able to compare algorithms side by side which eases the users to see the difference between 2 or more algorithms or solutions. ![comparison between JPS and JPS2+](comparison.png) @@ -32,7 +32,7 @@ In the illustration provided, we are able to see that Jump Point Search or JPS ( ### Debugging Pathfinding Issues -The Visualiser is able to set breakpoints and even allows users to code one within the visualiser! This simplifies identifying and solving problems in algorithm logic or execution. By visually representing each step an algorithm takes, learners can quickly pinpoint where things go wrong or see how an algorithm progresses. +The Posthoc is able to set breakpoints and even allows users to code one within the visualiser! This simplifies identifying and solving problems in algorithm logic or execution. By visually representing each step an algorithm takes, learners can quickly pinpoint where things go wrong or see how an algorithm progresses. ![A* debugging](debugging.png) @@ -40,7 +40,7 @@ In the illustration provided, using the built-in debugger, users are able to set ### Visualising Decisions -The Visualiser has a built-in functionality which converts a trace into a decision tree! +The Posthoc has a built-in functionality which converts a trace into a decision tree! ![decision tree and nine tile](decision.png) @@ -48,7 +48,7 @@ In the illustration provided, using the Tree panel, the visualiser is able to vi Creating visualisations are the best way to get your point across. -## What's So Cool About Visualiser? +## What's So Cool About Posthoc? ### Declarative @@ -62,7 +62,7 @@ Rather than writing your own visualiser, declaratively visualise your pathfindin [TODO] -## When Shouldn't I Use Visualiser? +## When Shouldn't I Use Posthoc? ### Not a Replacement for a Traditional Debugger diff --git a/docs/2-get-visualiser.md b/docs/2-get-visualiser.md index 76e23b5..fdef862 100644 --- a/docs/2-get-visualiser.md +++ b/docs/2-get-visualiser.md @@ -2,11 +2,11 @@ sidebar_position: 2 --- -# Get Visualiser +# Get Posthoc Open the visualiser [here](https://path-visualiser.github.io/app/). -## Install Visualiser as a Progressive Web App +## Install Posthoc as a Progressive Web App You can install the visualiser as a progressive web app, so that it runs in its own window. diff --git a/docs/3-getting started/concepts/protocol.md b/docs/3-getting started/concepts/protocol.md index dd50cd4..5bad6a8 100644 --- a/docs/3-getting started/concepts/protocol.md +++ b/docs/3-getting started/concepts/protocol.md @@ -1,8 +1,8 @@ -# Pathfinding Visualiser Protocol +# Pathfinding Posthoc Protocol _Version 1.0.3_ -The Pathfinding Visualiser Protocol describes the way pathfinding visualisers communicate with pathfinding solvers to deliver an interactive experience. +The Pathfinding Posthoc Protocol describes the way pathfinding visualisers communicate with pathfinding solvers to deliver an interactive experience. The protocol is transport-layer agnostic, and extends the [JSON-RPC 2.0 specifications](https://www.jsonrpc.org/specification). diff --git a/docs/4-user-guide/_category_.json b/docs/4-user-guide/_category_.json index bee39b1..affc302 100644 --- a/docs/4-user-guide/_category_.json +++ b/docs/4-user-guide/_category_.json @@ -1,7 +1,7 @@ { "label": "User Guide", "position": 4, - "collapsed": false, + "collapsed": true, "link": { "type": "generated-index" } diff --git a/docs/4-user-guide/interface.md b/docs/4-user-guide/interface.md index 899fc71..49f5a1e 100644 --- a/docs/4-user-guide/interface.md +++ b/docs/4-user-guide/interface.md @@ -4,7 +4,7 @@ sidebar_position: 2 # User Interface -Visualiser's interface is made of composable panels. You can add, remove, and rearrange the UI to your desire. This allows Visualiser to support a range of tasks, whether you're using it to learn, showcase, or debug algorithms. +Posthoc's interface is made of composable panels. You can add, remove, and rearrange the UI to your desire. This allows Posthoc to support a range of tasks, whether you're using it to learn, showcase, or debug algorithms. ![Alt text](interface.png) @@ -12,7 +12,7 @@ Visualiser's interface is made of composable panels. You can add, remove, and re ## Core Panels -When you first open Visualiser, it displays the following panels: +When you first open Posthoc, it displays the following panels: ### Recipes diff --git a/docs/4-user-guide/steps.md b/docs/4-user-guide/steps.md index 7ac6c5a..1b0ca14 100644 --- a/docs/4-user-guide/steps.md +++ b/docs/4-user-guide/steps.md @@ -4,7 +4,7 @@ sidebar_position: 5 # Steps Panel -Visualiser's steps panel shows a list of steps of the current chosen trace. +Posthoc's steps panel shows a list of steps of the current chosen trace. ![Alt text](steps.png) ## Navigating Through the Steps diff --git a/docs/6-api/_category_.json b/docs/6-api/_category_.json index e2f2e1e..57efc24 100644 --- a/docs/6-api/_category_.json +++ b/docs/6-api/_category_.json @@ -1,7 +1,7 @@ { "label": "API Reference", "position": 6, - "collapsed": false, + "collapsed": true, "link": { "type": "generated-index" } diff --git a/docs/6-api/visualiser-adapter-protocol.md b/docs/6-api/visualiser-adapter-protocol.md index 2d3f230..046de74 100644 --- a/docs/6-api/visualiser-adapter-protocol.md +++ b/docs/6-api/visualiser-adapter-protocol.md @@ -1 +1 @@ -# Visualiser Adapter Protocol +# Posthoc Adapter Protocol diff --git a/docs/7-contributing/_category_.json b/docs/7-contributing/_category_.json index fd88b66..d0d37d8 100644 --- a/docs/7-contributing/_category_.json +++ b/docs/7-contributing/_category_.json @@ -1,7 +1,7 @@ { "label": "Contributing", "position": 7, - "collapsed": false, + "collapsed": true, "link": { "type": "generated-index" } diff --git a/docs/image-1.png b/docs/image-1.png new file mode 100644 index 0000000..5291d76 Binary files /dev/null and b/docs/image-1.png differ diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 568c358..0afe1a7 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: "Visualiser", + title: "Posthoc", tagline: "Visualiser and Debugger for Pathfinding Search", favicon: "img/favicon.ico", titleDelimiter: "-", @@ -38,13 +38,15 @@ const config: Config = { sidebarPath: "./sidebars.ts", // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: "https://github.com/path-visualiser/docs/tree/master", + editUrl: + "https://github.com/path-visualiser/path-visualiser.github.io/tree/master", }, blog: { showReadingTime: true, // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: "https://github.com/path-visualiser/docs/tree/master", + editUrl: + "https://github.com/path-visualiser/path-visualiser.github.io/tree/master", }, // blog: { // showReadingTime: true, @@ -63,10 +65,9 @@ const config: Config = { // Replace with your project's social card image: "img/social-card.jpg", navbar: { - hideOnScroll: true, - title: "Visualiser", + title: "Posthoc", logo: { - alt: "Visualiser Logo", + alt: "Posthoc Logo", src: "img/logo512.png", }, items: [ @@ -79,13 +80,13 @@ const config: Config = { { to: "/blog", label: "Blog", position: "left" }, { href: "https://path-visualiser.github.io/app", - label: "App", + label: "Open Posthoc", position: "right", }, { href: "https://github.com/path-visualiser/app", label: "GitHub", - position: "right", + position: "left", }, { type: "search", @@ -94,7 +95,7 @@ const config: Config = { ], }, footer: { - copyright: "2023 Monash University", + copyright: "Copyright © 2024 Monash University", }, prism: { theme: prismThemes.github, diff --git a/package-lock.json b/package-lock.json index 3b7fc15..ce77da2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,16 +11,23 @@ "@cmfcmf/docusaurus-search-local": "^1.1.0", "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", "@mdx-js/react": "^3.0.0", - "clsx": "^1.2.1", + "@mui/icons-material": "^5.15.15", + "@mui/material": "^5.15.15", + "lodash": "^4.17.21", + "material-ui-popup-state": "^5.1.0", "prism-react-renderer": "^2.1.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-scroll-parallax": "^3.4.5" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.1.1", "@docusaurus/tsconfig": "^3.1.1", "@docusaurus/types": "^3.1.1", + "@types/lodash": "^4.17.0", "typescript": "~5.2.2" }, "engines": { @@ -2105,9 +2112,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", + "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2869,6 +2876,186 @@ "node": ">=18.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react": { + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", + "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.2", + "@emotion/serialize": "^1.1.4", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", + "dependencies": { + "@floating-ui/dom": "^1.6.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -3016,6 +3203,285 @@ "react": ">=16" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/icons-material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.15.tgz", + "integrity": "sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/system/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3090,6 +3556,15 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -3579,6 +4054,12 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, + "node_modules/@types/lodash": { + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz", + "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==", + "dev": true + }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", @@ -3629,9 +4110,9 @@ "integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==" }, "node_modules/@types/prop-types": { - "version": "15.7.10", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz", - "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==" + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/qs": { "version": "6.9.10", @@ -3682,6 +4163,14 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -4237,6 +4726,20 @@ "object.assign": "^4.1.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.6", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz", @@ -4300,6 +4803,11 @@ "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -4720,6 +5228,11 @@ "node": ">=8" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -5432,9 +5945,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debounce": { "version": "1.2.1", @@ -5706,6 +6219,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -6427,6 +6949,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz", @@ -8240,6 +8767,25 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/material-ui-popup-state": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.1.0.tgz", + "integrity": "sha512-kG0xGqdPx3WM6AYnq0h7hCb3gk2M1FM/G/NFQN+HahcyABxCx3EFzLj5mdJICu2NYj0etZ2s7VDhAbrAezkxYg==", + "dependencies": { + "@babel/runtime": "^7.20.6", + "@types/prop-types": "^15.7.3", + "@types/react": "^18.0.26", + "classnames": "^2.2.6", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/mdast-util-directive": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz", @@ -10785,6 +11331,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parallax-controller": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz", + "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==", + "dependencies": { + "bezier-easing": "^2.1.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -12144,6 +12701,36 @@ "react": ">=15" } }, + "node_modules/react-scroll-parallax": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz", + "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==", + "dependencies": { + "parallax-controller": "^1.7.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0", + "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -13373,6 +13960,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index e8bd4ee..dfe827b 100644 --- a/package.json +++ b/package.json @@ -18,16 +18,23 @@ "@cmfcmf/docusaurus-search-local": "^1.1.0", "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", "@mdx-js/react": "^3.0.0", - "clsx": "^1.2.1", + "@mui/icons-material": "^5.15.15", + "@mui/material": "^5.15.15", + "lodash": "^4.17.21", + "material-ui-popup-state": "^5.1.0", "prism-react-renderer": "^2.1.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-scroll-parallax": "^3.4.5" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.1.1", "@docusaurus/tsconfig": "^3.1.1", "@docusaurus/types": "^3.1.1", + "@types/lodash": "^4.17.0", "typescript": "~5.2.2" }, "browserslist": { diff --git a/src/components/theme.ts b/src/components/theme.ts new file mode 100644 index 0000000..55e1728 --- /dev/null +++ b/src/components/theme.ts @@ -0,0 +1,150 @@ +import { + alpha, + colors, + createTheme, + SxProps, + TextFieldProps, + Theme, +} from "@mui/material"; +import { constant, floor, times } from "lodash"; + +export type AccentColor = Exclude; + +export type Shade = keyof (typeof colors)[AccentColor]; + +export const { common, ...accentColors } = colors; + +const shadow = ` + 0px 4px 9px -1px rgb(0 0 0 / 4%), + 0px 5px 24px 0px rgb(0 0 0 / 4%), + 0px 10px 48px 0px rgb(0 0 0 / 4%) + `; + +export const getShade = ( + color: AccentColor = "blue", + mode: "light" | "dark" = "light", + shade?: Shade +) => { + return colors[color][shade ?? (mode === "dark" ? "A100" : "A700")]; +}; + +const fontFamily = `"Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", "Arial", sans-serif`; + +const defaultColor = "#248aff"; + +export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) => + createTheme({ + palette: { + primary: { main: theme ? getShade(theme, mode) : defaultColor }, + mode, + background: + mode === "dark" + ? // ? { default: "#101418", paper: "#14191f" } + { default: "#111317", paper: "#111317" } + : { default: "#ebecef", paper: "#ffffff" }, + }, + typography: { + allVariants: { + fontFamily, + }, + body1: { + fontSize: 16, + }, + body2: { + fontSize: 15, + }, + h1: { + fontSize: 46, + fontWeight: 500, + }, + h2: { + fontSize: 32, + fontWeight: 500, + }, + h3: { + fontSize: 22, + fontWeight: 500, + }, + button: { + textTransform: "none", + fontWeight: 500, + letterSpacing: 0, + backgroundColor: "background.paper", + }, + subtitle2: { + marginTop: 6, + fontWeight: 400, + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + borderRadius: "16px", + }, + }, + }, + MuiPopover: { + styleOverrides: { + paper: { + backgroundImage: + "linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06))", + }, + }, + }, + MuiTooltip: { + styleOverrides: { + tooltip: { + backgroundImage: "linear-gradient(#1c2128, #1c2128)", + fontFamily, + }, + }, + }, + MuiTypography: { + styleOverrides: { + body1: { + fontWeight: 400, + fontSize: "0.875rem", + }, + overline: { + fontWeight: 400, + textTransform: "none", + letterSpacing: 0, + fontSize: "0.875rem", + }, + h4: { + marginBottom: 12, + }, + h6: { + fontWeight: 500, + letterSpacing: -0.4, + }, + }, + }, + }, + shadows: ["", ...times(24, constant(shadow))] as any, + }); + +export function useAcrylic(color?: string): SxProps { + return { + backdropFilter: "blur(32px)", + background: ({ palette }) => alpha(color ?? palette.background.paper, 0.75), + }; +} + +export function usePaper(): (e?: number) => SxProps { + return (elevation: number = 1) => ({ + boxShadow: "none", + borderRadius: 8, + backdropFilter: "blur(32px)", + background: "url(img/noise.png)", + backgroundSize: "32px 32px", + backgroundColor: ({ palette }) => + alpha(palette.action.disabledBackground, elevation * 0.01), + }); +} + +export const textFieldProps = { + variant: "filled", +} satisfies TextFieldProps; diff --git a/src/css/custom.css b/src/css/custom.css index e9169fd..0c82c6c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -8,7 +8,7 @@ /* You can override the default Infima variables here. */ :root { - --aa-primary-color-rgb: 52, 109, 219 !important; + --aa-primary-color-rgb: 36, 138, 255 !important; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-code-font-size: 95%; --ifm-color-black: #000000; @@ -22,7 +22,7 @@ --ifm-color-gray-600: #8899a8; --ifm-color-gray-700: #606770; --ifm-color-gray-800: #444950; - --ifm-color-gray-900: #3b454e; + --ifm-color-gray-900: rgb(59, 69, 78, 1); --ifm-color-primary-dark: #2572ff; --ifm-color-primary-darker: #1567ff; --ifm-color-primary-darkest: #0050e4; @@ -38,18 +38,19 @@ "Segoe UI Symbol"; --ifm-font-weight-black: 700; --ifm-font-weight-bold: 600; - --ifm-font-weight-light: 300; + --ifm-font-weight-semibold: 500; --ifm-font-weight-normal: 400; - --ifm-font-weight-semibold: 400; + --ifm-font-weight-light: 300; --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.08); - --ifm-hover-overlay: #85a3e01a; + --ifm-hover-overlay: hsla(220, 59%, 70%, 0.102); --ifm-menu-link-padding-vertical: 0.5rem; --ifm-navbar-height: 4rem; + --ifm-menu-color-background-active: var(--ifm-menu-color-background-hover); } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme="dark"] { - --ifm-color-primary: #648fe4; + --ifm-color-primary: #248aff; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; --ifm-color-primary-darkest: #1a8870; @@ -57,10 +58,61 @@ --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-background-color: #111317 !important; + --aa-background-color-rgb: 17, 19, 23 !important; + --ifm-background-surface-color: rgb(17 19 23 / 80%) !important; + --ifm-color-content: #b8b9ba !important; +} + +.navbar__inner { + max-width: 1450px; + margin: 0 auto; +} + +.theme-doc-sidebar-container { + border: none !important; +} + +.navbar--fixed-top { + backdrop-filter: blur(32px); + /* background-image: url("/img/noise.png"); */ + background-size: 64px 64px; + border-bottom: 1px solid var(--ifm-menu-color-background-hover); +} + +.navbar--fixed-top.navbar-sidebar--show { + backdrop-filter: none; +} + +.navbar-sidebar--show .navbar-sidebar { + backdrop-filter: blur(32px); + background-image: url("/img/noise.png"); + background-size: 64px 64px; +} + +.navbar__link, +.navbar__title { + font-size: 15px; + margin-left: 6px; +} + +.navbar__link > svg { + display: none; +} + +.menu { + padding: 16px !important; + /* padding-left: 0 !important; */ +} + +.navbar-sidebar__back { + background-color: transparent; } .menu__link { font-size: 0.9rem; + padding: 12px; + padding-left: 16px; } .menu__link--active { @@ -83,14 +135,14 @@ } .navbar__title { - font-weight: var(--ifm-font-weight-bold); + font-weight: var(--ifm-font-weight-semibold); } .markdown h1:first-child, header > h1 { font-size: 2.5rem; - font-weight: var(--ifm-font-weight-black); - margin: calc(1.25 * var(--ifm-leading)) auto; + font-weight: var(--ifm-font-weight-bold); + padding-top: 4px; } header > h1 { @@ -102,16 +154,12 @@ header > p { .markdown > h2 { --ifm-h2-font-size: 1.25rem; - font-weight: var(--ifm-font-weight-black); + font-weight: var(--ifm-font-weight-bold); } .markdown > h3 { --ifm-h3-font-size: 1rem; - font-weight: var(--ifm-font-weight-black); -} - -.theme-doc-toc-mobile { - margin-bottom: calc(var(--ifm-leading) * 0) !important; + font-weight: var(--ifm-font-weight-bold); } .theme-doc-toc-mobile > button { @@ -130,23 +178,51 @@ header > p { box-shadow: none !important; } +.menu__link, +.menu__caret, +.menu__list-item-collapsible { + border-radius: 12px; +} + /* .theme-doc-sidebar-item-link-level-1, .theme-doc-sidebar-item-category-level-1 { margin-top: calc(0.5 * var(--ifm-leading)) !important; } */ -.footer__copyright { - color: var(--ifm-color-gray-600); +.footer { + background-color: transparent; + border-top: 1px solid var(--ifm-hover-overlay); font-size: 0.9rem; + color: var(--ifm-color-gray-600); +} + +.table-of-contents__left-border { + border-left: 0px solid var(--ifm-hover-overlay) !important; + padding-top: 0; + padding-bottom: 0; +} +.table-of-contents__left-border .table-of-contents__link { + padding: 4px 0; +} +.table-of-contents__left-border + .table-of-contents__link:not(.table-of-contents__link--active) { + color: var(--ifm --ifm-color-content); +} +.table-of-contents__left-border + li + ul + li + .table-of-contents__link:not(.table-of-contents__link--active) { + color: var(--ifm-color-gray-600); } .dsla-search-field .aa-DetachedSearchButton { - background-color: var(--ifm-color-gray-200); + background-color: var(--ifm-menu-color-background-hover); border: none; font-size: 0.9rem; - color: var(--ifm-color-gray-800); + color: var(--ifm-color-gray-700); padding: var(--ifm-global-spacing); - border-radius: 0.25rem; + border-radius: 12px; min-width: 180px; } @@ -155,14 +231,36 @@ header > p { margin-left: calc(-0.75 * var(--ifm-global-spacing)); transform: scale(0.85); } +.theme-doc-toc-mobile { + background-color: var(--ifm-hover-overlay) !important; +} b { font-weight: 600; } +.theme-doc-breadcrumbs { + display: none; +} + +.main-wrapper img { + border: 1px solid var(--ifm-menu-color-background-hover); + border-radius: 12px; + box-shadow: 0px 4px 9px -1px rgb(0 0 0 / 4%), 0px 5px 24px 0px rgb(0 0 0 / 4%), + 0px 10px 48px 0px rgb(0 0 0 / 4%); +} @media screen and (min-width: 996px) { .theme-doc-breadcrumbs { margin-top: var(--ifm-leading) !important; margin-bottom: 0 !important; } + div.col.docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module { + padding: 0 64px; + } + + .main-wrapper { + width: 1500px; + margin: 2vw auto; + max-width: 100%; + } } diff --git a/src/pages/en-au.json b/src/pages/en-au.json new file mode 100644 index 0000000..f9234a9 --- /dev/null +++ b/src/pages/en-au.json @@ -0,0 +1,93 @@ +{ + "logoUrl": "img/logo192.png", + "closeVideo": "Close video", + "backdropVideoUrl": "media/clip.mp4", + "backdropVideoMime": "video/mp4", + "demoVideoUrl": "media/clip.mp4", + "demoVideoMime": "video/mp4", + "appUrl": "https://posthoc.pathfinding.ai", + "sections": [ + { "key": "docs", "label": "Docs", "url": "./docs/overview" }, + { "key": "blog", "label": "Blog", "url": "./blog" }, + { + "key": "github", + "label": "Github", + "url": "https://github.com/shortestpathlab/posthoc" + } + ], + "heroTitle": "Understand your solver's decision-making process visually.", + "heroSubtitle": "Posthoc is zero-commitment and is useful from the get-go.", + "heroCallToAction": "Get started", + "demoSectionTitle": "demoSectionTitle", + "demoSectionSubtitle": "demoSectionSubtitle", + "featuresSectionTitle": "featuresSectionTitle", + "featuresSectionSubtitle": "featuresSectionSubtitle", + "teamSectionTitle": "teamSectionTitle", + "teamSectionSubtitle": "teamSectionSubtitle", + "features": [ + { + "image": null, + "title": "", + "subtitle": "" + } + ], + "docsSectionTitle": "docsSectionTitle", + "docsSectionSubtitle": "docsSectionSubtitle", + "docsUrlGeneric": "./docs/overview", + "docs": [ + { + "key": "os", + "label": "OS", + "options": [ + { "key": "linux", "label": "Linux" }, + { "key": "windows", "label": "Windows" }, + { "key": "macos", "label": "MacOS" }, + { "key": "other", "label": "Other" } + ] + }, + { + "key": "lang", + "label": "Language", + "options": [ + { "key": "cpp", "label": "C++" }, + { "key": "python", "label": "Python" }, + { "key": "rust", "label": "Rust" }, + { "key": "other", "label": "Other" } + ] + } + ], + "docsCallToAction": "See Posthoc docs for %os in %lang", + "docsCallToActionGeneric": "See how Posthoc works for you", + "showVideo": "Show video", + "footerLinks": [ + { + "title": "Posthoc", + "links": [ + { + "label": "Open Posthoc", + "url": "https://posthoc.pathfinding.ai" + }, + { "label": "Documentation", "url": "./docs/overview" }, + { + "label": "Github", + "url": "https://github.com/shortestpathlab/posthoc" + } + ] + }, + { + "title": "ShortestPathLab", + "links": [ + { + "label": "Home", + "url": "https://pathfinding.ai/" + }, + { "label": "Github", "url": "https://github.com/ShortestPathLab" } + ] + }, + { + "title": "Monash Optimisation", + "links": [{ "label": "Home", "url": "https://www.monash.edu" }] + } + ], + "footerCopyright": "Copyright © 2024 Monash University" +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5d..679c38b 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,23 +1,74 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap"); -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; +html, +body, +#root { + background-color: #1c2128 !important; + width: 100%; + height: 100%; + user-select: none; overflow: hidden; + font-family: "Inter", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", "Arial", sans-serif !important; } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } +body { + overflow: hidden; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +code { + font-family: "Roboto Mono", "Consolas", "Courier New", Courier, monospace; + transform: translateY(-0.75px); + display: block; +} + +@property --scrollbar-size { + syntax: ""; + inherits: true; + initial-value: 2px; } -.buttons { - display: flex; - align-items: center; - justify-content: center; +@media (pointer: fine) { + * { + scrollbar-color: inherit transparent; + scrollbar-width: var(--scrollbar-size); + transition: --scrollbar-size 300ms linear; + } + *::-webkit-scrollbar { + width: var(--scrollbar-size); + height: 14px; + background-color: transparent; + } + .MuiPaper-root:hover { + --scrollbar-size: 10px; + } + *::-webkit-scrollbar-track { + background: inherit; + } + *::-webkit-scrollbar-thumb { + background-color: color-mix(in srgb, currentColor 20%, transparent); + opacity: 0.5; + height: 14px; + min-height: 64px; + width: var(--scrollbar-size); + padding: 2px; + border: 2px solid transparent; + border-left: 6px solid transparent; + background-clip: padding-box; + } + *::-webkit-scrollbar-thumb:hover { + border-left: 0px solid transparent; + background-color: color-mix(in srgb, currentColor 25%, transparent); + } + *::-webkit-scrollbar-thumb:active { + border-left: 0px solid transparent; + background-color: color-mix(in srgb, currentColor 30%, transparent); + } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2ac7faa..9196796 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,11 +1,568 @@ -import Layout from "@theme/Layout"; +import { + ArrowBack, + ArrowForward, + FilterTiltShiftOutlined, + Menu, + PlayArrowOutlined, + SetMealSharp, +} from "@mui/icons-material"; +import { + Box, + Button, + ButtonBase, + CssBaseline, + Divider, + IconButton, + Popover, + Stack, + StackProps, + SxProps, + Theme, + ThemeProvider, + Typography, + alpha, + useMediaQuery, + useScrollTrigger, +} from "@mui/material"; +import { Dictionary, find, first, keyBy, mapValues, times } from "lodash"; +import PopupState, { bindPopover, bindTrigger } from "material-ui-popup-state"; +import { + ComponentProps, + ReactNode as RN, + useEffect, + useReducer, + useRef, + useState, +} from "react"; +import l11n from "./en-au.json"; +import { makeTheme, usePaper } from "../components/theme"; -import { useEffect } from "react"; +const theme = makeTheme("dark"); -export default function Home() { - useEffect(() => location.replace("./docs/overview")); +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"), + pointerEvents: showVideo ? "none" : "all", +}); + +const space = (n = 1) => times(n, () => ); + +function useSm() { + return useMediaQuery("(max-width: 580px)"); +} + +function useScrollListener(setShowVideo: (b: boolean) => void) { + useEffect(() => { + let prevScrollTop = document.documentElement.scrollTop; + const f = () => { + const nextScrollTop = document.documentElement.scrollTop; + if (nextScrollTop > prevScrollTop) { + setShowVideo(false); + } + prevScrollTop = nextScrollTop; + }; + addEventListener("scroll", f); + return () => removeEventListener("scroll", f); + }, [setShowVideo]); +} + +function AppBar({ showVideo }: SV) { + const paper = usePaper(); + const sm = useSm(); + const top = useScrollTrigger({ threshold: 0, disableHysteresis: true }); + const menu = l11n.sections.map(({ url, label }) => ( + open(url)} + > + + {label} + + + )); + const openPosthoc = ( + + ); + return ( + t.zIndex.appBar, + ...getShowVideoOpacityStyle(showVideo), + }} + > + + t.transitions.create(["background-color", "backdrop-filter"]), + ...(top + ? { + ...paper(1), + } + : {}), + width: 1000, + maxWidth: "100%", + height: 64, + borderRadius: 9, + }} + > + + + + {sm ? ( + <> + + {openPosthoc} + + {(state) => ( + <> + + + + + + {menu} + + + + )} + + + ) : ( + <> + {menu} + {space()} + {openPosthoc} + + )} + + + ); +} + +function Logo(props: ComponentProps<"img">) { + return ; +} + +type SV = { + showVideo?: boolean; + onShowVideo?: (b: boolean) => void; +}; + +function Hero({ showVideo, onShowVideo }: SV) { + return ( + + {space()} + + {l11n.heroTitle} + + + {l11n.heroSubtitle} + + + {space()} + + {space(2)} + + ); +} + +function SectionTitle({ + title, + subtitle, + anchor, +}: { + title?: RN; + subtitle?: RN; + anchor?: string; +}) { + return ( + + {title ?? "Title"} + + {subtitle ?? "Subtitle"} + + + ); +} + +function Card({ + image, + title, + subtitle, + ...props +}: { + image?: RN; + title?: RN; + subtitle?: RN; +} & StackProps) { + const paper = usePaper(); + return ( + + {image ?? } + {title ?? "Title"} + + {subtitle ?? "Subtitle"} + + + ); +} + +function DocSelector() { + const [selection, reduce] = useReducer( + (a: Dictionary, b: Dictionary) => ({ ...a, ...b }), + mapValues(keyBy(l11n.docs, "key"), (v) => first(v.options).key) + ); + const paper = usePaper(); + const label = (k1: string, k2: string) => + find(find(l11n.docs, { key: k1 }).options, { key: k2 }).label; + return ( + <> + + {l11n.docs.map(({ label, options, key }) => ( + + {label} + + {options.map((option) => ( + + ))} + + + ))} + + + + ); +} +function Background({ showVideo, onShowVideo }: SV) { + const paper = usePaper(); + const ref = useRef(); + let cancelled = false; + useEffect(() => { + const f = () => { + if (ref.current && !cancelled) { + ref.current.style.transform = `translateY(${ + document.documentElement.scrollTop * -0.75 + }px)`; + requestAnimationFrame(f); + } + }; + requestAnimationFrame(f); + f(); + return () => { + cancelled = true; + }; + }, []); return ( - + <> + t.transitions.create("z-index"), + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + t.transitions.create("background"), + ...getShowVideoOpacityStyle(showVideo), + background: (t) => ` + linear-gradient(to bottom, ${alpha( + t.palette.background.default, + 0.6 + )} 60%, ${t.palette.background.default}) + `, + }} + > + + + + + ); } + +function Footer() { + const paper = usePaper(); + return ( + <> + + + + + + {l11n.footerLinks.map(({ title, links }) => ( + + + {title} + + {links.map(({ label, url }) => ( + open(url)} + > + + {label} + + + ))} + + ))} + + + {space()} + + + {l11n.footerCopyright} + + + + + ); +} + +export default function Home() { + const paper = usePaper(); + const [showVideo, setShowVideo] = useState(false); + useScrollListener(setShowVideo); + useVideoStartController(showVideo); + return ( + + + + + + + + + + + + + {times(6, () => ( + } /> + ))} + + + + + + {times(3, () => ( + + ))} + + + +