diff --git a/docs/developer-guide/installing.md b/docs/developer-guide/installing.md index 569a63f499..bf322c2c28 100644 --- a/docs/developer-guide/installing.md +++ b/docs/developer-guide/installing.md @@ -11,12 +11,10 @@ However, the `@luma.gl/core` module cannot be used on its own: it relies on bein that implements the API. luma.gl provides adapters (implementations of the abstract API) through the `@luma.gl/webgl` and `@luma.gl/webgpu` modules. -The `@luma.gl/core` module is not usable on its own. A device adapter module must -be imported. +The `@luma.gl/core` module is not usable on its own. A device adapter module must be imported. ```bash yarn add @luma.gl/core -yarn add @luma.gl/webgl yarn add @luma.gl/webgpu ``` diff --git a/docs/sidebar.json b/docs/table-of-contents.json similarity index 100% rename from docs/sidebar.json rename to docs/table-of-contents.json diff --git a/docs/tutorials/hello-cube.mdx b/docs/tutorials/hello-cube.mdx index f8801ebead..4cbe8ce0a6 100644 --- a/docs/tutorials/hello-cube.mdx +++ b/docs/tutorials/hello-cube.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloCubeExample} from '@site'; +import {HelloCubeExample} from '@site/src/examples'; # Hello Cube diff --git a/docs/tutorials/hello-instancing.mdx b/docs/tutorials/hello-instancing.mdx index 997144bd49..00a77fe2be 100644 --- a/docs/tutorials/hello-instancing.mdx +++ b/docs/tutorials/hello-instancing.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloInstancingExample} from '@site'; +import {HelloInstancingExample} from '@site/src/examples'; # Hello Instancing diff --git a/docs/tutorials/hello-triangle.mdx b/docs/tutorials/hello-triangle.mdx index 322cb76233..d5d1a4cfc6 100644 --- a/docs/tutorials/hello-triangle.mdx +++ b/docs/tutorials/hello-triangle.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloTriangleExample} from '@site'; +import {HelloTriangleExample} from '@site/src/examples'; # Hello Triangle diff --git a/docs/tutorials/lighting.mdx b/docs/tutorials/lighting.mdx index 406c41666b..73c3fb0c2f 100644 --- a/docs/tutorials/lighting.mdx +++ b/docs/tutorials/lighting.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {LightingExample} from '@site'; +import {LightingExample} from '@site/src/examples'; # Lighting diff --git a/docs/tutorials/shader-hooks.mdx b/docs/tutorials/shader-hooks.mdx index 4646c35282..41436f1464 100644 --- a/docs/tutorials/shader-hooks.mdx +++ b/docs/tutorials/shader-hooks.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {ShaderHooksExample} from '@site'; +import {ShaderHooksExample} from '@site/src/examples'; # Shader Hooks diff --git a/docs/tutorials/shader-modules.mdx b/docs/tutorials/shader-modules.mdx index 2651f76633..6f9c582023 100644 --- a/docs/tutorials/shader-modules.mdx +++ b/docs/tutorials/shader-modules.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {ShaderModulesExample} from '@site'; +import {ShaderModulesExample} from '@site/src/examples'; # Shader Modules diff --git a/docs/tutorials/transform-feedback.mdx b/docs/tutorials/transform-feedback.mdx index e6ddf58b27..396c72363d 100644 --- a/docs/tutorials/transform-feedback.mdx +++ b/docs/tutorials/transform-feedback.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {TransformFeedbackExample} from '@site'; +import {TransformFeedbackExample} from '@site/src/examples'; # Transform Feedback diff --git a/docs/tutorials/transform.mdx b/docs/tutorials/transform.mdx index 02b690b982..6ac1e9669d 100644 --- a/docs/tutorials/transform.mdx +++ b/docs/tutorials/transform.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {TransformExample} from '@site'; +import {TransformExample} from '@site/src/examples'; # Transform diff --git a/website/babel.config.js b/website/babel.config.js index f777395515..f3625a501d 100644 --- a/website/babel.config.js +++ b/website/babel.config.js @@ -1,79 +1,4 @@ -// Copied from '@docusaurus/core/lib/babel/preset' template -const ESM_TARGETS = ['>0.2% and supports async-functions', 'maintained node versions', 'not dead']; - -"use strict"; -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -Object.defineProperty(exports, "__esModule", { value: true }); -const tslib_1 = require("tslib"); -const path_1 = tslib_1.__importDefault(require("path")); -function getTransformOptions(isServer) { - const absoluteRuntimePath = path_1.default.dirname(require.resolve(`@babel/runtime/package.json`)); - return { - // All optional newlines and whitespace will be omitted when generating code - // in compact mode - compact: true, - presets: [ - isServer - ? [ - require.resolve('@babel/preset-env'), - { - targets: { - node: 16, - }, - }, - ] - : [ - require.resolve('@babel/preset-env'), - { - targets: ESM_TARGETS, - useBuiltIns: 'entry', - loose: true, - corejs: '3', - // Do not transform modules to CJS - modules: false, - // Exclude transforms that make all code slower - exclude: ['transform-typeof-symbol', 'transform-regenerator', 'transform-async-to-generator'], - }, - ], - require.resolve('@babel/preset-react'), - require.resolve('@babel/preset-typescript'), - ], - plugins: [ - // // Polyfills the runtime needed for async/await, generators, and friends - // // https://babeljs.io/docs/en/babel-plugin-transform-runtime - // [ - // require.resolve('@babel/plugin-transform-runtime'), - // { - // corejs: false, - // helpers: false, - // // By default, it assumes @babel/runtime@7.0.0. Since we use >7.0.0, - // // better to explicitly specify the version so that it can reuse the - // // helper better. See https://github.com/babel/babel/issues/10261 - // // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require - // version: require('@babel/runtime/package.json') - // .version, - // regenerator: false, - // useESModules: true, - // // Undocumented option that lets us encapsulate our runtime, ensuring - // // the correct version is used - // // https://github.com/babel/babel/blob/090c364a90fe73d36a30707fc612ce037bdbbb24/packages/babel-plugin-transform-runtime/src/index.js#L35-L42 - // absoluteRuntime: absoluteRuntimePath, - // }, - // ], - // Adds syntax support for import() - isServer - ? require.resolve('babel-plugin-dynamic-import-node') - : require.resolve('@babel/plugin-syntax-dynamic-import'), - ], - }; -} -function babelPresets(api) { - const callerName = api.caller((caller) => caller?.name); - return getTransformOptions(callerName === 'server'); -} -exports.default = babelPresets; \ No newline at end of file +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], + plugins: ["styled-components"] +}; diff --git a/website/content/examples/api/animation.mdx b/website/content/examples/api/animation.mdx index cc2050ebea..7363c679af 100644 --- a/website/content/examples/api/animation.mdx +++ b/website/content/examples/api/animation.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {AnimationExample} from '@site'; +import {AnimationExample} from '@site/src/examples'; # Animation diff --git a/website/content/examples/api/cubemap.mdx b/website/content/examples/api/cubemap.mdx index 08baa62117..0963e94db5 100644 --- a/website/content/examples/api/cubemap.mdx +++ b/website/content/examples/api/cubemap.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {CubemapExample} from '@site'; +import {CubemapExample} from '@site/src/examples'; # Cubemap diff --git a/website/content/examples/api/texture-3d.mdx b/website/content/examples/api/texture-3d.mdx index 13f7da4bb6..307de79ef7 100644 --- a/website/content/examples/api/texture-3d.mdx +++ b/website/content/examples/api/texture-3d.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {Texture3DExample} from '@site'; +import {Texture3DExample} from '@site/src/examples'; # Texture 3D diff --git a/website/content/examples/index.mdx b/website/content/examples/index.mdx index 0d42fbdaa3..5247cf5787 100644 --- a/website/content/examples/index.mdx +++ b/website/content/examples/index.mdx @@ -1,6 +1,6 @@ # Examples -import {ExamplesIndex} from '@site/src/examples/components'; +import {ExamplesIndex} from '@vis.gl/docusaurus-website/components'; { diff --git a/website/content/examples/showcase/instancing.mdx b/website/content/examples/showcase/instancing.mdx index 494c45935a..8a81f07902 100644 --- a/website/content/examples/showcase/instancing.mdx +++ b/website/content/examples/showcase/instancing.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {InstancingExample} from '@site'; +import {InstancingExample} from '@site/src/examples'; # Instancing diff --git a/website/content/examples/showcase/persistence.mdx b/website/content/examples/showcase/persistence.mdx index b57319b98d..a503686c6a 100644 --- a/website/content/examples/showcase/persistence.mdx +++ b/website/content/examples/showcase/persistence.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {PersistenceExample} from '@site'; +import {PersistenceExample} from '@site/src/examples'; # Persistence diff --git a/website/content/examples/showcase/postprocessing.mdx b/website/content/examples/showcase/postprocessing.mdx index d3997dc0e8..0fe4907ce3 100644 --- a/website/content/examples/showcase/postprocessing.mdx +++ b/website/content/examples/showcase/postprocessing.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {PostprocessingExample} from '@site'; +import {PostprocessingExample} from '@site/src/examples'; # Postprocessing diff --git a/website/content/examples/table-of-contents.json b/website/content/examples/table-of-contents.json new file mode 100644 index 0000000000..93b0dabd6c --- /dev/null +++ b/website/content/examples/table-of-contents.json @@ -0,0 +1,42 @@ +[ + { + "type": "doc", + "label": "Overview", + "id": "index" + }, + { + "type": "category", + "label": "Showcase", + "items": [ + "showcase/instancing", + "showcase/persistence", + "showcase/postprocessing" + ] + }, + { + "type": "category", + "label": "API", + "items": [ + "api/animation", + "api/cubemap", + "api/texture-3d" + ] + }, + { + "type": "category", + "label": "Tutorials", + "items": [ + "tutorials/hello-triangle", + "tutorials/hello-cube", + "tutorials/lighting", + "tutorials/hello-gltf", + "tutorials/two-cubes", + "tutorials/instanced-cubes", + "tutorials/hello-instancing", + "tutorials/shader-modules", + "tutorials/shader-hooks", + "tutorials/transform-feedback", + "tutorials/transform" + ] + } +] \ No newline at end of file diff --git a/website/content/examples/tutorials/hello-cube.mdx b/website/content/examples/tutorials/hello-cube.mdx index 4720c73c48..e664d20dd3 100644 --- a/website/content/examples/tutorials/hello-cube.mdx +++ b/website/content/examples/tutorials/hello-cube.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloCubeExample} from '@site'; +import {HelloCubeExample} from '@site/src/examples'; # Hello Cube diff --git a/website/content/examples/tutorials/hello-gltf.mdx b/website/content/examples/tutorials/hello-gltf.mdx index 7cd50c1397..630dc778fa 100644 --- a/website/content/examples/tutorials/hello-gltf.mdx +++ b/website/content/examples/tutorials/hello-gltf.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloGLTFExample} from '@site'; +import {HelloGLTFExample} from '@site/src/examples'; # Hello glTF diff --git a/website/content/examples/tutorials/hello-instancing.mdx b/website/content/examples/tutorials/hello-instancing.mdx index 46ae783571..9f11335409 100644 --- a/website/content/examples/tutorials/hello-instancing.mdx +++ b/website/content/examples/tutorials/hello-instancing.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloInstancingExample} from '@site'; +import {HelloInstancingExample} from '@site/src/examples'; # Hello Instancing diff --git a/website/content/examples/tutorials/hello-triangle-geometry.mdx b/website/content/examples/tutorials/hello-triangle-geometry.mdx index ac7dfd932e..87dd2fe56b 100644 --- a/website/content/examples/tutorials/hello-triangle-geometry.mdx +++ b/website/content/examples/tutorials/hello-triangle-geometry.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloTriangleGeometryExample} from '@site'; +import {HelloTriangleGeometryExample} from '@site/src/examples'; # Triangle diff --git a/website/content/examples/tutorials/hello-triangle.mdx b/website/content/examples/tutorials/hello-triangle.mdx index e885709991..959d73c676 100644 --- a/website/content/examples/tutorials/hello-triangle.mdx +++ b/website/content/examples/tutorials/hello-triangle.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {HelloTriangleExample} from '@site'; +import {HelloTriangleExample} from '@site/src/examples'; # Hello Triangle diff --git a/website/content/examples/tutorials/instanced-cubes.mdx b/website/content/examples/tutorials/instanced-cubes.mdx index 1c4d8bc77b..34fe7b9d43 100644 --- a/website/content/examples/tutorials/instanced-cubes.mdx +++ b/website/content/examples/tutorials/instanced-cubes.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {InstancedCubesExample} from '@site'; +import {InstancedCubesExample} from '@site/src/examples'; # Instanced Cubes diff --git a/website/content/examples/tutorials/lighting.mdx b/website/content/examples/tutorials/lighting.mdx index 357b4b3311..75922c993d 100644 --- a/website/content/examples/tutorials/lighting.mdx +++ b/website/content/examples/tutorials/lighting.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {LightingExample} from '@site'; +import {LightingExample} from '@site/src/examples'; # Hello Lighting diff --git a/website/content/examples/tutorials/shader-hooks.mdx b/website/content/examples/tutorials/shader-hooks.mdx index 775328e958..d3f1f79c07 100644 --- a/website/content/examples/tutorials/shader-hooks.mdx +++ b/website/content/examples/tutorials/shader-hooks.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {ShaderHooksExample} from '@site'; +import {ShaderHooksExample} from '@site/src/examples'; # Shader Hooks diff --git a/website/content/examples/tutorials/shader-modules.mdx b/website/content/examples/tutorials/shader-modules.mdx index 0f62e5fc7b..e0fe88da1d 100644 --- a/website/content/examples/tutorials/shader-modules.mdx +++ b/website/content/examples/tutorials/shader-modules.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {ShaderModulesExample} from '@site'; +import {ShaderModulesExample} from '@site/src/examples'; # Shader Modules diff --git a/website/content/examples/tutorials/transform-feedback.mdx b/website/content/examples/tutorials/transform-feedback.mdx index 380c07e196..2ff520a71c 100644 --- a/website/content/examples/tutorials/transform-feedback.mdx +++ b/website/content/examples/tutorials/transform-feedback.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {TransformFeedbackExample} from '@site'; +import {TransformFeedbackExample} from '@site/src/examples'; # Transform Feedback diff --git a/website/content/examples/tutorials/transform.mdx b/website/content/examples/tutorials/transform.mdx index 50e61bdd92..8817b7f567 100644 --- a/website/content/examples/tutorials/transform.mdx +++ b/website/content/examples/tutorials/transform.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {TransformExample} from '@site'; +import {TransformExample} from '@site/src/examples'; # Transform diff --git a/website/content/examples/tutorials/two-cubes.mdx b/website/content/examples/tutorials/two-cubes.mdx index 745e8c92ca..eb6caa3e35 100644 --- a/website/content/examples/tutorials/two-cubes.mdx +++ b/website/content/examples/tutorials/two-cubes.mdx @@ -1,5 +1,5 @@ import {DeviceTabs} from '@site/src/react-luma'; -import {TwoCubesExample} from '@site'; +import {TwoCubesExample} from '@site/src/examples'; # Two Cubes diff --git a/website/content/showcase.json b/website/content/showcase.json deleted file mode 100644 index 583fb3bc1f..0000000000 --- a/website/content/showcase.json +++ /dev/null @@ -1,9 +0,0 @@ -[ - { - "name": "I3S Explorer", - "url": "https://i3s.loaders.gl/dashboard", - "image": "/images/examples/i3s-arcgis.jpg", - "links": {}, - "description": "Visualization and Debug Tool for I3S 3D geographic data" - } -] diff --git a/website/content/sidebars.js b/website/content/sidebars.js deleted file mode 100644 index 561d12e281..0000000000 --- a/website/content/sidebars.js +++ /dev/null @@ -1,12 +0,0 @@ - -const sidebar = require('../../docs/sidebar.json'); -// const examplesSidebar = require('./sidebar-examples.json'); - -const sidebars = { - sidebar, - // examplesSidebar -}; - -console.error(sidebars) - -module.exports = sidebars; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index e1768b5452..19f427346c 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -1,78 +1,29 @@ -// @ts-check -// Note: type annotations allow type checking and IDEs autocompletion - -const {resolve} = require('path'); - -const {themes} = require('prism-react-renderer'); -const lightCodeTheme = themes.github; -const darkCodeTheme = themes.dracula; - -/** @type {import('@docusaurus/types').Config} */ -const config = { - title: 'luma.gl', - tagline: 'Web GPU APIs', - url: 'https://luma.gl', - baseUrl: process.env.STAGING ? '/luma.gl/' : '/', - onBrokenLinks: 'warn', // TODO should throw once broken links are resolved - onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.png', - organizationName: 'visgl', // Usually your GitHub org/user name. - projectName: 'luma.gl', // Usually your repo name. - - presets: [ - // Examples - [ - 'classic', - /** @type {import('@docusaurus/preset-classic').Options} */ - ({ - docs: { - path: '../docs', - sidebarPath: require.resolve('./content/sidebars.js'), - // lastVersion: '9.0', - // versions: { - // '9.0': {banner: 'none'} - // }, - editUrl: 'https://github.com/visgl/luma.gl/tree/main/docs', - }, - theme: { - customCss: require.resolve('./src/css/custom.css'), - }, - }), - ], +const {getDocusaurusConfig} = require('@vis.gl/docusaurus-website'); + +const config = getDocusaurusConfig({ + projectName: 'luma.gl', + tagline: 'WebGPU and WebGL2 API for visualization and compute', + siteUrl: process.env.STAGING ? 'https://visgl.github.io/luma.gl' : 'https://luma.gl', + repoUrl: 'https://github.com/visgl/luma.gl', + + docsTableOfContents: require('../docs/table-of-contents.json'), + + examplesDir: './content/examples', + exampleTableOfContents: require('./content/examples/table-of-contents.json'), + + search: 'local', + customCss: ['./src/custom.css'], + navbarItems: [ + { + to: '/docs/tutorials', + label: 'Tutorials' + }, + { + to: 'https://medium.com/vis-gl', + label: 'Blog' + } ], - plugins: [ - [ - '@docusaurus/plugin-content-docs', - { - id: 'examples', - path: './content/examples', - routeBasePath: 'examples', - sidebarPath: resolve('./content/sidebar-examples.js'), - breadcrumbs: false, - docItemComponent: resolve('./src/examples/components/doc-item-component.tsx') - } - ], - [ - './src/ocular-docusaurus/ocular-docusaurus-plugin', - {alias: { - '@luma.gl/core': `${__dirname}/../modules/core/src`, - '@luma.gl/engine': `${__dirname}/../modules/engine/src`, - '@luma.gl/experimental': `${__dirname}/../modules/experimental/src`, - '@luma.gl/shadertools': `${__dirname}/../modules/shadertools/src`, - '@luma.gl/test-utils': `${__dirname}/../modules/test-utils/src`, - '@luma.gl/webgl': `${__dirname}/../modules/webgl/src`, - '@luma.gl/webgpu': `${__dirname}/../modules/webgpu/src`, - // deprecated modules - '@luma.gl/constants': `${__dirname}/../modules/constants/src` - }} - ], - [ - require.resolve('@cmfcmf/docusaurus-search-local'), - { - // Options here - } - ], [ '@docusaurus/plugin-client-redirects', { @@ -84,7 +35,7 @@ const config = { .replace('/docs/examples/tutorials/', '/docs/tutorials/') ]; } - + // docs/modules/*/api-reference <= modules/*/docs/api-reference if (existingPath.includes('/docs/modules/')) { return [ @@ -98,83 +49,7 @@ const config = { } } ] - ], - - themeConfig: - /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ - ({ - navbar: { - title: 'luma.gl', - logo: { - alt: 'vis.gl Logo', - src: 'img/favicon.png', - }, - items: [ - { - to: '/examples', - position: 'left', - label: 'Examples', - }, - { - to: '/docs', - position: 'left', - label: 'Docs', - }, - { - to: '/docs/tutorials', - position: 'left', - label: 'Tutorials', - }, - {to: 'https://medium.com/vis-gl', label: 'Blog', position: 'left'}, - { - href: 'https://github.com/visgl/luma.gl', - label: 'GitHub', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '../docs', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Slack workspace', - href: 'https://join.slack.com/t/deckgl/shared_invite/zt-7oeoqie8-NQqzSp5SLTFMDeNSPxi7eg', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'vis.gl blog (Medium)', - href: 'https://medium.com/vis-gl', - }, - { - label: 'GitHub', - href: 'https://github.com/visgl/luma.gl', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} OpenJS Foundation`, - }, - prism: { - theme: lightCodeTheme, - darkTheme: darkCodeTheme, - }, - }), -}; + ] +}); module.exports = config; diff --git a/website/index.ts b/website/index.ts deleted file mode 100644 index 7677623c2e..0000000000 --- a/website/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -// Tutorials -export * from './src/examples/templates'; diff --git a/website/package.json b/website/package.json index c08a0de703..c96843718c 100644 --- a/website/package.json +++ b/website/package.json @@ -17,41 +17,25 @@ "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids" }, + "resolution_notes": { + "cheerio": "@cmfcmf/docusaurus-search-local breaks with v1.0.0 production release" + }, + "resolutions": { + "cheerio": "1.0.0-rc.9" + }, "dependencies": { - "@algolia/autocomplete-js": "^1.8.3", - "@docusaurus/core": "^3.4.0", - "@docusaurus/preset-classic": "^3.4.0", - "@luma.gl/constants": "9.1.0-beta.1", - "@luma.gl/core": "9.1.0-beta.1", - "@luma.gl/engine": "9.1.0-beta.1", - "@luma.gl/gltf": "9.1.0-beta.1", - "@luma.gl/shadertools": "9.1.0-beta.1", - "@luma.gl/webgl": "9.1.0-beta.1", - "@luma.gl/webgpu": "9.1.0-beta.1", - "@mdx-js/react": "^3.0.0", + "@docusaurus/core": "^3.0.0", + "@vis.gl/docusaurus-website": "1.0.0-alpha.21", "clsx": "^1.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "styled-components": "^5.3.3", "zustand": "^4.1.5" }, "devDependencies": { - "@cmfcmf/docusaurus-search-local": "^1.0.0", - "@docusaurus/module-type-aliases": "^3.4.0", - "@docusaurus/plugin-client-redirects": "^3.4.0", - "@docusaurus/plugin-content-docs": "^3.4.0", - "@docusaurus/tsconfig": "^3.4.0", - "babel-plugin-styled-components": "^2.0.0", - "docusaurus-mdx-checker": "^3.0.0", - "docusaurus-node-polyfills": "^1.0.0", - "prism-react-renderer": "^2.1.0", - "ts-node": "~10.9.1", - "typescript": "^5.5.0" + "@docusaurus/tsconfig": "^3.0.0", + "docusaurus-mdx-checker": "^3.0.0" }, "browserslist": {}, - "engines": { - "node": ">=18.0" - }, "volta": { "node": "20.11.1", "yarn": "4.4.0" diff --git a/website/src/components/HomepageFeatures.js b/website/src/components/HomepageFeatures.js deleted file mode 100644 index 858fefa4e8..0000000000 --- a/website/src/components/HomepageFeatures.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './HomepageFeatures.module.css'; - -const FeatureList = [ - { - title: 'The Right Stuff', - Svg: require('../../static/img/icon-high-precision.svg').default, - description: ( - <> - Focused on high-performance data processing, e.g. instanced rendering and GPU compute. - - ), - }, - { - title: 'Battle Tested', - Svg: require('../../static/img/icon-high-precision.svg').default, - description: ( - <> - The core 3D rendering technology behind tools such as - deck.gl, kepler.gl, and avs.auto. - - ), - }, - { - title: 'Modern, Portable API', - Svg: require('../../static/img/icon-high-precision.svg').default, - description: ( - <> - A clean TypeScript and WebGPU friendly GPU API that works across WebGPU and WebGL 2. - - ), - }, -]; - -function Feature({Svg, title, description}) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures() { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/website/src/components/HomepageFeatures.module.css b/website/src/components/HomepageFeatures.module.css deleted file mode 100644 index b248eb2e5d..0000000000 --- a/website/src/components/HomepageFeatures.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/website/src/css/custom.css b/website/src/custom.css similarity index 68% rename from website/src/css/custom.css rename to website/src/custom.css index 6abe148544..8f1828b67f 100644 --- a/website/src/css/custom.css +++ b/website/src/custom.css @@ -15,14 +15,3 @@ --ifm-color-primary-lightest: rgb(146, 224, 208); --ifm-code-font-size: 95%; } - -.docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -html[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); -} diff --git a/website/src/examples.tsx b/website/src/examples.tsx new file mode 100644 index 0000000000..9969563286 --- /dev/null +++ b/website/src/examples.tsx @@ -0,0 +1,220 @@ +// + +import React from 'react'; +import {LumaExample} from './react-luma'; + +import AnimationApp from '../../examples/api/animation/app'; +import CubemapApp from '../../examples/api/cubemap/app'; +import Texture3DApp from '../../examples/api/texture-3d/app'; + +// import PerformanceApp from '../../examples/performance/stress-test/app'; + +// import DOFApp from '../../examples/showcase/dof/app'; +// import GeospatialApp from '../../examples/showcase/geospatial/app'; +// import GLTFApp from '../../examples/showcase/gltf/app'; +import InstancingApp from '../../examples/showcase/instancing/app'; +import PersistenceApp from '../../examples/showcase/persistence/app'; +import PostprocessingApp from '../../examples/showcase/postprocessing/app'; +// import WanderingApp from '../../examples/showcase/wandering/app'; + +import HelloTriangleGeometryApp from '../../examples/tutorials/hello-triangle-geometry/app'; +import HelloTriangleApp from '../../examples/tutorials/hello-triangle/app'; +import HelloCubeApp from '../../examples/tutorials/hello-cube/app'; +import TwoCubesApp from '../../examples/tutorials/hello-two-cubes/app'; +import InstancedCubesApp from '../../examples/tutorials/hello-instanced-cubes/app'; +import HelloInstancingApp from '../../examples/tutorials/hello-instancing/app'; +import HelloGLTFApp from '../../examples/tutorials/hello-gltf/app'; +import LightingApp from '../../examples/tutorials/lighting/app'; +import ShaderHooksApp from '../../examples/tutorials/shader-hooks/app'; +import ShaderModulesApp from '../../examples/tutorials/shader-modules/app'; +import TransformFeedbackApp from '../../examples/tutorials/transform-feedback/app'; +import TransformApp from '../../examples/tutorials/transform/app'; + +const exampleConfig = {}; + +// Showcase Examples + +export const InstancingExample: React.FC = props => ( + +); + +export const PersistenceExample: React.FC = props => ( + +); + +export const PostprocessingExample: React.FC = props => ( + +); + +// API Examples + +export const AnimationExample: React.FC = props => ( + +); + +export const CubemapExample: React.FC = props => ( + +); + +export const Texture3DExample: React.FC = props => ( + +); + +// Tutorial Examples + +export const HelloTriangleExample: React.FC = props => ( + +); + +export const HelloTriangleGeometryExample: React.FC = props => ( + +); + +export const HelloCubeExample: React.FC = props => ( + +); + +export const InstancedCubesExample: React.FC = props => ( + +); + +export const TwoCubesExample: React.FC = props => ( + +); + +export const LightingExample: React.FC = props => ( + +); + +export const HelloGLTFExample: React.FC = props => ( + +); + +export const HelloInstancingExample: React.FC = props => ( + +); + +export const ShaderHooksExample: React.FC = props => ( + +); + +export const ShaderModulesExample: React.FC = props => ( + +); + +export const TransformFeedbackExample: React.FC = props => ( + +); + +export const TransformExample: React.FC = props => ( + +); + diff --git a/website/src/examples/components/doc-item-component.tsx b/website/src/examples/components/doc-item-component.tsx deleted file mode 100644 index e119341d51..0000000000 --- a/website/src/examples/components/doc-item-component.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import useBaseUrl from '@docusaurus/useBaseUrl'; - -const DemoContainer = styled.div` -overflow: hidden !important; -left: 0; -right: 0; -top: 0; -bottom: 0; - -> h1 { - display: none -} -` - -/** Passed to @docusaurus/plugin-content-docs to render the mdx content */ -export default function({content, route}) { - const MDXComponent = content; - const indexPath = useBaseUrl('/examples'); - - if (route.path === indexPath) { - return ( -
- -
- ) - } - - return ( - - - - ); -} diff --git a/website/src/examples/components/examples-index.tsx b/website/src/examples/components/examples-index.tsx deleted file mode 100644 index 2c14cbc8b9..0000000000 --- a/website/src/examples/components/examples-index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -// Note: this is internal API and may change in a future release -// https://github.com/facebook/docusaurus/discussions/7457 -import {useDocsSidebar} from '@docusaurus/theme-common/internal'; -import useBaseUrl from '@docusaurus/useBaseUrl'; - -import {MainExamples, ExamplesGroup, ExampleCard, ExampleHeader, ExampleTitle} from './styled'; - -function renderItem(item, getThumbnail) { - const imageUrl = useBaseUrl(getThumbnail(item)); - const {label} = typeof item === 'string' ? {label: item} : item; - const {href} = typeof item === 'string' ? {href: item} : item;; - return ( - - {label} - - {label} - - - ); -} - -function renderCategory({label, items}, getThumbnail) { - return [ - {label}, - {items.map(item => renderItem(item, getThumbnail))} - ]; -} - -export function ExamplesIndex({getThumbnail}) { - const sidebar = useDocsSidebar(); - return ( - - {sidebar.items.map(item => { - if (item.type === 'category') { - return renderCategory(item, getThumbnail); - } - return null; - })} - - ); -} diff --git a/website/src/examples/components/index.tsx b/website/src/examples/components/index.tsx deleted file mode 100644 index 5042e5c1aa..0000000000 --- a/website/src/examples/components/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export {ExamplesIndex} from './examples-index'; -export {isMobile} from './is-mobile'; diff --git a/website/src/examples/components/is-mobile.tsx b/website/src/examples/components/is-mobile.tsx deleted file mode 100644 index 857e3348b4..0000000000 --- a/website/src/examples/components/is-mobile.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export const isMobile = (props) => - `@media screen and (max-width: 480px)`; diff --git a/website/src/examples/components/styled.ts b/website/src/examples/components/styled.ts deleted file mode 100644 index 61286ec8fa..0000000000 --- a/website/src/examples/components/styled.ts +++ /dev/null @@ -1,73 +0,0 @@ -import styled from 'styled-components'; -import {isMobile} from './is-mobile'; - -export const ExampleHeader = styled.div` - font: bold 20px/28px var(--ifm-font-family-base); - color: var(--ifm-color-gray-800); - margin: 0 20px; - border-bottom: 1px solid 20px; - display: inline-block; - padding: 20px 20px 4px 0; -`; - -export const MainExamples = styled.main` - padding: 16px 0; -`; - -export const ExamplesGroup = styled.main` - display: flex; - flex-wrap: wrap; - padding: 16px; -`; - -export const ExampleCard = styled.a` - cursor: pointer; - text-decoration: none; - width: 50%; - max-width: 240px; - line-height: 0; - outline: none; - padding: 4px; - position: relative; - img { - transition-property: filter; - transition-duration: var(--ifm-transition-slow); - transition-timing-function: var(--ifm-transition-timing-default); - } - &:hover { - box-shadow: var(--ifm-global-shadow-md); - } - &:hover img { - filter: contrast(0.2); - } - ${isMobile} { - width: 33%; - min-width: 200px; - } - @media screen and (max-width: 632px) { - width: 50%; - } -`; - -export const ExampleTitle = styled.div` - position: absolute; - display: flex; - justify-content: center; - flex-direction: column; - color: var(--ifm-color-white); - font-size: 1.5em; - text-align: center; - line-height: initial; - width: 90%; - height: 90%; - top: 5%; - left: 5%; - border: solid 1px var(--ifm-color-white); - opacity: 0; - transition-property: opacity; - transition-duration: var(--ifm-transition-slow); - transition-timing-function: var(--ifm-transition-timing-default); - &:hover { - opacity: 1; - } -`; diff --git a/website/src/examples/templates.tsx b/website/src/examples/templates.tsx deleted file mode 100644 index 9c023cd495..0000000000 --- a/website/src/examples/templates.tsx +++ /dev/null @@ -1,320 +0,0 @@ -// - -import React from 'react'; -import {LumaExample} from '../react-luma'; - -import AnimationApp from '../../../examples/api/animation/app'; -import CubemapApp from '../../../examples/api/cubemap/app'; -import Texture3DApp from '../../../examples/api/texture-3d/app'; - -// import PerformanceApp from '../../../examples/performance/stress-test/app'; - -// import DOFApp from '../../../examples/showcase/dof/app'; -// import GeospatialApp from '../../../examples/showcase/geospatial/app'; -// import GLTFApp from '../../../examples/showcase/gltf/app'; -import InstancingApp from '../../../examples/showcase/instancing/app'; -import PersistenceApp from '../../../examples/showcase/persistence/app'; -import PostprocessingApp from '../../../examples/showcase/postprocessing/app'; -// import WanderingApp from '../../../examples/showcase/wandering/app'; - -import HelloTriangleGeometryApp from '../../../examples/tutorials/hello-triangle-geometry/app'; -import HelloTriangleApp from '../../../examples/tutorials/hello-triangle/app'; -import HelloCubeApp from '../../../examples/tutorials/hello-cube/app'; -import TwoCubesApp from '../../../examples/tutorials/hello-two-cubes/app'; -import InstancedCubesApp from '../../../examples/tutorials/hello-instanced-cubes/app'; -import HelloInstancingApp from '../../../examples/tutorials/hello-instancing/app'; -import HelloGLTFApp from '../../../examples/tutorials/hello-gltf/app'; -import LightingApp from '../../../examples/tutorials/lighting/app'; -import ShaderHooksApp from '../../../examples/tutorials/shader-hooks/app'; -import ShaderModulesApp from '../../../examples/tutorials/shader-modules/app'; -import TransformFeedbackApp from '../../../examples/tutorials/transform-feedback/app'; -import TransformApp from '../../../examples/tutorials/transform/app'; - -const exampleConfig = {}; - -// API Examples - -export const AnimationExample: React.FC = props => ( - -); - -export const CubemapExample: React.FC = props => ( - -); - -export const Texture3DExample: React.FC = props => ( - -); - -// Performance Examples - -// export default class Example extends React.Component { -// render() { -// const { pageContext } = this.props; -// const exampleConfig = (pageContext && pageContext.exampleConfig) || {}; -// return ( -// -// ); -// } -// } - -// Showcase Examples - -// export const DOFExample: React.FC = props => ( -// -// ); - -// export const GeospatialExample: React.FC = props => ( -// -// ); - -// export const GLTFExample: React.FC = props => ( -// -// ); - -export const InstancingExample: React.FC = props => ( - -); - -export const PersistenceExample: React.FC = props => ( - -); - -export const PostprocessingExample: React.FC = props => ( - -); - -// export const WanderingExample: React.FC = props => ( -// -// ); - -// Tutorial Examples - -export const HelloCubeExample: React.FC = props => ( - -); - -export const HelloInstancingExample: React.FC = props => ( - -); - -export const HelloTriangleExample: React.FC = props => ( - -); - -export const InstancedTransformExample: React.FC = props => ( -

