Version images with the docs

[Why]
Currently, images are all in a global directory, `static/img`.

Docusaurus allows to colocate images (and files in general) with the doc
that uses them. This allows to version them alongside the doc itself.
Thus, if we need to update an image for a new version of RabbitMQ, we
can do that without affecting older versions.

[How]
To have other files "attached" to a document, it has to be a directory.
The document is named `index.md` inside this directory. For example:

    docs/feature-flags/index.md

The URL remains the same; `/docs/feature-flags` in this example.

Then images are moves to that directory:

    docs/feature-flags/index.md
    docs/feature-flags/image.svg

Finally, images are referenced relatively to `index.md`:

    ![](./image.svg)

All unused images were deleted in the process.

Author: dumbbell

docs/channels.md renamed to docs/channels/index.md

@@ -302,18 +302,24 @@ Channel leaks eventually exhaust the node (or multiple target nodes) of RAM and
 Management UI's Overview tab lists a total number of channels in all virtual hosts the current
 user has access to:
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-global-channel-count.png" alt="Global channel count in management UI" title="Global channel count in management UI" />
+<figure>
+![mgmt-ui-global-channel-count.png](./mgmt-ui-global-channel-count.png)
+</figure>
 
 To inspect the current number of channels on a connection as well as the per-connection channel limit, navigate
 to the Connections tab and enable the relevant columns if they are not displayed:
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-per-connection-channel-max-and-count.png" alt="Per connection channel count in management UI" title="Per connection channel count in management UI" />
+<figure>
+![Per connection channel count in management UI](./mgmt-ui-per-connection-channel-max-and-count.png)
+</figure>
 
 Overview and individual node pages provide a chart of channel churn rate as of [RabbitMQ 3.7.9](/release-information).
 If the rate of channel open operations is consistently higher than that of channel close operations,
 this is evidence of a channel leak in one of the applications:
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-channel-count-growth.png" alt="Channel count growth in management UI" title="Channel count growth in management UI" />
+<figure>
+![Channel count growth in management UI](./mgmt-ui-channel-count-growth.png)
+</figure>
 
 To find out what connection leaks channels, inspect per-connection channel count as demonstrated in this guide.
 
