From bc7a742dc603dd104d7b2f9bda2f3db3e1f55c26 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Wed, 25 Jan 2023 18:48:50 +0100
Subject: [PATCH] Demote assets example to bottom

---
 packages/theatric/README.md | 84 ++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/theatric/README.md b/packages/theatric/README.md
index 0089b1b..a5bf729 100644
--- a/packages/theatric/README.md
+++ b/packages/theatric/README.md
@@ -44,48 +44,6 @@ export default function App() {
 
 Theatric supports all the prop types that Theatre.js supports. You can find a list of supported prop types [here](https://www.theatrejs.com/docs/latest/manual/prop-types).
 
-## Using assets
-
-Here is an example of using image assets in your controls. Learn more about assets [here](https://www.theatrejs.com/docs/latest/manual/assets).
-
-```tsx
-import {initialize, useControls, types, getAssetUrl} from 'theatric'
-import theatricState from './theatricState.json'
-
-initialize({
-  // if you're using assets in your controls, you can specify the base URL here.
-  
-  assets: {
-    // Defaults to '/'
-    // If you host your assets on a different domain, you can specify it here.
-    // For example if you're hosting your assets on https://cdn.example.com/theatric-assets
-    // you can set this to 'https://cdn.example.com/theatric-assets' (no trailing slash)
-    baseUrl: '/theatric-assets',
-  },
-}).then(() => {
-  // this is only necessary if you're using assets such as .hdr images in your prop values.
-  // awaiting the initialization ensures that the assets are loaded before rendering the app.
-  ReactDOM.render(<App />, document.getElementById('root'))
-})
-
-function App() {
-  const {img} = useControls({
-    // this will accept jpegs/pngs/hdrs/etc
-    // its default value is '' (empty string)
-    // learn more about assets here: https://www.theatrejs.com/docs/latest/manual/assets
-    img: types.image('')
-  })
-
-  const src = getAssetUrl(img)
-
-  return (
-    <div>
-      <img src={src} />
-    </div>
-  )
-}
-```
-
 ## API
 
 [`useControls(controls, options?)`](#usecontrolscontrols-options)
@@ -283,6 +241,48 @@ function Introduction() {
 This is simply a re-export via `export {types} from '@theatre/core'`. To learn more about types, check out the
 [types documentation](https://www.theatrejs.com/docs/latest/manual/prop-types).
 
+## Using assets
+
+Here is an example of using image assets in your controls. Learn more about assets [here](https://www.theatrejs.com/docs/latest/manual/assets).
+
+```tsx
+import {initialize, useControls, types, getAssetUrl} from 'theatric'
+import theatricState from './theatricState.json'
+
+initialize({
+  // if you're using assets in your controls, you can specify the base URL here.
+  
+  assets: {
+    // Defaults to '/'
+    // If you host your assets on a different domain, you can specify it here.
+    // For example if you're hosting your assets on https://cdn.example.com/theatric-assets
+    // you can set this to 'https://cdn.example.com/theatric-assets' (no trailing slash)
+    baseUrl: '/theatric-assets',
+  },
+}).then(() => {
+  // this is only necessary if you're using assets such as .hdr images in your prop values.
+  // awaiting the initialization ensures that the assets are loaded before rendering the app.
+  ReactDOM.render(<App />, document.getElementById('root'))
+})
+
+function App() {
+  const {img} = useControls({
+    // this will accept jpegs/pngs/hdrs/etc
+    // its default value is '' (empty string)
+    // learn more about assets here: https://www.theatrejs.com/docs/latest/manual/assets
+    img: types.image('')
+  })
+
+  const src = getAssetUrl(img)
+
+  return (
+    <div>
+      <img src={src} />
+    </div>
+  )
+}
+```
+
 ## How does Theatric compare to Theatre.js?
 
 * You can use both Theatric and Theatre.js in the same project. That's a common use-case.