- Note: Transform examples temporarily disabled -

-); - -export const LightingExample: React.FC = props => ( - -); - -export const HelloGLTFExample: React.FC = props => ( - -); - -export const ShaderHooksExample: React.FC = props => ( - -); - -export const ShaderModulesExample: React.FC = props => ( - -); - -export const TransformFeedbackExample: React.FC = props => ( - -); - -export const TransformExample: React.FC = props => ( - -); - -// WebGL Examples - -// export default class ExternalWebGLContextExample extends React.Component { -// render() { -// const { pageContext } = this.props; -// const exampleConfig = (pageContext && pageContext.exampleConfig) || {}; -// return ( -// -// ); -// } -// } - -// import AnimationLoop from '../../../examples/webgl/hello-instancing-webgl/app'; - -// export default class Example extends React.Component { -// render() { -// const { pageContext } = this.props; -// const exampleConfig = (pageContext && pageContext.exampleConfig) || {}; -// return ( -// -// ); -// } -// } - -// import AnimationLoop from '../../../examples/webgl/shader-modules-webgl/app'; - -// export default class Example extends React.Component { -// render() { -// const { pageContext } = this.props; -// const exampleConfig = (pageContext && pageContext.exampleConfig) || {}; -// return ( -// -// ); -// } -// } - -// WebGPU Examples - -export const HelloTriangleGeometryExample: React.FC = props => ( - -); - -export const InstancedCubesExample: React.FC = props => ( - -); - -export const TwoCubesExample: React.FC = props => ( - -); - -// export const TexturedCubeExample: React.FC = props => ( -// -// ); diff --git a/website/src/ocular-docusaurus/ocular-docusaurus-plugin/index.js b/website/src/ocular-docusaurus/ocular-docusaurus-plugin/index.js deleted file mode 100644 index e24d6c26e0..0000000000 --- a/website/src/ocular-docusaurus/ocular-docusaurus-plugin/index.js +++ /dev/null @@ -1,26 +0,0 @@ -// @ts-check - - /** @returns {import('@docusaurus/types').Plugin} */ - function OcularDocusaurusPlugin(context, opts = {alias: {}}) { - return { - name: 'ocular-docusaurus-plugin', - configureWebpack(_config, isServer, utils) { - // console.log(JSON.stringify(opts)); - // console.log(JSON.stringify(_config.resolve.alias).slice(0, 300)); - Object.assign(_config.resolve.alias, opts.alias); - const {getStyleLoaders} = utils; - return { - module: { - rules: [ - { - test: /\.pcss$/, - use: getStyleLoaders(isServer, {importLoaders: 1, modules: true}) - } - ], - }, - }; - }, - }; -} - -module.exports = OcularDocusaurusPlugin; diff --git a/website/src/ocular-docusaurus/react-ocular/components/SEO.jsx b/website/src/ocular-docusaurus/react-ocular/components/SEO.jsx deleted file mode 100644 index 7f87e1b848..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/SEO.jsx +++ /dev/null @@ -1,109 +0,0 @@ -/* global window */ -import React, {useEffect} from 'react'; -import Helmet from 'react-helmet'; - -function joinPath(...parts) { - return parts - .map((part) => part && part.replace(/^\//, '').replace(/\/$/, '')) - .filter(Boolean) - .join('/'); -} - -// TODO/ib - modify this component to work with ocular content -export default function SEO({config, path, pageContext}) { - useEffect(() => { - if (!config.GA_TRACKING_ID) { - return; - } - if (typeof window !== 'undefined') { - window.dataLayer = window.dataLayer || []; - function gtag() { - window.dataLayer.push(arguments); - } - gtag('js', new Date()); - gtag('config', config.GA_TRACKING_ID); - } - }, [config.GA_TRACKING_ID]); - - let {title, description} = pageContext; - - const isPost = Boolean(title); - const siteURL = joinPath(config.PROJECT_URL, config.pathPrefix); - const image = joinPath(siteURL, config.PROJECT_IMAGE || config.PROJECT_ORG_LOGO); - const postURL = joinPath(siteURL, path); - title = title ? `${config.PROJECT_NAME} | ${title}` : config.PROJECT_NAME; - description = description || config.PROJECT_DESC; - - const schemaOrgJSONLD = [ - { - '@context': 'http://schema.org', - '@type': 'WebSite', - url: siteURL, - name: config.PROJECT_NAME - } - ]; - if (isPost) { - schemaOrgJSONLD.push([ - { - '@context': 'http://schema.org', - '@type': 'BreadcrumbList', - itemListElement: [ - { - '@type': 'ListItem', - position: 1, - item: { - '@id': postURL, - name: title, - image - } - } - ] - }, - { - '@context': 'http://schema.org', - '@type': 'BlogPosting', - url: siteURL, - name: title, - headline: title, - image: { - '@type': 'ImageObject', - url: image - }, - description - } - ]); - } - return ( - - {/* General tags */} - - - - {/* Schema.org tags */} - - - {/* OpenGraph tags */} - - {isPost ? : null} - - - - - - {/* Twitter Card tags */} - - - - - - - {/* Google Analytics */} - {config.GA_TRACKING_ID && ( - - )} - - ); -} diff --git a/website/src/ocular-docusaurus/react-ocular/components/chevron-down.jsx b/website/src/ocular-docusaurus/react-ocular/components/chevron-down.jsx deleted file mode 100644 index 44564ba114..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/chevron-down.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, {Component} from 'react'; - -export default class ChevronDownIcon extends Component { - render() { - const {className = '', width = 24, height = 24} = this.props; - return ( - - Chevron Down - - - ); - } -} diff --git a/website/src/ocular-docusaurus/react-ocular/components/docs-header.jsx b/website/src/ocular-docusaurus/react-ocular/components/docs-header.jsx deleted file mode 100644 index e76dad33bd..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/docs-header.jsx +++ /dev/null @@ -1,55 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -// Copyright (c) 2018 Uber Technologies, Inc. -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -import React, {Component} from 'react'; -import ControlledHeader, {generateHeaderLinks, propTypes} from './header.component'; - -// we are exposing 2 header components. -// 1 - DocsHeader, which will update the state of the top level layout. -// we need to expose whether the menu is toggled or not because it could -// affect how TOC is displayed in smaller screens. -// 2 - Header, which won't and just maintain its own state. -// both components are wrappers around ControlledHeader. - -export default class DocsHeader extends Component { - constructor(props) { - super(props); - // we need to know the number of links before render. - // this is not an ideal solution. - // some of the links which are hardcoded should come from configuration - // TODO - let's create the links server side, then pass them to the template as props. - this.state = { - links: generateHeaderLinks(props) - }; - } - - renderHeader() { - const {links} = this.state; - - return ; - } - - render() { - return this.renderHeader(); - } -} - -DocsHeader.propTypes = propTypes; diff --git a/website/src/ocular-docusaurus/react-ocular/components/github-contributors.jsx b/website/src/ocular-docusaurus/react-ocular/components/github-contributors.jsx deleted file mode 100644 index 352305dae6..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/github-contributors.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, {Component} from 'react'; -import styled from 'styled-components'; - -// GitHub api has rate-limits. We want to cache the response -// as much as we can. This component gets re-mounted multiple times. -let cachedResponse = null; - -/* for debug */ -// cachedResponse = [ -// { -// id: 'Pessimistress', -// avatar_url: 'https://avatars3.githubusercontent.com/u/2059298', -// login: 'Pessimistress', -// html_url: 'https://github.com/Pessimistress' -// }, -// { -// id: 'ibgreen', -// avatar_url: 'https://avatars1.githubusercontent.com/u/7025232', -// login: 'ibgreen', -// html_url: 'https://github.com/ibgreen' -// } -// ]; - -const ContribContainer = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: center; -`; - -const ContribLink = styled.a` - margin: 10px; - display: inline-block; - width: 6rem; - height: 8rem; - text-decoration: none; - text-align: center; - color: ${(props) => props.theme.colors.mono900}; - - &:hover img { - border: 4px solid #fff; - box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.3); - opacity: 1; - } -`; - -const ContribImage = styled.img` - border-radius: 50%; - border: 4px solid transparent; - box-shadow: 0 0 0 hsla(0, 0%, 0%, 0.3); - transition: border 0.5s, box-shadow 0.5s; - opacity: 0.9; -`; - -export default class GithubContributors extends Component { - constructor(props) { - super(props); - this.state = { - response: cachedResponse - }; - } - - componentDidMount() { - if (cachedResponse) { - return; - } - - const {project} = this.props; - fetch(`https://api.github.com/repos/${project}/contributors`) - .then((response) => response.json()) - .then((response) => { - cachedResponse = response; - this.setState({response}); - }); - } - - render() { - const {response} = this.state; - const contributors = Array.isArray(response) ? response : []; - return ( -
-

