Add back support for showing announcement banner (#11712)

Fixes #11710

src/_data/site.yml

@@ -8,7 +8,7 @@ google_site_verification: HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4
 google_tag_manager_id: GTM-ND4LWWZ
 default_share_image: /assets/images/flutter-logo-sharing.png
 
-show_banner: true
+showBanner: false
 
 github_username: flutter
 branch: main

src/_includes/banner.html

@@ -1,9 +1,2 @@
-{% comment %}
-  For headings use h3 elements.
-{% endcomment -%}
-<div class="site-banner site-banner--default" role="alert">
-  Celebrating Flutter's production era!
-  <a href="https://medium.com/flutter/flutter-in-production-f9418261d8e1">Learn more</a><br>
-  Also, check out <a href="https://docs.flutter.dev/release/whats-new#11-december-2024-3-27-release">What's new on the website</a>. 
-</div>
-
+Celebrating Flutter's production era!
+<a href="https://medium.com/flutter/flutter-in-production-f9418261d8e1">Learn more</a><br>

src/_includes/header.html

@@ -1,7 +1,7 @@
 {% assign route = page.url|regex_replace:'/index$|/index\.html$|\.html$|/$' %}
 
 <header class="site-header">
-  <a href="#document-title" id="skip-to-main" class="filled-button">
+  <a href="#document-title" id="skip-to-main" class="filled-button" tabindex="1">
     Skip to main content
   </a>
   <nav class="navbar">

src/_layouts/base.html

@@ -84,6 +84,12 @@
       </noscript>
     {% endif -%}
 
+    {%- if site.showBanner and showBanner != false -%}
+    <div id="site-banner" role="alert">
+      <p>{% render banner.html %}</p>
+    </div>
+    {% endif -%}
+
     {% include header.html %}
 
     <div id="site-below-header">

src/_sass/base/_variables.scss

@@ -24,7 +24,6 @@ $site-color-body-light: color.scale($site-color-body, $lightness: 20%);
 $site-color-body-caption: color.scale($site-color-body, $lightness: 30%);
 $site-color-footer: #303c42;
 $site-color-primary: $flutter-color-blue-500;
-$twitter-color: #60CAF6;
 $site-color-panel-background: color.scale($site-color-primary, $lightness: 95%);
 
 // Fonts

src/_sass/components/_banner.scss

@@ -0,0 +1,43 @@
+@use 'sass:color';
+
+@use '../base/variables' as *;
+
+#site-banner {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  font-family: $site-font-family-ui;
+  font-weight: 500;
+  font-size: 1rem;
+
+  gap: 0.5rem;
+  padding: 0.75rem;
+  text-align: center;
+  background: linear-gradient(139deg, $site-color-primary, #833ef2);
+  color: $site-color-white;
+
+  p {
+    overflow-wrap: anywhere;
+    word-break: normal;
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  a, button {
+    color: $flutter-color-blue-on-dark;
+    font-family: $site-font-family-ui;
+
+    &:hover {
+      color: color.mix($site-color-white, $flutter-color-blue-on-dark, 25%);
+    }
+
+    &:active {
+      color: color.mix($site-color-white, $flutter-color-blue-on-dark, 50%);
+    }
+  }
+
+  *:focus-visible {
+    outline: 2px solid $flutter-color-blue-on-dark;
+  }
+}

src/_sass/site.scss

@@ -8,6 +8,7 @@
 
 // Styles for individual components or content types, alphabetically ordered.
 @use 'components/alert';
+@use 'components/banner';
 @use 'components/books';
 @use 'components/button';
 @use 'components/card';

src/content/404.html

@@ -8,7 +8,7 @@
 sitemap: false
 toc: false
 show_breadcrumbs: false
-show_banner: false
+showBanner: false
 ---
 
 <img src='/assets/images/404/dash_404.png' alt="Dash pointing you in the right direction">

src/content/assets/js/main.js

@@ -302,7 +302,7 @@ function setupSiteSwitcher() {
   });
 }
 
-document.addEventListener("DOMContentLoaded", function(_) {
+function setupSite() {
   scrollSidenavIntoView();
   initCookieNotice();
 
@@ -315,4 +315,10 @@ document.addEventListener("DOMContentLoaded", function(_) {
 
   adjustToc();
   setupInlineToc();
-});
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', setupSite);
+} else {
+  setupSite();
+}

src/content/search-all.html

@@ -3,7 +3,7 @@
 description: Search docs.flutter.dev, api.flutter.dev, dart.dev, and more.
 toc: false
 show_breadcrumbs: false
-show_banner: false
+showBanner: false
 ---
 
 <p>

src/content/search.html

@@ -4,7 +4,7 @@
 description: The search page for docs.flutter.dev.
 toc: false
 show_breadcrumbs: false
-show_banner: false
+showBanner: false
 ---
 
 Want results from additional Flutter-related sites, like api.flutter.dev and dart.dev?