Skip to content

Commit 1e38dbb

Browse files
jvmi7jvmi7
committed
adding growthbook
1 parent 657635a commit 1e38dbb

File tree

7 files changed

+118
-52
lines changed

7 files changed

+118
-52
lines changed

‎components/AskAIButton.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { RiSparkling2Fill } from '@remixicon/react';
2+
import { useFeature } from '@growthbook/growthbook-react';
3+
4+
const AskAIButton = () => {
5+
const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
6+
7+
if (!enableDocsAIWidget) {
8+
return null;
9+
}
10+
11+
return (
12+
<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' }}>
13+
<span>Ask AI</span>
14+
<RiSparkling2Fill size={14} />
15+
</button>
16+
);
17+
};
18+
19+
export { AskAIButton };

‎lib/growthbook.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// lib/growthbook.ts
2+
import { GrowthBook } from '@growthbook/growthbook-react';
3+
4+
export const growthbook = new GrowthBook({
5+
apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
6+
clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY
7+
});
8+
9+
growthbook.init();

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@eth-optimism/contracts-ts": "^0.17.0",
2323
"@eth-optimism/tokenlist": "^9.0.9",
2424
"@feelback/react": "^0.3.4",
25+
"@growthbook/growthbook-react": "^1.3.1",
2526
"@headlessui/react": "^2.1.8",
2627
"@remixicon/react": "^4.6.0",
2728
"algoliasearch": "^4.23.3",

‎pages/_app.tsx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import '../styles/global.css'
1+
import '../styles/global.css';
22

3-
import { useEffect, useState } from 'react'
4-
import { useRouter } from 'next/router'
5-
import * as gtag from '../utils/gtag'
6-
import * as aa from "search-insights"
7-
import AlgoliaContext from '@/utils/contexts/AlgoliaContext'
8-
import ScrollDispatcher from '@/components/ScrollDispatcher'
3+
import { useEffect, useState } from 'react';
4+
import { useRouter } from 'next/router';
5+
import * as gtag from '../utils/gtag';
6+
import * as aa from 'search-insights';
7+
import AlgoliaContext from '@/utils/contexts/AlgoliaContext';
8+
import ScrollDispatcher from '@/components/ScrollDispatcher';
9+
import { CustomGrowthBookProvider } from '../providers/GrowthbookProvider';
910

1011
export default function App({ Component, pageProps }) {
1112
const [queryID, setQueryID] = useState(null);
1213
const [objectID, setObjectID] = useState(null);
1314

14-
const router = useRouter()
15+
const router = useRouter();
1516
useEffect(() => {
1617
const handleRouteChange = (url) => {
17-
gtag.pageview(url)
18-
}
19-
router.events.on('routeChangeComplete', handleRouteChange)
18+
gtag.pageview(url);
19+
};
20+
router.events.on('routeChangeComplete', handleRouteChange);
2021
return () => {
21-
router.events.off('routeChangeComplete', handleRouteChange)
22-
}
23-
}, [router.events])
22+
router.events.off('routeChangeComplete', handleRouteChange);
23+
};
24+
}, [router.events]);
2425

2526
aa.default('init', {
26-
appId: "JCF9BUJTB9",
27-
apiKey: "cc766a73d4b0004e3059677de49297a2"
28-
})
27+
appId: 'JCF9BUJTB9',
28+
apiKey: 'cc766a73d4b0004e3059677de49297a2'
29+
});
2930

3031
return (
31-
<AlgoliaContext.Provider
32-
value={{
33-
queryID,
34-
setQueryID,
35-
objectID,
36-
setObjectID,
37-
}}
38-
>
39-
<ScrollDispatcher>
40-
<Component {...pageProps} />
41-
</ScrollDispatcher>
42-
</AlgoliaContext.Provider>
43-
)
32+
<CustomGrowthBookProvider>
33+
<AlgoliaContext.Provider
34+
value={{
35+
queryID,
36+
setQueryID,
37+
objectID,
38+
setObjectID
39+
}}
40+
>
41+
<ScrollDispatcher>
42+
<Component {...pageProps} />
43+
</ScrollDispatcher>
44+
</AlgoliaContext.Provider>
45+
</CustomGrowthBookProvider>
46+
);
4447
}
45-

