feat(docs): Integrate Purple Banner component into documentation site (#10053)

Added the @cube-dev/purple-banner dependency and implemented it in the _app.tsx file to enhance the user interface with a promotional banner. The banner visibility is controlled via state and CSS transitions for a smooth appearance.

Author: solarrust

docs/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@cube-dev/marketing-ui": "0.0.1-beta.22",
+    "@cube-dev/purple-banner": "https://github.com/cubedevinc/purple-banner/releases/download/v2.0.21/cube-dev-purple-banner-2.0.21.tgz",
     "@cubejs-client/core": "^0.32.17",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.3",

docs/pages/_app.tsx

@@ -8,11 +8,12 @@ import "@/styles/images.css";
 import "katex/dist/katex.min.css";
 import "@cube-dev/marketing-ui/dist/index.css";
 
+import PurpleBanner from '@cube-dev/purple-banner';
 import localFont from "next/font/local";
 import { Inter } from "next/font/google";
 import { SearchProvider } from "@cube-dev/marketing-ui";
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export const SourceCodePro = localFont({
   src: "../fonts/SourceCodePro-Regular.woff2",
@@ -65,6 +66,11 @@ type Props = { origin: string | null };
 
 export default function MyApp({ origin, Component, pageProps }: AppProps & Props) {
   const router = useRouter()
+  const [pbVisible, setPbVisible] = useState(false)
+
+  useEffect(() => {
+    requestAnimationFrame(() => setPbVisible(true))
+  }, [])
 
   // Track page views
   useEffect(() => {
@@ -97,8 +103,31 @@ export default function MyApp({ origin, Component, pageProps }: AppProps & Props
           --font-mono: ${JetBrainsMono.style.fontFamily};
           --font-code: ${SourceCodePro.style.fontFamily};
           --cube-font: ${CeraPro.style.fontFamily};
+          --purple-banner-font: ${CeraPro.style.fontFamily};
+        }
+        .pb-wrapper {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.3s linear;
+          will-change: max-height;
+        }
+        .pb-wrapper--visible {
+          max-height: 100px;
+        }
+        @media (max-width: 796px) {
+          .pb-wrapper--visible {
+            max-height: 160px;
+          }
         }
       `}</style>
+
+      <div className={pbVisible ? 'pb-wrapper pb-wrapper--visible' : 'pb-wrapper'}>
+        <PurpleBanner
+          utmSource="cube.dev"
+          debugMode={process.env.NEXT_PUBLIC_SHOW_PURPLE_BANNER === 'true'}
+        />
+      </div>
+
       <Component {...pageProps} />
     </SearchProvider>
   );