Need help: Get website build working with latest ocular-gatsby

docs/presentation.md → docs/README.md

@@ -1,4 +1,4 @@
-# React-vis
+# Introduction
 
 __React-vis__ is a React visualization library. It's been designed with the following principles in mind:
 

docs/colors.md

@@ -1,4 +1,4 @@
-## Color
+# Colors
 
 Color can be set and affected in many ways in React-vis.
 The main principles are:

docs/getting-started/installing-react-vis.md

@@ -1,4 +1,4 @@
-### Install the react-vis module
+# Install the react-vis module
 
 If you want to use react-vis in your project, add it from the command line: 
 

docs/getting-started/new-react-vis-project.md

@@ -1,4 +1,4 @@
-### Create a new project with react-vis
+# Create a new project with react-vis
 
 Let's create a new vis app from scratch.
 To do this, let's use [create-react-app](https://github.com/facebookincubator/create-react-app), the popular Facebook scaffold. 

docs/getting-started/react-vis-in-codepen.md

@@ -1,4 +1,4 @@
-### Jump right in on codepen!
+# React-vis in codepen
 
 You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent).  
 Each published version of react-vis is accessible via [unpkg.com](https://unpkg.com).

docs/getting-started/your-first-chart.md

@@ -1,4 +1,4 @@
-### Your first chart
+# Your first chart
 
 We tried to make react-vis syntax as close to the traditional react syntax. You have components which have props and possibly children. 
 

docs/interaction.md

@@ -1,4 +1,4 @@
-## Interaction
+# Interaction
 
 Interaction in react-vis happens through _event handlers_ which are triggered by certain interactive events, such as mouse movement or clicks.
 

docs/scales-and-data.md → docs/scales-and-data.mdx

@@ -1,4 +1,4 @@
-## Scales and data
+# Scales and data
 
 ### Data
 
@@ -9,7 +9,9 @@ These properties correspond to various visual characteristics of the correspondi
 
 Here is how a simple dataset is transformed in some simple charts:
 
-<!-- INJECT:"MiniChartsWithLink" -->
+import {MiniCharts} from '../packages/showcase/data/mini-data-examples';
+
+<MiniCharts />
 
 ```jsx
 const data = [

docs/style.md

@@ -1,4 +1,4 @@
-## Style
+# Style
 
 In order to control the look and feel of your React-Vis components, you have four strategies.
 

docs/table-of-contents.json

@@ -0,0 +1,237 @@
+{
+  "id": "table-of-contents",
+  "chapters": [
+    {
+      "title": "Welcome to React-vis",
+      "entries": [
+        {"entry": "docs/README"}
+      ]
+    },
+    {
+      "title": "Getting Started",
+      "entries": [
+        {"entry": "docs/getting-started/react-vis-in-codepen"},
+        {"entry": "docs/getting-started/installing-react-vis"},
+        {"entry": "docs/getting-started/new-react-vis-project"},
+        {"entry": "docs/getting-started/your-first-chart"}
+      ]
+    },
+    {
+      "title": "General principles",
+      "entries": [
+        {
+          "entry": "docs/scales-and-data"
+        },
+        {
+          "entry": "docs/colors"
+        },
+        {
+          "entry": "docs/interaction"
+        },
+        {
+          "entry": "docs/animation"
+        },
+        {
+          "entry": "docs/style"
+        }
+      ]
+    },
+    {
+      "title": "API Reference",
+      "entries": [
+        {
+          "entry": "docs/xy-plot"
+        },
+        {
+          "entry": "docs/gradients"
+        },
+        {
+          "entry": "docs/grids"
+        },
+        {
+          "entry": "docs/flexible-plots"
+        },
+        {
+          "entry": "docs/heatmap-series"
+        },
+        {
+          "entry": "docs/hexbin-series"
+        },
+        {
+          "entry": "docs/highlight"
+        },
+        {
+          "entry": "docs/hint"
+        },
+        {
+          "entry": "docs/interaction"
+        },
+        {
+          "entry": "docs/label-series"
+        },
+        {
+          "entry": "docs/legends"
+        },
+        {
+          "entry": "docs/line-mark-series"
+        },
+        {
+          "entry": "docs/line-series"
+        },
+        {
+          "entry": "docs/mark-series"
+        },
+        {
+          "entry": "docs/parallel-coordinates"
+        },
+        {
+          "entry": "docs/polygon-series"
+        },
+        {
+          "entry": "docs/presentation"
+        },
+        {
+          "entry": "docs/decorative-axis"
+        },
+        {
+          "entry": "docs/radar-chart"
+        },
+        {
+          "entry": "docs/custom-svg-series"
+        },
+        {
+          "entry": "docs/radial-chart"
+        },
+        {
+          "entry": "docs/crosshair"
+        },
+        {
+          "entry": "docs/rect-series"
+        },
+        {
+          "entry": "docs/contour-series"
+        },
+        {
+          "entry": "docs/sankey"
+        },
+        {
+          "entry": "docs/colors"
+        },
+        {
+          "entry": "docs/scales-and-data"
+        },
+        {
+          "entry": "docs/chart-label"
+        },
+        {
+          "entry": "docs/series"
+        },
+        {
+          "entry": "docs/borders"
+        },
+        {
+          "entry": "docs/style"
+        },
+        {
+          "entry": "docs/bar-series"
+        },
+        {
+          "entry": "docs/sunburst"
+        },
+        {
+          "entry": "docs/axes"
+        },
+        {
+          "entry": "docs/treemap"
+        },
+        {
+          "entry": "docs/area-series"
+        },
+        {
+          "entry": "docs/voronoi"
+        },
+        {
+          "entry": "docs/arc-series"
+        },
+        {
+          "entry": "docs/whisker-series"
+        },
+        {
+          "entry": "docs/animation"
+        }
+      ]
+    },
+    {
+      "title": "Getting started",
+      "entries": [
+        {
+          "entry": "docs/getting-started/your-first-chart"
+        },
+        {
+          "entry": "docs/getting-started/react-vis-in-codepen"
+        },
+        {
+          "entry": "docs/getting-started/installing-react-vis"
+        },
+        {
+          "entry": "docs/getting-started/getting-started"
+        },
+        {
+          "entry": "docs/getting-started/new-react-vis-project"
+        }
+      ]
+    },
+    {
+      "title": "Examples",
+      "entries": [
+        {
+          "entry": "docs/examples/stream-graph"
+        },
+        {
+          "title": "Showcases",
+          "entries": [
+            {
+              "entry": "docs/examples/showcases/treemaps-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/sunburst-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/sankeys-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/radial-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/radar-chart-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/plots-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/misc-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/legends-showcase"
+            },
+            {
+              "entry": "docs/examples/showcases/axes-showcase"
+            }
+          ]
+        },
+        {
+          "entry": "docs/examples/responsive-vis"
+        },
+        {
+          "entry": "docs/examples/iris-dashboard"
+        },
+        {
+          "entry": "docs/examples/extensibility"
+        },
+        {
+          "entry": "docs/examples/building-things-other-than-charts"
+        }
+      ]
+    }
+  ]
+}

package.json

@@ -5,11 +5,14 @@
   "author": "Visualization Team <[email protected]>",
   "description": "Data visualization library based on React and d3.",
   "private": true,
-  "workspaces": [
-    "packages/showcase",
-    "packages/react-vis",
-    "packages/website"
-  ],
+  "workspaces": {
+    "packages": [
+      "packages/showcase",
+      "packages/react-vis",
+      "packages/website"
+    ],
+    "nohoist": ["**/ocular-gatsby"]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uber-common/react-vis.git"

packages/website/.gitignore

@@ -0,0 +1,3 @@
+/public
+/.cache
+/report*.json

packages/website/README.md

@@ -0,0 +1,4 @@
+**This is still work-in-progress**.
+
+Only `storybook` works.
+You need to do `yarn build` in `packages/react-vis` first before you can run `storybook` here.

packages/website/gatsby-browser.js

@@ -0,0 +1 @@
+import '../react-vis/dist/style.css';

packages/website/gatsby-config.js

@@ -0,0 +1,20 @@
+/* eslint-env node */
+const ocularConfig = require('./ocular-config');
+
+module.exports = {
+  plugins: [
+    {resolve: `gatsby-theme-ocular`, options: ocularConfig},
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        gatsbyRemarkPlugins: [
+          {resolve: 'gatsby-remark-images', options: {maxWidth: 690}},
+          {resolve: 'gatsby-remark-responsive-iframe'},
+          'gatsby-remark-prismjs',
+          'gatsby-remark-copy-linked-files',
+          'gatsby-remark-autolink-headers'
+        ]
+      }
+    }
+  ]
+};

packages/website/gatsby-node.js

@@ -0,0 +1,10 @@
+/* eslint-env node */
+const {setOcularConfig} = require('gatsby-theme-ocular');
+const createPages = require('./gatsby-node/mdx-pages');
+const onCreateNode = require('./gatsby-node/on-create-node');
+
+const ocularConfig = require('./ocular-config');
+setOcularConfig(ocularConfig);
+
+module.exports.createPages = createPages;
+module.exports.onCreateNode = onCreateNode;