Add Fork on GitHub button and related dependencies

Author: lukehollis

client/package.json

@@ -15,6 +15,7 @@
     "@fontsource-variable/geist": "^5.2.6",
     "@fontsource/geist": "^5.2.6",
     "@geist-ui/core": "^2.3.8",
+    "@geist-ui/icons": "^1.0.2",
     "@react-three/drei": "^9.81.2",
     "@react-three/fiber": "^8.15.20",
     "chart.js": "^4.5.0",

client/pnpm-lock.yaml

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Github } from '@geist-ui/icons';
+
+/**
+ * A reusable "Fork on GitHub" button rendered as a fixed-position anchor.
+ *
+ * Props:
+ *   position: object — CSS position properties (e.g., { top: '20px', right: '20px' }).
+ *   style:    object — Additional style overrides.
+ */
+export default function ButtonForkOnGithub({ position = { bottom: '20px', right: '20px' }, style = {} }) {
+  const baseStyle = {
+    position: 'fixed',
+    backgroundColor: 'rgba(17, 17, 17, 0.8)',
+    color: '#fff',
+    padding: '10px 16px',
+    borderRadius: '6px',
+    fontWeight: 500,
+    textDecoration: 'none',
+    backdropFilter: 'blur(8px)',
+    zIndex: 1000,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    border: '1px solid #fff',
+    ...position,
+    ...style,
+  };
+
+  return (
+    <a
+      href="https://github.com/lukehollis/three-mlagents"
+      target="_blank"
+      rel="noopener noreferrer"
+      style={baseStyle}
+    >
+      <Github size={12} style={{ border: '1px solid #fff' }} />
+      Fork on GitHub
+    </a>
+  );
+} 

client/src/components/ButtonForkOnGithub.jsx

@@ -7,6 +7,7 @@ import config from '../config.js';
 import 'katex/dist/katex.min.css';
 import { BlockMath } from 'react-katex';
 import { Text, Button } from '@geist-ui/core';
+import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
 
 const ROWS = 3;
 const COLS = 4;
@@ -241,6 +242,9 @@ export default function Ball3DExample() {
       </div>
 
       <DebugConsole logs={logs} />
+
+      {/* Fork link (top-right) */}
+      <ButtonForkOnGithub position={{ top: '20px', right: '20px' }} />
     </div>
   );
 } 

client/src/examples/Ball3D.jsx

@@ -14,6 +14,7 @@ import config from '../config.js';
 import 'katex/dist/katex.min.css';
 import { BlockMath } from 'react-katex';
 import { Text, Button } from '@geist-ui/core';
+import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
 
 ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale);
 
@@ -419,6 +420,9 @@ export default function BasicExample() {
         </div>
       </div>
 
+      {/* Fork link (top-right) */}
+      <ButtonForkOnGithub position={{ top: '20px', right: '20px' }} />
+
     </div>
   );
 } 

client/src/examples/Basic.jsx

@@ -7,6 +7,7 @@ import 'katex/dist/katex.min.css';
 import { BlockMath } from 'react-katex';
 import DebugConsole from '../components/DebugConsole.jsx';
 import ChartPanel from '../components/ChartPanel.jsx';
+import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
 
 const WS_URL = `${config.WS_BASE_URL}/ws/gridworld`;
 const CELL_SIZE = 1;
@@ -202,6 +203,9 @@ export default function GridWorldExample() {
       </div>
 
       <DebugConsole logs={logs} />
+
+      {/* Fork link (top-right) */}
+      <ButtonForkOnGithub position={{ top: '20px', right: '20px' }} />
     </div>
   );
 } 

client/src/examples/GridWorld.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Page, Grid, Card, Text, Spacer, Button } from '@geist-ui/core';
 import { Play } from 'geist-icons';
+import { Github } from '@geist-ui/icons';
 import TronBackground from '../components/TronBackground.jsx';
 
 export default function ExamplesIndex() {
@@ -165,6 +166,33 @@ export default function ExamplesIndex() {
 
               </Page.Content>
       </Page>
+
+      {/* Fixed "Fork on GitHub" link */}
+      <a
+        href="https://github.com/lukehollis/three-mlagents"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          position: 'fixed',
+          right: '20px',
+          bottom: '20px',
+          backgroundColor: 'rgba(17, 17, 17, 0.8)',
+          color: '#fff',
+          padding: '10px 16px',
+          borderRadius: '6px',
+          fontWeight: 500,
+          textDecoration: 'none',
+          backdropFilter: 'blur(8px)',
+          zIndex: 1000,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          border: '1px solid #fff',
+        }}
+      >
+        <Github size={12} style={{ border: '1px solid #fff' }} />
+        Fork on GitHub
+      </a>
     </>
   );
 }