feat(docs): Adding growthbook for feature flag support

.example.env

@@ -0,0 +1,7 @@
+# Find these values in netlify if you are missing them
+# https://app.netlify.com/sites/docs-optimism/configuration/env#content
+
+NEXT_PUBLIC_KAPA_WEBSITE_ID=
+NEXT_PUBLIC_GROWTHBOOK_API_HOST=
+NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY=
+NEXT_PUBLIC_GA_ID=

components/AskAIButton.tsx

@@ -0,0 +1,19 @@
+import { RiSparkling2Fill } from '@remixicon/react';
+import { useFeature } from '@growthbook/growthbook-react';
+
+const AskAIButton = () => {
+  const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
+
+  if (!enableDocsAIWidget) {
+    return null;
+  }
+
+  return (
+    <button id='custom-ask-ai-button' className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' style={{ backgroundColor: '#FF0420', color: 'white', display: 'flex', alignItems: 'center', gap: '4px' }}>
+      <span>Ask AI</span>
+      <RiSparkling2Fill size={14} />
+    </button>
+  );
+};
+
+export { AskAIButton };

lib/growthbook.ts

@@ -0,0 +1,17 @@
+// lib/growthbook.ts
+import { GrowthBook } from '@growthbook/growthbook-react';
+
+if (!process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST || !process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY) {
+  throw new Error('NEXT_PUBLIC_GROWTHBOOK_API_HOST and NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY must be set');
+}
+
+export const growthbook = new GrowthBook({
+  apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
+  clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY
+});
+
+try {
+  growthbook.init();
+} catch (error) {
+  console.error('Error initializing GrowthBook', error);
+}

package.json

@@ -22,6 +22,7 @@
     "@eth-optimism/contracts-ts": "^0.17.0",
     "@eth-optimism/tokenlist": "^9.0.9",
     "@feelback/react": "^0.3.4",
+    "@growthbook/growthbook-react": "^1.3.1",
     "@headlessui/react": "^2.1.8",
     "@remixicon/react": "^4.6.0",
     "algoliasearch": "^4.23.3",

pages/_app.tsx

@@ -1,45 +1,47 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import * as gtag from '../utils/gtag'
-import * as aa from "search-insights"
-import AlgoliaContext from '@/utils/contexts/AlgoliaContext'
-import ScrollDispatcher from '@/components/ScrollDispatcher'
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import * as gtag from '../utils/gtag';
+import * as aa from 'search-insights';
+import AlgoliaContext from '@/utils/contexts/AlgoliaContext';
+import ScrollDispatcher from '@/components/ScrollDispatcher';
+import { CustomGrowthBookProvider } from '../providers/GrowthbookProvider';
 
 export default function App({ Component, pageProps }) {
   const [queryID, setQueryID] = useState(null);
   const [objectID, setObjectID] = useState(null);
 
-  const router = useRouter()
+  const router = useRouter();
   useEffect(() => {
     const handleRouteChange = (url) => {
-      gtag.pageview(url)
-    }
-    router.events.on('routeChangeComplete', handleRouteChange)
+      gtag.pageview(url);
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.events])
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
 
   aa.default('init', {
-    appId: "JCF9BUJTB9",
-    apiKey: "cc766a73d4b0004e3059677de49297a2"
-  })
+    appId: 'JCF9BUJTB9',
+    apiKey: 'cc766a73d4b0004e3059677de49297a2'
+  });
 
   return (
-    <AlgoliaContext.Provider 
-      value={{
-        queryID,
-        setQueryID,
-        objectID,
-        setObjectID,
-      }}
-    >
-      <ScrollDispatcher>
-        <Component {...pageProps} />
-      </ScrollDispatcher>
-    </AlgoliaContext.Provider>
-  )
+    <CustomGrowthBookProvider>
+      <AlgoliaContext.Provider
+        value={{
+          queryID,
+          setQueryID,
+          objectID,
+          setObjectID
+        }}
+      >
+        <ScrollDispatcher>
+          <Component {...pageProps} />
+        </ScrollDispatcher>
+      </AlgoliaContext.Provider>
+    </CustomGrowthBookProvider>
+  );
 }
