Skip to content

Commit 32df746

Browse files
authored
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.
1 parent 69b2cb3 commit 32df746

File tree

2 files changed

+31
-1
lines changed

2 files changed

+31
-1
lines changed

docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@cube-dev/marketing-ui": "0.0.1-beta.22",
18+
"@cube-dev/purple-banner": "https://github.com/cubedevinc/purple-banner/releases/download/v2.0.21/cube-dev-purple-banner-2.0.21.tgz",
1819
"@cubejs-client/core": "^0.32.17",
1920
"@radix-ui/react-dialog": "^1.0.4",
2021
"@radix-ui/react-navigation-menu": "^1.1.3",

docs/pages/_app.tsx

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import "@/styles/images.css";
88
import "katex/dist/katex.min.css";
99
import "@cube-dev/marketing-ui/dist/index.css";
1010

11+
import PurpleBanner from '@cube-dev/purple-banner';
1112
import localFont from "next/font/local";
1213
import { Inter } from "next/font/google";
1314
import { SearchProvider } from "@cube-dev/marketing-ui";
1415
import { useRouter } from 'next/router';
15-
import { useEffect } from 'react';
16+
import { useEffect, useState } from 'react';
1617

1718
export const SourceCodePro = localFont({
1819
src: "../fonts/SourceCodePro-Regular.woff2",
@@ -65,6 +66,11 @@ type Props = { origin: string | null };
6566

6667
export default function MyApp({ origin, Component, pageProps }: AppProps & Props) {
6768
const router = useRouter()
69+
const [pbVisible, setPbVisible] = useState(false)
70+
71+
useEffect(() => {
72+
requestAnimationFrame(() => setPbVisible(true))
73+
}, [])
6874

6975
// Track page views
7076
useEffect(() => {
@@ -97,8 +103,31 @@ export default function MyApp({ origin, Component, pageProps }: AppProps & Props
97103
--font-mono: ${JetBrainsMono.style.fontFamily};
98104
--font-code: ${SourceCodePro.style.fontFamily};
99105
--cube-font: ${CeraPro.style.fontFamily};
106+
--purple-banner-font: ${CeraPro.style.fontFamily};
107+
}
108+
.pb-wrapper {
109+
max-height: 0;
110+
overflow: hidden;
111+
transition: max-height 0.3s linear;
112+
will-change: max-height;
113+
}
114+
.pb-wrapper--visible {
115+
max-height: 100px;
116+
}
117+
@media (max-width: 796px) {
118+
.pb-wrapper--visible {
119+
max-height: 160px;
120+
}
100121
}
101122
`}</style>
123+
124+
<div className={pbVisible ? 'pb-wrapper pb-wrapper--visible' : 'pb-wrapper'}>
125+
<PurpleBanner
126+
utmSource="cube.dev"
127+
debugMode={process.env.NEXT_PUBLIC_SHOW_PURPLE_BANNER === 'true'}
128+
/>
129+
</div>
130+
102131
<Component {...pageProps} />
103132
</SearchProvider>
104133
);

0 commit comments

Comments
 (0)