From 608818a06c60db1fb9fc2ae6ef54e3144996c2a2 Mon Sep 17 00:00:00 2001 From: Martin Fischer Date: Thu, 13 Jul 2023 12:22:26 +0200 Subject: [PATCH] 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. Signed-off-by: Martin Fischer --- assets/scss/custom.scss | 21 +++++++++++++++++++++ config.toml | 2 ++ content/client-server-api/_index.md | 2 ++ layouts/shortcodes/summary-table.html | 6 ++++++ 4 files changed, 31 insertions(+) create mode 100644 layouts/shortcodes/summary-table.html diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 047e57d7..8867fc8e 100644 --- a/assets/scss/custom.scss +++ b/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; + } +} diff --git a/config.toml b/config.toml index c6f1bd45..49b62398 100644 --- a/config.toml +++ b/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: diff --git a/content/client-server-api/_index.md b/content/client-server-api/_index.md index 0e7e8473..72a94c4f 100644 --- a/content/client-server-api/_index.md +++ b/content/client-server-api/_index.md @@ -2565,6 +2565,7 @@ that profile. #### Summary +{{}} | 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 | +{{}} *Please see each module for more details on what clients need to implement.* diff --git a/layouts/shortcodes/summary-table.html b/layouts/shortcodes/summary-table.html new file mode 100644 index 00000000..db56d4f1 --- /dev/null +++ b/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" "Required") "{.summary-table}" | markdownify }}