fix conflict

Author: krofax

.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=

.node-version

@@ -0,0 +1 @@
+20.11.0

.npmrc

@@ -1 +1,3 @@
 enable-pre-post-scripts=true
+use-node-version=20.11.0
+use-pnpm-version=10.2.0

.nvmrc

@@ -0,0 +1 @@
+20.11.0

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,11 @@
+// lib/growthbook.ts
+import { GrowthBook } from '@growthbook/growthbook-react';
+
+export const growthbook = new GrowthBook({
+  apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST || '',
+  clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY || ''
+});
+
+if (process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST && process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY) {
+  growthbook.init();
+}

netlify.toml

@@ -0,0 +1,3 @@
+[build.environment]
+PNPM_VERSION = "10.2.0"
+NODE_VERSION = "20.11.0"

notes/kapa-ai-assistant.md

@@ -0,0 +1,13 @@
+# [kapa.ai](http://kapa.ai) assistant details
+
+## Configuration
+
+Everything required for the code configuration for the [kapa.ai](http://kapa.ai) assistant lies in the `theme.config.ts` file of the repo. There you will find the `<script>` tag which brings in the kapa.ai assistant modal into the website.
+
+Configuration details for this script tag can be found in the [kapa.ai](http://kapa.ai) documentation here: https://docs.kapa.ai/
+
+Currently the website has the modal enabled by a custom button component located at `components/AskAIButton.tsx`
+
+## Enabling/disabling the feature
+
+The kapa AI assistant con be toggled on and off on the website by toggling the **`enable_docs_ai_widget`** feature flag.

package.json

@@ -4,10 +4,9 @@
   "description": "Optimism Docs",
   "scripts": {
     "lint": "eslint . --ext mdx --max-warnings 0 && pnpm spellcheck:lint && pnpm check-breadcrumbs && pnpm check-redirects",
-    "fix": "eslint . --ext mdx --fix && pnpm spellcheck:fix && pnpm check-breadcrumbs && pnpm fix-redirects",
+    "fix": "eslint . --ext mdx --fix && pnpm spellcheck:fix && pnpm breadcrumbs && pnpm fix-redirects",
     "spellcheck:lint": "cspell lint \"**/*.mdx\"",
     "spellcheck:fix": "cspell --words-only --unique \"**/*.mdx\" | sort --ignore-case | uniq > words.txt",
-    "linkcheck": "lychee --config ./lychee.toml --quiet \"./pages\"",
     "breadcrumbs": "npx ts-node --skip-project utils/create-breadcrumbs.ts",
     "check-redirects": "npx ts-node --skip-project utils/redirects.ts",
     "fix-redirects": "npx ts-node --skip-project utils/fix-redirects.ts",
@@ -22,12 +21,14 @@
     "@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",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.7",
     "escape-string-regexp": "^5.0.0",
-    "next": "14.2.15",
+    "next": "14.2.21",
     "next-sitemap": "^4.2.3",
     "nextra": "2.13.2",
     "nextra-theme-docs": "2.13.2",

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>
+  );
 }
-