Improve feature profile summary table styling

The 'Feature Profiles' section of the 'Client-Server API' specification
contains a table, showing whether a module is required or optional for
every profile. Previously the table was hard to read since "Required"
looks visually very similar to "Optional".

This commit improves the readability of the table by automatically
applying a darker background color to table cells containing "Required"
via a new Hugo shortcode.

assets/scss/custom.scss

@@ -512,3 +512,24 @@ dd {
     border-radius: 0.25rem;  // was $border-radius, but that var isn't accessible here.
   }
 }
+
+/* Styling for the summary-table shortcode */
+.summary-table {
+  tr {
+    // Unset the .table-striped styling that docsy applies by default.
+    background-color: unset !important;
+  }
+  .required {
+    background-color: rgba($black, 0.07);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+  td {
+    position: relative;
+    padding: .3rem 0.75rem !important;
+  }
+}

config.toml

@@ -28,6 +28,8 @@ weight = 1
     [markup.goldmark.renderer]
       # Enables us to render raw HTML
       unsafe = true
+    [markup.goldmark.parser.attribute]
+      block = true  # used by the summary-table shortcode
   [markup.highlight]
       # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
       # If the style is changed, remember to regenerate the CSS with:

content/client-server-api/_index.md

@@ -2565,6 +2565,7 @@ that profile.
 
 #### Summary
 
+{{<summary-table>}}
 | Module / Profile                                           | Web       | Mobile   | Desktop  | CLI      | Embedded |
 |------------------------------------------------------------|-----------|----------|----------|----------|----------|
 | [Instant Messaging](#instant-messaging)                    | Required  | Required | Required | Required | Optional |
@@ -2603,6 +2604,7 @@ that profile.
 | [Event Annotations and reactions](#event-annotations-and-reactions) | Optional  | Optional | Optional | Optional | Optional |
 | [Threading](#threading)                                    | Optional  | Optional | Optional | Optional | Optional |
 | [Reference Relations](#reference-relations)                | Optional  | Optional | Optional | Optional | Optional |
+{{</summary-table>}}
 
 *Please see each module for more details on what clients need to
 implement.*

layouts/shortcodes/summary-table.html

@@ -0,0 +1,6 @@
+{{/*
+
+  This template is used to visually emphasize table cells containing the text "Required".
+
+*/}}
+{{ print (replace .Inner "Required" "<span class=required></span>Required") "{.summary-table}" | markdownify }}