New logo & demo gif

README.md

@@ -1,16 +1,15 @@
-# [![Perspective](https://perspective.finos.org/img/title.png)](https://perspective.finos.org/)
+# [![Perspective](https://perspective.finos.org/img/logo_inverted_tiny.png)](https://perspective.finos.org/)
 
 [![Build Status](https://travis-ci.org/finos/perspective.svg?branch=master)](https://travis-ci.org/finos/perspective)
 [![Appveyor](https://ci.appveyor.com/api/projects/status/github/finos/perspective?svg=true)](https://ci.appveyor.com/project/neilslinger/perspective)
 [![npm](https://img.shields.io/npm/v/@finos/perspective.svg?style=flat-square)](https://www.npmjs.com/package/@finos/perspective)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![FINOS - Operating](https://cdn.rawgit.com/finos/contrib-toolbox/master/images/badge-operating.svg)](https://finosfoundation.atlassian.net/wiki/display/FINOS/Operating)
 
 
 A streaming data visualization engine for Javascript, Perspective makes it
 simple to build real-time & user configurable analytics entirely in the browser.
 
-<img src="https://perspective.finos.org/img/demo.gif">
+<img src="https://perspective.finos.org/img/demo_small.gif">
 
 ## Features
 

docs/logo.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+const common = require("@finos/perspective/src/config/common.config.js");
+
+module.exports = Object.assign({}, common(), {
+    entry: "./logo.js",
+    output: {
+        filename: "logo.js",
+        libraryTarget: "umd",
+        path: path.resolve(__dirname, "static/js")
+    }
+});

docs/logo.js

@@ -0,0 +1,65 @@
+import {render, html} from "lit-html";
+
+class PerspectiveLogo extends HTMLElement {
+    constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        this._inverted = false;
+        render(this._template, shadowRoot);
+    }
+
+    get _template() {
+        return html`
+            ${this._style}
+            <div class="outer">
+                <div class="inner">PER<span>SPECTIVE</span></div>
+            </div>
+        `;
+    }
+
+    get _style() {
+        let x = "",
+            y = "";
+        if (this._inverted) {
+            x = "background-";
+        } else {
+            y = "background-";
+        }
+        let content = `
+:host .inner {
+    line-height: initial;
+    margin-bottom: -0.28em;
+    margin-top: -0.35em;
+}
+
+:host .outer {
+    overflow: hidden;
+}
+
+:host {
+    display: inline-block;
+    position: relative;
+    ${x}color: rgb(249, 249, 249);
+    ${y}color: #242526;
+    font-family: "Source Code Pro";
+    font-weight: bold;
+    font-size: 2em;
+    padding: 24px;
+    letter-spacing: -0.166em;
+}
+
+:host span {
+    padding-left: 0.05em;
+    margin-left: -0.05em;
+    ${x}color: #242526;
+    ${y}color: rgb(249, 249, 249);
+}`;
+        return html`
+            <style>
+                ${content}
+            </style>
+        `;
+    }
+}
+
+window.customElements.define("perspective-logo", PerspectiveLogo);

docs/package.json

@@ -6,8 +6,9 @@
         "theme": "lessc static/css/material.dark.less > static/css/material.dark.css",
         "examples": "docusaurus-examples",
         "start": "npm run build:arrow && npm run theme && docusaurus-start",
+        "build:logo": "webpack --config logo.config.js --color",
         "build:arrow": "cpx ../examples/simple/superstore.arrow static/arrow/",
-        "docs": "npm run build:arrow && npm run theme && docusaurus-build",
+        "docs": "npm run build:arrow && npm run build:logo && npm run theme && docusaurus-build",
         "publish-gh-pages": "npm run theme && docusaurus-publish",
         "write-translations": "docusaurus-write-translations"
     },
@@ -19,6 +20,7 @@
         "less": "^3.9.0"
     },
     "dependencies": {
-        "@babel/preset-react": "^7.0.0"
+        "@babel/preset-react": "^7.0.0",
+        "lit-html": "^1.1.2"
     }
 }

docs/pages/en/index.js

@@ -20,7 +20,9 @@ function imgUrl(img) {
 }
 
 function docUrl(doc, language) {
-    return siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc;
+    return (
+        siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc
+    );
 }
 
 function pageUrl(page, language) {
@@ -57,7 +59,7 @@ const Logo = props => (
 
 const ProjectTitle = props => (
     <h2 className="projectTitle">
-        {siteConfig.title}
+        <perspective-logo />
         <small>
             Streaming Analytics <i>via</i> WebAssembly
         </small>
@@ -96,7 +98,11 @@ class HomeSplash extends React.Component {
 }
 
 const Block = props => (
-    <Container padding={["bottom", "top"]} id={props.id} background={props.background}>
+    <Container
+        padding={["bottom", "top"]}
+        id={props.id}
+        background={props.background}
+    >
         <GridBlock contents={props.children} layout={props.layout} />
     </Container>
 );
@@ -118,8 +124,19 @@ const PerspectiveBlock = props => {
         );
     }
     return (
-        <Container padding={["bottom", "top"]} id={props.id} background={props.background}>
-            <div className={classNames({imageAlignRight: !!afterImage, imageAlignLeft: !!beforeImage, imageAlignSide: true})} key={block.title}>
+        <Container
+            padding={["bottom", "top"]}
+            id={props.id}
+            background={props.background}
+        >
+            <div
+                className={classNames({
+                    imageAlignRight: !!afterImage,
+                    imageAlignLeft: !!beforeImage,
+                    imageAlignSide: true
+                })}
+                key={block.title}
+            >
                 {beforeImage}
                 <div className="blockContent">
                     <h2>
@@ -137,19 +154,22 @@ const Features = props => (
     <Block layout="fourColumn">
         {[
             {
-                content: "Quickly answer any question about your data through a set of flexible transforms, such as pivots, filters, and aggregations",
+                content:
+                    "Quickly answer any question about your data through a set of flexible transforms, such as pivots, filters, and aggregations",
                 image: imgUrl("baseline-settings-20px.svg"),
                 imageAlign: "top",
                 title: "Simple"
             },
             {
-                content: "Utilizing bleeding-edge browser technology such as Web Assembly and Apache Arrow, Perspective is unmatched in browser performance",
+                content:
+                    "Utilizing bleeding-edge browser technology such as Web Assembly and Apache Arrow, Perspective is unmatched in browser performance",
                 image: imgUrl("baseline-trending_up-24px.svg"),
                 imageAlign: "top",
                 title: "Powerful"
             },
             {
-                content: "Engineered for reliability and production-vetted on the J.P. Morgan trading floor, now available to the development community as Open Source",
+                content:
+                    "Engineered for reliability and production-vetted on the J.P. Morgan trading floor, now available to the development community as Open Source",
                 image: imgUrl("baseline-security-24px.svg"),
                 imageAlign: "top",
                 title: "Industrial"
@@ -162,13 +182,19 @@ const FeatureCallout = props => (
     <Container padding={["bottom", "top"]} background="dark">
         <h2>Features</h2>
         <MarkdownBlock background="dark">
-            A fast, memory efficient streaming pivot engine written principally in C++ and compiled to WebAssembly via the [emscripten](https://github.com/kripken/emscripten) compiler.
+            A fast, memory efficient streaming pivot engine written principally
+            in C++ and compiled to WebAssembly via the
+            [emscripten](https://github.com/kripken/emscripten) compiler.
         </MarkdownBlock>
         <MarkdownBlock>
-            An embeddable, framework-agnostic configuration UI, based on [Web Components](https://www.webcomponents.org/), and a WebWorker engine host for responsiveness at high frequency.
+            An embeddable, framework-agnostic configuration UI, based on [Web
+            Components](https://www.webcomponents.org/), and a WebWorker engine
+            host for responsiveness at high frequency.
         </MarkdownBlock>
         <MarkdownBlock>
-            A suite of simple visualization plugins for some common Javascript libraries such as [D3FC](), [Hypergrid](https://github.com/fin-hypergrid/core) and
+            A suite of simple visualization plugins for some common Javascript
+            libraries such as [D3FC](),
+            [Hypergrid](https://github.com/fin-hypergrid/core) and
             [HighCharts](https://github.com/highcharts/highcharts).
         </MarkdownBlock>
         <MarkdownBlock>Integration with Jupyterlab.</MarkdownBlock>
@@ -239,7 +265,11 @@ const Showcase = props => {
         .map((user, i) => {
             return (
                 <a href={user.infoLink} key={i}>
-                    <img src={user.image} alt={user.caption} title={user.caption} />
+                    <img
+                        src={user.image}
+                        alt={user.caption}
+                        title={user.caption}
+                    />
                 </a>
             );
         });
@@ -250,7 +280,10 @@ const Showcase = props => {
             <p>This project is used by all these people</p>
             <div className="logos">{showcase}</div>
             <div className="more-users">
-                <a className="button" href={pageUrl("users.html", props.language)}>
+                <a
+                    className="button"
+                    href={pageUrl("users.html", props.language)}
+                >
                     More {siteConfig.title} Users
                 </a>
             </div>

docs/siteConfig.js

@@ -6,7 +6,7 @@
  */
 
 const siteConfig = {
-    title: "Perspective" /* title for your website */,
+    title: "" /* title for your website */,
     tagline: "Streaming Analytics via WebAssembly",
     url: "https://perspective.finos.org/" /* your website url */,
     cname: "perspective.finos.org",
@@ -22,13 +22,13 @@ const siteConfig = {
         {href: "https://github.com/finos/perspective/", label: "GitHub"}
     ],
 
-    //headerIcon: "img/perspective2.svg",
+    headerIcon: "img/logo.png",
     // footerIcon: "img/perspective2.svg",
     favicon: "img/favicon.png",
 
     colors: {
-        primaryColor: "#1A7DA1",
-        secondaryColor: "#1A7DA1"
+        primaryColor: "#242526",
+        secondaryColor: "#242526"
     },
 
     copyright: "Copyright © " + new Date().getFullYear() + " Perspective Authors",
@@ -43,14 +43,16 @@ const siteConfig = {
         "https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.js",
         "https://unpkg.com/@finos/perspective-viewer-hypergrid/dist/umd/perspective-viewer-hypergrid.js",
         "https://unpkg.com/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js",
-        "js/animation.js"
+        "js/animation.js",
+        "js/logo.js"
     ],
 
     stylesheets: [
         "https://fonts.googleapis.com/css?family=Montserrat:300",
         "https://fonts.googleapis.com/css?family=Material+Icons",
         "https://fonts.googleapis.com/css?family=Open+Sans",
-        "https://fonts.googleapis.com/css?family=Roboto+Mono"
+        "https://fonts.googleapis.com/css?family=Roboto+Mono",
+        "https://fonts.googleapis.com/css?family=Source+Code+Pro:900&display=swap"
     ],
 
     onPageNav: "separate",

docs/static/css/custom.css

@@ -4,6 +4,11 @@
 }
 
 @media only screen and (min-width: 1024px) {
+    body {
+        left: 0;
+        right: 0;
+    }
+
 }
 
 @media only screen and (max-width: 1023px) {
@@ -15,6 +20,9 @@
 @media only screen and (min-width: 1500px) {
 }
 
+
+
+
 .promoSection .buttonWrapper {
    transition: color 0.2s ease-in-out;
 }
@@ -23,6 +31,10 @@
     background: #242526;
 }
 
+body {
+    position: absolute; /* mobile fix */
+}
+
 .homeContainer .buttonWrapper.selected a {
     border: 1px solid #f9f9f9;
     color: #f9f9f9 
@@ -64,12 +76,17 @@
     color: #1A7DA1 !important;
 }
 
-h2.headerTitle, h2.headerTitleWithLogo {
+h2.headerTitle, h2.headerTitleWithLogo, .logo {
     font-family: "Montserrat";
     color: #f9f9f9 !important;
     transition: opacity 0.1s ease-in;
 }
 
+.logo {
+    height: 50% !important;
+    opacity: 0;
+}
+
 .mainContainer .blockImage img {
     width: 100px;
 }
@@ -79,6 +96,10 @@ h2.headerTitle, h2.headerTitleWithLogo {
     padding-bottom: 96px;
 }
 
+.projectTitle small {
+    margin: 0em 0 2em;
+}
+
 .homeContainer .projectTitle {
     color: #f9f9f9;
     font-family: "Montserrat";