Merge pull request #2122 from finos/tm-redesign-ii

Update docs/branding

Author: texodus

README.md

@@ -1,10 +1,13 @@
-![Perspective](https://github.com/finos/perspective/blob/master/docs/static/img/logo/logo-light.png?raw=true#gh-light-mode-only)
-![Perspective](https://github.com/finos/perspective/blob/master/docs/static/img/logo/logo-dark.png?raw=true#gh-dark-mode-only)
+<br />
+
+![Perspective](https://github.com/finos/perspective/blob/tm-redesign-ii/docs/static/svg/perspective-logo-light.svg?raw=true#gh-light-mode-only)![Perspective](https://github.com/finos/perspective/blob/tm-redesign-ii/docs/static/svg/perspective-logo-dark.svg?raw=true#gh-dark-mode-only)
 
 [![npm](https://img.shields.io/npm/v/@finos/perspective.svg?style=flat)](https://www.npmjs.com/package/@finos/perspective)
 [![PyPI](https://img.shields.io/pypi/v/perspective-python.svg?style=flat)](https://pypi.python.org/pypi/perspective-python)
 [![Build Status](https://github.com/finos/perspective/actions/workflows/build.yml/badge.svg?branch=master&event=push)](https://github.com/finos/perspective/actions/workflows/build.yml)
 
+<br/>
+
 Perspective is an <i>interactive</i> analytics and data visualization component,
 which is especially well-suited for <i>large</i> and/or <i>streaming</i>
 datasets. Use it to create user-configurable reports, dashboards, notebooks and
@@ -31,7 +34,7 @@ and/or [Jupyterlab](https://jupyterlab.readthedocs.io/en/stable/).
 ### Examples
 
 <!-- Examples -->
-<table><tbody><tr><td>magic</td><td>nft</td><td>nypd ccrb</td></tr><tr><td><a href="https://texodus.github.io/mtg-perspective/?seasons-in-the-abyss-67"><img height="125" src="https://perspective.finos.org/img/mtg_preview.png"></img></a></td><td><a href="https://sc1f.github.io/pudgy-penguin-perspective/"><img height="125" src="https://raw.githubusercontent.com/sc1f/pudgy-penguin-perspective/pages/meta.png"></img></a></td><td><a href="https://texodus.github.io/nypd-ccrb/"><img height="125" src="https://texodus.github.io/nypd-ccrb/preview.png"></img></a></td></tr><tr><td>jupyterlab</td><td>fractal</td><td>raycasting</td></tr><tr><td><a href="http://beta.mybinder.org/v2/gh/finos/perspective/master?urlpath=lab/tree/examples/jupyter-notebooks"><img height="125" src="https://perspective.finos.org/img/jupyterlab.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=fractal"><img height="125" src="https://perspective.finos.org/blocks/fractal/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=raycasting"><img height="125" src="https://perspective.finos.org/blocks/raycasting/preview.png"></img></a></td></tr><tr><td>evictions</td><td>streaming</td><td>covid</td></tr><tr><td><a href="https://perspective.finos.org/block?example=evictions"><img height="125" src="https://perspective.finos.org/blocks/evictions/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=streaming"><img height="125" src="https://perspective.finos.org/blocks/streaming/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=covid"><img height="125" src="https://perspective.finos.org/blocks/covid/preview.png"></img></a></td></tr><tr><td>movies</td><td>superstore</td><td>citibike</td></tr><tr><td><a href="https://perspective.finos.org/block?example=movies"><img height="125" src="https://perspective.finos.org/blocks/movies/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=superstore"><img height="125" src="https://perspective.finos.org/blocks/superstore/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=citibike"><img height="125" src="https://perspective.finos.org/blocks/citibike/preview.png"></img></a></td></tr><tr><td>olympics</td><td>editable</td><td>csv</td></tr><tr><td><a href="https://perspective.finos.org/block?example=olympics"><img height="125" src="https://perspective.finos.org/blocks/olympics/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=editable"><img height="125" src="https://perspective.finos.org/blocks/editable/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=csv"><img height="125" src="https://perspective.finos.org/blocks/csv/preview.png"></img></a></td></tr></tbody></table>
+<table><tbody><tr><td><a href="https://texodus.github.io/mtg-perspective/?seasons-in-the-abyss-67">magic<img height="125" src="https://perspective.finos.org/img/mtg_preview.png"></img></a></td><td><a href="https://sc1f.github.io/pudgy-penguin-perspective/">nft<img height="125" src="https://raw.githubusercontent.com/sc1f/pudgy-penguin-perspective/pages/meta.png"></img></a></td><td><a href="https://texodus.github.io/nypd-ccrb/">nypd ccrb<img height="125" src="https://texodus.github.io/nypd-ccrb/preview.png"></img></a></td></tr><tr><td><a href="http://beta.mybinder.org/v2/gh/finos/perspective/master?urlpath=lab/tree/examples/jupyter-notebooks">jupyterlab<img height="125" src="https://perspective.finos.org/img/jupyterlab.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=fractal">fractal<img height="125" src="https://perspective.finos.org/blocks/fractal/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=raycasting">raycasting<img height="125" src="https://perspective.finos.org/blocks/raycasting/preview.png"></img></a></td></tr><tr><td><a href="https://perspective.finos.org/block?example=evictions">evictions<img height="125" src="https://perspective.finos.org/blocks/evictions/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=streaming">streaming<img height="125" src="https://perspective.finos.org/blocks/streaming/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=covid">covid<img height="125" src="https://perspective.finos.org/blocks/covid/preview.png"></img></a></td></tr><tr><td><a href="https://perspective.finos.org/block?example=movies">movies<img height="125" src="https://perspective.finos.org/blocks/movies/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=superstore">superstore<img height="125" src="https://perspective.finos.org/blocks/superstore/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=citibike">citibike<img height="125" src="https://perspective.finos.org/blocks/citibike/preview.png"></img></a></td></tr><tr><td><a href="https://perspective.finos.org/block?example=olympics">olympics<img height="125" src="https://perspective.finos.org/blocks/olympics/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=editable">editable<img height="125" src="https://perspective.finos.org/blocks/editable/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=csv">csv<img height="125" src="https://perspective.finos.org/blocks/csv/preview.png"></img></a></td></tr></tbody></table>
 <!-- Examples -->
 
 ### Documentation

docs/build.js

@@ -116,6 +116,9 @@ function template(is_dark) {
                 right: 0;
                 bottom: 0;
             }
+            perspective-viewer[theme="Pro Light"] {
+                --plugin--background:#f2f4f6
+            }
         </style>
     </head>
     <body>

docs/docusaurus.config.js

@@ -97,7 +97,7 @@ const config = {
                 // title: "Perspective",
                 logo: {
                     alt: "Perspective",
-                    src: "img/logo/logo-light.png",
+                    src: "svg/perspective-logo-light.svg",
                 },
                 items: [
                     // {to: "/blog", label: "News", position: "right"},
@@ -120,7 +120,6 @@ const config = {
                 ],
             },
             footer: {
-                style: "dark",
                 links: [
                     {
                         title: "Docs",

docs/src/components/Demo/index.js

@@ -62,7 +62,6 @@ export function PerspectiveViewerDemo() {
     const viewerRef = useRef();
     const hoverCallback = useCallback(
         (event) => {
-            console.log("WIP");
             setSelected(event.target.getAttribute("id"));
             select(viewerRef.current, `${event.target.getAttribute("id")}`);
         },

docs/src/components/Demo/styles.module.css

@@ -1,6 +1,6 @@
 .heroBannerViewer {
-    width: 1000px;
-    height: 600px;
+    width: 900px;
+    height: 550px;
     margin-top: 24px;
     margin-bottom: 48px;
 }
@@ -18,10 +18,10 @@
 }
 
 .visButton {
-    font-size: 14px;
+    font-size: 12px;
     /* border: 1px solid  */
     border: 1px solid;
-    padding: 10px;
+    padding: 8px;
     border-radius: 3px;
     margin-right: 2px;
     opacity: 0.3;

docs/src/components/ExampleGallery/index.js

@@ -99,7 +99,7 @@ function OverlayDemo(props) {
         >
             <perspective-viewer
                 ref={perspectiveRef}
-                theme={props.color === "dark" ? "Pro Dark" : "Material Light"}
+                theme={props.color === "dark" ? "Pro Dark" : "Pro Light"}
                 class={clsx(styles.viewer)}
             ></perspective-viewer>
         </div>

docs/src/components/HomepageFeatures/description.md

@@ -5,20 +5,3 @@ which is especially well-suited for <i>large</i> and/or <i>streaming</i>
 datasets. Use it to create user-configurable reports, dashboards, notebooks and
 applications, then deploy stand-alone in the browser, or in concert with Python
 and/or [Jupyterlab](https://jupyterlab.readthedocs.io/en/stable/).
-
-### Features
-
--   A fast, memory efficient streaming query engine, written in
-    C++ and compiled for both [WebAssembly](https://webassembly.org/) and
-    [Python](https://www.python.org/), with read/write/streaming for
-    [Apache Arrow](https://arrow.apache.org/), and a high-performance columnar
-    expression language based on [ExprTK](https://github.com/ArashPartow/exprtk).
-
--   A framework-agnostic User Interface packaged as a
-    [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),
-    powered either in-browser via WebAssembly or virtually via
-    WebSocket server (Python/Node).
-
--   A [JupyterLab](https://jupyter.org/) widget and Python client library, for
-    interactive data analysis in a notebook, as well as _scalable_ production
-    [Voila](https://github.com/voila-dashboards/voila) applications.

docs/src/components/HomepageFeatures/feature1.md

@@ -0,0 +1,5 @@
+A fast, memory efficient streaming query engine, written in
+C++ and compiled for both [WebAssembly](https://webassembly.org/) and
+[Python](https://www.python.org/), with read/write/streaming for
+[Apache Arrow](https://arrow.apache.org/), and a high-performance columnar
+expression language based on [ExprTK](https://github.com/ArashPartow/exprtk).

docs/src/components/HomepageFeatures/feature2.md

@@ -0,0 +1,4 @@
+A framework-agnostic User Interface packaged as a
+[Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),
+powered either in-browser via WebAssembly or virtually via
+WebSocket server (Python/Node).

docs/src/components/HomepageFeatures/feature3.md

@@ -0,0 +1,3 @@
+A [JupyterLab](https://jupyter.org/) widget and Python client library, for
+interactive data analysis in a notebook, as well as _scalable_ production
+[Voila](https://github.com/voila-dashboards/voila) applications.