Add pwa banner and instructions (GoogleChrome#5719)

src/site/_data/site.js

@@ -32,8 +32,9 @@ module.exports = {
   subscribeForm:
     'https://services.google.com/fb/submissions/591768a1-61a6-4f16-8e3c-adf1661539da/',
   thumbnail: 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vU99HKzIf5EUPnzGVPf1.png',
-  isBannerEnabled: false,
-  banner: '',
+  isBannerEnabled: true,
+  banner:
+    'PWA Summit: a conference to help everyone succeed with PWAs is happening Oct 6 & 7. [Submit your talk now](https://pwasummit.org).',
   areCoursesEnabled: true,
   paginationCount: PAGINATION_COUNT,
   imgixDomain: 'web-dev.imgix.net',

src/site/content/en/handbook/banners/index.md

@@ -0,0 +1,34 @@
+---
+layout: handbook
+title: Banners
+date: 2021-06-28
+description: |
+  Learn how to add banners to the site.
+---
+
+This guide explains how to add a banner to the site.
+
+## Add a site-wide banner
+
+In `src/site/_date/site.js`, look for these two lines:
+
+```js
+isBannerEnabled: …,
+banner: …
+```
+
+Set `isBannerEnabled` to `true`.
+Add a markdown string for your `banner` message.
+
+Example:
+
+```js
+isBannerEnabled: true,
+banner:
+  'PWA Summit: a conference to help everyone succeed with PWAs is happening Oct 6 & 7. [Submit your talk now](https://pwasummit.org).',
+```
+
+## Exclude a banner from a page
+
+If you set `show_banner: false` in a page's YAML frontmatter, then it will
+not display a site banner.