-

providers/GrowthbookProvider.tsx

@@ -0,0 +1,7 @@
+// components/GrowthBookProvider.tsx
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
+import { growthbook } from '../lib/growthbook';
+
+export function CustomGrowthBookProvider({ children }: { children: React.ReactNode }) {
+  return <GrowthBookProvider growthbook={growthbook}>{children}</GrowthBookProvider>;
+}

theme.config.tsx

@@ -5,7 +5,8 @@ import { useConfig } from 'nextra-theme-docs';
 import { FeelbackYesNo, PRESET_LIKE_DISLIKE } from '@feelback/react';
 import '@feelback/react/styles/feelback.css';
 import { Search } from './components/Search';
-import { RiSparkling2Fill } from '@remixicon/react';
+import { AskAIButton } from './components/AskAIButton';
+import { useFeature } from '@growthbook/growthbook-react';
 
 const config: DocsThemeConfig = {
   logo: (
@@ -31,12 +32,7 @@ const config: DocsThemeConfig = {
     component: Search
   },
   navbar: {
-    extraContent: (
-      <button id='custom-ask-ai-button' className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' style={{ backgroundColor: '#FF0420', color: 'white', display: 'flex', alignItems: 'center', gap: '4px' }}>
-        <span>Ask AI</span>
-        <RiSparkling2Fill size={14} />
-      </button>
-    )
+    extraContent: AskAIButton
   },
   docsRepositoryBase: 'https://github.com/ethereum-optimism/docs/blob/main/',
   footer: {
@@ -121,6 +117,7 @@ const config: DocsThemeConfig = {
     const { asPath, defaultLocale, locale } = useRouter();
     const { frontMatter } = useConfig();
     const url = 'https://docs.optimism.io' + (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
+    const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
 
     return (
       <>
@@ -133,20 +130,23 @@ const config: DocsThemeConfig = {
         <meta name='twitter:description' content={frontMatter.description || 'Optimism Docs for developers'} />
         <meta name='twitter:image' content='https://docs.optimism.io/logos/docs-header.png' />
         <link rel='icon' href='/img/icons/favicon.ico' type='image/x-icon'></link>
-        <script
-          async
-          src='https://widget.kapa.ai/kapa-widget.bundle.js'
-          data-website-id={process.env.NEXT_PUBLIC_KAPA_WEBSITE_ID}
-          data-project-name='OP Labs'
-          data-project-color='#FF0420'
-          data-modal-title='Optimism Docs Assistant ✨'
-          data-project-logo='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8nhCmw7cu6jVQI01JFtMAV5tkTNLJXMSAOg&s'
-          data-modal-example-questions='What is the OP Stack?, How do I get started with Supersim?, How do I create a SuperERC20 token?, How do I get faucet funds?'
-          data-user-analytics-fingerprint-enabled='true'
-          data-modal-override-open-id='custom-ask-ai-button'
-          data-button-hide='true'
-          data-max-tokens='100'
-        ></script>
+        {enableDocsAIWidget && (
+          <script
+            async
+            src='https://widget.kapa.ai/kapa-widget.bundle.js'
+            data-website-id={process.env.NEXT_PUBLIC_KAPA_WEBSITE_ID}
+            data-project-name='OP Labs'
+            data-project-color='#FF0420'
+            data-modal-title='Optimism Docs Assistant ✨'
+            data-project-logo='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8nhCmw7cu6jVQI01JFtMAV5tkTNLJXMSAOg&s'
+            data-modal-example-questions='What is the OP Stack?, How do I get started with Supersim?, How do I create a SuperERC20 token?, How do I get faucet funds?'
+            data-user-analytics-fingerprint-enabled='true'
+            data-modal-override-open-id='custom-ask-ai-button'
+            data-modal-ask-ai-input-placeholder='Ask me a question about building on Optimism'
+            data-button-hide='true'
+            data-max-tokens='100'
+          ></script>
+        )}
       </>
     );
   }