Add banners and levels example

frontend/_aqw_listing.ejs

@@ -24,6 +24,15 @@
                             <%= item.title %>
                         </a>
                     <% } %>
+                     <% if (item.level.includes('yellow')) { %>
+                        <img src="assets/icon_warning_yellow.svg" alt="Yellow Warning Icon" width="16" height="16"/>
+                     <% } %>
+                     <% if (item.level.includes('orange')) { %>
+                        <img src="assets/icon_warning_orange.svg" alt="Orange Warning Icon" width="16" height="16"/>
+                     <% } %>
+                     <% if (item.level.includes('red')) { %>
+                        <img src="assets/icon_warning_red.svg" alt="Red Warning Icon" width="16" height="16"/>
+                     <% } %>
                 </td>
                 <td><%= item.mandatoryAction %></td>
                 <td><%= item.status %></td>

frontend/_extensions/bcds/_extension.yaml

@@ -76,7 +76,7 @@ contributes:
             href: https://www2.gov.bc.ca/gov/content/environment/air-land-water/air/air-quality
             contents:
               - text: Air Quality Warnings
-                href: index.qmd                
+                href: index.qmd
           - text: Air Quality Subscription Service
             href: https://www2.gov.bc.ca/gov/content?id=2F89F266A1BE40EC8926C45A05E28BCD
           - text: "Air Quality Health Index"
@@ -115,5 +115,6 @@ contributes:
         - bcds-inline-alert.scss
         - bcds-cards.scss
         - bcds-accordion.scss
+        - air-quality-alerts.scss
       template-partials:
-        - partials/title-block.html
+        - partials/title-block.html

frontend/_extensions/bcds/air-quality-alerts.scss

@@ -0,0 +1,69 @@
+/*-- scss:rules --*/
+
+@import "variables.scss";
+
+.Banner-Alert {
+  box-shadow: none;
+  border-radius: $layout-border-radius-medium;
+
+
+  &.yellow {
+    background-color: #ffff00;
+    .title, .description, .Banner-Alert--icon {
+      color: $typography-color-primary;
+    }
+    color: $typography-color-primary;
+  }
+
+  &.orange {
+    background-color: #ff9500;
+    .title, .description, .Banner-Alert--icon {
+      color: $typography-color-primary;
+    }
+    color: $typography-color-primary;
+
+  }
+
+  &.red {
+    background-color: #d10000;
+    .title, .description, .Banner-Alert--icon {
+      color: $typography-color-primary-invert;
+    }
+    color: $typography-color-primary-invert;
+  }
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  gap: $layout-margin-small;
+  padding: $layout-padding-medium $layout-padding-large;
+  margin: $layout-margin-medium $layout-margin-none;
+}
+
+.Banner-Alert--container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  .title {
+    font: $typography-bold-body;
+  }
+
+  .description {
+    font: $typography-regular-body;
+  }
+}
+
+.Banner-Alert--icon {
+  display: inline-flex;
+  align-self: flex-start;
+  padding-top: $layout-padding-xsmall;
+
+  svg {
+
+    min-width: $icons-size-medium;
+    height: $icons-size-medium;
+
+  }
+}

frontend/_extensions/bcds/bcds.lua

@@ -211,5 +211,55 @@ return {
     else
       return pandoc.Null()
     end
-  end,
+    end,
+
+  ["banner_alert_start"] = function(args, kwargs, meta)
+      local title = pandoc.utils.stringify(kwargs["title"])
+      local variant = pandoc.utils.stringify(kwargs["variant"])
+
+
+      if (variant == "") then
+        variant = "yellow"
+      end
+
+      local icon_variant_map = {
+        ['yellow'] = 'exclamation-circle-fill',
+        ['orange'] = 'exclamation-diamond-fill',
+        ['red'] = 'exclamation-triangle-fill'
+      }
+
+      local selected_icon = nil
+
+
+      if quarto.doc.is_format("html:js") then
+        local markup = "<div class='Banner-Alert " .. variant .. "'>"
+        if (variant ~= nil) then
+          selected_icon = icon_variant_map[variant]
+          if selected_icon ~= nil then
+            markup = markup .. '<i class="Banner-Alert--icon bi bi-' .. selected_icon .. ' ' .. variant .. '"></i>'
+          end
+        end
+
+        markup = markup .. "<div class='Banner-Alert--container'>"
+
+        if (title ~= nil) then
+          markup = markup .. "<span class='title'>"
+          markup = markup .. title
+          markup = markup .. "</span>"
+        end
+
+        return pandoc.RawInline("html", markup)
+      else
+        return pandoc.Null()
+      end
+    end,
+
+    ["banner_alert_end"] = function(args, kwargs, meta)
+      if quarto.doc.is_format("html:js") then
+        local markup = "</div></div>"
+        return pandoc.RawInline("html", markup)
+      else
+        return pandoc.Null()
+      end
+    end
 }

frontend/construct_lists.py

@@ -20,6 +20,7 @@
 date: REQUIRED ISO8601 date
 ice: REQUIRED string - "Issue" or "Continue" or "End"
 location: REQUIRED string
+level: OPTIONAL string "yellow", "orange", or "red", or /-separated combination of these levels
 type: REQUIRED - "redirect" or "wildfire_smoke" or "local_emissions"
 path: OPTIONAL - the URL for the redirect link. Only used if type is "redirect"
 title: OPTIONAL string
@@ -125,6 +126,7 @@ def extract_header_from_file(file_path: str) -> Optional[Dict[str, Any]]:
             'title': parsed_header.get('title', 'No Title'),
             'type': parsed_header.get('type', 'N/A'),
             'ice': parsed_header.get('ice', 'N/A'),
+            'level': parsed_header.get('level', 'N/A'),
             'date': parsed_header.get('date'),
             'location': parsed_header.get('location'),
             'pollutant': parsed_header.get('pollutant', 'N/A'),
@@ -292,6 +294,9 @@ def process_warning_entries(warnings: List[Dict[str, Any]]) -> List[Dict[str, An
         processed_warning['type'] = warning['type']
         processed_warning['path'] = warning['path']
         processed_warning['location'] = warning['location']
+        processed_warning['level'] = (
+            warning['level'] if 'level' in warning else 'N/A'
+        )  # yellow, orange, red, a combination, or N/A
         processed_warning['status'] = warning['ice']  # ICE - Issue, Continue, End.
         processed_warning['date'] = warning['date']