docs: Add integration with reo.dev (#1501)

* Adding Reo dot Dev to the docs site

* Adding Reo dot Dev to the docs site - new file

* Going to use NPM to add reo to make things easier

* Fixing audit issues

* commenting

* Updating browser list

site/package.json

@@ -27,6 +27,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "reodotdev": "^1.0.0",
     "react-player": "^2.16.0",
     "stable": "^0.1.8"
   },

site/src/theme/Root.js

@@ -1,12 +1,24 @@
 import React, { useEffect } from 'react';
+import { loadReoScript } from 'reodotdev'
 
 const MESSAGE_TYPE = 'estuary.docs.hideNavBar';
-
 const BODY_CLASS = 'running-in-iframe';
+const REO_DOT_DEV_ID = "a2955ffcdd9029c";
 
 // Default implementation, that you can customize
 export default function Root({ children }) {
     useEffect(() => {
+        // Load in reo.dev scripts
+        const reoPromise = loadReoScript({
+            clientID: REO_DOT_DEV_ID
+        });
+        reoPromise.then(Reo => {
+            Reo.init({
+                clientID: REO_DOT_DEV_ID
+            });
+        })
+
+        // Listen for messaging from dashboard for styling light/dark mode
         const handleMessageListener = (event) => {
             if (event.origin === 'http://localhost:3000' || event.origin === 'https://dashboard.estuary.dev') {
                 if (event.data?.type === MESSAGE_TYPE) {