docs:

fix slugs with trailing /index
test examples nesting categories
add examples

devtool/loader/src/index.ts

@@ -68,7 +68,7 @@ export const TRANSPILE_OPTIONS: TranspileOptions = {
     emitDecoratorMetadata: true,
     moduleResolution: ModuleResolutionKind.NodeJs,
     strict: false,
-    target: ScriptTarget.ES2017,
+    target: ScriptTarget.ESNext,
     jsx: JsxEmit.Preserve,
     module: ModuleKind.ESNext,
     noEmitHelpers: true,

packages/static/content/examples/basic/index.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Basic'
+---
+
+# Basic Examples
+
+---
+
+No specific category
+
+- [Animations](./animations)
+- [Moving Boxes](./moving-boxes)

packages/static/content/examples/basic/moving-boxes/MovingBoxes.tsx

@@ -0,0 +1,55 @@
+import { Color3 } from '@babylonjs/core/Maths/math.color'
+import { Vector3 } from '@babylonjs/core/Maths/math.vector'
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh'
+import { Nullable } from '@babylonjs/core/types'
+import React, { FC, useEffect, useRef } from 'react'
+import { Engine, Scene, useScene } from 'react-babylonjs'
+
+type MovingBoxProps = {
+  rotationAxis: 'x' | 'y' | 'z'
+  position: Vector3
+  color: Color3
+}
+
+const rpm = 5
+const MovingBox: FC<MovingBoxProps> = (props: MovingBoxProps) => {
+  // access Babylon Scene
+  const scene = useScene()
+  // access refs to Babylon objects in scene like DOM nodes
+  const boxRef = useRef<Nullable<AbstractMesh>>(null)
+
+  // there is also a built-in hook called useBeforeRender that does will do this:
+  useEffect(() => {
+    if (boxRef.current !== null && scene) {
+      const onBeforeRender = () => {
+        let deltaTimeInMillis = scene.getEngine().getDeltaTime()
+        boxRef.current!.rotation[props.rotationAxis] +=
+          (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000)
+      }
+
+      scene.registerBeforeRender(onBeforeRender)
+      return () => {
+        scene.unregisterBeforeRender(onBeforeRender)
+      }
+    }
+  }, [boxRef.current])
+
+  return (
+    <box name="box" ref={boxRef} size={2} position={props.position}>
+      <standardMaterial name="box-mat" diffuseColor={props.color} specularColor={Color3.Black()} />
+    </box>
+  )
+}
+
+export default () => (
+  <div style={{ flex: 1, display: 'flex' }}>
+    <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+      <Scene>
+        <freeCamera name="camera1" position={new Vector3(0, 5, -10)} setTarget={[Vector3.Zero()]} />
+        <hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
+        <MovingBox color={Color3.Red()} position={new Vector3(-2, 0, 0)} rotationAxis="y" />
+        <MovingBox color={Color3.Yellow()} position={new Vector3(2, 0, 0)} rotationAxis="x" />
+      </Scene>
+    </Engine>
+  </div>
+)

packages/static/content/examples/basic/moving-boxes/index.mdx

@@ -0,0 +1,9 @@
+---
+title: 'Moving Boxes'
+---
+
+# Moving Boxes Example
+
+This highlights how you can compose a scene with other React components.
+
+[devtool:MovingBoxes.tsx]

packages/static/content/examples/index.mdx

@@ -9,3 +9,5 @@ These include how materials are automatically assigned (or choosing where to
 assign), but also how to build a GUI and more advanced topics like post
 processing, multiple scenes/canvases and also how to use integrate a physics
 library and many more!
+
+- [Basic](./basic) - no specific category

packages/static/content/nav.js

@@ -1,24 +1,43 @@
 const toc = [
   '/',
   '/quickstart',
-  '/guides/index',
-  '/guides/react-boilerplate/index',
-  '/guides/react-with-imperitive-babylonjs/index',
-  '/guides/react-with-declarative-babylonjs/index',
-  '/guides/animation/index',
-  '/guides/debugging/index',
-  '/guides/getting-even-more-reactive/index',
-  '/guides/hoc/index',
-  '/guides/adding-animation-and-color/index',
-  '/examples/index',
+  '/guides',
+  '/guides/react-boilerplate',
+  '/guides/react-with-imperitive-babylonjs',
+  '/guides/react-with-declarative-babylonjs',
+  '/guides/animation',
+  '/guides/debugging',
+  '/guides/getting-even-more-reactive',
+  '/guides/hoc',
+  '/guides/adding-animation-and-color',
+  '/examples',
+  '/examples/basic',
   '/examples/basic/animations',
+  '/examples/basic/moving-boxes',
 ]
 
 const navSortMap = toc.reduce((c, slug, i) => {
   c[slug] = i
   return c
 }, {})
 
+const sortResults = (results) => {
+  console.log('sorting results', results)
+  results.sort((a, b) => {
+    const aIndex = navSortMap[a.slug]
+    const bIndex = navSortMap[b.slug]
+    if (aIndex === undefined) {
+      console.error('slug not found:', a.slug)
+      return -1
+    }
+    if (bIndex === undefined) {
+      console.error('slug not found:', b.slug)
+      return -1
+    }
+    return aIndex - bIndex
+  })
+}
+
 const sortPages = (allMdx) => {
   // console.log('nav sort map:', navSortMap);
   allMdx.edges.sort((a, b) => {
@@ -40,4 +59,7 @@ const sortPages = (allMdx) => {
   console.log('all known slugs in sorted order\n', JSON.stringify(slugs, null, 2))
 }
 
-module.exports = sortPages
+module.exports = {
+  sortPages,
+  sortResults,
+}

packages/static/gatsby-node.js

@@ -1,11 +1,11 @@
-const componentWithMDXScope = require('gatsby-plugin-mdx/component-with-mdx-scope')
+// const componentWithMDXScope = require('gatsby-plugin-mdx/component-with-mdx-scope')
 
 const path = require('path')
 
 const startCase = require('lodash.startcase')
 
 const config = require('./config')
-const sortPages = require('./content/nav')
+const { sortPages } = require('./content/nav')
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
@@ -37,7 +37,7 @@ exports.createPages = ({ graphql, actions }) => {
           reject(result.errors)
         }
 
-        // Create blog posts pages.
+        // Create pages.
         sortPages(result.data.allMdx)
         result.data.allMdx.edges.forEach(({ node }) => {
           createPage({
@@ -83,6 +83,10 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       value = ''
     }
 
+    if (value.endsWith('/index')) {
+      value = value.substring(0, value.length - '/index'.length)
+    }
+
     if (config.gatsby && config.gatsby.trailingSlash) {
       createNodeField({
         name: `slug`,

packages/static/package.json

@@ -68,10 +68,10 @@
     "build": "gatsby build --prefix-paths",
     "lint": "concurrently 'yarn:lint:check:*'",
     "lint:check:eslint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "lint:check:prettier": "prettier -c '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
+    "lint:check:prettier": "prettier --check \"**/*.{ts,js,tsx,jsx,json,md,mdx}\"",
     "lint:fix": "concurrently 'yarn:lint:fix:*'",
     "lint:fix:eslint": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix:prettier": "prettier -w '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
+    "lint:fix:prettier": "prettier -w \"**/*.{ts,js,tsx,jsx,json,md,mdx}\"",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",

packages/static/src/components/flexSearch/index.js

@@ -4,7 +4,7 @@ import * as queryString from 'query-string'
 import React, { useState } from 'react'
 import { useFlexSearch } from 'react-use-flexsearch'
 import styled from '@emotion/styled'
-import sortPages from '../../../content/nav'
+import { sortPages, sortResults } from '../../../content/nav'
 
 const isBrowser = typeof window !== 'undefined'
 
@@ -115,6 +115,10 @@ const FlexSearch = ({ localSearchPages: { index, store }, location, allMdx }) =>
 
   const results = useFlexSearch(query, index, store)
 
+  if (query && results.length > 0) {
+    sortResults(results)
+  }
+
   sortPages(allMdx)
 
   return (

packages/static/src/components/index.js

@@ -1,8 +1,8 @@
 // organize-imports-ignore
-export * from './theme' // eslint-disable-line
 import Layout from './layout'
 import Link from './link'
 import mdxComponents from './mdxComponents'
 import ThemeProvider from './theme/themeProvider'
 
+export * from './theme' // eslint-disable-line
 export { mdxComponents, ThemeProvider, Layout, Link }

packages/static/src/templates/docs.js

@@ -5,7 +5,7 @@ import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
 import React, { Component } from 'react'
 import Helmet from 'react-helmet'
 import config from '../../config'
-import sortPages from '../../content/nav'
+import { sortPages } from '../../content/nav'
 import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs'
 
 const forcedNavOrder = config.sidebar.forcedNavOrder
@@ -26,7 +26,7 @@ export default class MDXRuntimeTest extends Component {
     } = data
 
     const githubIcon = require('../components/images/github.svg').default
-    console.log(3)
+
     sortPages(allMdx)
     const navItems = allMdx.edges
       .map(({ node }) => node.fields.slug)