Merge pull request #25769 from sftim/20201222_data_driven_announcements

Implement announcements as data-driven content

OWNERS_ALIASES

@@ -215,3 +215,12 @@ aliases:
     - idvoretskyi
     - MaxymVlasov
     - Potapy4
+  # authoritative source: git.k8s.io/community/OWNERS_ALIASES
+  committee-steering: # provide PR approvals for announcements
+    - cblecker
+    - derekwaynecarr
+    - dims
+    - liggitt
+    - mrbobbytables
+    - nikhita
+    - parispittman

assets/scss/_custom.scss

@@ -578,3 +578,64 @@ body.td-documentation {
   color: black;
   text-decoration: none !important;
 }
+
+@media print {
+  /* Do not print announcements */
+  #announcement, section#announcement, #fp-announcement, section#fp-announcement {
+    display: none;
+  }
+}
+
+#announcement, #fp-announcement {
+  > * {
+    color: inherit;
+    background: inherit;
+  }
+
+  a {
+    color: inherit;
+    border-bottom: 1px solid #fff;
+  }
+
+  a:hover {
+    color: inherit;
+    border-bottom: none;
+  }
+}
+
+#announcement {
+  padding-top: 105px;
+  padding-bottom: 25px;
+}
+
+.header-hero {
+  padding-top: 40px;
+}
+
+/* Extra announcement height only for landscape viewports */
+@media (min-aspect-ratio: 8/9) {
+  #fp-announcement {
+    min-height: 25vh;
+  }
+}
+
+#fp-announcement aside {
+  padding-top: 115px;
+  padding-bottom: 25px;
+}
+
+.announcement {
+  .content {
+    margin-bottom: 0px;
+  }
+
+
+  > p {
+    .gridPage #announcement .content p,
+    .announcement > h4,
+    .announcement > h3 {
+      color: #ffffff;
+    }
+  }
+}
+

config.toml

@@ -13,7 +13,7 @@ disableBrowserError = true
 
 disableKinds = ["taxonomy", "taxonomyTerm"]
 
-ignoreFiles = [ "^OWNERS$", "README[-]+[a-z]*\\.md", "^node_modules$", "content/en/docs/doc-contributor-tools" ]
+ignoreFiles = [ "(?:^|/)OWNERS$", "README[-]+[a-z]*\\.md", "^node_modules$", "content/en/docs/doc-contributor-tools" ]
 
 timeout = 3000
 
@@ -154,11 +154,6 @@ githubWebsiteRaw = "raw.githubusercontent.com/kubernetes/website"
 # GitHub repository link for editing a page and opening issues.
 github_repo = "https://github.com/kubernetes/website"
 
-# param for displaying an announcement block on every page.
-# See /i18n/en.toml for message text and title.
-announcement = true
-announcement_bg = "#000000" #choose a dark color – text is white
-
 #Searching
 k8s_search = true
 

data/announcements/OWNERS

@@ -0,0 +1,8 @@
+# See the OWNERS docs at https://go.k8s.io/owners
+
+# Disable inheritance as content in this dir is scoped to steering approval per
+# https://github.com/kubernetes/community/blob/master/communication/website-guidelines.md
+options:
+  no_parent_owners: true
+approvers:
+- committee-steering # defined in OWNERS_ALIASES

data/announcements/scheduled.yaml

@@ -0,0 +1,31 @@
+---
+# For an example of the format, see commented structure below.
+#
+# 🛈  Changes require approval from @kubernetes/steering-committee
+
+# The order matters: if two schedules overlaps, the announcement
+# that comes FIRST in the following list takes precedence.
+#
+#announcements:
+#  - startTime: 2020-01-01T00:00:00
+#    # startTime is optional
+#    endTime: 2021-04-01T00:00:00
+#    # endTime is required
+#    style: >-
+#      color: #fff; background: #000;
+#    # style is optional; if using, set both color and background
+#    # choose a dark color for the background
+#    title: "Sample 1 announcement"
+#    # title is optional
+#    message: |
+#      Message *one*.  
+#      [Hyperlink](https://en.wikipedia.org/wiki/Hyperlink).
+#    # message is required. You can use Markdown.
+#  - name: Sample 2
+#    startTime: 2020-01-01T00:00:00
+#    endTime: 2021-04-01T00:00:00
+#    message: |
+#      Message *two*.
+
+# leave the "announcements" key in place
+announcements:

i18n/en.toml

@@ -1,11 +1,5 @@
 # i18n strings for the English (main) site.
 # NOTE: Please keep the entries in alphabetical order when editing
-[announcement_title]
-other = "Black lives matter."
-
-[announcement_message]
-other = "We stand in solidarity with the Black community.<br/>Racism is unacceptable.<br/> It conflicts with the [core values of the Kubernetes project](https://git.k8s.io/community/values.md) and our community does not tolerate it."
-
 [caution]
 other = "Caution:"
 

layouts/partials/announcement.html

