Merge pull request #11023 from hashicorp/br.hashiconf-banner

Adds AlertBanner to promote HashiConf EU

website/data/alert-banner.js

@@ -0,0 +1,13 @@
+export const ALERT_BANNER_ACTIVE = true
+
+// https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
+export default {
+  tag: 'June 8-11',
+  url: 'https://hashiconf.com/europe/?utm_source=DocsBanner',
+  text:
+    'The countdown to HashiConf Europe is on, and the full schedule is now live.',
+  linkText: 'View Schedule',
+  // Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
+  // if you'd like the component to stop showing at or after a certain date
+  expirationDate: null,
+}

website/package.json

@@ -7,6 +7,7 @@
     "@hashicorp/mktg-global-styles": "3.0.1",
     "@hashicorp/mktg-logos": "1.0.2",
     "@hashicorp/nextjs-scripts": "18.2.0",
+    "@hashicorp/react-alert-banner": "^6.1.1",
     "@hashicorp/react-button": "5.0.0",
     "@hashicorp/react-docs-page": "13.2.0",
     "@hashicorp/react-hashi-stack-menu": "2.0.3",

website/pages/_app.js

@@ -12,6 +12,8 @@ import NProgress from '@hashicorp/nextjs-scripts/lib/nprogress'
 import createConsentManager from '@hashicorp/nextjs-scripts/lib/consent-manager'
 import { ErrorBoundary } from '@hashicorp/nextjs-scripts/lib/bugsnag'
 import useAnchorLinkAnalytics from '@hashicorp/nextjs-scripts/lib/anchor-link-analytics'
+import AlertBanner from '@hashicorp/react-alert-banner'
+import alertBannerData, { ALERT_BANNER_ACTIVE } from 'data/alert-banner'
 
 NProgress({ Router })
 const { ConsentManager, openConsentManager } = createConsentManager({
@@ -32,6 +34,9 @@ export default function App({ Component, pageProps }) {
         image="https://www.packer.io/img/og-image.png"
         icon={[{ href: '/favicon.ico' }]}
       />
+      {ALERT_BANNER_ACTIVE && (
+        <AlertBanner {...alertBannerData} product="packer" />
+      )}
       <HashiStackMenu />
       <ProductSubnav />
       <div className="content">

website/pages/style.css

@@ -8,6 +8,7 @@
   --highlight-color: var(--packer-link);
 }
 
+@import '~@hashicorp/react-alert-banner/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-content/style.css';