DOC-7128 icons-1: render inline UI icons as Markdown images sized by CSS

AGENTS.md

@@ -66,6 +66,9 @@ around a literal, rewrite the sentence.
   `{width="..." class="..."}` line directly after an image that is its own paragraph.
   Paths are site-root (files live in `static/images/`). Never use a raw `<img>` with a
   relative `../` path: it breaks when the page is copied into a version snapshot.
+  A UI icon inside a sentence or table cell is an inline image with `#no-click` and no
+  attributes, `Select ![Delete](/images/rs/icons/delete-icon.png#no-click) **Delete**`;
+  CSS sizes it to the text. Screenshots are always their own paragraph.
 - **Preserve shortcodes, frontmatter, and code fences verbatim.** Do not reformat them.
 - **Frontmatter**: copy the shape from a sibling page in the same directory rather than
   composing one. `title` and `linkTitle` are effectively universal; `description`,

assets/css/index.css

@@ -1232,6 +1232,17 @@ a[href*="#no-click"], img[src*="#no-click"] {
   @apply border-none cursor-default pointer-events-none no-underline;
 }
 
+/* Icons in running text scale with it. render-image.html marks them img-inline, but an
+   image alone in a table cell reaches the hook as a block image, so cells match on #no-click. */
+img.img-inline, td img[src*="#no-click"] {
+  display: inline;
+  height: 1.5em;
+  width: auto;
+  vertical-align: middle;
+  /* Negative block margins stop a 1.5em icon from making its line taller. */
+  margin: -0.1em 0;
+}
+
 /* Version selector in side menu */
 .menu__version-selector {
   float: right;

build/migrate_image_shortcodes.py

@@ -22,8 +22,15 @@
 snapshots, which publish one directory deeper than the page they were copied
 from.
 
+With --inline-icons, converts `#no-click` icon shortcodes that are NOT their
+own paragraph (in a sentence, a table cell, or several to a line) to inline
+Markdown images, `![Alt](/images/x.png#no-click)`. Their width and class are
+dropped: render-image.html marks inline #no-click images img-inline, and CSS
+sizes them to the text. An image without #no-click is left alone, because inline sizing
+would shrink a screenshot to text height.
+
 Usage:
-  build/migrate_image_shortcodes.py [--dry-run] [--raw-img] <file>...
+  build/migrate_image_shortcodes.py [--dry-run] [--raw-img | --inline-icons] <file>...
 
 Prints one line per skipped shortcode and a summary. Idempotent.
 """
@@ -144,15 +151,81 @@ def skip(reason):
             open(path, "w", encoding="utf-8", newline="").write("\n".join(out))
 
 
+def convert_inline_icons(path, dry_run, skips, counts):
+    text = open(path, encoding="utf-8", newline="").read()
+    lines = text.split("\n")
+    changed = False
+    fence = None
+    for i, line in enumerate(lines):
+        fm = re.match(r'(?:[ \t>]*)(`{3,}|~{3,})', line)
+        if fm:
+            marker = fm.group(1)
+            if fence is None:
+                fence = marker[0]
+            elif marker[0] == fence:
+                fence = None
+            continue
+        if fence or "image" not in line:
+            continue
+        matches = list(SHORTCODE_RX.finditer(line))
+        if not matches:
+            continue
+        where = f"{os.path.relpath(path, REPO)}:{i + 1}"
+        prefix = PREFIX_RX.match(line).group(1)
+        alone = (len(matches) == 1 and not line[len(prefix):matches[0].start()].strip()
+                 and not line[matches[0].end():].strip())
+        if alone and (i == 0 or is_boundary(lines[i - 1])) and (
+                i == len(lines) - 1 or is_boundary(lines[i + 1])):
+            continue  # its own paragraph: a block image, for the default mode
+
+        def repl(m):
+            attrs = {k: q if q or not u else u for k, q, u in ATTR_RX.findall(m.group(1))}
+            leftover = ATTR_RX.sub("", m.group(1)).strip()
+            fname, alt = attrs.get("filename", ""), attrs.get("alt", "")
+            reason = None
+            if "#no-click" not in fname:
+                reason = "no #no-click (not an icon)"
+            elif leftover or set(attrs) - KNOWN_KEYS:
+                reason = "unparsed attributes"
+            elif UNSAFE_ALT_RX.search(alt):
+                reason = "alt text needs escaping"
+            elif UNSAFE_PATH_RX.search(fname):
+                reason = "path needs escaping"
+            rel = re.sub(r'^(?:\.{1,2}/|/)+', "", fname)
+            if not reason and not os.path.isfile(os.path.join(REPO, "static", rel.split("#")[0])):
+                reason = "file not in static/"
+            if reason:
+                skips.append(f"{where}: {reason}: {m.group(0)[:140]}")
+                counts["skipped:" + reason] += 1
+                return m.group(0)
+            counts["converted"] += 1
+            if "width" in attrs:
+                counts["width dropped (CSS sizes icons)"] += 1
+            return f"![{alt}](/{rel})"
+
+        new = SHORTCODE_RX.sub(repl, line)
+        if new != line:
+            lines[i] = new
+            changed = True
+    if changed:
+        counts["files changed"] += 1
+        if not dry_run:
+            open(path, "w", encoding="utf-8", newline="").write("\n".join(lines))
+
+
 def main(argv):
     dry_run = "--dry-run" in argv
     raw_img = "--raw-img" in argv
-    files = [a for a in argv if a not in ("--dry-run", "--raw-img")]
-    if not files:
+    inline_icons = "--inline-icons" in argv
+    files = [a for a in argv if a not in ("--dry-run", "--raw-img", "--inline-icons")]
+    if not files or (raw_img and inline_icons):
         sys.exit(__doc__)
     skips, counts = [], collections.Counter()
     for f in files:
-        convert_file(f, dry_run, skips, counts, raw_img)
+        if inline_icons:
+            convert_inline_icons(f, dry_run, skips, counts)
+        else:
+            convert_file(f, dry_run, skips, counts, raw_img)
     for s in skips:
         print("SKIP", s)
     for k, v in sorted(counts.items()):

content/embeds/create-db.md

@@ -4,6 +4,6 @@
 
     By default, the address is: `https://<RS_address>:8443`
 
-1. In **databases**, click {{< image filename="/images/rs/icon_add.png#no-click" alt="Add" >}}.
+1. In **databases**, click ![Add](/images/rs/icon_add.png#no-click).
 
     If you do not have any databases on the node, you are prompted to create a database.

content/embeds/tls-configuration-procedure.md

@@ -32,14 +32,14 @@ To enable TLS for Replica Of communication only on the source database:
         1. In the syncer certificates box, copy the full text of the certificate to the Clipboard.
 
     1. Select the **Add** button to open the certificate dialog.  
-    {{< image filename="/images/rs/icon_add.png#no-click" alt="Add button" >}} 
+    ![Add button](/images/rs/icon_add.png#no-click) 
 
         ![Database TLS Configuration](/images/rs/database-tls-replica-certs.png)
 
     1. Enter the copied certificate text into the text box below the **Enforce client authentication** checkbox.
 
     1. Use the **Save** button to save the certificates.  
-    {{< image filename="/images/rs/icon_save.png#no-click" alt="Save button" >}}
+    ![Save button](/images/rs/icon_save.png#no-click)
 
     You can also clear **Enforce client authentication** so that all clusters or
     clients can connect to your database without authentication.
@@ -76,13 +76,13 @@ To enable TLS for Replica Of and client communication on the source database:
         1. In the syncer certificates box, copy the full text of the certificate to the Clipboard.
 
     1. Use the **Add** button to open the certificate dialog.  
-    {{< image filename="/images/rs/icon_add.png#no-click" alt="Add button" >}}
+    ![Add button](/images/rs/icon_add.png#no-click)
 
         ![Database TLS Configuration](/images/rs/database-tls-replica-certs.png)
 
     1. Enter the copied certificate text into the text box below the **Enforce client authentication** checkbox.
     1. Use the **Save** button to save your changes.  
-    {{< image filename="/images/rs/icon_save.png#no-click" alt="Save button" >}} 
+    ![Save button](/images/rs/icon_save.png#no-click) 
 
     You can also clear the **Enforce client authentication** checkbox to allow 
     client connections without authentication.

content/operate/rc/api/get-started/manage-api-keys.md

@@ -34,7 +34,7 @@ The **API account key** is used as the value of the `x-api-key` HTTP header in o
 
 By default, the **API account key** is masked; that is, it is obscured for security reasons.  You can use the **Show** button to display the key and the **Hide** button to mask it.
 
-{{<image filename="images/rc/button-access-management-show-key.png#no-click" alt="The **Show** button displays the account key." class="inline" >}} &nbsp; {{<image filename="images/rc/button-access-management-hide-key.png#no-click" alt="The **Hide** button masks the account key." class="inline">}}
+![The **Show** button displays the account key.](/images/rc/button-access-management-show-key.png#no-click) &nbsp; ![The **Hide** button masks the account key.](/images/rc/button-access-management-hide-key.png#no-click)
 
 The **Copy** button copies the account key to the Clipboard.
 
@@ -125,4 +125,4 @@ To manage the CIDR allow list:
 
     Use the **Edit** button to change the address for a rule or the **Delete button** to remove a rule.
 
-    {{<image filename="images/rc/icon-edit.png#no-click" width="36px" alt="Use the **Edit** button to change the address for a CIDR allow list rule." class="inline">}} &nbsp; {{<image filename="images/rc/icon-delete-teal.png#no-click" width="36px" alt="Use the **Delete** button to remove an address from the CIDR allow list." class="inline" >}} 
+    ![Use the **Edit** button to change the address for a CIDR allow list rule.](/images/rc/icon-edit.png#no-click) &nbsp; ![Use the **Delete** button to remove an address from the CIDR allow list.](/images/rc/icon-delete-teal.png#no-click) 

content/operate/rc/changelog/april-2025.md

@@ -20,8 +20,9 @@ weight: 76
 
 The Redis Cloud console has a refreshed user interface! You can now choose between light mode and dark mode when using the Redis Cloud console.
 
-{{<image filename="images/rc/mode-select-light.png#no-click" alt="Mode selection toggle with light mode selected." class="inline" >}}&nbsp;
-{{<image filename="images/rc/mode-select-dark.png#no-click" alt="Mode selection toggle with dark mode selected." class="inline" >}}
+![Mode selection toggle with light mode selected.](/images/rc/mode-select-light.png#no-click)
+
+![Mode selection toggle with dark mode selected.](/images/rc/mode-select-dark.png#no-click)
 
 The new user interface and dark mode are currently available for selected accounts and will be gradually rolled out to new accounts over time.
 

content/operate/rc/databases/active-active/create-active-active-database.md

@@ -300,7 +300,7 @@ Use the **Add database** button to define additional databases or select the **C
 
 Hover over a database to see the **Edit** and **Delete** icons. You can use the **Edit** icon to change a database or the **Delete** icon to remove a database from the list.
 
-{{<image filename="images/rc/icon-edit.png#no-click" width="30px" alt="Use the Edit button to change database settings." class="inline" >}}&nbsp;{{<image filename="images/rc/icon-delete-lb.png#no-click" width="30px" alt="Use the Delete button to remove a database." class="inline">}}
+![Use the Edit button to change database settings.](/images/rc/icon-edit.png#no-click)&nbsp;![Use the Delete button to remove a database.](/images/rc/icon-delete-lb.png#no-click)
 
 
 ### Review and Create tab

content/operate/rc/databases/create-database/create-pro-database-new.md

@@ -195,7 +195,7 @@ Use the **Add database** button to define additional databases or select the **C
 
 Hover over a database to see the **Edit** and **Delete** icons. You can use the **Edit** icon to change a database or the **Delete** icon to remove a database from the list.
 
-{{<image filename="images/rc/icon-edit.png#no-click" width="30px" alt="Use the Edit button to change database settings." class="inline" >}}&nbsp;{{<image filename="images/rc/icon-delete-lb.png#no-click" width="30px" alt="Use the Delete button to remove a database." class="inline">}}
+![Use the Edit button to change database settings.](/images/rc/icon-edit.png#no-click)&nbsp;![Use the Delete button to remove a database.](/images/rc/icon-delete-lb.png#no-click)
 
 
 ### Review and Create tab

content/operate/rc/databases/tag-database.md

@@ -42,8 +42,8 @@ To get to the database list, select **Databases** from the main menu.
 
 Hover over the database and select **Manage tags**, or select **More actions** > **Manage tags** to open the [tag manager](#tag-manager).
 
-{{<image filename="images/rc/tags-icon-manage-tags.png#no-click" width=30px alt="Manage tags button." class="inline">}}
-{{<image filename="images/rc/tags-icon-more-actions.png#no-click" width=30px alt="More actions button." class="inline">}}
+![Manage tags button.](/images/rc/tags-icon-manage-tags.png#no-click)
+![More actions button.](/images/rc/tags-icon-more-actions.png#no-click)
 
 ### Use the tag manager {#tag-manager}
 

content/operate/rc/databases/view-edit-database.md

@@ -272,7 +272,7 @@ You can:
 
 - Sort the list in descending or ascending order using the arrow displayed to right of the field name in the header.  Supported fields include **Subscription**, **Database name**, **Memory usage**, and **Version**.
 
-    {{<image filename="images/rc/icon-list-sort-asc.png#no-click" alt="Use the arrows in the list header to sort the list." class="inline">}} {{<image filename="images/rc/icon-list-sort-desc.png#no-click" alt="The direction of the arrow corresponds to the direction of the sort." class="inline">}}
+    ![Use the arrows in the list header to sort the list.](/images/rc/icon-list-sort-asc.png#no-click) ![The direction of the arrow corresponds to the direction of the sort.](/images/rc/icon-list-sort-desc.png#no-click)
 
     Select the arrow icon to change the sort order.  One sort order can be active at any given time.
 

content/operate/rc/logs-reports/system-logs.md

@@ -18,7 +18,7 @@ You can:
 
 * Sort the list by a specific field in descending or ascending order. Supported fields include *Time*, *Originator*, *Database name*, *API key name*, and *Activity*.
 
-    {{<image filename="images/rc/icon-list-sort-asc.png#no-click" alt="Use the arrows in the list header to sort the list." class="inline">}}&nbsp;{{<image filename="images/rc/icon-list-sort-desc.png#no-click" alt="The direction of the arrow corresponds to the direction of the sort." class="inline">}}    
+    ![Use the arrows in the list header to sort the list.](/images/rc/icon-list-sort-asc.png#no-click)&nbsp;![The direction of the arrow corresponds to the direction of the sort.](/images/rc/icon-list-sort-desc.png#no-click)    
 
     Select the arrow icon to change the sort order.  You can only sort by one field at a time.
 

content/operate/rc/rc-quickstart.md

@@ -64,7 +64,7 @@ To create a new account with a free database:
 
 1.  In the upper corner, an icon shows the current status of the database.  If the icon shows an orange clock, this means your database is still being created and its status is _pending_.
 
-    {{< image filename="/images/rc/icon-database-update-status-pending.png#no-click" alt="Pending database status" class="inline" width="30px" >}} {{< image filename="/images/rc/icon-database-status-active.png#no-click" alt="Active database status" class="inline" width="30px">}}</nobr>
+    ![Pending database status](/images/rc/icon-database-update-status-pending.png#no-click) ![Active database status](/images/rc/icon-database-status-active.png#no-click)</nobr>
 
     Once the database has been created, it becomes _active_ and the status indicator switches to a green circle containing a checkmark.  
 

content/operate/rc/security/access-control/access-management.md

@@ -32,10 +32,10 @@ The list includes several buttons and icons to help you manage the list:
 
 | Icon | Description |
 |------|-------------|
-| {{<image filename="images/rc/icon-add.png#no-click" width="30px" alt="Use the Add button to add members to your team." class="inline" >}} | The **Add** button lets you add members to your team |
-| {{<image filename="images/rc/icon-edit.png#no-click" width="30px" alt="Use the Edit button change details for a team member." class="inline">}} | The **Edit** button lets you edit the settings for the selected team member |
-| {{<image filename="images/rc/icon-delete-teal.png#no-click" width="30px" alt="Use the Delete button to remove a member from your team." class="inline">}} | The **Delete** button lets you remove members from your team
-| <nobr>{{<image filename="images/rc/icon-list-sort-asc.png#no-click" width="10px" alt="The Sort ascending button displays members in ascending order according to the values of the selected field." class="inline">}}{{<image filename="images/rc/icon-list-sort-desc.png#no-click" width="10px" alt="The Sort descending button displays members in descending order according to the values of the selected field." class="inline">}}</nobr> | The **Sort ascending** and **Sort descending** icons display the list according to the selected order |
+| ![Use the Add button to add members to your team.](/images/rc/icon-add.png#no-click) | The **Add** button lets you add members to your team |
+| ![Use the Edit button change details for a team member.](/images/rc/icon-edit.png#no-click) | The **Edit** button lets you edit the settings for the selected team member |
+| ![Use the Delete button to remove a member from your team.](/images/rc/icon-delete-teal.png#no-click) | The **Delete** button lets you remove members from your team
+| <nobr>![The Sort ascending button displays members in ascending order according to the values of the selected field.](/images/rc/icon-list-sort-asc.png#no-click)![The Sort descending button displays members in descending order according to the values of the selected field.](/images/rc/icon-list-sort-desc.png#no-click)</nobr> | The **Sort ascending** and **Sort descending** icons display the list according to the selected order |
 
 You can also use the list search to find a specific user or filter by **Role**, **User Type**, or **Options**.
 

content/operate/rc/security/access-control/saml-sso/_index.md

@@ -105,7 +105,7 @@ Before you set up SAML SSO in Redis Cloud, you must verify that you own the doma
     ![Add domain button](/images/rc/saml-button-add-domain.png)
     {width="120px"}
 
-1. Enter the domain name and select {{<image filename="images/rc/saml-button-confirm.png#no-click" width="20px" alt="Confirm domain" class="inline">}} to save it, or select {{<image filename="images/rc/saml-button-cancel.png#no-click" width="20px" alt="Cancel" class="inline">}} to cancel.
+1. Enter the domain name and select ![Confirm domain](/images/rc/saml-button-confirm.png#no-click) to save it, or select ![Cancel](/images/rc/saml-button-cancel.png#no-click) to cancel.
 
     ![Enter domain name in the Domain field.](/images/rc/saml-enter-domain.png)
     {width="80%"}
@@ -117,7 +117,7 @@ Before you set up SAML SSO in Redis Cloud, you must verify that you own the doma
 
     We'll check the domain's DNS records for the provided TXT record. If the TXT record does not exist or we can't resolve your domain, we won't be able to verify the domain and users with that domain won't be able to sign in using SAML SSO. 
 
-    Select {{<image filename="images/rc/icon-delete-teal.png#no-click" width="25px" alt="delete domain" class="inline">}} to delete a domain if it was added by mistake.
+    Select ![delete domain](/images/rc/icon-delete-teal.png#no-click) to delete a domain if it was added by mistake.
 
     If we find the TXT record, the domain's status will change to **Verified**.
 

content/operate/rc/subscriptions/bring-your-own-cloud/subscription-whitelist.md

@@ -64,7 +64,7 @@ To add IP addresses or [AWS security groups](https://docs.aws.amazon.com/managed
 
     You can also select the **Edit** button to change an entry or the **Delete** button to remove it.
 
-    {{<image filename="images/rc/icon-edit.png#no-click" alt="The Edit button updates an entry in the allow list." width="36px" class="inline" >}}&nbsp;{{<image filename="images/rc/icon-delete-lb.png#no-click" alt="The Delete button removes an entry from the allow list." width="36px" class="inline" >}}
+    ![The Edit button updates an entry in the allow list.](/images/rc/icon-edit.png#no-click)&nbsp;![The Delete button removes an entry from the allow list.](/images/rc/icon-delete-lb.png#no-click)
 
 1. Select **Apply all changes** to apply the allow list updates.