Merge pull request #575 from pixijs/feat/docs

feat: doc updates

Author: trezy

.codesandbox/ci.json

@@ -0,0 +1,33 @@
+name: Deploy Docs
+
+on:
+  push:
+      branches:
+          - main
+          - docs
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - run: npm ci
+      - run: |
+          git config --global user.name "$GITHUB_ACTOR"
+          git config --global user.email "[email protected]"
+          git remote set-url origin https://git:${GIT_PASS}@github.com/pixijs/pixi-react.git
+          npm run deploy
+        env:
+          GIT_USER: $GITHUB_ACTOR
+          GIT_PASS: ${{ secrets.GITHUB_TOKEN }}

.codesandbox/sandbox/index.jsx

@@ -12,8 +12,9 @@ jobs:
     strategy:
       matrix:
         script:
-          # - name: Typecheck
-          #   command: test:types
+          - name: Typecheck
+            command: test:types
+            installPlaywright: false
           - name: Lint
             command: test:lint
             installPlaywright: false
@@ -23,6 +24,9 @@ jobs:
           - name: E2E tests
             command: test:e2e
             installPlaywright: true
+          - name: Docs
+            command: build:docs
+            installPlaywright: false
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.codesandbox/sandbox/package.json

@@ -6,3 +6,8 @@ node_modules/
 dist/
 lib/
 types/
+
+# Generated files
+.docusaurus
+.cache-loader
+docs/build

.codesandbox/sandbox/src/index.tsx

@@ -0,0 +1,25 @@
+import { Application, extend } from '@pixi/react';
+import { Container, Graphics } from 'pixi.js';
+import { useCallback } from 'react';
+
+extend({
+    Container,
+    Graphics,
+});
+
+export default function App() {
+    const drawCallback = useCallback((graphics) => {
+        graphics.clear();
+        graphics.setFillStyle({ color: 'red' });
+        graphics.rect(0, 0, 100, 100);
+        graphics.fill();
+    }, []);
+
+    return (
+        <Application>
+            <pixiContainer x={100} y={100}>
+                <pixiGraphics draw={drawCallback} />
+            </pixiContainer>
+        </Application>
+    );
+}