docs: integrate reo.dev (#13192)

www/apps/api-reference/.env.sample

@@ -17,3 +17,4 @@ ALGOLIA_WRITE_API_KEY=
 ANALYZE_BUNDLE=
 NEXT_PUBLIC_INTEGRATION_ID=
 NEXT_PUBLIC_GA_ID=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/api-reference/providers/index.tsx

@@ -16,7 +16,10 @@ type ProvidersProps = {
 
 const Providers = ({ children }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={config}>
         <PageLoadingProvider>
           <ScrollControllerProvider scrollableSelector="#main">

www/apps/book/.env.sample

@@ -19,3 +19,4 @@ NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_PROD_BASE_URL=
 NEXT_PUBLIC_INTEGRATION_ID=
 NEXT_MCP_SERVER_URL=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/book/providers/index.tsx

@@ -23,7 +23,10 @@ type ProvidersProps = {
 
 const Providers = ({ children, aiAssistantProps = {} }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={config}>
         <LearningPathProvider>
           <NotificationProvider>

www/apps/cloud/.env.example

@@ -16,3 +16,4 @@ ANALYZE_BUNDLE=
 CLOUDINARY_CLOUD_NAME=
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_INTEGRATION_ID=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/cloud/providers/index.tsx

@@ -24,7 +24,10 @@ type ProvidersProps = {
 
 const Providers = ({ children }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={config}>
         <MobileProvider>
           <ColorModeProvider>

www/apps/resources/.env.sample

@@ -20,3 +20,4 @@ NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY=
 CLOUDINARY_CLOUD_NAME=
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_INTEGRATION_ID=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/resources/providers/index.tsx

@@ -21,7 +21,10 @@ type ProvidersProps = {
 
 const Providers = ({ children }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={config}>
         <LearningPathProvider
           baseUrl={process.env.NEXT_PUBLIC_BASE_PATH || "/resources"}

www/apps/ui/.env.example

@@ -8,3 +8,4 @@ NEXT_PUBLIC_ALGOLIA_APP_ID=
 NEXT_PUBLIC_SEGMENT_API_KEY=
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_INTEGRATION_ID=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/ui/src/providers/index.tsx

@@ -18,7 +18,10 @@ type ProvidersProps = {
 
 const Providers = ({ children }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={siteConfig}>
         <ScrollControllerProvider scrollableSelector="#main">
           <SidebarProvider>

www/apps/user-guide/.env.example

@@ -16,3 +16,4 @@ ANALYZE_BUNDLE=
 CLOUDINARY_CLOUD_NAME=
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_INTEGRATION_ID=
+NEXT_PUBLIC_REO_DEV_CLIENT_ID=

www/apps/user-guide/providers/index.tsx

@@ -24,7 +24,10 @@ type ProvidersProps = {
 
 const Providers = ({ children }: ProvidersProps) => {
   return (
-    <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
+    <AnalyticsProvider
+      segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}
+      reoDevKey={process.env.NEXT_PUBLIC_REO_DEV_CLIENT_ID}
+    >
       <SiteConfigProvider config={config}>
         <MobileProvider>
           <ColorModeProvider>

www/packages/docs-ui/package.json

@@ -79,6 +79,7 @@
     "react-tooltip": "^5.28.0",
     "react-transition-group": "^4.4.5",
     "react-uuid": "^2.0.0",
+    "reodotdev": "^1.0.0",
     "slugify": "^1.6.6"
   },
   "overrides": {

www/packages/docs-ui/src/providers/Analytics/index.tsx

@@ -8,6 +8,8 @@ import React, {
   useState,
 } from "react"
 import { Analytics, AnalyticsBrowser } from "@segment/analytics-next"
+// @ts-expect-error Doesn't have a types package
+import { loadReoScript } from "reodotdev"
 
 export type ExtraData = {
   section?: string
@@ -32,14 +34,16 @@ export type TrackedEvent = {
 const AnalyticsContext = createContext<AnalyticsContextType | null>(null)
 
 export type AnalyticsProviderProps = {
-  writeKey?: string
+  segmentWriteKey?: string
+  reoDevKey?: string
   children?: React.ReactNode
 }
 
 const LOCAL_STORAGE_KEY = "ajs_anonymous_id"
 
 export const AnalyticsProvider = ({
-  writeKey = "temp",
+  segmentWriteKey = "temp",
+  reoDevKey,
   children,
 }: AnalyticsProviderProps) => {
   // loaded is used to ensure that a connection has been made to segment
@@ -50,11 +54,11 @@ export const AnalyticsProvider = ({
   const analyticsBrowser = new AnalyticsBrowser()
   const [queue, setQueue] = useState<TrackedEvent[]>([])
 
-  const init = useCallback(() => {
+  const initSegment = useCallback(() => {
     if (!loaded) {
       analyticsBrowser
         .load(
-          { writeKey },
+          { writeKey: segmentWriteKey },
           {
             initialPageview: true,
             user: {
@@ -72,7 +76,7 @@ export const AnalyticsProvider = ({
         )
         .finally(() => setLoaded(true))
     }
-  }, [loaded, writeKey])
+  }, [loaded, segmentWriteKey])
 
   const track = useCallback(
     async (
@@ -110,8 +114,8 @@ export const AnalyticsProvider = ({
   )
 
   useEffect(() => {
-    init()
+    initSegment()
-  }, [init])
+  }, [initSegment])
 
   useEffect(() => {
     if (analytics && queue.length) {
@@ -123,6 +127,24 @@ export const AnalyticsProvider = ({
     }
   }, [analytics, queue])
 
+  useEffect(() => {
+    if (!reoDevKey) {
+      return
+    }
+
+    loadReoScript({
+      clientID: reoDevKey,
+    })
+      .then((Reo: any) => {
+        Reo.init({
+          clientID: reoDevKey,
+        })
+      })
+      .catch((e: any) => {
+        console.error(`Could not connect to Reodotdev. Error: ${e}`)
+      })
+  }, [reoDevKey])
+
   return (
     <AnalyticsContext.Provider
       value={{

www/yarn.lock

@@ -7858,6 +7858,7 @@ __metadata:
     react-tooltip: ^5.28.0
     react-transition-group: ^4.4.5
     react-uuid: ^2.0.0
+    reodotdev: ^1.0.0
     rimraf: ^5.0.1
     slugify: ^1.6.6
     tailwind: "*"
@@ -14722,6 +14723,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reodotdev@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "reodotdev@npm:1.0.1"
+  checksum: 7a509431f0d27ab76e5cdee460d4ced86246057722c578c2cf16765e77e7c4cff1bd46a2cb3de2a568a4fba223e61ab99031b5b03069e3c7a40f5660c2c6fc70
+  languageName: node
+  linkType: hard
+
 "repeat-string@npm:^1.6.1":
   version: 1.6.1
   resolution: "repeat-string@npm:1.6.1"