diff --git a/microsite/core/Components.js b/microsite/core/Components.js
index 49e7d7daca..4811b49291 100644
--- a/microsite/core/Components.js
+++ b/microsite/core/Components.js
@@ -106,9 +106,29 @@ const Breakpoint = ({ narrow, wide }) => (
);
+const Banner = simpleComponent('div', 'Banner', ['hidden']);
+Banner.Container = simpleComponent('div', 'Banner__Container');
+
+const BannerDismissButton = simpleComponent(
+ props => (
+
+ ),
+ 'Banner__DismissButton',
+);
+
+Banner.Dismissable = ({ storageKey, children }) => (
+
+ {children}
+
+
+);
+
module.exports = {
Block,
ActionBlock,
Breakpoint,
BulletLine,
+ Banner,
};
diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js
index d572605171..47f9568d9b 100644
--- a/microsite/pages/en/index.js
+++ b/microsite/pages/en/index.js
@@ -11,6 +11,7 @@ const Block = Components.Block;
const ActionBlock = Components.ActionBlock;
const Breakpoint = Components.Breakpoint;
const BulletLine = Components.BulletLine;
+const Banner = Components.Banner;
class Index extends React.Component {
render() {
@@ -53,6 +54,15 @@ class Index extends React.Component {
+
+
+ 🎉 New feature: Kubernetes for service owners.{' '}
+
+ Learn more.
+
+
+
+
diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js
index 39ba05bcad..8d0c4ea57c 100644
--- a/microsite/siteConfig.js
+++ b/microsite/siteConfig.js
@@ -82,6 +82,7 @@ const siteConfig = {
'https://buttons.github.io/buttons.js',
'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
'/js/medium-zoom.js',
+ '/js/dismissable-banner.js',
],
// On page navigation for the current documentation page.
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 01bb3c89eb..c947c88e66 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1035,6 +1035,55 @@ code {
}
}
+.Banner {
+ position: relative;
+ padding: 14px;
+ margin: 14px 20px;
+ border-radius: 4px;
+ background-color: $primaryColor;
+ font-family: Helvetica Neue, sans-serif;
+ color: #000;
+}
+
+.Banner--hidden {
+ opacity: 0;
+ transition: opacity 200ms ease-in-out;
+}
+
+.Banner a {
+ color: #000;
+ text-decoration: underline;
+}
+
+.Banner__Container {
+ position: relative;
+ overflow: visible;
+ z-index: 100;
+
+ max-width: 1430px;
+ height: 0;
+ margin: -14px auto 14px auto;
+}
+
+.Banner__DismissButton {
+ position: absolute;
+ display: flex;
+ right: 8px;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+
+ border-radius: 50%;
+ padding: 6px;
+ width: 36px;
+ height: 36px;
+ cursor: pointer;
+}
+
+.Banner__DismissButton:hover {
+ background: rgba(0, 0, 0, 0.2);
+}
+
.logos-mobile-background {
position: absolute;
width: 200vw;
diff --git a/microsite/static/js/dismissable-banner.js b/microsite/static/js/dismissable-banner.js
new file mode 100644
index 0000000000..2fcdbe5692
--- /dev/null
+++ b/microsite/static/js/dismissable-banner.js
@@ -0,0 +1,18 @@
+window.addEventListener('DOMContentLoaded', () => {
+ const banners = document.querySelectorAll('[data-banner]');
+ banners.forEach(banner => {
+ const storageKey = `hideBanner/${banner.getAttribute('data-banner')}`;
+
+ if (!localStorage.getItem(storageKey)) {
+ banner.classList.remove('Banner--hidden');
+ }
+
+ const dismissButton = banner.querySelector('[data-banner-dismiss]');
+ if (dismissButton) {
+ dismissButton.addEventListener('click', () => {
+ banner.classList.add('Banner--hidden');
+ localStorage.setItem(storageKey, 'true');
+ });
+ }
+ });
+});