website: Move to gatsby-theme-ocular (#545)

website/gatsby-config.js

@@ -1,27 +1,111 @@
-const {getGatsbyConfig} = require('ocular-gatsby/api');
+const resolve = require('path').resolve;
+const DOC_TABLE_OF_CONTENTS = require('../docs/table-of-contents.json');
 
-const config = require('./ocular-config');
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-theme-ocular`,
+      options: {
+        logLevel: 1, // Adjusts amount of debug information from ocular-gatsby
 
-const gatsbyConfig = getGatsbyConfig(config);
+        // Folders
+        DIR_NAME: `${__dirname}`,
+        ROOT_FOLDER: `${__dirname}/../`,
 
-gatsbyConfig.plugins.push({resolve: 'gatsby-plugin-no-sourcemaps'});
+        DOCS: DOC_TABLE_OF_CONTENTS,
+        DOC_FOLDERS: [
+          `${__dirname}/../docs/`,
+          `${__dirname}/../modules/`,
+          `${__dirname}/../arrowjs/`
+        ],
 
-// Ensure gatsby-source-filesystem doesn't pick up too many files in modules directory
-// https://www.gatsbyjs.org/packages/gatsby-source-filesystem/#options
-gatsbyConfig.plugins.forEach(plugin => {
-  if (plugin && typeof plugin === 'object' && plugin.resolve === 'gatsby-source-filesystem') {
-    plugin.options = plugin.options || {};
-    plugin.options.ignore = plugin.options.ignore || [];
-    plugin.options.ignore.push('**/modules/**/test');
-    plugin.options.ignore.push('**/modules/**/src');
-    plugin.options.ignore.push('**/modules/**/dist');
-    plugin.options.ignore.push('**/modules/**/wip');
-    plugin.options.ignore.push('**/modules/**/*.json');
-    plugin.options.ignore.push('**/arrowjs/**/*.json');
-  }
-});
+        PROJECT_TYPE: 'github',
 
-// NOTE: uncomment to debug config
-// console.log(JSON.stringify(gatsbyConfig, null, 2));
+        PROJECT_NAME: 'loaders.gl',
+        PROJECT_ORG: 'uber-web',
+        PROJECT_URL: 'https://github.com/uber-web/loaders.gl',
+        PROJECT_DESC: 'Loaders for Big Data Visualization',
+        PATH_PREFIX: '/',
 
-module.exports = gatsbyConfig;
+        FOOTER_LOGO: '',
+
+        GA_TRACKING: null,
+
+        // For showing star counts and contributors.
+        // Should be like btoa('YourUsername:YourKey') and should be readonly.
+        GITHUB_KEY: null,
+
+        HOME_PATH: '/',
+
+        HOME_HEADING: 'Loaders for Big Data Visualization',
+
+        HOME_RIGHT: null,
+
+        HOME_BULLETS: [
+          {
+            text: 'A collection of the best open source loaders',
+            desc: 'Parsers and encoders for many major 3D, geospatial and tabular formats.',
+            img: 'images/icon-high-precision.svg'
+          },
+          {
+            text: 'Framework Agnostic',
+            desc: 'Loaders and Writers can be used with any visualization framework.',
+            img: 'images/icon-high-precision.svg'
+          },
+          {
+            text: 'Works in Browser, Worker Threads and Node.js',
+            desc: 'Move your code around and rely on your loaders to keep working.',
+            img: 'images/icon-high-precision.svg'
+          }
+        ],
+
+        PROJECTS: [
+          {
+            name: 'deck.gl',
+            url: 'https://deck.gl'
+          },
+          {
+            name: 'luma.gl',
+            url: 'https://luma.gl'
+          },
+          {
+            name: 'react-map-gl',
+            url: 'https://uber.github.io/react-map-gl'
+          },
+          {
+            name: 'nebula.gl',
+            url: 'https://nebula.gl/'
+          }
+        ],
+
+        LINK_TO_GET_STARTED: 'docs/developer-guide/get-started',
+
+        ADDITIONAL_LINKS: [],
+
+        INDEX_PAGE_URL: resolve(__dirname, './templates/index.jsx'),
+
+        EXAMPLES: [
+          // {
+          //   title: 'Point Clouds & Meshes',
+          //   image: 'images/example-pointcloud.png',
+          //   componentUrl: resolve(__dirname, '../examples/pointcloud/app.js'),
+          //   path: 'examples/pointcloud'
+          // },
+          {
+            title: '3D Tiles',
+            image: 'images/example-3d-tiles.png',
+            componentUrl: resolve(__dirname, '../examples/deck.gl/3d-tiles/app.js'),
+            path: 'examples/3d-tiles'
+          },
+          {
+            title: 'glTF',
+            image: 'images/example-gltf.jpg',
+            componentUrl: resolve(__dirname, './templates/example-gltf.jsx'),
+            path: 'examples/gltf'
+          }
+        ]
+      }
+    },
+    {resolve: 'gatsby-plugin-no-sourcemaps'}
+  ]
+};

website/gatsby-node.js

@@ -1,41 +1,37 @@
-// NOTE: It is possible to override the ocular-provided callbacks
-// and this take control any aspect of gatsby:
-
-// exports.onCreateNode = ({ node, actions, getNode }) =>
-//   ocular.onCreateNode({ node, actions, getNode });
-
-// exports.setFieldsOnGraphQLNodeType = ({ type, actions }) =>
-//   ocular.setFieldsOnGraphQLNodeType({ type, actions });
-
-// // This is a main gatsby entry point
-// // Here we get to programmatically create pages after all nodes are created
-// // by gatsby.
-// // We use graphgl to query for nodes and iterate
-// exports.createPages = ({ graphql, actions }) =>
-//   ocular.createPages({ graphql, actions });
-const ocularConfig = require('./ocular-config');
-const getGatsbyNodeCallbacks = require('ocular-gatsby/gatsby-node');
-
-const callbacks = getGatsbyNodeCallbacks(ocularConfig);
-
-module.exports = callbacks;
-
-const onCreateWebpackConfig = callbacks.onCreateWebpackConfig;
-
-callbacks.onCreateWebpackConfig = function onCreateWebpackConfigOverride(opts) {
-  onCreateWebpackConfig(opts);
+const resolve = require('path').resolve;
+const getOcularConfig = require('ocular-dev-tools/config/ocular.config');
+const DEPENDENCIES = require('./package.json').dependencies;
 
+module.exports.onCreateWebpackConfig = function onCreateWebpackConfigOverride(opts) {
   const {
-    // stage, // build stage: ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’
+    stage, // build stage: ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’
     // rules, // Object (map): set of preconfigured webpack config rules
     // plugins, // Object (map): A set of preconfigured webpack config plugins
-    // getConfig, // Function that returns the current webpack config
-    loaders, // Object (map): set of preconfigured webpack config loaders
+    getConfig, // Function that returns the current webpack config
+    // loaders, // Object (map): set of preconfigured webpack config loaders
     actions
   } = opts;
 
-  console.log(`App rewriting gatsby webpack config`); // eslint-disable-line
+  console.log(`App rewriting gatsby webpack config ${stage}`); // eslint-disable-line
 
+  const config = getConfig();
+  config.resolve = config.resolve || {};
+  config.resolve.alias = config.resolve.alias || {};
+
+  const ALIASES = getOcularConfig({root: resolve(__dirname, '..')}).aliases;
+
+  // When duplicating example dependencies in website, autogenerate
+  // aliases to ensure the website version is picked up
+  // NOTE: module dependencies are automatically injected
+  // TODO - should this be automatically done by ocular-gatsby?
+  const dependencyAliases = {};
+  for (const dependency in DEPENDENCIES) {
+    dependencyAliases[dependency] = `${__dirname}/node_modules/${dependency}`;
+  }
+
+  Object.assign(config.resolve.alias, ALIASES, dependencyAliases);
+
+  /*
   // Recreate it with custom exclude filter
   // Called without any arguments, `loaders.js` will return an
   // object like:
@@ -56,24 +52,32 @@ callbacks.onCreateWebpackConfig = function onCreateWebpackConfigOverride(opts) {
     // Exclude all node_modules from transpilation, except for ocular
     exclude: modulePath =>
       /node_modules/.test(modulePath) &&
-      !/node_modules\/(ocular|ocular-gatsby|gatsby-plugin-ocular)/.test(modulePath)
+      !/node_modules\/(ocular|ocular-gatsby|gatsby-theme-ocular)/.test(modulePath)
   });
 
+  // Omit the default rule where test === '\.jsx?$'
+  const rules = [newJSRule];
+
+  if (stage === 'build-html') {
+    rules.push({
+      test: /mapbox-gl/,
+      use: loaders.null()
+    });
+  }
+
   const newConfig = {
     module: {
-      rules: [
-        // Omit the default rule where test === '\.jsx?$'
-        newJSRule
-      ]
+      rules
     },
     node: {
       fs: 'empty'
-    },
-    resolve: {
-      alias: Object.assign(ocularConfig.webpack.resolve.alias)
     }
   };
+  */
 
-  // Merges into the webpack config
-  actions.setWebpackConfig(newConfig);
+  // Completely replace the webpack config for the current stage.
+  // This can be dangerous and break Gatsby if certain configuration options are changed.
+  // Generally only useful for cases where you need to handle config merging logic yourself,
+  // in which case consider using webpack-merge.
+  actions.replaceWebpackConfig(config);
 };

website/package.json

@@ -6,7 +6,7 @@
   "keywords": [
     "ocular"
   ],
-  "main": "index.js",
+  "main": "gatsby-config.js",
   "scripts": {
     "start": "yarn clean && yarn develop",
     "build": "yarn clean-examples && yarn clean && gatsby build",
@@ -42,10 +42,9 @@
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
-    "gatsby": "^2.13.51",
+    "gatsby": "^2.18.0",
     "gatsby-plugin-no-sourcemaps": "^2.0.2",
-    "gh-pages": "^2.1.0",
-    "ocular-gatsby": "^1.0.4",
-    "sharp": "^0.23.1"
+    "gatsby-theme-ocular": "^1.1.0-alpha.4",
+    "gh-pages": "^2.1.0"
   }
 }