‎pnpm-lock.yaml‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎providers/GrowthbookProvider.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// components/GrowthBookProvider.tsx
2+
import { GrowthBookProvider } from '@growthbook/growthbook-react';
3+
import { growthbook } from '../lib/growthbook';
4+
5+
export function CustomGrowthBookProvider({ children }: { children: React.ReactNode }) {
6+
return <GrowthBookProvider growthbook={growthbook}>{children}</GrowthBookProvider>;
7+
}

‎theme.config.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useConfig } from 'nextra-theme-docs';
55
import { FeelbackYesNo, PRESET_LIKE_DISLIKE } from '@feelback/react';
66
import '@feelback/react/styles/feelback.css';
77
import { Search } from './components/Search';
8-
import { RiSparkling2Fill } from '@remixicon/react';
8+
import { AskAIButton } from './components/AskAIButton';
9+
import { useFeature } from '@growthbook/growthbook-react';
910

1011
const config: DocsThemeConfig = {
1112
logo: (
@@ -31,12 +32,7 @@ const config: DocsThemeConfig = {
3132
component: Search
3233
},
3334
navbar: {
34-
extraContent: (
35-
<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' }}>
36-
<span>Ask AI</span>
37-
<RiSparkling2Fill size={14} />
38-
</button>
39-
)
35+
extraContent: AskAIButton
4036
},
4137
docsRepositoryBase: 'https://github.com/ethereum-optimism/docs/blob/main/',
4238
footer: {
@@ -121,6 +117,7 @@ const config: DocsThemeConfig = {
121117
const { asPath, defaultLocale, locale } = useRouter();
122118
const { frontMatter } = useConfig();
123119
const url = 'https://docs.optimism.io' + (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
120+
const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
124121

125122
return (
126123
<>
@@ -133,20 +130,23 @@ const config: DocsThemeConfig = {
133130
<meta name='twitter:description' content={frontMatter.description || 'Optimism Docs for developers'} />
134131
<meta name='twitter:image' content='https://docs.optimism.io/logos/docs-header.png' />
135132
<link rel='icon' href='/img/icons/favicon.ico' type='image/x-icon'></link>
136-
<script
137-
async
138-
src='https://widget.kapa.ai/kapa-widget.bundle.js'
139-
data-website-id={process.env.NEXT_PUBLIC_KAPA_WEBSITE_ID}
140-
data-project-name='OP Labs'
141-
data-project-color='#FF0420'
142-
data-modal-title='Optimism Docs Assistant ✨'
143-
data-project-logo='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8nhCmw7cu6jVQI01JFtMAV5tkTNLJXMSAOg&s'
144-
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?'
145-
data-user-analytics-fingerprint-enabled='true'
146-
data-modal-override-open-id='custom-ask-ai-button'
147-
data-button-hide='true'
148-
data-max-tokens='100'
149-
></script>
133+
{enableDocsAIWidget && (
134+
<script
135+
async
136+
src='https://widget.kapa.ai/kapa-widget.bundle.js'
137+
data-website-id={process.env.NEXT_PUBLIC_KAPA_WEBSITE_ID}
138+
data-project-name='OP Labs'
139+
data-project-color='#FF0420'
140+
data-modal-title='Optimism Docs Assistant ✨'
141+
data-project-logo='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8nhCmw7cu6jVQI01JFtMAV5tkTNLJXMSAOg&s'
142+
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?'
143+
data-user-analytics-fingerprint-enabled='true'
144+
data-modal-override-open-id='custom-ask-ai-button'
145+
data-modal-ask-ai-input-placeholder='Ask me a question about building on Optimism'
146+
data-button-hide='true'
147+
data-max-tokens='100'
148+
></script>
149+
)}
150150
</>
151151
);
152152
}

0 commit comments

Comments
 (0)