wip: branding

README.md

@@ -105,5 +105,8 @@ If you need help with integrating react-native-filament in your app or have addi
 #### Attributions
 
 The example app in this project uses several free assets:
-- <a href="https://www.freepik.com/free-ai-image/space-travel-collage-design_94964745.htm#fromView=search&page=1&position=1&uuid=cf66f9c3-2d56-4228-a3cf-de7c07d418fb">Image by freepik</a>
+- Image by <a href="https://www.freepik.com/free-ai-image/space-travel-collage-design_94964745.htm#fromView=search&page=1&position=1&uuid=cf66f9c3-2d56-4228-a3cf-de7c07d418fb">freepik</a>
+- Image by <a href="https://www.freepik.com/free-psd/3d-icon-product-management_44990845.htm#fromView=search&page=2&position=0&uuid=691aae54-efdf-451c-9112-0ff373e761e7">Freepik</a>
+- Image by <a href="https://www.freepik.com/free-psd/3d-collection-with-hands-holding-smartphone_13678985.htm#fromView=search&page=1&position=3&uuid=7761a685-d1b6-4202-8505-9a872775cbbb">Freepik</a>
+- Michelle by [mixamo](https://www.mixamo.com/#/?page=2&type=Character)
 - "Buster Drone" (https://skfb.ly/TBnX) by LaVADraGoN is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).

docs/docusaurus.config.ts

@@ -4,14 +4,14 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'React Native Filament Documentation',
-  tagline: 'Dinosaurs are cool',
+  tagline: 'Fastest 3D rendering for React Native',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
-  url: 'https://margelo.github.io/react-native-filament/',
+  url: 'https://margelo.github.io',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: 'react-native-filament/',
   trailingSlash: false,
 
   // GitHub pages deployment config.
@@ -50,12 +50,12 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: 'img/banner-dark.jpg',
     navbar: {
       title: 'React Native Filament',
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/logo.svg',
+        alt: 'React Native Filament Logo',
+        src: 'img/penguin.png',
       },
       items: [
         {
@@ -70,7 +70,7 @@ const config: Config = {
           position: 'left'
         },
         {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/margelo/react-native-filament',
           label: 'GitHub',
           position: 'right',
         },

docs/sidebars.ts

@@ -15,10 +15,8 @@ const sidebars: SidebarsConfig = {
       "guides/instancing"
     ],
     API: [
-      {
-        type: "autogenerated",
-        dirName: "api",
-      },
+      "api/index",
+      ...require('./docs/api/typedoc-sidebar.cjs'),
     ],
   },
 };

docs/src/components/HomepageFeatures/index.tsx

@@ -1,51 +1,53 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  // Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  imgUr: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    // Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    imgUr: "img/easy.png",
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        React Native Filament is a React Native library that makes it easy to render 3D graphics in your app, by using react components.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Native GPU accelerated rendering',
+    imgUr: "img/gpu.png",
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Filament taps directly into your mobiles GPU by using Metal on iOS or OpenGL or Vulkan on Android.
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Made for mobile',
+    imgUr: "img/mobile.png",
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Filament, the library behind React Native Filament, was build for mobile first.
+        Its native dependency adds only ~4MB to your app download size.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, imgUr, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        {/* <Svg className={styles.featureSvg} role="img" /> */}
+        <img src={useBaseUrl(imgUr)} className={styles.featureSvg} alt={title} />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>

docs/src/components/HomepageFeatures/styles.module.css

@@ -7,5 +7,5 @@
 
 .featureSvg {
   height: 200px;
-  width: 200px;
+  /* width: 200px; */
 }

docs/src/pages/index.tsx

@@ -31,7 +31,7 @@ export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={siteConfig.title}
       description="Description will go into a meta tag in <head />">
       <HomepageHeader />
       <main>

package/src/react/Animator.tsx

@@ -12,7 +12,7 @@ export type AnimationItem = {
   name: string
 }
 
-type Props = {
+export type AnimatorProps = {
   /**
    * The index of the animation to play. To find out the index for the animation you want to play, you can use the `onAnimationsLoaded` callback.
    * @default 0
@@ -41,8 +41,9 @@ type Props = {
  * <Model source={DroneGlb}>
  *  <Animator animationIndex={2} />
  * </Model>
+ * ```
  */
-export function Animator(props: Props) {
+export function Animator(props: AnimatorProps) {
   const instances = React.useContext(ParentInstancesContext)
   if (instances == null) {
     throw new Error('Animator must be used inside a <Model> or <ModelInstance> component.')
@@ -56,7 +57,7 @@ export function Animator(props: Props) {
   return <AnimatorImpl instance={instance} {...props} />
 }
 
-type ImplProps = Props & {
+type ImplProps = AnimatorProps & {
   instance: FilamentInstance
 }