Improve announcements implementation

Signed-off-by: Celeste Horgan <celeste@cncf.io> Co-authored-by: Tim Bannister <tim@scalefactory.com>
suhasadhav · Jun 4, 2020 · 9caa83d · 9caa83d
1 parent 3b6e9e0
commit 9caa83d
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 32 deletions.
diff --git a/config.toml b/config.toml
@@ -83,10 +83,12 @@ githubWebsiteRepo = "github.com/kubernetes/website"
 githubWebsiteRaw = "raw.githubusercontent.com/kubernetes/website"
 
 # param for displaying an announcement block on every page; see PR #16210
-announcement = false
+announcement = true
 # announcement_message is only displayed when announcement = true; update with your specific message
-announcement_message = "The Kubernetes Documentation team would like your feedback!  Please take a <a href='https://www.surveymonkey.com/r/8R237FN' target='_blank'>short survey</a> so we can improve the Kubernetes online documentation."
-
+announcement_title = "Announcement title here"
+announcement_message_full = "Long homepage announcement <br/><br/> Quisque efficitur feugiat neque non accumsan. Sed sed massa pharetra, suscipit mauris ut, viverra felis. Sed id ullamcorper sapien. Vivamus lobortis elementum nunc nec molestie. Ut eleifend tellus diam, in tincidunt purus ullamcorper nec. Morbi quam elit, laoreet at cursus vitae, efficitur condimentum felis. Nam ac felis sed lorem dapibus semper. Integer eu pretium justo. Nunc porta pulvinar ornare. " #appears on homepage. Use md formatting for links and <br/> for line breaks.
+announcement_message_compact = "One line compact announcement" #appears on subpages
+announcement_bg = "#000000" #choose a dark color – text is white
 
 [params.pushAssets]
 css = [

diff --git a/content/en/_index.html b/content/en/_index.html
@@ -3,8 +3,6 @@
 abstract: "Automated container deployment, scaling, and management"
 cid: home
 ---
-{{< announcement >}}
-
 {{< deprecationwarning >}}
 
 {{< blocks/section id="oceanNodes" >}}
@@ -60,4 +58,4 @@ <h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
 
 {{< blocks/kubernetes-features >}}
 
-{{< blocks/case-studies >}}
+{{< blocks/case-studies >}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,6 +4,13 @@
 		{{ partial "head.html" . }}
 	</head>
 	<body class="page">
+    {{ block "announcement" . }}
+      {{ if .IsHome }}
+        {{ partial "frontpage-announcement.html" . }}
+      {{ else }}
+        {{ partial "announcement.html" . }}
+      {{ end }}
+    {{ end }}
 		{{ partial "header.html" . }}
 		{{ block "hero" . }}
 		<!--  HERO  -->
@@ -18,7 +25,6 @@ <h5>{{ .Params.abstract }}</h5>
 		</section>
 		{{ block "post-hero" . }}{{ end }}
 		{{ end }}
-
 	<main>
 		<article class="page-content">
 		  {{ block "main" . }}{{ end }}
@@ -28,4 +34,4 @@ <h5>{{ .Params.abstract }}</h5>
 		{{ partialCached "footer.html" . }}
 		{{ partialCached "footer-scripts.html" . }}
 	</body>
-</html>
+</html>
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" type="text/css" href="{{ "css/blog.css" | relURL }}">
 	</head>
 	<body>
+    {{ partial "announcement.html" . }}
 		{{ partial "header.html" . }}
 		<section id="hero" class="light-text no-sub">
 			<h1>{{ .Title }}</h1>
@@ -39,4 +40,4 @@ <h1>{{ .Title }}</h1>
 		{{ partialCached "footer.html" . }}
 		{{ partialCached "footer-scripts.html" . }}
 	</body>
-</html>
+</html>
diff --git a/layouts/community/list.html b/layouts/community/list.html
@@ -1,4 +1,4 @@
 {{ define "main" }}
 <link rel="stylesheet" type="text/css" href="{{ "css/newcommunity.css" | relURL }}">
     {{ .Content }}
-{{ end }}
+{{ end }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -4,23 +4,23 @@
 	{{ partial "head.html" . }}
 	</head>
 	<body>
+    {{ partial "announcement.html" . }}
 		{{ partial "header.html" . }}
 		{{ block "hero" . }}
 		<!--  HERO  -->
 		<section id="hero" class="light-text no-sub">
 			{{ partial "docs/top-menu.html" . }}
 		</section>
 		{{ end }}
-    {{ block "announcement" . }}{{ partial "announcement.html" . }}{{ end }}
 		{{ block "deprecation" . }}{{ partial "deprecation-warning.html" . }}{{ end }}
     <main>
         <section id="encyclopedia">
           {{ block "side-menu" . }}<div id="docsToc" style="display:none;"></div>{{ end }}
           <div id="{{ block "content-id" . }}docsContent{{ end }}">
             {{ block "content" . }}{{ end }}
-    
+
             {{ partial "feedback.html" . }}
-    
+
             {{ partial "git-info.html" . }}
           </div>
         </section>
@@ -45,4 +45,4 @@
       })();
     </script>
 	</body>
-</html>
+</html>
diff --git a/layouts/partials/announcement.html b/layouts/partials/announcement.html
@@ -1,11 +1,14 @@
-{{ if .Param "announcement"}}
-  <section id="announcement">
-    <main>
-      <div class="content announcement">
-        <h3>
-          {{ .Param "announcement_message" | markdownify }}
-        </h3>
-      </div>
-    </main>
-  </section>
-{{ end }}
+{{ if .Page.Param "announcement" }}
+<section lang="en" id="announcement" style="background-color:{{ .Page.Param "announcement_bg" }}">
+  <main>
+    <div class="content announcement main-section">
+
+      <h4 class="announcement">
+          {{ .Page.Param "announcement_title" | markdownify }}
+      </h4>
+      <p class="announcement">{{ .Page.Param "announcement_message_compact" | markdownify }}</p>
+
+    </div>
+  </main>
+</section>
+{{ end }}
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
@@ -19,6 +19,9 @@
 <link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/callouts.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
+{{- if .Site.Params.announcement }}
+<link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
+{{- end }}
 {{- if .Params.deprecated }}
 <link rel="stylesheet" href="{{ "css/deprecation-warning.css" | relURL }}">
 {{- end }}
@@ -34,4 +37,4 @@
 {{- $url := trim . " " | relURL }}
 <link rel="stylesheet" href="{{ $url }}"><!-- custom css added -->
 {{- end }}
-{{- end }}
+{{- end }}
diff --git a/layouts/partials/frontpage-announcement.html b/layouts/partials/frontpage-announcement.html
@@ -0,0 +1,14 @@
+{{ if .Page.Param "announcement" }}
+<section lang="en" id="fp-announcement" style="background-color:{{ .Page.Param "announcement_bg" }}">
+  <main>
+    <div class="content announcement main-section">
+
+      <h3>
+          {{ .Page.Param "announcement_title" | markdownify }}
+      </h3>
+      <p>{{ .Page.Param "announcement_message_full" | markdownify }}</p>
+
+    </div>
+  </main>
+</section>
+{{ end }}
diff --git a/layouts/shortcodes/announcement.html b/layouts/shortcodes/announcement.html
@@ -1,10 +1,13 @@
 {{ if .Page.Param "announcement" }}
+<link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
 <section id="announcement">
   <main>
-    <div class="content announcement">
+    <div class="content announcement main-section">
+
       <h3>
           {{ .Page.Param "announcement_message" | markdownify }}
       </h3>
+
     </div>
   </main>
 </section>

diff --git a/static/css/announcement.css b/static/css/announcement.css
@@ -1,6 +1,25 @@
-.announcement {
-    padding: 20px;
-    margin: 20px 0;
-    border-radius: 3px;
-    background-color: #eeeeee;
+.announcement.content {
+  margin-bottom: 0px;
+}
+
+.announcement > p, .gridPage #announcement .content p, .announcement > h4, .announcement > h3 {
+  color: #ffffff;
+}
+
+#announcement {
+  padding-top: 75px;
+  padding-bottom: 25px;
+}
+
+#hero {
+  padding-top: 40px;
+}
+
+#fp-announcement {
+  min-height: 30vh;
+}
+
+#fp-announcement main {
+  margin-top: 125px;
+  padding-bottom: 35px;
 }