Announcements

Renders dismissible announcement banners in a one-line strip above the site header. Supports multiple announcements, three display modes, date scheduling, page targeting, and i18n message resolution. Disabled by default.

Enable the plugin

sarde.yaml

plugins:
  enabled:
    - search
    - seo
    - sitemap
    # ... other default plugins
    - announcements

Define announcements

Each announcement is an entry in the items list under the plugin config.

sarde.yaml

plugins:
  config:
    announcements:
      items:
        - id: maintenance
          message: "The documentation is being updated. Some pages may be incomplete."
          type: warning
          active: true
          dismissible: true

→ A yellow warning banner appears above the site header on every page, with a dismiss button.

Item options

When every item is inactive or dismissed, the plugin renders no banner container.

Banner types

All four types support light and dark mode with distinct color palettes. Banners are hidden in print output.

Placement

Banners appear in a full-width strip above the site header and stay with the header as the page scrolls, until the reader dismisses them. The strip is one line high, so keep messages short: text wider than the screen is cut off with an ellipsis. On narrow screens such as phones, the text wraps onto a second line in a slightly smaller size, and is cut off after that. Its height is the banner-height theme token, 3rem by default. While a banner shows, the sidebar, table of contents, and anchor links move down by that height.

The strip shows one banner at a time, so stack mode behaves like first.

Banners that the reader has dismissed, that are outside their date window, or that target other pages are hidden before the page is drawn, so they never flash on load.

Display modes

The display_mode option controls how multiple active announcements appear.

sarde.yaml

plugins:
  config:
    announcements:
      display_mode: stack

Rotate mode options

plugins:
  config:
    announcements:
      display_mode: rotate
      rotate_interval: 4000
      show_rotate_indicator: true
      items:
        - id: update-v2
          message: "Version 2.0 is now available."
          type: success
        - id: workshop
          message: "Register for the live workshop on Friday."
          type: info

→ Two banners rotate every 4 seconds, with dot navigation along the bottom of the strip.

Rotation pauses while a banner is hovered or focused, and when the reader has prefers-reduced-motion enabled. The dot indicators accept arrow keys, Home, and End.

Date scheduling

Limit an announcement to a time window using start_date and end_date. Both are optional and use ISO 8601 format. Date checks happen client-side on each page load.

- id: holiday
  message: "No office hours December 23 through January 2."
  type: info
  start_date: "2025-12-20"
  end_date: "2026-01-03"

Page targeting

Restrict where an announcement appears using glob patterns. The show_on list defines which pages display the banner (default: all pages). The hide_on list overrides show_on to suppress specific paths.

- id: docs-notice
  message: "This section is under revision."
  type: warning
  show_on:
    - /docs/**
  hide_on:
    - /docs/changelog

→ The banner appears on all pages under /docs/ except /docs/changelog.

Patterns use * for single-segment matching and ** for multi-segment matching, matched against the page's URL pathname.

Internationalization

Set the message field to an i18n key instead of a literal string. Sarde resolves it against the active language's string table at render time.

i18n/en.yaml

announcements:
  maint: "Scheduled maintenance on Saturday."
  dismiss: "Dismiss"

i18n/fr.yaml

announcements:
  maint: "Maintenance prévue samedi."
  dismiss: "Fermer"

sarde.yaml

plugins:
  config:
    announcements:
      items:
        - id: maint
          message: announcements.maint

The dismiss button label also uses announcements.dismiss from the string table. If no string table is available, the raw key is displayed as-is.

Template function

The plugin registers an announcementBanner template function. The default theme calls it in each base layout, inside a masthead wrapper together with the Header component:

<div class="sarde-masthead">
  {{ announcementBanner }}
  {{ component "Header" . }}
</div>

If you eject a base layout, keep this wrapper so the sidebar, table of contents, and anchor links stay below the banner. Called anywhere else, banners render where the call is, at their natural height, and stack mode shows them all.