@@ -331,12 +337,16 @@ long lived channels should be used instead when possible.
 Below is a chart that demonstrates a fairly low channel churn with a virtually identical number of channel open and closed
 in the given period of time:
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-node-channel-churn.png" alt="Node channel churn in management UI" title="Node channel churn in management UI" />
+<figure>
+![Node channel churn in management UI](./mgmt-ui-node-channel-churn.png)
+</figure>
 
 While connection and disconnection rates are system-specific, rates consistently above 100/second likely indicate a suboptimal
 connection management by one or more applications and usually are worth investigating.
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-high-channel-churn.png" alt="High channel churn in management UI" title="High channel churn in management UI" />
+<figure>
+![High channel churn in management UI](./mgmt-ui-high-channel-churn.png)
+</figure>
 
 Note that some clients and runtimes (notably PHP) do not use long-lived connections and high connection
 churn rates are expected from them unless a [specialized proxy is used](https://github.com/cloudamqp/amqproxy).
@@ -346,7 +356,9 @@ churn rates are expected from them unless a [specialized proxy is used](https://
 To inspect channels in the management UI, navigate to the Channels tab and add or remove columns
 as needed:
 
-<img class="screenshot" src="/img/monitoring/channels/mgmt-ui-channel-list.png" alt="High channel churn in management UI" title="High channel churn in management UI" />
+<figure>
+![High channel churn in management UI](./mgmt-ui-channel-list.png)
+</figure>
 
 ### Inspecting Channels and Their State Using CLI Tools {#inspect-using-cli-tools}
 

static/img/monitoring/channels/mgmt-ui-channel-count-growth.png renamed to docs/channels/mgmt-ui-channel-count-growth.png

@@ -208,19 +208,25 @@ connections also increases node's memory consumption.
 
 [Management UI](./management) provides a chart of the total number of connections opened cluster-wide:
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-global-connection-count.png" alt="Global connection count in management UI" title="Global connection count in management UI" />
+<figure>
+![Global connection count in management UI](./mgmt-ui-global-connection-count.png)
+</figure>
 
 A connection leak on monitoring charts can be identified as a monotonically growing number of client connections.
 
 It is also possible to see how many file handles and sockets does a specific node have, which can be useful
 in determining connection leaks as well. The following chart demonstrates a very stable number of sockets
 open on a node:
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-node-socket-count.png" alt="Node file handle and socket count in management UI" title="Node file handle and socket count in management UI" />
+<figure>
+![Node file handle and socket count in management UI](./mgmt-ui-node-socket-count.png)
+</figure>
 
 This chart demonstrates a monotonically growing number of connections after a drop:
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-node-socket-count-growth.png" alt="Node file handle and socket count growth in management UI" title="Node file handle and socket count growth in management UI" />
+<figure>
+![Node file handle and socket count growth in management UI](./mgmt-ui-node-socket-count-growth.png)
+</figure>
 
 If the number of sockets used by a node keeps growing and growing, it is likely an indication
 of a connection leak in one of the applications.
@@ -235,8 +241,9 @@ grows on application start and then moderates (stays mostly stable with little f
 [Management UI](./management) provides a chart on the rate of newly opened connections as of [RabbitMQ 3.7.9](/release-information).
 Below is a chart that demonstrates a fairly low new connection rate:
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-node-connection-churn.png" alt="Node connection churn in management UI" title="Node connection churn in management UI" />
-
+<figure>
+![Node connection churn in management UI](./mgmt-ui-node-connection-churn.png)
+</figure>
 
 ### High Connection Churn {#high-connection-churn}
 
@@ -249,12 +256,16 @@ RabbitMQ collects metrics on connection churn and exposes them via [Prometheus a
 Below is a chart that demonstrates a fairly low connection churn with a comparable number of connections open and closed
 in the given period of time:
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-node-connection-churn.png" alt="Node connection churn in management UI" title="Node connection churn in management UI" />
+<figure>
+![Node connection churn in management UI](./mgmt-ui-node-connection-churn.png)
+</figure>
 
 While connection and disconnection rates are system-specific, rates consistently above 100/second likely indicate a suboptimal
 connection management approach by one or more applications and usually are worth investigating.
 
-<img class="screenshot" src="/img/monitoring/connections/mgmt-ui-high-connection-churn.png" alt="High connection churn in management UI" title="High connection churn in management UI" />
+<figure>
+![High connection churn in management UI](./mgmt-ui-high-connection-churn.png)
+</figure>
 
 Some clients and runtimes (notably PHP) do not use long-lived connections and high connection
 churn rates are expected from them. A [specialized proxy](https://github.com/cloudamqp/amqproxy) should be

static/img/monitoring/channels/mgmt-ui-channel-list.png renamed to docs/channels/mgmt-ui-channel-list.png

@@ -94,9 +94,10 @@ It is also possible to list and enable feature flags from the
 
 #### Example 1: Compatible Nodes
 
-<div style={{textAlign: 'center',}}>
-<img src="/img/feature-flags/compatible-nodes.svg" style={{width: '100%', maxWidth: '400px',}} alt="Example 1: 2 compatible nodes, the first node A has feature flags enabled and includes Toaster (set to ON), Coffee Maker (set to OFF), and Juicer Machine (set to OFF and deactivated). The second node, node B has feature flags enabled and includes Toaster (set to ON) and Coffee Maker (set to OFF)." title="Example 1: Compatible Nodes"/>
-</div>
+<figure className={"without-borders"} style={{maxWidth: '500px',}}>
+![Example 1: 2 compatible nodes, the first node A has feature flags enabled and includes Toaster (set to ON), Coffee Maker (set to OFF), and Juicer Machine (set to OFF and deactivated). The second node, node B has feature flags enabled and includes Toaster (set to ON) and Coffee Maker (set to OFF).](./compatible-nodes.svg)
+<figcaption>Example 1: Compatible Nodes</figcaption>
+</figure>
 
  * If nodes A and B are not clustered, they can be clustered.
  * If nodes A and B are clustered:
@@ -105,9 +106,10 @@ It is also possible to list and enable feature flags from the
 
 #### Example 2: Incompatible Nodes
 
-<div style={{textAlign: 'center',}}>
-<img src="/img/feature-flags/incompatible-nodes.svg" style={{width: '100%', maxWidth: '400px',}} alt="Example 2: 2 incompatible nodes, the first node A has feature flags enabled and includes Toaster (set to ON), Coffee Maker (set to OFF), and Juicer Machine (set to ON). The second node, node B has feature flags enabled and includes Toaster (set to ON) and Coffee Maker (set to OFF)." title="Example 2: Incompatible Nodes"/>
-</div>
+<figure className={"without-borders"} style={{maxWidth: '500px',}}>
+![Example 2: 2 incompatible nodes, the first node A has feature flags enabled and includes Toaster (set to ON), Coffee Maker (set to OFF), and Juicer Machine (set to ON). The second node, node B has feature flags enabled and includes Toaster (set to ON) and Coffee Maker (set to OFF).](./incompatible-nodes.svg)
+<figcaption>Example 2: Incompatible Nodes</figcaption>
+</figure>
 
  * If nodes A and B are not clustered, they cannot be clustered because
    "*Juicer machine*" is unsupported on node B.
@@ -124,9 +126,10 @@ next patch or minor release, except if it is stated otherwise
 in the release notes. Indeed, there are some changes which cannot be
 implemented as feature flags.
 
-<div style={{textAlign: 'center',}}>
-<img src="/img/feature-flags/feature-flags-and-rabbitmq-versions.svg" style={{width: '100%', maxWidth: '647px',}} alt="Feature flags compatibility with different RabbitMQ versions." title="Feature flags compatibility with different RabbitMQ versions."/>
-</div>
+<figure className={"without-borders"} style={{maxWidth: '809px',}}>
+![Feature flags compatibility with different RabbitMQ versions.](./feature-flags-and-rabbitmq-versions.svg)
+<figcaption>Feature flags compatibility with different RabbitMQ versions.</figcaption>
+</figure>
 
 However, note that only upgrading from one minor to the next minor
 or major is supported. To upgrade from e.g. 3.9.16 to 3.12.3, it is
@@ -255,9 +258,10 @@ rabbitmqctl -q --formatter pretty_table list_feature_flags
 It is also possible to list and enable feature flags from the
 [Management Plugin UI](./management), in "*Admin > Feature flags*":
 
-<div style={{textAlign: 'center',}}>
-<img src="/img/feature-flags/management-ui-ff-panel.png" style={{width: '100%', border: 'solid 1px #75757f',}} alt="Feature flags page on the Management Plugin User Interface, access this page by selecting Admin (which is a tab) and then Feature Flags (which is a menu option) ." title="Feature flags Page on the Management Plugin User Interface."/>
-</div>
+<figure>
+![Feature flags page on the Management Plugin User Interface, access this page by selecting Admin (which is a tab) and then Feature Flags (which is a menu option).](./management-ui-ff-panel.png)
+<figcaption>Feature flags Page on the Management Plugin User Interface.</figcaption>
+</figure>
 
 ## How to Disable Feature Flags {#how-to-disable-feature-flags}
 

static/img/monitoring/channels/mgmt-ui-global-channel-count.png renamed to docs/channels/mgmt-ui-global-channel-count.png

@@ -54,7 +54,9 @@ or the HTTP API with [an additional plugin](https://github.com/rabbitmq/rabbitmq
 Here is a diagram showing a single upstream exchange (the source exchange) in one
 node linking to a single downstream exchange (the federated exchange) in another node:
 
-<img src="/img/federation/federated-exchange.svg" alt="Basic federated exchange" title="Basic federated exchange"/>
+<figure className={"without-borders"}>
+![Basic federated exchange](./federated-exchange.svg)
+</figure>
 
 When exchange federation is used, usually only a subset of exchanges in a cluster is federated.
 Some exchanges can be inherently local to the "site" (cluster) and its uses.
@@ -205,7 +207,9 @@ messages republished by the federated exchange. Some
 potential publisher clients are shown publishing to both
 exchanges.
 
-<img src="/img/federation/federation01.png" height="180" alt="Simple federation" title="Simple federation" />
+<figure className={"without-borders"}>
+![Simple federation](./federation01.png)
+</figure>
 
 Publications to either exchange may be received by queues bound to
 the federated exchange, but publications directly to the federated
@@ -237,7 +241,9 @@ height="15"/> it can be a cluster of nodes or a standalone node.
           Both consumers can receive messages published by either publisher.
         </p>
 
-        <img src="/img/federation/federation02.png" height="215" alt="Symmetric pair" title="Symmetric pair" />
+        <figure className={"without-borders"}>
+        ![Symmetric pair](./federation02.png)
+        </figure>
 
         <p>
           Both links are declared with `max-hops=1` so that
@@ -255,7 +261,9 @@ height="15"/> it can be a cluster of nodes or a standalone node.
           but for three exchanges. Each exchange links to both the others.
         </p>
 
-        <img src="/img/federation/federation03.png" height="250" alt="Three-way federation" title="Three-way federation" />
+        <figure className={"without-borders"}>
+        ![Three-way federation](./federation03.png)
+        </figure>
 
         <p>
           Again `max-hops=1` because the "hop distance" to any
@@ -275,7 +283,9 @@ height="15"/> it can be a cluster of nodes or a standalone node.
           received by any consumer connected to any broker in the tree.
         </p>
 
-        <img src="/img/federation/federation04.png" height="500" alt="Fan-out" title="Fan-out" />
+        <figure className={"without-borders"}>
+        ![Fan-out](./federation04.png)
+        </figure>
 
         <p>
           Because there are no loops it is not as crucial to get the
@@ -296,7 +306,9 @@ height="15"/> it can be a cluster of nodes or a standalone node.
           once.
         </p>
 
-        <img src="/img/federation/federation05.png" height="300" alt="Ring" title="Ring" />
+        <figure className={"without-borders"}>
+        ![Ring](./federation05.png)
+        </figure>
 
         <p>
           This topology, though relatively cheap in queues and connections, is

static/img/monitoring/channels/mgmt-ui-high-channel-churn.png renamed to docs/channels/mgmt-ui-high-channel-churn.png

@@ -57,7 +57,9 @@ or the HTTP API with [an additional plugin](https://github.com/rabbitmq/rabbitmq
 The following diagram demonstrates several federated and unfederated
 queues in two RabbitMQ nodes connected using queue federation:
 
-<img src="/img/federation/federated_queues00.png" width="700" alt="Overview of federated queues" />
+<figure className={"without-borders"} style={{maxWidth: '700px',}}>
+![Overview of federated queues](./federated_queues00.png)
+</figure>
 
 When queue federation is used, usually only a subset of queues in a cluster is federated.
 Some queues can be inherently local to the "site" (cluster) and its uses.
@@ -101,7 +103,9 @@ In order for RabbitMQ to recognize that a queue needs to be federated,
 and what other nodes messages should be consumed from, _downstream_
 (consuming) nodes need to be configured.
 
-<img src="/img/federation/federated_queues01.png" width="700" alt="Federated queue policies" />
+<figure className={"without-borders"} style={{maxWidth: '700px',}}>
+![Federated queue policies](./federated_queues01.png)
+</figure>
 
 Federation configuration uses [runtime parameters and policies](./parameters), which means it can be configured
 and reconfigured on the fly as system topology changes. There are two key pieces of configuration involved:

static/img/monitoring/channels/mgmt-ui-node-channel-churn.png renamed to docs/channels/mgmt-ui-node-channel-churn.png

@@ -245,16 +245,22 @@ next to it on the queue page in the [management UI](./management).
 Below is an example of a queue named `two.replicas` which has a leader
 and a mirror:
 
-<img class="screenshot" src="/img/mirroring/queue_mirroring_indicators_management_ui_row_only.png" alt="Mirrored queue indicators in management UI" title="Mirrored queue indicators in management UI" />
+<figure>
+![Mirrored queue indicators in management UI](./queue_mirroring_indicators_management_ui_row_only.png)
+</figure>
 
 leader node for the queue and its online mirror(s), if any, will be listed on the queue page:
 
-<img class="screenshot" src="/img/mirroring/queue_mirroring_one_mirror_present.png" alt="Mirrored queue details on individual queue page" title="Mirrored queue details on individual queue page" />
+<figure>
+![Mirrored queue details on individual queue page](./queue_mirroring_one_mirror_present.png)
+</figure>
 
 If the queue page does not list any mirrors, the queue is not mirrored (or has only one mirror which
 is not online):
 
-<img class="screenshot" src="/img/mirroring/queue_mirroring_no_mirrors.png" alt="Non-mirrored queue details on individual queue page" title="Non-mirrored queue details on individual queue page" />
+<figure>
+![Non-mirrored queue details on individual queue page](./queue_mirroring_no_mirrors.png)
+</figure>
 
 When a new queue mirror is added, the event is logged:
 

static/img/monitoring/channels/mgmt-ui-per-connection-channel-max-and-count.png renamed to docs/channels/mgmt-ui-per-connection-channel-max-and-count.png

@@ -203,9 +203,13 @@ rabbitmqctl list_policies --formatter=pretty_table --silent
 
 Both optional queue arguments and effective policy for a queue can be seen on the Queues tab or individual queue page:
 
-<img class="screenshot" src="/img/limits/max_length_queues_page.png" alt="Effective queue policy and optional arguments in management UI" title="Effective queue policy and optional arguments in management UI" />
+<figure>
+![Effective queue policy and optional arguments in management UI](./max_length_queues_page.png)
+</figure>
 
 The policy name is a clickable link that leads to the policy definition page where you
 can see the limits:
 
-<img class="screenshot" src="/img/limits/max_length_policy_definition.png" alt="Effective queue policy and optional arguments in management UI" title="Effective queue policy and optional arguments in management UI" />
+<figure>
+![Effective queue policy and optional arguments in management UI](./max_length_policy_definition.png)
+</figure>