@@ -1,14 +1,34 @@
-{{ if .Page.Param "announcement" }}
+{{ $dateRegExp := "^[0-9]{4}-1[0-2]|0[1-9]-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:60|[0-5][0-9])$" }}
-<section lang="en" id="announcement" style="background-color:{{ .Page.Param "announcement_bg" }}">
+{{ $announcementShown := false }}
+{{ range $.Site.Data.announcements }}
+  {{ range .announcements }}
+  {{ if or ( eq .endTime nil ) ( eq .message nil ) }}
+    {{ errorf "Invalid announcement: %#v" . }}
+  {{ end }}
+  {{ if and (ne .startTime nil ) (lt ( len ( findRE $dateRegExp .startTime ) ) 1 ) }}
+    {{ errorf "Invalid announcement start time: %#v" .startTime }}
+  {{ end }}
+  {{ if lt ( len ( findRE $dateRegExp .endTime ) ) 1 }}
+    {{ errorf "Invalid announcement end time: %#v" .endTime }}
+  {{ end }}
+  {{ if or (eq .startTime nil ) (lt ( time .startTime ) now ) }}
+    {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
+      {{- if not $announcementShown -}}
+      {{- $announcementShown = true -}}
+  <section lang="en" id="announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
     <aside>
       <div class="content announcement main-section" data-nosnippet>
-
+        {{ if .title }}
         <h4 class="announcement">
-          {{ T "announcement_title" | markdownify }}
+            {{ .title | markdownify }}
         </h4>
-      <p class="announcement">{{ T "announcement_message" | markdownify }}</p>
+        {{ end }}
-
+        <p class="announcement">{{ .message | markdownify }}</p>
       </div>
     </aside>
-</section>
+  </section>
+      {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{ end }}
 {{ end }}

layouts/partials/css.html

@@ -15,10 +15,6 @@
 
 <link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
 
-{{- if .Site.Params.announcement }}
-<link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
-{{- end }}
-
 {{- if or (eq .Params.class "gridPage") (eq .Params.class "gridPage gridPageHome") }}
   <link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
 {{- end }}

layouts/partials/frontpage-announcement.html

@@ -1,14 +1,34 @@
-{{ if .Page.Param "announcement" }}
+{{ $dateRegExp := "^[0-9]{4}-1[0-2]|0[1-9]-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:60|[0-5][0-9])$" }}
-<section lang="en" id="fp-announcement" style="background-color:{{ .Page.Param "announcement_bg" }}">
+{{ $announcementShown := false }}
-  <aside >
+{{ range $.Site.Data.announcements }}
+  {{ range .announcements }}
+  {{ if or ( eq .endTime nil ) ( eq .message nil ) }}
+    {{ errorf "Invalid announcement: %#v" . }}
+  {{ end }}
+  {{ if and (ne .startTime nil ) (lt ( len ( findRE $dateRegExp .startTime ) ) 1 ) }}
+    {{ errorf "Invalid announcement start time: %#v" .startTime }}
+  {{ end }}
+  {{ if lt ( len ( findRE $dateRegExp .endTime ) ) 1 }}
+    {{ errorf "Invalid announcement end time: %#v" .endTime }}
+  {{ end }}
+  {{ if or (eq .startTime nil ) (lt ( time .startTime ) now ) }}
+    {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
+      {{- if not $announcementShown -}}
+      {{- $announcementShown = true -}}
+  <section lang="en" id="fp-announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
+    <aside>
       <div class="content announcement main-section" data-nosnippet>
-
+        {{ if .title }}
-      <h3>
+        <h4 class="announcement">
-          {{ T "announcement_title" |  markdownify }}
+            {{ .title | markdownify }}
-      </h3>
+        </h4>
-      <p>{{ T "announcement_message" | markdownify }}</p>
+        {{ end }}
-
+        <p class="announcement">{{ .message | markdownify }}</p>
       </div>
     </aside>
-</section>
+  </section>
+      {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{ end }}
 {{ end }}

static/css/announcement.css

@@ -1,49 +0,0 @@
-@media print {
-  /* Do not print announcements */
-  #announcement, section#announcement, #fp-announcement, section#fp-announcement {
-    display: none;
-  }
-}
-
-.announcement.content {
-  margin-bottom: 0px;
-}
-
-.announcement > p,
-.gridPage #announcement .content p,
-.announcement > h4,
-.announcement > h3 {
-  color: #ffffff;
-}
-
-#announcement a,
-#fp-announcement a {
-  color: #fff;
-  border-bottom: 1px solid #fff;
-}
-
-#announcement a:hover,
-#fp-announcement a:hover {
-  border-bottom: none;
-}
-
-#announcement {
-  padding-top: 105px;
-  padding-bottom: 25px;
-}
-
-.header-hero {
-  padding-top: 40px;
-}
-
-/* Extra announcement height only for landscape viewports */
-@media (min-aspect-ratio: 8/9) {
-  #fp-announcement {
-    min-height: 25vh;
-  }
-}
-
-#fp-announcement aside {
-  padding-top: 115px;
-  padding-bottom: 25px;
-}