start examples

devtool/loader/src/index.ts

@@ -183,7 +183,7 @@ const devtoolLoader: RawLoaderDefinitionFunction<Partial<LoaderOptions>> = async
   const { name } = _options
 
   if (!name.endsWith('.tsx')) {
-    throw new Error(`Only .tsx files are allowed.`)
+    throw new Error(`Only .tsx files are allowed -> '${name}'.`)
   }
   const nameNode = name.slice(0, -4)
 

devtool/react/src/DevTool.tsx

@@ -10,7 +10,7 @@ import React, { ComponentType, FC, useMemo, useState } from 'react'
 import Button from 'react-bootstrap/Button'
 import ButtonGroup from 'react-bootstrap/ButtonGroup'
 import Modal from 'react-bootstrap/Modal'
-import { FaCog } from 'react-icons/fa'
+import { FaCog, FaExternalLinkAlt } from 'react-icons/fa'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'
@@ -84,7 +84,11 @@ export const DevTool: FC<Partial<DevToolProps>> = (props) => {
   console.log({ source })
 
   return (
-    <div>
+    <div
+      className={css`
+        min-width: 100%;
+      `}
+    >
       <Tabs selectedIndex={tabIdx} onSelect={(idx) => setTabIdx(idx)}>
         <TabList>
           <Tab>Output</Tab>
@@ -104,22 +108,16 @@ export const DevTool: FC<Partial<DevToolProps>> = (props) => {
                 variant={language === 'js' ? 'primary' : 'secondary'}
                 onClick={() => setLanguage('js')}
               >
-                Js
+                Javasript
               </Button>
               <Button
                 variant={language === 'ts' ? 'primary' : 'secondary'}
                 onClick={() => setLanguage('ts')}
               >
-                Ts
+                Typescript
               </Button>
             </ButtonGroup>
           </div>
-          <Button
-            size="sm"
-            onClick={() => window.open(language === 'ts' ? tsUrl : jsUrl, '_blank')}
-          >
-            Run in Codesandbox
-          </Button>
           <Button
             size="sm"
             className={css`
@@ -129,6 +127,14 @@ export const DevTool: FC<Partial<DevToolProps>> = (props) => {
           >
             <FaCog />
           </Button>
+          <Button
+            size="sm"
+            className="float-end"
+            onClick={() => window.open(language === 'ts' ? tsUrl : jsUrl, '_blank')}
+          >
+            Run in Codesandbox
+            <FaExternalLinkAlt className="ps-2" size="1.5em" />
+          </Button>
         </TabList>
 
         <TabPanel>{React.createElement(component)}</TabPanel>

packages/static/config.js

@@ -39,7 +39,8 @@ const config = {
     title: 'Documentation | react-babylonjs',
     description: 'React for Babylon 3D engine',
     ogImage: null,
-    docsLocation: 'https://brianzinn.github.io/react-babylonjs/',
+    docsLocation:
+      'https://github.com/brianzinn/react-babylonjs/tree/master/packages/static/content',
     favicon: '',
   },
   pwa: {

packages/static/content/examples/basic/BasicAnimations.tsx

@@ -0,0 +1,99 @@
+import { Animation, Vector3 } from '@babylonjs/core'
+import React, { FC, useEffect, useRef } from 'react'
+import { Engine, Scene, useScene } from 'react-babylonjs'
+
+/**
+ * This is for optimizing animation when first mount application.
+ * But this story works well，Animation is smooth。
+ */
+function WithAnimation() {
+  // console.time('Timing');
+
+  const groupRef = useRef(null)
+  const scene = useScene()
+
+  const position = Vector3.Zero()
+
+  const playAnimation = () => {
+    if (groupRef.current) {
+      const group = groupRef.current
+      const animations = getSlideUpAnimation(position, -2)
+      const animatable = scene!.beginDirectAnimation(group, animations, 0, 120, true)
+      // console.timeLog('Timing', 'beginAnimation');
+    }
+  }
+
+  useEffect(() => {
+    // console.timeLog('Timing', 'useEffect');
+    playAnimation()
+  }, [])
+
+  const onCreated = () => {
+    // console.timeLog('Timing', 'onCreated');
+  }
+
+  const spheres = getSpheres(10)
+
+  return (
+    <transformNode name="group" ref={groupRef} position={position} onCreated={onCreated}>
+      {spheres}
+    </transformNode>
+  )
+}
+
+function getSpheres(count: number) {
+  const results = []
+
+  for (let i = -count / 2; i < count / 2; i++) {
+    for (let j = -count / 2; j < count / 2; j++) {
+      const key = `sphere-${i}-${j}`
+      results.push(
+        <sphere name={key} key={key} diameter={0.5} segments={16} position={new Vector3(i, 1, j)} />
+      )
+    }
+  }
+
+  return results
+}
+
+function getSlideUpAnimation(position: Vector3, offsetY: number) {
+  const { y } = position
+
+  const keys = [
+    {
+      frame: 0,
+      value: y + offsetY,
+    },
+    {
+      frame: 60,
+      value: y,
+    },
+    {
+      frame: 120,
+      value: y + offsetY,
+    },
+  ]
+
+  const animation = new Animation('animation', 'position.y', 60, 0, 1)
+  animation.setKeys(keys)
+
+  return [animation]
+}
+
+export const BasicAnimations: FC = () => (
+  <div style={{ flex: 1, display: 'flex' }}>
+    <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+      <Scene>
+        <freeCamera
+          name="camera1"
+          position={new Vector3(0, 10, -20)}
+          setTarget={[Vector3.Zero()]}
+        />
+        <hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
+        <WithAnimation />
+      </Scene>
+    </Engine>
+  </div>
+)
+
+export default BasicAnimations

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

@@ -0,0 +1,10 @@
+---
+title: 'Animations'
+---
+
+# Animations Example
+
+Animations can be done. this is just a test to see where the text would start
+wrapping.
+
+[devtool:BasicAnimations.tsx]

packages/static/content/examples/index.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Examples'
+---
+
+These examples serve to highlight various ways to use the declarative approach
+to development.
+
+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!

packages/static/content/guides/debugging/index.mdx

@@ -12,4 +12,5 @@ There are a couple ways to accomplish this:
 
 Let's go with option #1 for now..
 
-[devtool:Debug.tsx]
+NOTE: this devtool is turned off as it fails the build. switch to use Inspector?
+devtool:Debug.tsx

packages/static/content/nav.js

@@ -10,6 +10,8 @@ const toc = [
   '/guides/getting-even-more-reactive/index',
   '/guides/hoc/index',
   '/guides/adding-animation-and-color/index',
+  '/examples/index',
+  '/examples/basic/animations',
 ]
 
 const navSortMap = toc.reduce((c, slug, i) => {

packages/static/src/components/layout.js

@@ -45,8 +45,9 @@ const Content = styled('main')`
   }
 `
 
+// TODO: work on the breakpoints here for larger screens
 const MaxWidth = styled('div')`
-  @media only screen and (max-width: 50rem) {
+  @media only screen and (max-width: 100rem) {
     width: 100%;
     position: relative;
   }

packages/static/src/components/styles/Docs.js

@@ -39,7 +39,6 @@ export const Edit = styled('div')`
 `
 
 export const StyledMainWrapper = styled.div`
-  max-width: 900px;
   color: ${(props) => props.theme.colors.text};
 
   ul,