docs(infra): add announcement banner (#216)

* promo banner added above nav on homepage * promo banner variables added to config toml * fixed formatting in layouts/head.html Co-authored-by: aimee <[email protected]>
spinnaker · Aug 10, 2022 · 7f1a39e · 7f1a39e
1 parent 2ce9ee2
commit 7f1a39e
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 1,282 deletions.
diff --git a/assets/scss/_promo-banner.scss b/assets/scss/_promo-banner.scss
@@ -0,0 +1,27 @@
+.promo {
+ &-banner {
+ width: 100%;
+ height: 0;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 0.15s;
+ &.active {
+ height: 50px;
+ }
+ }
+}
+
+.close {
+ &-banner {
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ width: 20px;
+ height: 100%;
+ margin-right: 20px;
+ justify-content: center;
+ cursor: pointer;
+ }
+}
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -1,4 +1,5 @@
 @import 'success-stories';
+@import 'promo-banner';
 @import 'slick-theme';
 @import 'slick';
 @import 'docs';

diff --git a/config.toml b/config.toml
@@ -133,6 +133,15 @@ algolia_docsearch = false
 # Enable Lunr.js offline search
 offlineSearch = true
 
+# Promo Banner variables
+[params.promoBanner]
+ show = true
+ text = "Spinnaker Summit is co-located with KubeCon this year! Join us on Oct 23-24 in Detroit."
+ ctaLink = "http://go.armory.io/ss22"
+ ctaText = "Register"
+ label = "UPCOMING EVENT"
+
+
 # User interface configuration
 [params.ui]
 # Enable to show the side bar menu in its compact state.

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,10 +4,11 @@
  {{ partial "head.html" . }}
  </head>
  <body class="td-{{ .Kind }} layout-{{.Layout}}">
-  
+
  <header class="row">
+
+ {{ partial "promo-banner.html" . }}
  {{ partial "navbar.html" . }}
-
  {{ if .IsHome }}{{ partial "hero-homepage.html" .}}
 
  </header>

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -1,3 +1,5 @@
+
+
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 {{ hugo.Generator }}

diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html
@@ -19,4 +19,6 @@
  }
  })
 </script>
-{{ end }}
+{{ end }} {{ if .Site.Params.promoBanner.show }}
+<script src="/js/promo-banner.js" type="text/javascript"></script>
+{{end}}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -1,7 +1,9 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
 
-<nav class=" js-navbar-scroll navbar navbar-expand navbar-light flex-column flex-lg-row td-navbar">
- <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+
+<nav id="navbar" class=" js-navbar-scroll navbar navbar-expand navbar-light flex-column flex-lg-row td-navbar">
+
+ <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
  <span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/spinnaker-text-white.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="text-uppercase font-weight-bold sr-only">{{ .Site.Title }}</span>
  </a>
  <div class="td-navbar-nav-scroll ml-lg-auto" id="main_navbar">

diff --git a/layouts/partials/promo-banner.html b/layouts/partials/promo-banner.html
@@ -0,0 +1,62 @@
+{{ if .Site.Params.promoBanner.show }}
+<div
+ class="
+ bg-light
+ text-center
+ promo-banner
+ position-relative
+ d-none d-lg-flex
+ align-items-center
+ justify-content-center
+ "
+ id="promo-banner"
+>
+ <div class="container-fluid container-xl mx-auto">
+ <div class="row align-items-center">
+ <div class="col-2">
+ <span
+ class="
+ badge
+ inline-block
+ text-white
+ rounded-pill
+ px-4
+ py-2
+ bg-secondary
+ "
+ >
+ {{ .Site.Params.promoBanner.label }}
+ </span>
+ </div>
+ <div class="col-8">
+ <div>
+ <p class="m-0">{{ .Site.Params.promoBanner.text }}</p>
+ </div>
+ </div>
+ <div class="col-2">
+ <div>
+ <a
+ target="_blank"
+ class="btn btn-sm btn-info mr-3 px-3"
+ href="{{ .Site.Params.promoBanner.ctaLink }}"
+ >
+ {{ .Site.Params.promoBanner.ctaText }}
+ <i class="fas fa-arrow-alt-circle-right ml-1"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="position-absolute close-banner" id="close-banner">
+ <svg
+ class="d-block"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 512 512"
+ >
+ <path
+ d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"
+ />
+ </svg>
+ </div>
+</div>
+{{ end }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -15,7 +15,7 @@
 <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ end }}
 {{/* {{ if eq .Page.Layout "index" }} */}}
- <script type="text/javascript" src="js/slick.min.js"></script>
+ <script type="text/javascript" src="/js/slick.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  // console.log('has carousel, document ready')