feat(banner): add top banner (#777)

* feat: add top banner

* chore: use inside the example site

* chore: generate

* fix: banner with the burger navbar

* fix: compute the banner height to allow mutliple lines

* chore: better p style

exampleSite/content/docs/guide/configuration.md

@@ -423,3 +423,22 @@ params:
     - "/img/config-image.jpg"
   audio: "config-talk.mp3"
 ```
+
+### Banner
+
+To add a banner to your site, add the following to your `hugo.yaml`:
+
+```yaml
+params:
+  banner:
+    key: 'announcement-xxx'
+    message: |
+      🎉 Welcome! [Hextra](https://github.com/hextra/hextra) is a static site generator that helps you build modern websites.
+```
+
+The banner will be displayed on all pages.
+
+The field `message` supports Markdown syntax.
+
+If you want to use template syntax, you can define the partial in `layouts/_partials/custom/banner.html`.
+In this case, the field `message` will be ignored.

exampleSite/hugo.yaml

@@ -121,6 +121,9 @@ menu:
 params:
   description: Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.
 
+  banner:
+    key: 'announcement-v0_10'
+
   navbar:
     displayTitle: true
     displayLogo: true

exampleSite/hugo_stats.json

@@ -97,6 +97,8 @@
       "footnotes",
       "frac-line",
       "hextra-badge",
+      "hextra-banner",
+      "hextra-banner-close-button",
       "hextra-card",
       "hextra-card-icon",
       "hextra-card-image",
@@ -184,6 +186,7 @@
       "hx:bg-green-100",
       "hx:bg-indigo-100",
       "hx:bg-neutral-50",
+      "hx:bg-neutral-900",
       "hx:bg-orange-50",
       "hx:bg-primary-100",
       "hx:bg-primary-400",
@@ -321,6 +324,7 @@
       "hx:dark:text-purple-200",
       "hx:dark:text-red-200",
       "hx:dark:text-slate-100",
+      "hx:dark:text-white",
       "hx:dark:text-yellow-200",
       "hx:dark:to-gray-400",
       "hx:data-[state=closed]:hidden",
@@ -373,6 +377,7 @@
       "hx:group/copybtn",
       "hx:grow",
       "hx:h-0",
+      "hx:h-10",
       "hx:h-16",
       "hx:h-2",
       "hx:h-3.5",
@@ -457,6 +462,7 @@
       "hx:max-md:[transform:translate3d(0,-100%,0)]",
       "hx:max-md:hidden",
       "hx:max-md:min-h-[340px]",
+      "hx:max-md:sticky",
       "hx:max-sm:grid-cols-1",
       "hx:max-w-6xl",
       "hx:max-w-[50%]",
@@ -478,6 +484,7 @@
       "hx:md:inline-block",
       "hx:md:justify-start",
       "hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "hx:md:mr-0",
       "hx:md:pt-12",
       "hx:md:px-12",
       "hx:md:self-start",
@@ -542,6 +549,7 @@
       "hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]",
       "hx:pr-[max(env(safe-area-inset-left),1.5rem)]",
       "hx:pr-[max(env(safe-area-inset-right),1.5rem)]",
+      "hx:print:[display:none]",
       "hx:print:bg-transparent",
       "hx:print:hidden",
       "hx:pt-4",
@@ -640,6 +648,7 @@
       "hx:text-primary-800",
       "hx:text-purple-900",
       "hx:text-red-900",
+      "hx:text-slate-50",
       "hx:text-slate-900",
       "hx:text-sm",
       "hx:text-transparent",
@@ -662,6 +671,7 @@
       "hx:transition-transform",
       "hx:underline",
       "hx:underline-offset-2",
+      "hx:w-10",
       "hx:w-2",
       "hx:w-3.5",
       "hx:w-4",

exampleSite/layouts/_partials/custom/banner.html

@@ -0,0 +1,3 @@
+<div>
+  <span>Hextra v0.10 is out 🎉 What <a href="{{ relref . `blog/v0.10` -}}">new</a>?</span>
+</div>