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

@@ -6,6 +6,7 @@
   "dependencies": {
     "@hashicorp/mktg-global-styles": "^3.0.1",
     "@hashicorp/nextjs-scripts": "18.1.0",
+    "@hashicorp/react-alert-banner": "^6.1.1",
     "@hashicorp/react-button": "^5.0.1",
     "@hashicorp/react-code-block": "^4.0.1",
     "@hashicorp/react-docs-page": "13.2.0",

website/pages/_app.js

@@ -12,6 +12,8 @@ import HashiStackMenu from '@hashicorp/react-hashi-stack-menu'
 import ProductSubnav from '../components/subnav'
 import Footer from '../components/footer'
 import Error from './_error'
+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.vagrantup.com/img/og-image.png"
         icon={[{ href: '/favicon.ico' }]}
       />
+      {ALERT_BANNER_ACTIVE && (
+        <AlertBanner {...alertBannerData} product="vagrant" />
+      )}
       <HashiStackMenu />
       <ProductSubnav />
       <div className="content">

website/pages/style.css

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