Contributors

- - {contributors.map( - (contributor) => - contributor && ( - - -
{contributor.login}
- - ) - )} - -
- ); - } -} diff --git a/website/src/ocular-docusaurus/react-ocular/components/github-stars.jsx b/website/src/ocular-docusaurus/react-ocular/components/github-stars.jsx deleted file mode 100644 index 786f27eea6..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/github-stars.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, {Component, Fragment} from 'react'; -import StarIcon from 'react-icons/lib/go/star'; - -// GitHub api has rate-limits. We want to cache the response -// as much as we can. This component gets re-mounted multiple times. -let cachedResponse = null; - -export default class GithubStars extends Component { - constructor(props) { - super(props); - this.state = { - response: cachedResponse - }; - } - - componentDidMount() { - if (cachedResponse) { - return; - } - - const {project} = this.props; - fetch(`https://api.github.com/repos/${project}`) - .then((response) => response.json()) - .then((response) => { - cachedResponse = response; - this.setState({response}); - }); - } - - render() { - const {response} = this.state; - const count = (response && response.stargazers_count) || '...'; - return ( - - {count} - - - ); - } -} diff --git a/website/src/ocular-docusaurus/react-ocular/components/header.component.jsx b/website/src/ocular-docusaurus/react-ocular/components/header.component.jsx deleted file mode 100644 index 036537c711..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/header.component.jsx +++ /dev/null @@ -1,203 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -// Copyright (c) 2018 Uber Technologies, Inc. -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -import React from 'react'; -import PropTypes from 'prop-types'; -import GithubIcon from 'react-icons/lib/go/mark-github'; - -import {isInternalURL} from '../../utils/links-utils.js'; -import { - HamburgerMenu, - Header as StyledHeader, - HeaderLink, - HeaderLinkExternal, - HeaderLogo, - HeaderLogoExternal, - HeaderLinksBlock, - HeaderLinkContainer, - HeaderMenuBlock, - HeaderMenu, - HeaderMenuLink, - HeaderMenuBackground, - TocToggle -} from '../styled/header'; - -// import GithubStars from './github-stars.jsx'; - -export const propTypes = { - config: PropTypes.object.isRequired -}; - -function GithubLink() { - return ( - <> - GitHub - - - ); -} - -function UniversalHeaderLink({to, href, label}) { - const isInternal = href ? isInternalURL(href) : isInternalURL(to); - - if (isInternal) { - return {label}; - } else { - return ( - - {label} - - ); - } -} - -function UniversalLogoLink({to, label}) { - const isInternal = isInternalURL(to); - - if (isInternal) { - return {label}; - } else { - return ( - - {label} - - ); - } -} - -/** - * Generate all the links in the header. - * @param {Object} props Input props which includes site config. - * @return {Array} Array of link object ({label, to, href, classnames}) - */ -export function generateHeaderLinks(props) { - const {config = {}} = props; - - const exampleLink = config.EXAMPLES && - config.EXAMPLES.length > 0 && {label: 'Examples', to: '/examples'}; - - const githubLink = config.PROJECT_TYPE === 'github' && { - href: `https://github.com/${config.PROJECT_ORG}/${config.PROJECT_NAME}`, - label: - }; - - const links = [ - exampleLink, - {label: 'Documentation', to: config.HOME_PATH ? '/' : '/docs'}, - {label: 'Search', to: '/search'} - ]; - - if (config.ADDITIONAL_LINKS && config.ADDITIONAL_LINKS.length > 0) { - config.ADDITIONAL_LINKS.map((link) => ({ - ...link, - label: link.name - })).forEach((link) => { - if (Number.isFinite(link.index)) { - links.splice(link.index, 0, link); - } else { - links.push(link); - } - }); - } - - links.push(githubLink); - - return links.filter(Boolean); -} - -const HeaderLinks = ({links}) => { - return ( - - {/* If the no examples marker, return without creating pages */} - {links.map((link, index) => ( - - - - ))} - {/* this.renderStars() */} - - ); -}; - -const ControlledHeader = ({ - links, - config = {}, - toggleMenu, - toggleToc, - isTocOpen, - isMenuOpen, - isSmallScreen -}) => { - const {PROJECT_NAME, PROJECTS = [], HEADER_LINK_URL = '/'} = config; - - const externalLinks = PROJECTS.map(({name, url}) => ( - - {name} - - )); - - const onClickHamburger = (event) => { - toggleMenu(!isMenuOpen); - event.stopPropagation(); - }; - - return isSmallScreen ? ( - toggleMenu(false)}> - - - - - - - - {toggleToc && ( - { - toggleMenu(false); - toggleToc(!isTocOpen); - }} - > - Table of Contents - - )} - - - - {isMenuOpen && } - - ) : ( - toggleMenu(false)}> - - - - - {externalLinks} - - - - - - {isMenuOpen && } - - ); -}; - -export default ControlledHeader; diff --git a/website/src/ocular-docusaurus/react-ocular/components/header.jsx b/website/src/ocular-docusaurus/react-ocular/components/header.jsx deleted file mode 100644 index 274503b551..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/header.jsx +++ /dev/null @@ -1,79 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -// Copyright (c) 2018 Uber Technologies, Inc. -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -import React, {Component} from 'react'; -import ControlledHeader, {generateHeaderLinks, propTypes} from './header.component'; - -// we are exposing 2 header components. -// 1 - DocsHeader, which will update the state of the top level layout. -// we need to expose whether the menu is toggled or not because it could -// affect how TOC is displayed in smaller screens. -// 2 - Header, which won't and just maintain its own state. -// both components are wrappers around ControlledHeader. - -export default class Header extends Component { - constructor(props) { - super(props); - // we need to know the number of links before render. - // this is not an ideal solution. - // some of the links which are hardcoded should come from configuration - // TODO - let's create the links server side, then pass them to the template as props. - this.state = { - collapsed: true, - links: generateHeaderLinks(props) - }; - this.handleClick = this.handleClick.bind(this); - } - - handleClick() { - this.setState({collapsed: !this.state.collapsed}); - } - - // note that rn, we don't render stars per design, but this could change - /* - renderStars() { - const {config} = this.props; - if (config.PROJECT_TYPE === 'github') { - return ( - - ); - } - - return null; - } - */ - - render() { - const {links, collapsed} = this.state; - return ( - {}} - /> - ); - } -} - -Header.propTypes = propTypes; diff --git a/website/src/ocular-docusaurus/react-ocular/components/info-panel.jsx b/website/src/ocular-docusaurus/react-ocular/components/info-panel.jsx deleted file mode 100644 index 6af33c708b..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/info-panel.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, {PureComponent} from 'react'; -import { - PanelContainer, - PanelContent, - PanelTitle, - PanelExpander, - SourceLink -} from '../styled/example'; - -export default class InfoPanel extends PureComponent { - constructor(props) { - super(props); - this.state = {isExpanded: false}; - } - - render() { - const {title, children, sourceLink} = this.props; - const {isExpanded} = this.state; - - return ( - - this.setState({isExpanded: !isExpanded})}> -
{title}
- {isExpanded ? '✕' : 'i'} - - {children} - - View Code ↗ - - - ); - } -} diff --git a/website/src/ocular-docusaurus/react-ocular/components/markdown.jsx b/website/src/ocular-docusaurus/react-ocular/components/markdown.jsx deleted file mode 100644 index 7615018964..0000000000 --- a/website/src/ocular-docusaurus/react-ocular/components/markdown.jsx +++ /dev/null @@ -1,129 +0,0 @@ -import React, {cloneElement} from 'react'; -import {MDXRenderer} from 'gatsby-plugin-mdx'; -import {MDXProvider} from '@mdx-js/react'; - -// note - these typographic elements are taken directly from baseui. -// we can consider customizing them by first importing in styled/index, then -// giving them special parameters - -import { - A, - GatsbyA, - CodeBlock, - H1, - H2, - H3, - H4, - H5, - H6, - InlineCode, - P, - List, - ListItem, - Pre, - Img, - BlockQuote, - Table, - TableHeaderCell, - TableBodyCell -} from '../styled/typography'; - -import {parseLinks} from '../../utils/links-utils.js'; - -const CustomLinkWrapper = (path, relativeLinks, config) => { - const CustomLink = ({href, ...props}) => { - const updatedLink = parseLinks(href, path, relativeLinks, config); - return updatedLink ? : ; - }; - return CustomLink; -}; - -const CustomPre = (props) => { - // the point of this component is to distinguish styling of inline elements - // with code blocks (ie 
...
). - - const {children, ...otherProps} = props; - return ( - 
-      {React.Children.map(children, (child) => {
-        // this means a child of this 
 element is a  element, or  element styled
-        // by Styletron
-        if (child.type === 'code' || child.type.displayName === 'Styled(code)') {
-          return ;
-        }
-        // else we just clone the element as is
-        return React.cloneElement(child);
-      })}
-    

-  );
-};
-
-const API_REGEX = /^code-classlanguage-text(.*?)code/;
-const CODE_REGEX = /code-classlanguage-text(.*?)code/g;
-
-// Sanitize auto generated anchor ids
-const CustomHeader = (ComponentType, id, props, anchors) => {
-  if (!id) {
-    return ;
-  }
-
-  if (API_REGEX.test(id)) {
-    id = id.match(API_REGEX)[1];
-  } else {
-    id = id.replace(CODE_REGEX, ($0, $1) => $1);
-  }
-  // Make sure we don't have duplicate ids on this page
-  if (anchors[id]) {
-    let suffix = 1;
-    while (anchors[`${id}-${suffix}`]) suffix++;
-    id = `${id}-${suffix}`;
-  }
-  anchors[id] = true;
-
-  const children = props.children.slice();
-  const autolink = children[0];
-  if (autolink.props && autolink.props.href) {
-    children[0] = cloneElement(autolink, {key: 'anchor', href: `#${id}`});
-  }
-  return (
-    
-      {children}
-    
-  );
-};
-
-export default (props) => {
-  const {relativeLinks, path, config} = props;
-  // note - we can add many other custom components.
-
-  const anchors = {};
-  const HeaderWrapper = (ComponentType) => {
-    return ({id, ...props}) => CustomHeader(ComponentType, id, props, anchors);
-  };
-
-  const components = {
-    h1: H1,
-    h2: HeaderWrapper(H2),
-    h3: HeaderWrapper(H3),
-    h4: HeaderWrapper(H4),
-    h5: HeaderWrapper(H5),
-    h6: HeaderWrapper(H6),
-    p: P,
-    ul: List,
-    li: ListItem,
-    pre: CustomPre,
-    img: Img,
-    code: InlineCode,
-    table: Table,
-    th: TableHeaderCell,
-    td: TableBodyCell,
-    blockquote: BlockQuote,
-    a: relativeLinks ? CustomLinkWrapper(path, relativeLinks, config) : A
-  };
-
-  return (
-    
-      {props.body}
-    
-  );
-};
diff --git a/website/src/ocular-docusaurus/react-ocular/components/search.jsx b/website/src/ocular-docusaurus/react-ocular/components/search.jsx
deleted file mode 100644
index 48866b32af..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/components/search.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {Component} from 'react';
-
-export default class SearchIcon extends Component {
-  render() {
-    return (
-      
-        Search
-        
-      
-    );
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.component.jsx b/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.component.jsx
deleted file mode 100644
index 5aeec0ed68..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.component.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/* eslint-disable prefer-const */
-// Copyright (c) 2018 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import React from 'react';
-import {Link} from 'gatsby';
-
-import {TocChevron, TocHeader, TocLink, TocEntry, TocSubpages} from '../styled/toc';
-
-// sub components of the TOC
-
-// This component only creates a Link component if clicking on that Link will
-// effectively change routes. If no path is passed or if the path is not
-// usable then it just renders a div. That should not be the case
-
-const SafeLink = ({
-  active,
-  depth,
-  index,
-  hasChildren,
-  isTocOpen,
-  id,
-  name,
-  path,
-  toggleEntry = () => {}
-}) => {
-  // Gatsby  element emmits warning if "external" links are used
-  // "internal" links start with `/`
-  // https://github.com/gatsbyjs/gatsby/issues/11243
-  if (path && !path.startsWith('/')) {
-    path = `/${path}`; // eslint-disable-line
-  }
-
-  return (
-     toggleEntry(id)}>
-      {hasChildren && }
-      {!path || typeof path !== 'string' ? (
-        {name}
-      ) : (
-        
-          
-            {name}
-          
-        
-      )}
-    
-  );
-};
-
-const renderRoute = ({route, id, index, depth, tocState, toggleEntry}) => {
-  const children = route.chapters || route.entries || [];
-  const updatedId = id.concat(index);
-
-  // parts of the TOC with children
-
-  if (children.length) {
-    const name = route.title;
-    const routeInfo = tocState[updatedId];
-    return (
-      

-         0}
-          id={updatedId}
-          name={name}
-          /* uncomment to have the entry act as link to its first child */
-          /* path={routeInfo && routeInfo.pathToFirstChild} */
-          toggleEntry={toggleEntry}
-        />
-        
-          {children.map((childRoute, idx) => {
-            return renderRoute({
-              depth: depth + 1,
-              id: updatedId,
-              index: idx,
-              route: childRoute,
-              tocState,
-              toggleEntry
-            });
-          })}
-        
-      

-    );
-  }
-
-  // leaves
-
-  const remark = route.childMdx;
-  // first syntax is toc for documentation, second is toc for examples
-  const name = (remark && remark.frontmatter && remark.frontmatter.title) || route.title;
-  const target = (remark && remark.fields && remark.fields.slug) || route.path;
-  return (
-    

-      
  • 
-        
-      
    • 
-    
    
-  );
-};
-
-const ControlledToc = ({tree, tocState, toggleEntry}) => {
-  return (
-    <>
-      {tree.map((route, index) =>
-        renderRoute({
-          route,
-          index,
-          depth: 0,
-          tocState,
-          toggleEntry,
-          id: []
-        })
-      )}
-    
-  );
-};
-
-export default ControlledToc;
diff --git a/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.jsx b/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.jsx
deleted file mode 100644
index d29e7c8cb6..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/components/table-of-contents.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-/* eslint-disable operator-assignment */
-/* eslint-disable no-param-reassign */
-/* eslint-disable prefer-const */
-// Copyright (c) 2018 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import React, {PureComponent} from 'react';
-import ControlledToc from './table-of-contents.component';
-
-// util functions to pre-process the TOC
-
-function isOpen(entry, expanded) {
-  // this is all the reasons why a given toc entry with children could
-  // be expanded.
-  // either it's manually expanded, or it's on the active route and
-  // it's not manually collapsed.
-  return expanded[entry.id] === true || (entry.childIsSelected && expanded[entry.id] !== false);
-}
-
-function updateHeights(tocEntries, expanded) {
-  // at this stage we know which entries are expanded or not, whether manually
-  // or because they contain the active page. now let's compute their heights
-
-  // why is it important to compute heights? because without an an absolute
-  // number we can't transition on height and have smooth collapse effects.
-
-  Object.values(tocEntries).forEach((tocEntry) => {
-    if (tocEntry.children) {
-      if (isOpen(tocEntry, expanded)) {
-        let queue = [tocEntry];
-        let height = -1;
-        while (queue.length) {
-          const current = queue.shift();
-          height = height + 1;
-          if (isOpen(current, expanded)) {
-            current.children.forEach((c) => queue.push(tocEntries[c]));
-          }
-        }
-        tocEntry.height = height;
-      } else {
-        tocEntry.height = 0;
-      }
-    }
-  });
-  return tocEntries;
-}
-
-function getTocState({chapters, slug, expanded}) {
-  // we try to generate the height of each toc entry and whether it's expanded
-  // or not based on the toc structure (chapters), whether some entries are
-  // manually expanded or not (open) and what's the current page (slug)
-
-  // there may be a lot of code but this goes very fast even for long tocs.
-
-  // one way to uniquely identify entries is by creating an id made of the
-  // index position of all of its parents and itself.
-  // ie [2, 0, 1] - 3nd chapter, 1st entry, 2nd item.
-
-  const entries = {};
-  let queue = chapters.map((chapter, i) => ({
-    ...chapter,
-    id: [i],
-    parents: []
-  }));
-  while (queue.length) {
-    const current = queue.shift();
-    const {id} = current;
-    entries[id] = {id};
-
-    const children = (current.chapters || current.entries || []).map((child, i) => ({
-      ...child,
-      id: id.concat(i),
-      parents: [...current.parents, id]
-    }));
-    if (children.length) {
-      entries[id].children = children.map((c) => c.id);
-    }
-    children.forEach((c) => queue.push(c));
-
-    let isSelected = current.childMdx
-      ? current.childMdx.fields.slug === slug
-      : current.path === slug;
-    if (isSelected) {
-      // only happens for leave nodes
-      current.parents.forEach((parent) => {
-        entries[parent].childIsSelected = true;
-        // currently the behavior of entries is to toggle them
-        // if we switch to using them as link to the first child (as before)
-        // we can just uncomment that line
-        // entries[parent].pathToFirstChild = current.childMdx.fields.slug;
-      });
-    }
-    entries[id].isSelected = isSelected;
-  }
-  return updateHeights(entries, expanded);
-}
-
-export default class TableOfContents extends PureComponent {
-  constructor(props) {
-    super(props);
-    const {slug, chapters, firstItemIsExpanded} = props;
-    const expanded = firstItemIsExpanded ? {0: true} : {};
-    const tocState = getTocState({slug, chapters, expanded});
-
-    // tocState contains the state of the TOC with information such as
-    // what is the current height of an entry?
-    // is an entry selected or is any of its children selected?
-    // expanded records whether the user manually expanded or collapsed
-    // a section of the TOC.
-    // why keep them separated? tocState get regenerated for instance
-    // when the slug changes (which may mean that some sections get expanded/collapsed)
-    // we don't want to overwrite the manual actions of the user in that case.
-    // instead, we first apply the "organic" changes of the toc, then on top of that
-    // we add the results of the user's action
-
-    this.state = {
-      tocState,
-      expanded
-    };
-    this.toggleEntry = this.toggleEntry.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {chapters, slug, firstItemIsExpanded} = this.props;
-    if (slug !== prevProps.slug || chapters !== prevProps.chapters) {
-      const expanded =
-        chapters === prevProps.chapters
-          ? this.state.expanded
-          : firstItemIsExpanded
-          ? {0: true}
-          : {};
-      const tocState = getTocState({chapters, slug, expanded});
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        tocState,
-        expanded
-      });
-    }
-  }
-
-  toggleEntry(id) {
-    const {expanded, tocState} = this.state;
-    let updatedExpanded = {...expanded};
-    const entry = tocState[id];
-
-    // if this entry has been manually expanded, then we manually collapse it.
-    // else - either this entry has never been manually expanded/collapsed,
-    // or it has been manually collapsed - we expand it.
-    updatedExpanded[id] = !isOpen(entry, expanded);
-    // then we need to update the heights.
-    const updatedTocState = updateHeights({...tocState}, updatedExpanded);
-
-    this.setState({
-      tocState: updatedTocState,
-      expanded: updatedExpanded
-    });
-  }
-
-  render() {
-    const {chapters: tree} = this.props;
-    const {tocState} = this.state;
-
-    if (!tree) {
-      return null;
-    }
-    return ;
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/components/website-config.jsx b/website/src/ocular-docusaurus/react-ocular/components/website-config.jsx
deleted file mode 100644
index 5b048ce942..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/components/website-config.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Using React context to share common query data with all pages.
-// Per recommendations in
-// https://www.gatsbyjs.org/packages/gatsby-plugin-layout/
-
-// Context.js
-import React from 'react';
-
-const defaultContextValue = {
-  initialized: false,
-  config: {},
-  tableOfContents: null,
-  theme: {},
-  // For passing data upwards
-  data: {},
-  set: () => {}
-};
-
-const {Provider, Consumer} = React.createContext(defaultContextValue);
-
-export class WebsiteConfigProvider extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.setData = this.setData.bind(this);
-    this.state = {
-      ...defaultContextValue,
-      ...props.value,
-      set: this.setData
-    };
-  }
-
-  setData(newData) {
-    this.setState((state) => ({
-      data: {
-        ...state.data,
-        ...newData
-      }
-    }));
-  }
-
-  render() {
-    const {children} = this.props;
-    return {children};
-  }
-}
-
-export default Consumer;
diff --git a/website/src/ocular-docusaurus/react-ocular/default-theme.js b/website/src/ocular-docusaurus/react-ocular/default-theme.js
deleted file mode 100644
index 233d5b99e6..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/default-theme.js
+++ /dev/null
@@ -1,50 +0,0 @@
-export default {
-  primary50: '#EDF3FE',
-  primary100: '#D2E0FC',
-  primary200: '#9CBCF8',
-  primary300: '#548BF4',
-  primary400: '#276EF1',
-  primary500: '#174EB6',
-  primary600: '#123D90',
-  primary700: '#0C2960',
-
-  negative50: '#FDF0EF',
-  negative100: '#FADBD7',
-  negative200: '#F4AFA7',
-  negative300: '#EB7567',
-  negative400: '#E54937',
-  negative500: '#AE372A',
-  negative600: '#892C21',
-  negative700: '#5C1D16',
-
-  warning50: '#FEF3EC',
-  warning100: '#FBE2CF',
-  warning200: '#F6BA8B',
-  warning300: '#F19248',
-  warning400: '#ED6F0E',
-  warning500: '#B4540B',
-  warning600: '#8E4308',
-  warning700: '#5F2C06',
-
-  positive50: '#EBF8F2',
-  positive100: '#CDEDDE',
-  positive200: '#88D3B0',
-  positive300: '#43B982',
-  positive400: '#07A35A',
-  positive500: '#057C44',
-  positive600: '#046236',
-  positive700: '#034124',
-
-  mono100: '#FFFFFF',
-  mono200: '#F7F7F7',
-  mono300: '#F0F0F0',
-  mono400: '#E5E5E5',
-  mono500: '#CCCCCC',
-  mono600: '#B3B3B3',
-  mono700: '#999999',
-  mono800: '#666666',
-  mono900: '#333333',
-  mono1000: '#000000',
-
-  primaryFontFamily: 'UberMove, Helvetica, Arial, sans-serif'
-};
diff --git a/website/src/ocular-docusaurus/react-ocular/index.js b/website/src/ocular-docusaurus/react-ocular/index.js
deleted file mode 100644
index 0ca0a82ed4..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-
-// export {default as Header} from './components/header';
-// // export {default as Footer} from './src/components/layout/footer.jsx';
-
-// export {default as TableOfContents} from './components/table-of-contents';
-
-export {default as InfoPanel} from './components/info-panel';
-
-// ENABLES REDEFINING DOCUMENTATION.JSX
-// export * from './styled/typography';
-// export {default as Markdown} from './components/markdown';
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/body.js b/website/src/ocular-docusaurus/react-ocular/styled/body.js
deleted file mode 100644
index 6ef684db32..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/body.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-
-export const isMobile = (props) =>
-  `@media screen and (max-width: 768px)`;
-
-// top-level layoout
-export const BodyContainerFull = styled.div`
-  margin: 0 auto;
-  ${isMobile} {
-    padding: 0;
-    order: 2;
-  }
-`;
-
-// the problem the following is solving is what happens if the document is very long
-// on a responsive device. If the user toggles the table of content, because the
-// document is long, the TOC will be not visible (above the viewport).
-// to address that, when the TOC is open, we are removing the document from the flow, so
-// that the TOC will be visible. Now, there are several ways to do that, some of which
-// introduce another problem - when closing the table of contents, we want the user to be
-// back exactly where they were before they opened it, as opposed to back on the top.
-// that's one way to approach this -
-export const BodyContainerToC = styled.div`
-  height: 100%;
-  width: 100%;
-  ${isMobile} {
-    padding: 0;
-    order: 2;
-  }
-`;
-
-export const BodyContainerInner = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-`;
-
-export const Body = styled.div`
-  width: 100vw;
-  height: 100vh;
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/create-theme.js b/website/src/ocular-docusaurus/react-ocular/styled/create-theme.js
deleted file mode 100644
index 65591f8fc1..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/create-theme.js
+++ /dev/null
@@ -1,166 +0,0 @@
-export default function createTheme(primitives) {
-  return {
-    breakpoints: {
-      small: 320,
-      medium: 768,
-      large: 1280
-    },
-
-    colors: {
-      // Primary Palette
-      primary50: primitives.primary50,
-      primary100: primitives.primary100,
-      primary200: primitives.primary200,
-      primary300: primitives.primary300,
-      primary400: primitives.primary400,
-      primary: primitives.primary400,
-      primary500: primitives.primary500,
-      primary600: primitives.primary600,
-      primary700: primitives.primary700,
-
-      // Negative Palette
-      negative50: primitives.negative50,
-      negative100: primitives.negative100,
-      negative200: primitives.negative200,
-      negative300: primitives.negative300,
-      negative400: primitives.negative400,
-      negative: primitives.negative400,
-      negative500: primitives.negative500,
-      negative600: primitives.negative600,
-      negative700: primitives.negative700,
-
-      // Warning Palette
-      warning50: primitives.warning50,
-      warning100: primitives.warning100,
-      warning200: primitives.warning200,
-      warning300: primitives.warning300,
-      warning400: primitives.warning400,
-      warning: primitives.warning400,
-      warning500: primitives.warning500,
-      warning600: primitives.warning600,
-      warning700: primitives.warning700,
-
-      // Positive Palette
-      positive50: primitives.positive50,
-      positive100: primitives.positive100,
-      positive200: primitives.positive200,
-      positive300: primitives.positive300,
-      positive400: primitives.positive400,
-      positive: primitives.positive400,
-      positive500: primitives.positive500,
-      positive600: primitives.positive600,
-      positive700: primitives.positive700,
-
-      // Monochrome Palette
-      white: primitives.mono100,
-      mono100: primitives.mono100,
-      mono200: primitives.mono200,
-      mono300: primitives.mono300,
-      mono400: primitives.mono400,
-      mono500: primitives.mono500,
-      mono600: primitives.mono600,
-      mono700: primitives.mono700,
-      mono800: primitives.mono800,
-      mono900: primitives.mono900,
-      mono1000: primitives.mono1000,
-      black: primitives.mono1000,
-
-      // Semantic Colors
-
-      // Font Color
-      colorPrimary: primitives.mono1000,
-      colorSecondary: primitives.mono800,
-
-      // Background
-      background: primitives.mono100,
-      backgroundAlt: primitives.mono100,
-      backgroundInv: primitives.mono1000,
-
-      // Foreground
-      foreground: primitives.mono1000,
-      foregroundAlt: primitives.mono800,
-      foregroundInv: primitives.mono100,
-
-      // Borders
-      border: primitives.mono500,
-      borderAlt: primitives.mono600,
-      borderFocus: primitives.primary400,
-      borderError: primitives.negative400,
-
-      // Links
-      linkText: primitives.primary400,
-      linkVisited: primitives.primary500,
-      linkHover: primitives.primary600
-    },
-    typography: {
-      font100: `normal 11px/16px ${primitives.primaryFontFamily}`,
-      font200: `normal 12px/20px ${primitives.primaryFontFamily}`,
-      font250: `bold 12px/20px ${primitives.primaryFontFamily}`,
-      font300: `normal 14px/20px ${primitives.primaryFontFamily}`,
-      font350: `bold 14px/20px ${primitives.primaryFontFamily}`,
-      font400: `normal 16px/24px ${primitives.primaryFontFamily}`,
-      font450: `bold 16px/24px ${primitives.primaryFontFamily}`,
-      font500: `bold 20px/28px ${primitives.primaryFontFamily}`,
-      font600: `bold 24px/36px ${primitives.primaryFontFamily}`,
-      font700: `bold 32px/48px ${primitives.primaryFontFamily}`,
-      font800: `bold 40px/56px ${primitives.primaryFontFamily}`,
-      font900: `bold 52px/68px ${primitives.primaryFontFamily}`,
-      font1000: `normal 72px/96px ${primitives.primaryFontFamily}`,
-      font1100: `normal 96px/116px ${primitives.primaryFontFamily}`
-    },
-    sizing: {
-      scale0: '2px',
-      scale100: '4px',
-      scale200: '6px',
-      scale300: '8px',
-      scale400: '10px',
-      scale500: '12px',
-      scale550: '14px',
-      scale600: '16px',
-      scale700: '20px',
-      scale800: '24px',
-      scale900: '32px',
-      scale1000: '40px',
-      scale1200: '48px',
-      scale1400: '56px',
-      scale1600: '64px',
-      scale2400: '96px',
-      scale3200: '128px',
-      scale4800: '192px'
-    },
-    lighting: {
-      shadow400: '0 1px 4px hsla(0, 0%, 0%, 0.16)',
-      shadow500: '0 2px 8px hsla(0, 0%, 0%, 0.16)',
-      shadow600: '0 4px 16px hsla(0, 0%, 0%, 0.16)',
-      shadow700: '0 8px 24px hsla(0, 0%, 0%, 0.16)',
-      overlay0: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0)',
-      overlay100: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.04)',
-      overlay200: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.08)',
-      overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
-      overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
-      overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
-      overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
-    },
-    borders: {
-      border100: 'solid 1px hsla(0, 0%, 0%, 0.04)',
-      border200: 'solid 1px hsla(0, 0%, 0%, 0.08)',
-      border300: 'solid 1px hsla(0, 0%, 0%, 0.12)',
-      border400: 'solid 1px hsla(0, 0%, 0%, 0.16)',
-      border500: 'solid 1px hsla(0, 0%, 0%, 0.2)',
-      border600: 'solid 1px hsla(0, 0%, 0%, 0.24)',
-      radius100: '2px',
-      radius200: '4px',
-      radius300: '8px',
-      radius400: '12px',
-      useRoundedCorners: true
-    },
-    animation: {
-      timing100: '0.25s',
-      timing400: '0.4s',
-      timing700: '0.6s',
-      easeOutCurve: 'cubic-bezier(.2, .8, .4, 1)',
-      easeInCurve: 'cubic-bezier(.8, .2, .6, 1)',
-      easeInOutCurve: 'cubic-bezier(0.4, 0, 0.2, 1)'
-    }
-  };
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/example.js b/website/src/ocular-docusaurus/react-ocular/styled/example.js
deleted file mode 100644
index 95449adb82..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/example.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import styled from 'styled-components';
-import {isMobile} from './body';
-
-// example
-
-export const MainExample = styled.main`
-  width: 100%;
-  height: 100%;
-  position: relative;
-`;
-
-// examples
-
-export const ExampleHeader = styled.div`
-  display: inline-block;
-`;
-
-export const MainExamples = styled.main`
-`;
-
-export const ExamplesGroup = styled.main`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-/*
-export const ExampleCard = styled(Link)`
-  cursor: pointer;
-  text-decoration: none;
-  width: 50%;
-  max-width: 240px;
-  line-height: 0;
-  outline: none;
-  padding: ${(props) => props.theme.sizing.scale100};
-  position: relative;
-  img {
-    transition-property: filter;
-    transition-duration: ${(props) => props.theme.animation.timing400};
-    transition-timing-function: ${(props) => props.theme.animation.easeInOutCurve};
-  }
-  &:hover {
-    box-shadow: ${(props) => props.theme.lighting.shadow600};
-  }
-  &:hover img {
-    filter: contrast(0.2);
-  }
-  ${isMobile} {
-    width: 33%;
-    min-width: 200px;
-  }
-  @media screen and (max-width: 632px) {
-    width: 50%;
-  }
-`;
-*/
-
-export const ExampleTitle = styled.div`
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  font-size: 1.5em;
-  text-align: center;
-  width: 90%;
-  height: 90%;
-  top: 5%;
-  left: 5%;
-  opacity: 0;
-  transition-property: opacity;
-  &:hover {
-    opacity: 1;
-  }
-`;
-
-export const PanelContainer = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 344px;
-  max-height: 96%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-y: overlay;
-  outline: none;
-  z-index: 1;
-
-  ${isMobile} {
-    width: auto;
-    left: 0;
-  }
-`;
-
-export const PanelExpander = styled.div`
-  display: none;
-  font-family: serif;
-  font-size: 0.8em;
-  text-align: center;
-  border-radius: 50%;
-  ${isMobile} {
-    display: block;
-  }
-`;
-
-export const PanelTitle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  ${isMobile} {
-    cursor: pointer;
-  }
-`;
-
-export const PanelContent = styled.div`
-  div > * {
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-  div > label {
-    display: inline-block;
-    width: 40%;
-    margin-right: 10%;
-    margin-top: 2px;
-    margin-bottom: 2px;
-  }
-  div > input,
-  div > a,
-  div > button,
-  div > select {
-    text-transform: none;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline-block;
-    width: 50%;
-    text-align: left;
-  }
-  div > button {
-    color: initial;
-  }
-  div > button:disabled {
-    cursor: default;
-  }
-  div > input {
-    &:disabled {
-    }
-    &[type='checkbox'] {
-      height: auto;
-    }
-  }
-  p {
-    white-space: initial;
-  }
-  ${isMobile} {
-  }
-`;
-
-export const SourceLink = styled.a`
-  display: block;
-  text-align: right;
-  ${isMobile} {
-  }
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/header.js b/website/src/ocular-docusaurus/react-ocular/styled/header.js
deleted file mode 100644
index 29b8c29b40..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/header.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React from 'react';
-import {Link} from 'gatsby';
-import {isMobile} from './body';
-
-import styled from 'styled-components';
-
-export const Header = styled.header`
-  z-index: 1001;
-  align-items: center;
-  background-color: ${(props) => props.theme.colors.mono1000};
-  color: ${(props) => props.theme.colors.mono100};
-  display: flex;
-  height: ${(props) => props.theme.sizing.scale1600};
-  justify-content: space-between;
-  padding: 0 36px;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  user-select: none;
-  white-space: nowrap;
-  position: fixed;
-  ${isMobile} {
-    position: static;
-  }
-`;
-
-export const HeaderContainer = styled.div`
-  grid-column: 1/3;
-  grid-row: 1/2;
-  ${isMobile} {
-    order: 1;
-  }
-`;
-
-export const HeaderMenuBlock = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-`;
-
-export const HeaderLogo = styled(Link)`
-  font: ${(props) => props.theme.typography.font450};
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.mono100};
-  &:visited {
-    color: ${(props) => props.theme.colors.mono100};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const HeaderLogoExternal = styled.a`
-  font: ${(props) => props.theme.typography.font450};
-  text-decoration: none;
-  &:visited {
-    color: ${(props) => props.theme.colors.mono100};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const HeaderMenu = styled.div`
-  background: ${(props) => props.theme.colors.mono1000};
-  display: flex;
-  box-sizing: content-box;
-  flex-direction: column;
-  position: absolute;
-  overflow: hidden;
-  min-width: 180px;
-  max-height: ${(props) => (props.$collapsed ? 0 : props.$nbItems * 48)}px;
-  padding-bottom: ${(props) => (props.$collapsed ? 0 : props.theme.sizing.scale800)};
-  top: ${(props) => props.theme.sizing.scale1600};
-  left: ${(props) => props.theme.sizing.scale600};
-  transition-property: max-height, padding-bottom;
-  transition-duration: ${(props) => props.theme.animation.timing400};
-  transition-timing-function: ${(props) => props.theme.animation.easeInOutCurve};
-  z-index: 100;
-
-  ${isMobile} {
-    width: 100%;
-    left: 0;
-  }
-`;
-
-export const HeaderMenuBackground = styled.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: transparent;
-  z-index: 1;
-
-  ${isMobile} {
-    background: rgba(0, 0, 0, 0.3);
-  }
-`;
-
-export const HeaderMenuLink = styled.a`
-  display: block;
-  padding: ${(props) => props.theme.sizing.scale400} ${(props) => props.theme.sizing.scale1600};
-  text-decoration: none;
-  font: ${(props) => props.theme.typography.font300};
-
-  ${isMobile} {
-    font: ${(props) => props.theme.typography.font500};
-  }
-  &:visited {
-    color: ${(props) => props.theme.colors.mono100};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const HeaderLinksBlock = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-
-  ${isMobile} {
-    display: block;
-  }
-`;
-
-const StyledHamburgerMenu = styled.div`
-  cursor: pointer;
-  justify-content: space-between;
-  display: flex;
-  flex-direction: column;
-  padding: 3px 1px 4px;
-  margin-right: ${(props) => props.theme.sizing.scale600};
-  height: ${(props) => props.theme.sizing.scale800};
-  width: ${(props) => props.theme.sizing.scale800};
-`;
-
-const HamburgerBar = styled.div`
-  background-color: ${(props) => props.theme.colors.mono100};
-  height: 1px;
-  width: 100%;
-`;
-
-export const HamburgerMenu = ({onClick}) => (
-  
-    
-    
-    
-  
-);
-
-export const HeaderLink = styled(Link)`
-  color: ${(props) => props.theme.colors.mono100};
-  text-decoration: none;
-  &:visited {
-    color: ${(props) => props.theme.colors.mono100};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const HeaderLinkExternal = styled.a`
-  color: ${(props) => props.theme.colors.mono100};
-  text-decoration: none;
-  &:visited {
-    color: ${(props) => props.theme.colors.mono100};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const HeaderLinkContainer = styled.div`
-  font: ${(props) => props.theme.typography.font300};
-  flex: 1 1 0;
-  padding-left: ${(props) => props.theme.sizing.scale700};
-
-  ${isMobile} {
-    font: ${(props) => props.theme.typography.font500};
-    padding: ${(props) => props.theme.sizing.scale400} ${(props) => props.theme.sizing.scale1000};
-  }
-`;
-
-export const TocToggle = styled.div`
-  color: ${(props) => props.theme.colors.mono100};
-  cursor: pointer;
-  line-height: ${(props) => props.theme.sizing.scale1600};
-  user-select: none;
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/home.js b/website/src/ocular-docusaurus/react-ocular/styled/home.js
deleted file mode 100644
index 81c4fbdb35..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/home.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import styled from 'styled-components';
-import {Link} from 'gatsby';
-import {isMobile} from '?./body';
-
-export const Banner = styled.section`
-  position: relative;
-  height: 30rem;
-  background: ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'mono900' : 'mono400']};
-  color: ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'mono100' : 'mono900']};
-  z-index: 0;
-  ${isMobile} {
-    height: 80vh;
-  }
-`;
-
-export const Container = styled.div`
-  position: relative;
-  padding: 2rem;
-  max-width: 80rem;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-`;
-
-export const BannerContainer = styled(Container)`
-  position: absolute;
-  bottom: 0;
-  height: auto;
-  padding-left: 4rem;
-  z-index: 0;
-  pointer-events: none;
-`;
-
-export const HeroExampleContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-`;
-
-export const Section = styled.section`
-  &:nth-child(2n + 1) {
-    background: #e8e8e8;
-  }
-`;
-
-export const ProjectName = styled.h1`
-  font-size: 5em;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 4px;
-  font-weight: 700;
-  margin: 0;
-  margin-bottom: 16px;
-`;
-
-export const GetStartedLink = styled(Link)`
-  pointer-events: all;
-  font-size: 12px;
-  line-height: 44px;
-  letter-spacing: 2px;
-  font-weight: bold;
-  margin: 24px 0;
-  padding: 0 4rem;
-  pointer-events: all;
-  display: inline-block;
-  text-decoration: none;
-  transition: background-color 250ms ease-in, color 250ms ease-in;
-  border: solid 2px ${(props) => props?.theme?.colors?.primary400};
-  color: ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'mono100' : 'mono900']};
-  border-image: linear-gradient(
-    to right,
-    ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'primary400' : 'primary700']} 0%,
-    ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'primary100' : 'primary400']} 100%
-  );
-  border-image-slice: 2;
-  &:visited {
-    color: ${(props) => props?.theme?.colors[props?.colortheme === 'dark' ? 'mono100' : 'mono900']};
-  }
-  &:active {
-    color: ${(props) => props?.theme?.colors?.mono100};
-  }
-  &:hover {
-    color: ${(props) => props?.theme?.colors?.mono100};
-    background-color: ${(props) => props?.theme?.colors?.primary400};
-  }
-`;
-
-export const Footer = styled.footer`
-  position: absolute;
-  bottom: -$footer-height;
-  width: 100%;
-  z-index: 2;
-  background-image: url(data:image/gif;base64,R0lGODlhIAAgAKIAABUjMRYkMhclM0xXYU1YYgAAAAAAAAAAACwAAAAAIAAgAAADKjgjEP4wyklWmzg/IbTPwPWNZGmeaKqubOu+cCzPdG3feK7vfO//wKAwAQA7);
-  background-size: 32px;
-  background-repeat: repeat;
-  background-position: 16px -8px;
-  color: ${(props) => props?.theme?.colors?.mono100};
-`;
-
-export const FooterText = styled.div`
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 400;
-  letter-spacing: 2px;
-  opacity: 0?.4;
-  margin-bottom: 1rem;
-  margin-right: 1rem;
-`;
-
-export const FooterLogo = styled.img`
-  max-height: 64px;
-  max-width: 64px;
-  display: inline-block;
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/search.js b/website/src/ocular-docusaurus/react-ocular/styled/search.js
deleted file mode 100644
index ff51954a3c..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/search.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import {Link} from 'gatsby';
-import styled from 'styled-components';
-
-import {A} from './typography';
-
-// search
-
-export const SearchContainer = styled.div`
-  position: relative;
-  height: ${(props) => props.theme.sizing.scale1000};
-  margin-bottom: 20px;
-  background: ${(props) => props.theme.colors.mono200};
-`;
-
-export const IconContainer = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => props.theme.sizing.scale1000};
-  height: ${(props) => props.theme.sizing.scale1000};
-`;
-
-export const SearchInput = styled.input`
-  width: 100%;
-  border: 1px solid ${(props) => props.theme.colors.mono500};
-  transition: 0.3s;
-  font-size: 14px;
-  font-weight: 500;
-  line-jeight: 20px;
-  padding: 10px 10px 10px 40px;
-  &:focus {
-    box-shadow: ${(props) => props.theme.lighting.shadow600};
-    border-color: rgb(39, 110, 241);
-    outline: none;
-  }
-`;
-
-export const MainSearch = styled.main`
-  font: ${(props) => props.theme.typography.font300};
-  width: 600px;
-  max-width: 90%;
-  margin: ${(props) => props.theme.sizing.scale2400} auto 0px;
-`;
-
-export const SearchResultItem = styled.div`
-  margin: 1em 0;
-`;
-
-export const SearchResultLink = styled(Link)`
-  font: ${(props) => props.theme.typography.font450};
-  margin-bottom: 0.5rem;
-  color: ${(props) => props.theme.colors.linkText};
-  text-decoration: none;
-  &:visited {
-    color: ${(props) => props.theme.colors.linkVisited};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-`;
-
-export const SearchResultHighlight = styled.span`
-  display: inline-block;
-  background: yellow;
-`;
-
-export const SearchResultPager = styled(A)`
-  cursor: pointer;
-  padding: 20px 0 80px;
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/toc.jsx b/website/src/ocular-docusaurus/react-ocular/styled/toc.jsx
deleted file mode 100644
index d996f63841..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/toc.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-
-import ChevronDown from '../components/chevron-down';
-import {isMobile} from './body';
-
-export const TocChevron = styled(ChevronDown)`
-  height: 16px;
-  width: 16px;
-  position: absolute;
-  left: ${(props) => props.$depth * 12 + 24}px;
-  top: 20px;
-  transform: ${(props) => (props.$isTocOpen ? 'none' : 'rotate(-90deg)')};
-  transition: transform 0.3s;
-`;
-
-export const TocEntry = styled.div`
-  font: ${(props) => props.theme.typography.font350};
-  border-top: 1px solid
-    ${(props) => (props.$depth || props.$index === 0 ? 'tranparent' : props.theme.colors.mono400)};
-  color: ${(props) => (props.$depth ? props.theme.colors.mono800 : props.theme.colors.mono1000)};
-  cursor: pointer;
-  margin: -0.5px 0;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-export const TocHeader = styled.span`
-  display: block;
-  padding: 16px 16px 16px ${(props) => props.$depth * 12 + 48}px;
-  &:hover {
-    background: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const TocLink = styled.div`
-  a {
-    display: block;
-    padding: 16px 16px 16px ${(props) => props.$depth * 12 + 48}px;
-    color: ${(props) =>
-      props.$active
-        ? props.theme.colors.primary400
-        : props.$depth
-        ? props.theme.colors.mono800
-        : props.theme.colors.mono1000} !important;
-    text-decoration: none;
-  }
-  &:hover {
-    background: ${(props) => props.theme.colors.mono200};
-  }
-`;
-
-export const TocSubpages = styled.ul`
-  list-style: none;
-  margin: 0;
-  max-height: ${(props) => props.$height * 56}px;
-  overflow: hidden;
-  padding: 0;
-  transition: max-height 0.3s;
-`;
-
-export const TocContainer = styled.div`
-  position: fixed;
-  top: 0;
-  padding: ${(props) => props.theme.sizing.scale1600} 0;
-  max-width: 300px;
-  height: 100%;
-  z-index: 2;
-  border-right: 1px solid ${(props) => props.theme.colors.mono500};
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: 100%;
-
-  ${isMobile} {
-    max-width: 100%;
-    height: initial;
-    border-right: none;
-    position: sticky;
-    padding: 0;
-    transition: opacity 0.3s, transform 0.3s;
-    opacity: ${(props) => (props.$isTocOpen ? 1 : 0)};
-    max-height: ${(props) => (props.$isTocOpen ? 'unset' : 0)};
-    overflow: ${(props) => (props.$isTocOpen ? 'visible' : 'hidden')};
-    transform: ${(props) => (props.$isTocOpen ? 'translateY(0)' : 'translateY(30px)')};
-  }
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/styled/typography.js b/website/src/ocular-docusaurus/react-ocular/styled/typography.js
deleted file mode 100644
index e4b9becaf7..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/styled/typography.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import styled from 'styled-components';
-import {Link} from 'gatsby';
-
-export const A = styled.a`
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.linkText};
-  &:visited {
-    color: ${(props) => props.theme.colors.linkVisited};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-`;
-
-export const GatsbyA = styled(Link)`
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.linkText};
-  &:visited {
-    color: ${(props) => props.theme.colors.linkVisited};
-  }
-  &:active {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-  &:hover {
-    color: ${(props) => props.theme.colors.linkHover};
-  }
-`;
-
-export const H1 = styled.h1`
-  font: ${(props) => props.theme.typography.font800};
-  letter-spacing: 0.02em;
-  margin: 4px 0 24px;
-`;
-
-export const H2 = styled.h2`
-  font: ${(props) => props.theme.typography.font700};
-  margin: 24px 0 16px;
-`;
-
-export const H3 = styled.h3`
-  font: ${(props) => props.theme.typography.font600};
-`;
-
-export const H4 = styled.h4`
-  font: ${(props) => props.theme.typography.font500};
-`;
-
-export const H5 = styled.h5`
-  font: ${(props) => props.theme.typography.font450};
-`;
-
-export const H6 = styled.h6`
-  font: ${(props) => props.theme.typography.font350};
-`;
-
-export const P = styled.p`
-  margin: '0 0 16px';
-`;
-
-export const List = styled.ul`
-  margin: 0 0 12px;
-`;
-
-export const ListItem = styled.li`
-  margin-bottom: 4px;
-`;
-
-export const MarkdownBody = styled.div`
-  font: ${(props) => props.theme.typography.font300};
-  padding: 36px;
-  max-width: 692px;
-`;
-
-export const InlineCode = styled.code`
-  background-color: ${(props) => props.theme.colors.mono200};
-  border-radius: ${(props) => props.theme.sizing.scale100};
-  padding: 0 5px;
-  font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
-    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
-    'Nimbus Mono L', 'Courier New', Courier, monospace;
-  font-size: 0.9em;
-  margin: 1px 0;
-  line-height: calc(1.5em / 0.9 - 2px);
-  display: inline-block;
-  vertical-align: top;
-`;
-
-export const CodeBlock = styled.code`
-  font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
-    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
-    'Nimbus Mono L', 'Courier New', Courier, monospace;
-  font-size: 0.9em;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  tab-size: 4;
-  hyphens: none;
-  background-color: ${(props) => props.theme.colors.mono200};
-`;
-
-export const Pre = styled.pre`
-  font-size: 14px;
-  background-color: ${(props) => props.theme.colors.mono200};
-  padding: ${(props) => props.theme.sizing.scale200};
-  overflow-x: auto;
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: slategray;
-  }
-
-  .token.punctuation {
-    color: #999;
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: #905;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #690;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string {
-    color: #9a6e3a;
-    background: hsla(0, 0%, 100%, 0.5);
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: #07a;
-  }
-
-  .token.function,
-  .token.class-name {
-    color: #dd4a68;
-  }
-
-  .token.regex,
-  .token.important,
-  .token.variable {
-    color: #e90;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-`;
-
-export const Img = styled.img`
-  max-width: 100%;
-`;
-
-export const BlockQuote = styled.blockquote`
-  background-color: ${(props) => props.theme.colors.warning100};
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding: ${(props) => props.theme.sizing.scale400} ${(props) => props.theme.sizing.scale600};
-`;
-
-export const Table = styled.table`
-  border-collapse: collapse;
-  border-spacing: 1px;
-  width: 100%;
-`;
-
-export const TableHeaderCell = styled.th`
-  padding: 4px;
-  text-align: left;
-  background: ${(props) => props.theme.colors.mono200};
-  font-weight: bold;
-  border: 1px solid ${(props) => props.theme.colors.mono400};
-`;
-
-export const TableBodyCell = styled.td`
-  padding: 4px;
-  text-align: left;
-  border: 1px solid ${(props) => props.theme.colors.mono400};
-`;
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/documentation.jsx b/website/src/ocular-docusaurus/react-ocular/templates/documentation.jsx
deleted file mode 100644
index 6c4fb1b83b..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/documentation.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import {graphql} from 'gatsby';
-
-import Markdown from '../components/markdown';
-
-import {MarkdownBody} from '../styled/typography';
-
-// Query for the markdown doc by slug
-export const query = graphql`
-  query DocBySlug($slug: String!) {
-    docBySlug: mdx(fields: {slug: {eq: $slug}}) {
-      body
-      timeToRead
-      excerpt
-      frontmatter {
-        title
-      }
-    }
-  }
-`;
-
-export default class DocTemplate extends React.Component {
-  render() {
-    const {body} = this.props.data.docBySlug;
-    const {relativeLinks} = this.props.pageContext;
-    return (
-      
    
-        
-          
-        
-      
    
-    );
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/examples.jsx b/website/src/ocular-docusaurus/react-ocular/templates/examples.jsx
deleted file mode 100644
index b10104d975..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/examples.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-import {withPrefix} from 'gatsby';
-
-import {
-  MainExamples,
-  ExamplesGroup,
-  ExampleCard,
-  ExampleHeader,
-  ExampleTitle
-} from '../styled/example';
-
-export default class Examples extends Component {
-  renderExample({title, path, image}) {
-    return (
-      
-        {image ? {title} : null}
-        
-          {title}
-        
-      
-    );
-  }
-
-  renderCategory(item) {
-    if (item.entries) {
-      return [
-        {item.title},
-        
-          {item.entries.map((entry) => this.renderExample(entry))}
-        
-      ];
-    }
-    return this.renderExample(item);
-  }
-
-  render() {
-    const {
-      pageContext: {toc}
-    } = this.props;
-
-    if (toc.length === 1) {
-      return (
-        
-          {toc[0].entries.map((entry) => this.renderExample(entry))}
-        
-      );
-    }
-
-    return (
-      {toc.map((exampleData) => this.renderCategory(exampleData))}
-    );
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/home.jsx b/website/src/ocular-docusaurus/react-ocular/templates/home.jsx
deleted file mode 100644
index a58179d21f..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/home.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// Copyright (c) 2018 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import React, {Component} from 'react';
-
-import WebsiteConfigConsumer from '../components/website-config';
-import GithubContributors from '../components/github-contributors';
-
-import Markdown from '../components/markdown';
-
-import {
-  Banner,
-  Container,
-  BannerContainer,
-  HeroExampleContainer,
-  Section,
-  ProjectName,
-  GetStartedLink,
-  Footer,
-  FooterText,
-  FooterLogo
-} from '../styled/home';
-
-function renderPage({config, theme = 'dark', HeroExample, content, children}) {
-  // Note: The Layout "wrapper" component adds header and footer etc
-  return (
-    <>
-      
-        {HeroExample && }
-        
-          {config.PROJECT_NAME}
-          
    {config.PROJECT_DESC}
    
-          
-            GET STARTED
-          
-            
-          
-      {content && (
-        
    
-          
-            
-          
-        
    
-      )}
-      {children}
-      {config.PROJECT_TYPE === 'github' && (
-        
    
-          
-            
-          
-        
    
-      )}
-      
    
-        
-          {config.PROJECT_ORG_LOGO && (
-            <>
-              Made by
-              
-            
-          )}
-        
-      
    
-    
-  );
-}
-
-export default class IndexPage extends Component {
-  render() {
-    const {HeroExample, theme, pageContext, children} = this.props;
-    return (
-      
    
-        
-          {({config}) =>
-            renderPage({
-              config,
-              HeroExample,
-              theme,
-              content: pageContext && pageContext.content,
-              children
-            })
-          }
-        
-      
    
-    );
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/page.jsx b/website/src/ocular-docusaurus/react-ocular/templates/page.jsx
deleted file mode 100644
index 052760a230..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/page.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import Markdown from '../components/markdown';
-
-import {MarkdownBody} from '../styled/typography';
-
-export default class PageTemplate extends React.Component {
-  render() {
-    const {content} = this.props.pageContext;
-    return (
-      
    
-        
-          
-        
-      
    
-    );
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/search.jsx b/website/src/ocular-docusaurus/react-ocular/templates/search.jsx
deleted file mode 100644
index 3cc589a8b6..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/search.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React from 'react';
-import debounce from 'lodash.debounce';
-import SearchIcon from '../components/search';
-
-import WebsiteConfigConsumer from '../components/website-config';
-import {
-  MainSearch,
-  SearchContainer,
-  IconContainer,
-  SearchInput,
-  SearchResultItem,
-  SearchResultLink,
-  SearchResultHighlight,
-  SearchResultPager
-} from '../styled/search';
-
-const RESULTS_PER_PAGE = 10;
-const MAX_EXCERPT_LENGTH = 200;
-
-function renderHighlightedText(lines, regex, lineNumber = 0) {
-  if (Array.isArray(lines)) {
-    return lines.map((line, i) => {
-      const elements = renderHighlightedText(line, regex, i);
-      elements.unshift(
    );
-      return elements;
-    });
-  }
-
-  return lines.split(regex).map((part, i) => {
-    return i % 2 === 0 ? (
-      {part}
-    ) : (
-      {part}
-    );
-  });
-}
-
-export default class SearchPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentQuery: '',
-      lastQuery: '',
-      visibleResultsCount: RESULTS_PER_PAGE,
-      results: []
-    };
-    this.findResults = debounce(this.findResults.bind(this), 250);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  findResults(currentQuery) {
-    const {lastQuery} = this.state;
-    const {pathContext} = this.props;
-    this.setState({debouncing: false});
-    currentQuery = currentQuery
-      .replace(/[^\w-]/g, ' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    if (currentQuery === lastQuery) {
-      return;
-    }
-    let regex = null;
-    const results = [];
-    if (currentQuery) {
-      regex = new RegExp(`(${currentQuery})`, 'i');
-
-      for (let i = 0; i < pathContext.data.length; i++) {
-        const node = pathContext.data[i];
-        const matches = [];
-        let priority = Infinity;
-        if (node.title && regex.test(node.title)) {
-          priority = 0;
-        }
-        if (node.headings) {
-          let totalLength = 0;
-          for (const heading of node.headings) {
-            if (regex.test(heading.value)) {
-              priority = Math.min(priority, heading.depth);
-              totalLength += heading.value.length;
-              matches.push(heading.value);
-            }
-            if (totalLength >= MAX_EXCERPT_LENGTH) {
-              break;
-            }
-          }
-        }
-        if (!Number.isFinite(priority) && node.excerpt) {
-          const index = node.excerpt.search(regex);
-          if (index >= 0) {
-            priority = 100;
-            let excerpt = node.excerpt.slice(index - 30);
-            excerpt = excerpt.slice(excerpt.indexOf(' ') + 1).slice(0, MAX_EXCERPT_LENGTH) + '...';
-            matches.push(excerpt);
-          }
-        }
-        if (Number.isFinite(priority)) {
-          results.push({node, priority, matches});
-        }
-      }
-    }
-    results.sort((r1, r2) => r1.priority - r2.priority);
-    this.setState({
-      results,
-      regex,
-      visibleResultsCount: RESULTS_PER_PAGE,
-      lastQuery: currentQuery
-    });
-  }
-
-  handleChange(event) {
-    const currentQuery = event.target.value;
-    this.setState({currentQuery, debouncing: true});
-    this.findResults(currentQuery);
-  }
-
-  renderResults() {
-    const {results, regex, visibleResultsCount} = this.state;
-
-    return results.slice(0, visibleResultsCount).map((result) => {
-      if (!result.element) {
-        result.element = (
-          
-            {result.node.title}
-            {renderHighlightedText(result.matches, regex)}
-          
-        );
-      }
-      return result.element;
-    });
-  }
-
-  renderPage() {
-    // Note: The Layout "wrapper" component adds header and footer etc
-    const {debouncing, results, visibleResultsCount, currentQuery} = this.state;
-    const {pathContext} = this.props;
-    return (
-      
-        
-          
-            
-          
-          
-        
-
-        {debouncing ? 
    Searching...
     : null}
-        
    
-          {currentQuery && !debouncing && (
-            
    
-              {results.length ? `${results.length} articles found.` : `No result for this query.`}
-            
    
-          )}
-
-          {!currentQuery && !debouncing && (
-            
    {pathContext.data ? `${pathContext.data.length} articles indexed.` : ''}
    
-          )}
-          
    {this.renderResults()}
    
-          {visibleResultsCount < results.length && (
-            
-                this.setState({
-                  visibleResultsCount: visibleResultsCount + RESULTS_PER_PAGE
-                })
-              }
-            >
-              Load more...
-            
-          )}
-        
    
-          
-    );
-  }
-
-  render() {
-    return {() => this.renderPage()};
-  }
-}
diff --git a/website/src/ocular-docusaurus/react-ocular/templates/top-level-layout.jsx b/website/src/ocular-docusaurus/react-ocular/templates/top-level-layout.jsx
deleted file mode 100644
index 68d18960ce..0000000000
--- a/website/src/ocular-docusaurus/react-ocular/templates/top-level-layout.jsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/* eslint-disable react/no-did-update-set-state */
-// This is the top-level "Layout" component that doesn't get unmounted between
-// page loads. This component is wrapped around the react component returned by
-// each page by 'gatsby-plugin-layout'
-
-import React from 'react';
-import Helmet from 'react-helmet';
-import MediaQuery from 'react-responsive';
-import {ThemeProvider, createGlobalStyle} from 'styled-components';
-import {withPrefix} from 'gatsby';
-
-import {WebsiteConfigProvider} from '../components/website-config';
-import SEO from '../components/SEO';
-import TableOfContents from '../components/table-of-contents';
-import Header from '../components/header';
-import DocsHeader from '../components/docs-header';
-
-import defaultTheme from '../default-theme';
-import createTheme from '../styled/create-theme';
-
-import {BodyContainerFull, BodyContainerToC, Body} from '../styled/body';
-
-import {HeaderContainer} from '../styled/header';
-import {TocContainer} from '../styled/toc';
-
-const GlobalStyle = createGlobalStyle`
-  body {
-    margin: 0;
-    overflow-x: hidden;
-    -webkit-text-size-adjust: 100%;
-  }
-  * {
-    box-sizing: border-box;
-  }
-`;
-
-// TODO/ib - restore footer
-// import Footer from './footer';
-
-function ResponsiveHeader(props) {
-  const HeaderComponent = props.isDocHeader ? DocsHeader : Header;
-  return (
-    
    
-      
-        
-      
-      
-        
-      
-    
    
-  );
-}
-
-export default class Layout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isMenuOpen: false,
-      isTocOpen: false
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.pageContext.slug !== this.props.pageContext.slug) {
-      this.setState({isTocOpen: false, isMenuOpen: false});
-    }
-  }
-
-  getTheme() {
-    const {config} = this.props;
-    const primitives = Object.assign({}, defaultTheme);
-    if (config.THEME_OVERRIDES) {
-      Object.assign(primitives, JSON.parse(config.THEME_OVERRIDES));
-    }
-
-    return createTheme(primitives);
-  }
-
-  toggleMenu(on) {
-    this.setState({isMenuOpen: on});
-  }
-
-  toggleToc(on) {
-    this.setState({isTocOpen: on});
-  }
-
-  renderBodyWithTOC(config, tableOfContents) {
-    const {children} = this.props;
-    const {isMenuOpen, isTocOpen} = this.state;
-    // first div is to avoid the BodyGrid div className to be overwritten
-    return (
-      
-        
-          
-        
-        {this.renderTOC(tableOfContents)}
-
-        {React.cloneElement(children, {config: config})}
-        {/*