Updated website

finos · Jun 10, 2019 · 5f7d77e · 5f7d77e
1 parent c6306eb
commit 5f7d77e
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 97 deletions.
diff --git a/.gitignore b/.gitignore
@@ -136,3 +136,5 @@ docs/python
 package.json.bak
 yarn.lock.bak
 docs/static/img
+
+docs/static/arrow/
diff --git a/docs/i18n/en.json b/docs/i18n/en.json
@@ -11,6 +11,9 @@
       "blog/2018-10-08-nyc-citibike-analysis-1": {
         "title": "NYC Citibike Analytics in Real-Time, Part 1"
       },
+      "blog/2019-06-04-v0.3.0-release": {
+        "title": "0.3.0 Release"
+      },
       "md/development": {
         "title": "Developer Guide"
       },
@@ -20,6 +23,12 @@
       "md/usage": {
         "title": "User Guide"
       },
+      "obj/perspective-viewer": {
+        "title": "`perspective-viewer` API"
+      },
+      "obj/perspective": {
+        "title": "`perspective` API"
+      },
       "README": {
         "title": "README"
       }

diff --git a/docs/md/installation.md b/docs/md/installation.md
@@ -30,7 +30,7 @@ module.exports = {
 };
 ```
 
-Alternatively, you may use the built-in `WorkerHost` Node.js server, host
+Alternatively, you may use the built-in `WebSocketServer` Node.js server, host
 the contents of a package's `build/` in your application's build script, or
 otherwise making sure these directories are visible to your web server, e.g.:
 

diff --git a/docs/md/usage.md b/docs/md/usage.md
@@ -81,7 +81,8 @@ project:
 ## `perspective` library
 
 The main module exporting `table()` and `view()`, as well as process
-management functions such as `worker()` and `WorkerHost()`. This module is
+management functions such as `worker()` and `websocket()` (in the browser) and 
+`WebSocketServer()` (in node.js). This module is
 not needed if you only intend to use `<perspective-viewer>` to visualize
 simple data, and is a dependency of the `@finos/perspective-viewer`
 module. For a complete reference on all exported methods in `perspective`, see the
@@ -95,12 +96,8 @@ nearly identical API.
 
 ### Importing in the browser
 
-The `main` entry point for `@finos/perspective` runs in a Web
-Worker, such that the CPU workload is segregated from the web application in
-which it is embedded, and so the bulk of engine code can be lazy-loaded only
-after browser feature detection determines whether WebAssembly is supported.
-
-The library can be imported ia ES6 module and/or Babel:
+`perspective` can be imported ES6 module and/or `require` syntax if you're using
+a bundler such as Webpack (and the `@finos/perspective-webpack-plugin`):
 
 ```javascript
 import perspective from "@finos/perspective";
@@ -112,10 +109,14 @@ or
 const perspective = require("@finos/perspective");
 ```
 
-Perspective can also be referenced via the global `perspective` module name in vanilla
-Javascript, when e.g. importing `@finos/perspective`
+`@finos/perspective` also comes with pre-built bundle which exports the global
+`perspective` module name in vanilla Javascript, when e.g. importing
 [via a CDN](https://unpkg.com/@finos/perspective/build/perspective.js).
 
+```html
+<script src="perspective.js"></script>
+```
+
 Once imported, you'll need to instance a `perspective` engine via the `worker()`
 method. This will create a new WebWorker (browser) or Process (node.js), and
 load the appropriate supported WebAssembly or asm.js binary; all calculation
@@ -472,7 +473,7 @@ const {
 const fs = require("fs");
 
 // Start a WS/HTTP host on port 8080.  The `assets` property allows
-// the `WorkerHost()` to also serves the file structure rooted in this
+// the `WebSocketServer()` to also serves the file structure rooted in this
 // module's directory.
 const host = new WebSocketServer({ assets: [__dirname], port: 8080 });
 

diff --git a/docs/package.json b/docs/package.json
@@ -5,8 +5,9 @@
     "scripts": {
         "theme": "lessc static/css/material.dark.less > static/css/material.dark.css",
         "examples": "docusaurus-examples",
-        "start": "npm run theme && docusaurus-start",
-        "docs": "npm run theme && docusaurus-build",
+        "start": "npm run build:arrow && npm run theme && docusaurus-start",
+        "build:arrow": "cpx ../examples/simple/superstore.arrow static/arrow/",
+        "docs": "npm run build:arrow && npm run theme && docusaurus-build",
         "publish-gh-pages": "npm run theme && docusaurus-publish",
         "write-translations": "docusaurus-write-translations"
     },

diff --git a/docs/pages/en/index.js b/docs/pages/en/index.js
@@ -11,6 +11,7 @@ const CompLibrary = require("../../core/CompLibrary.js");
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
+const classNames = require("classnames");
 
 const siteConfig = require(process.cwd() + "/siteConfig.js");
 
@@ -76,7 +77,6 @@ class HomeSplash extends React.Component {
         let language = this.props.language || "";
         return (
             <SplashContainer>
-                {/* <Logo img_src={imgUrl('docusaurus.svg')} /> */}
                 <div className="inner">
                     <ProjectTitle />
                     <perspective-viewer class="titleViewer" />
@@ -88,10 +88,6 @@ class HomeSplash extends React.Component {
                         <Button id="crosssect">Crosssect</Button>
                         <Button id="intersect">Retrospect</Button>
                         <Button id="pivot">Enhance</Button>
-                        {/* <Button href="https://jsfiddle.net/user/texodus/fiddles/">Examples</Button>
-                        <Button href="https://perspective.finos.org/docs/installation.html">Docs</Button>
-                        <Button href="https://www.npmjs.com/package/@finos/perspective">NPM</Button>
-                        <Button href="https://github.com/finos/perspective">Github</Button> */}
                     </PromoSection>
                 </div>
             </SplashContainer>
@@ -101,10 +97,42 @@ class HomeSplash extends React.Component {
 
 const Block = props => (
     <Container padding={["bottom", "top"]} id={props.id} background={props.background}>
-        <GridBlock align="center" contents={props.children} layout={props.layout} />
+        <GridBlock contents={props.children} layout={props.layout} />
     </Container>
 );
 
+const PerspectiveBlock = props => {
+    const block = props.children[0];
+    let beforeImage, afterImage;
+    if (block.imageAlign === "right") {
+        afterImage = (
+            <div className="blockImage">
+                <perspective-viewer />
+            </div>
+        );
+    } else {
+        beforeImage = (
+            <div className="blockImage">
+                <perspective-viewer />
+            </div>
+        );
+    }
+    return (
+        <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>
+                        <MarkdownBlock>{block.title}</MarkdownBlock>
+                    </h2>
+                    <MarkdownBlock>{block.content}</MarkdownBlock>
+                </div>
+                {afterImage}
+            </div>
+        </Container>
+    );
+};
+
 const Features = props => (
     <Block layout="fourColumn">
         {[
@@ -131,7 +159,7 @@ const Features = props => (
 );
 
 const FeatureCallout = props => (
-    <div style={{textAlign: "center"}} background="dark">
+    <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 both WebAssembly and asm.js via the [emscripten](https://github.com/kripken/emscripten) compiler.
@@ -145,46 +173,59 @@ const FeatureCallout = props => (
         </MarkdownBlock>
         <MarkdownBlock>Integration with Jupyterlab.</MarkdownBlock>
         <MarkdownBlock>Runtimes for the Browser and Node.js.</MarkdownBlock>
-    </div>
+    </Container>
 );
 
-const LearnHow = props => (
-    <Block background="light">
-        {[
-            {
-                content: "Talk about learning how to use this",
-                image: imgUrl("docusaurus.svg"),
-                imageAlign: "right",
-                title: "Learn How"
-            }
-        ]}
-    </Block>
-);
+const DESCRIPTION_TEXT = `
+# What is Perspective?
+Originally developed for J.P. Morgan's trading business, Perspective is
+an <i>interactive</i> visualization component for <i>large</i>, <i>real-time</i>
+datasets.  Use it to build reports, dashboards, notebooks and applications.
+Perspective comes with:
+* A fast, memory efficient streaming query engine, written in C++ and compiled to [WebAssembly](), with read/write/stream support for [Apache Arrow]().
+* A framework-agnostic query configuration UI component, based on [Web Components](https://www.webcomponents.org/), and a WebWorker and/or WebSocket data engine host for stable interactivity at high frequency.
+* A suite of simple, context-aware visualization plugins for some common Javascript libraries such as [D3FC](https://d3fc.io/) and [Hypergrid](https://github.com/fin-hypergrid/core).
+* Integration with [Jupyterlab](), Runtimes for the Browser and Node.js.
+`;
 
-const TryOut = props => (
-    <Block id="try">
+const Description = props => (
+    <PerspectiveBlock background="dark" id="demo1">
         {[
             {
-                content: "Talk about trying this out",
-                image: imgUrl("docusaurus.svg"),
-                imageAlign: "left",
-                title: "Try it Out"
+                content: DESCRIPTION_TEXT,
+                imageAlign: "right"
             }
         ]}
-    </Block>
+    </PerspectiveBlock>
 );
 
-const Description = props => (
-    <Block background="dark">
+const GETTING_STARTED_TEXT = `
+# Get Started
+1. Add \`@finos/perspective-cli\` to your project:
+\`\`\`bash
+$ yarn add --dev @finos/perspective-cli
+\`\`\`
+2. Run a test server on a CSV, JSON or [Apache Arrow]():
+\`\`\`bash
+$ yarn perspective host < superstore.arrow
+Listening on port 8080
+\`\`\`
+
+`;
+
+const GetStarted = props => (
+    <PerspectiveBlock id="get_started">
         {[
             {
-                //   content: 'We created Perspective to help our users answer questions about their <i>data</i>, without relying on chart settings, style options, or tedious configuration.',
-                // image: imgUrl('2018-10-01-v0.2.0-release/hierarchial.png'),
-                imageAlign: "right"
-                // title: 'Ask Your Data',
+                content: GETTING_STARTED_TEXT,
+                image: imgUrl("2018-10-01-v0.2.0-release/theme.png"),
+                imageAlign: "left"
             }
         ]}
-    </Block>
+    </PerspectiveBlock>
+    // <Container padding={["bottom", "top"]} id="get_started">
+    //     <MarkdownBlock>{GETTING_STARTED_TEXT}</MarkdownBlock>
+    // </Container>
 );
 
 const Showcase = props => {
@@ -224,16 +265,8 @@ class Index extends React.Component {
         return (
             <div>
                 <HomeSplash language={language} />
-                <div className="mainContainer">
-                    <Features />
-                    {/* <Description />  */}
-                    <FeatureCallout />
-                    {/* <FeatureCallout />
-          <LearnHow />
-          <TryOut />
-          */}
-                    {/* <Showcase language={language} /> */}
-                </div>
+                <Description />
+                <GetStarted />
             </div>
         );
     }

diff --git a/docs/siteConfig.js b/docs/siteConfig.js
@@ -27,7 +27,7 @@ const siteConfig = {
     favicon: "img/favicon.png",
 
     colors: {
-        primaryColor: "#242526",
+        primaryColor: "#1A7DA1",
         secondaryColor: "#1A7DA1"
     },
 

diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
@@ -19,11 +19,19 @@
    transition: color 0.2s ease-in-out;
 }
 
+.nav-footer {
+    background: #242526;
+}
+
 .homeContainer .buttonWrapper.selected a {
     border: 1px solid #f9f9f9;
     color: #f9f9f9 
 }
 
+.homeContainer .button:hover {
+    background: #242526;
+}
+
 .titleViewer {
     margin-top:24px;
     margin-bottom:48px;
@@ -48,6 +56,10 @@
     font-family:Arial;
 }
 
+.fixedHeaderContainer {
+    background: #242526 !important;
+}
+
 .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
     color: #1A7DA1 !important;
 }
@@ -90,11 +102,60 @@ h2.headerTitle, h2.headerTitleWithLogo {
     color: #1A7DA1 !important;
 }
 
+.darkBackground a {
+    color:#222;
+}
+
+#get_started {
+    background: #242526;
+    color: white;
+}
+
+#get_started pre {
+    border: 1px solid #333;
+}
+
 .homeContainer perspective-viewer, perspective-viewer {
     --d3fc-gradient-full: linear-gradient(#4d342f 0%, #e4521b 22.5%, #feeb65 42.5%, #f0f0f0 50%, #dcedc8 57.5%, #42b3d5 67.5%, #1a237e 100%);
     --d3fc-gradient-positive: linear-gradient(#222222 0%, #1a237e 35%, #42b3d5 70%, #dcedc8 100%);
     --d3fc-gradient-negative: linear-gradient(#feeb65 0%, #e4521b 35%, #4d342f 70%, #222222 100%);
     --highcharts-heatmap-gradient-full: linear-gradient(#feeb65 0%, #e4521b 22.5%, #4d342f 42.5%, #222222 50%, #1a237e 57.5%, #42b3d5 67.5%, #dcedc8 100%);
     --highcharts-heatmap-gradient-positive: linear-gradient(#222222 0%, #1a237e 35%, #42b3d5 70%, #dcedc8 100%);
     --highcharts-heatmap-gradient-negative: linear-gradient(#feeb65 0%, #e4521b 35%, #4d342f 70%, #222222 100%);  
-}
+}
+
+.blockContent perpsective-viewer {
+    --plugin--box-shadow: none !important;
+}
+
+perspective-viewer {
+    border: none !important;
+}
+
+
+#psp1 {
+    margin-bottom: -48px;
+    margin-right: -48px;
+}
+.blockContent {
+    counter-reset: list-counter;
+}
+
+ol li {
+    list-style-type: none;
+    counter-increment: list-counter;
+}
+
+ol li::before {
+    content: counter(list-counter) ".";
+    font-weight: bold;
+    font-size: 2rem;
+    margin-right: 0.5rem;
+    font-family: "Montserrat", Helvetica;
+    line-height: 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Montserrat", Helvetica;
+}
+