Fix SVGs by transforming them to be imports

Fix SVGs

Author: axmmisaka

docs/reference/Tracing.mdx

@@ -215,7 +215,9 @@ When the `tracing` target parameter is set to `true` in a [federated program](ht
 
 Consider the following LF program:
 
-<img src="./../assets/images/tracing/Feedback.svg" alt="Feedback example" width="300"/>
+import FeedbackSVG from "./../assets/images/tracing/Feedback.svg"
+
+<FeedbackSVG title="Feedback example" width="300" role="img" />
 
 Setting `tracing: true` in this program and running it produces four `.lft` files. Running `fedsd` on those files:
 

docs/writing-reactors/Actions.mdx

@@ -141,7 +141,9 @@ import TS_Asynchronous from '../assets/code/ts/src/Asynchronous.lf';
 
 <NoSelectorTargetCodeBlock c={C_Asynchronous} cpp={Cpp_Asynchronous} py={Py_Asynchronous} rs={Rs_Asynchronous} ts={TS_Asynchronous} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Asynchronous.svg" width="350"/>
+import AsynchronousSVG from "./../assets/images/diagrams/Asynchronous.svg"
+
+<AsynchronousSVG title="Lingua Franca diagram: Asynchronous" role="img" width="350" />
 
 Physical actions are the mechanism for obtaining input from the outside world. Because they are assigned a logical time derived from the physical clock, their logical time can be interpreted as a measure of the time at which some external event occurred.
 

docs/writing-reactors/Causality Loops.mdx

@@ -26,7 +26,9 @@ import TS_Cycle from '../assets/code/ts/src/Cycle.lf';
 
 This program yields the following diagram:
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Cycle.svg" width="400"/>
+import CycleSVG from "./../assets/images/diagrams/Cycle.svg"
+
+<CycleSVG title="Lingua Franca diagram: Cycle" role="img" width="400" />
 
 The diagram highlights a **causality loop** in the program. At each tag, in reactor `B`, the first reaction has to execute before the second if it is enabled, a precedence indicated with the red dashed arrow. But the first can't execute until the reaction of `A` has executed, and that reaction cannot execute until the second reaction `B` has executed. There is no way to satisfy these requirements, so the tools refuse to generated code.
 
@@ -42,7 +44,9 @@ import TS_CycleWithDelay from '../assets/code/ts/src/CycleWithDelay.lf';
 
 <NoSelectorTargetCodeBlock c={C_CycleWithDelay} cpp={Cpp_CycleWithDelay} py={Py_CycleWithDelay} rs={Rs_CycleWithDelay} ts={TS_CycleWithDelay} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/CycleWithDelay.svg" width="400"/>
+import CycleWithDelaySVG from "./../assets/images/diagrams/CycleWithDelay.svg"
+
+<CycleWithDelaySVG title="Lingua Franca diagram: CycleWithDelay" role="img" width="400" />
 
 Here, we have used a delay of 0, which results in a delay of one [microstep](<../writing-reactors/Superdense Time.mdx>). We could equally well have specified a positive time value.
 
@@ -58,6 +62,8 @@ import TS_CycleReordered from '../assets/code/ts/src/CycleReordered.lf';
 
 <NoSelectorTargetCodeBlock c={C_CycleReordered} cpp={Cpp_CycleReordered} py={Py_CycleReordered} rs={Rs_CycleReordered} ts={TS_CycleReordered} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/CycleReordered.svg" width="400"/>
+import CycleReorderedSVG from "./../assets/images/diagrams/CycleReordered.svg"
+
+<CycleReorderedSVG title="Lingua Franca diagram: CycleReordered" role="img" width="400" />
 
 There is no longer any causality loop.

docs/writing-reactors/Composing Reactors.mdx

@@ -29,7 +29,9 @@ import TS_RegressionTest from '../assets/code/ts/src/RegressionTest.lf';
 
 As soon as programs consist of more than one reactor, it becomes particularly useful to reference the diagrams that are automatically created and displayed by the Lingua Franca IDEs. The diagram for the above program is as follows:
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/RegressionTest.svg" width="500"/>
+import RegressionTestSVG from "./../assets/images/diagrams/RegressionTest.svg"
+
+<RegressionTestSVG title="Lingua Franca diagram: RegressionTest" role="img" width="500" />
 
 In this diagram, the timer is represented by a clock-like icon, the reactions by chevron shapes, and the $shutdown$ event by a diamond. If there were a $startup$ event in this program, it would appear as a circle.
 
@@ -111,7 +113,9 @@ A destination port (on the right) can only be connected to a single source port
   </ShowIf>
 </ShowIfs>
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Multicast.svg" width="250"/>
+import MulticastSVG from "./../assets/images/diagrams/Multicast.svg"
+
+<MulticastSVG title="Lingua Franca diagram: Multicast" role="img" width="250" />
 
 Lingua Franca provides a convenient shortcut for such multicast connections, where the above two lines can be replaced by one as follows:
 
@@ -143,7 +147,9 @@ import TS_Hierarchy from '../assets/code/ts/src/Hierarchy.lf';
 
 <NoSelectorTargetCodeBlock c={C_Hierarchy} cpp={Cpp_Hierarchy} py={Py_Hierarchy} rs={Rs_Hierarchy} ts={TS_Hierarchy} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Hierarchy.svg" width="500"/>
+import HierarchySVG from "./../assets/images/diagrams/Hierarchy.svg"
+
+<HierarchySVG title="Lingua Franca diagram: Hierarchy" role="img" width="500" />
 
 The `Container` has a parameter named `stride`, whose value is passed to the `factor` parameter of the `Scale` reactor. The line
 
@@ -183,6 +189,8 @@ main reactor {
 
 This is rendered in by the diagram synthesizer as follows:
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/PhysicalConnection.svg" width="200"/>
+import PhysicalConnectionSVG from "./../assets/images/diagrams/PhysicalConnection.svg"
+
+<PhysicalConnectionSVG title="Lingua Franca diagram: PhysicalConnection" role="img" width="200" />
 
 In such a connection, the logical time at the recipient is derived from the local physical clock rather than being equal to the logical time at the sender. The physical time will always exceed the logical time of the sender (unless fast is set to `true`), so this type of connection incurs a nondeterministic positive logical time delay. Physical connections are useful sometimes in [Distributed-Execution](<../writing-reactors/Distributed Execution.mdx>) in situations where the nondeterministic logical delay is tolerable. Such connections are more efficient because timestamps need not be transmitted and messages do not need to flow through through a centralized coordinator (if a centralized coordinator is being used).

docs/writing-reactors/Deadlines.mdx

@@ -44,7 +44,9 @@ import TS_DeadlineTest from '../assets/code/ts/src/DeadlineTest.lf';
 
 <NoSelectorTargetCodeBlock c={C_DeadlineTest} cpp={Cpp_DeadlineTest} py={Py_DeadlineTest} rs={"DeadlineTest.lf missing for Rust"} ts={TS_DeadlineTest} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/DeadlineTest.svg" width="500"/>
+import DeadlineTestSVG from "./../assets/images/diagrams/DeadlineTest.svg"
+
+<DeadlineTestSVG title="Lingua Franca diagram: DeadlineTest" role="img" width="500" />
 
 Running this program will result in the following output:
 

docs/writing-reactors/Extending Reactors.mdx

@@ -23,7 +23,9 @@ import TS_Extends from '../assets/code/ts/src/Extends.lf';
 
 <NoSelectorTargetCodeBlock c={C_Extends} py={Py_Extends} rs={Rs_Extends} ts={TS_Extends} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Extends.svg" width="350"/>
+import ExtendsSVG from "./../assets/images/diagrams/Extends.svg"
+
+<ExtendsSVG title="Lingua Franca diagram: Extends" role="img" width="350" />
 
 Here, the base class `A` has a single output that it writes to in reaction to an input. The subclass inherits the input, the output, and the reaction of `A`, and adds its own input `b` and reaction. When an input event `a` arrives, both reactions will be invoked, but, once again, in a well-defined order. The reactions of the base class are invoked before those of the derived class. So in this case, `B` will overwrite the output produced by `A`.
 

docs/writing-reactors/Modal Models.mdx

@@ -122,7 +122,9 @@ As a consequence, a mode has a notion of local time that elapses only when the m
 From the perspective of timers and actions, time is suspended when a mode is inactive.
 This also applies to indirectly nested reactors within modes and connections with logical delays, if their source lies within a mode.
 
-<img alt="Illustration of local time (model)" src="./../assets/images/modal_models/local_time.svg" width="400"/>
+import local_timeSVG from "./../assets/images/modal_models/local_time.svg"
+
+<local_timeSVG title="Illustration of local time (model): local_time"   />
 
 The above LF model illustrates the different characteristics of local time affecting timers and actions in the presence of the two transition types.
 
@@ -135,7 +137,9 @@ This action triggers the second reaction, which writes to the output `out`.
 The main difference between the modes is that `One` is entered via a history transition, continuing its behavior, while `Two` is reset.
 (History behavior is indicated by an "H" on the transition edge because it enters into the entire history of the mode.)
 
-<img alt="Illustration of local time (trace)" src="./../assets/images/modal_models/local_time_trace.svg" width="600"/>
+import local_time_traceSVG from "./../assets/images/modal_models/local_time_trace.svg"
+
+<local_time_traceSVG title="Illustration of local time (trace): local_time_trace"   />
 
 Above is the execution trace of the first 4 seconds of this program.
 Below the timeline is the currently active mode and above the timeline are the model elements that are executed at certain points in time, together with indicating triggering and their relation through time.
@@ -145,7 +149,9 @@ The timing diagram illustrates the different handling of time between history tr
 Specifically, when mode `One` is re-entered via a history transition, at time 2000 msec, the action triggered by `T1` before, at time 850 msec, resumes.
 In contrast, when mode `Two` is re-entered via a reset transition, at time 3000 msec, the action triggered by `T2` before, at time 1850 msec, gets discarded.
 
-<img alt="Illustration of local time (plot)" src="./../assets/images/modal_models/local_time_plot.svg" width="300"/>
+import local_time_plotSVG from "./../assets/images/modal_models/local_time_plot.svg"
+
+<local_time_plotSVG title="Illustration of local time (plot): local_time_plot"   />
 
 The above plot illustrates the relation between global time in the environment and the localized time for each timer in the model.
 Since the top-level reactor `TimingExample` is not enclosed by any mode, its time always corresponds to the global time.

docs/writing-reactors/Multiports and Banks.mdx

@@ -45,7 +45,9 @@ import TS_Multiport from '../assets/code/ts/src/Multiport.lf';
 
 <NoSelectorTargetCodeBlock c={C_Multiport} cpp={Cpp_Multiport} py={Py_Multiport} rs={Rs_Multiport} ts={TS_Multiport} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Multiport.svg" width="300"/>
+import MultiportSVG from "./../assets/images/diagrams/Multiport.svg"
+
+<MultiportSVG title="Lingua Franca diagram: Multiport" role="img" width="300" />
 
 Executing this program will yield:
 
@@ -152,7 +154,9 @@ main reactor {
 }
 ```
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/BankToBankMultiport.svg" width="300"/>
+import BankToBankMultiportSVG from "./../assets/images/diagrams/BankToBankMultiport.svg"
+
+<BankToBankMultiportSVG title="Lingua Franca diagram: BankToBankMultiport" role="img" width="300" />
 
 If the `Source` and `Destination` reactors have multiport inputs and outputs, as in the examples above, then a warning will be issued if the total width on the left does not match the total width on the right. For example, the following is balanced:
 
@@ -224,7 +228,9 @@ import TS_ChildBank from '../assets/code/ts/src/ChildBank.lf';
 
 <NoSelectorTargetCodeBlock c={C_ChildBank} cpp={Cpp_ChildBank} py={Py_ChildBank} rs={Rs_ChildBank} ts={TS_ChildBank} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/ChildBank.svg" width="150"/>
+import ChildBankSVG from "./../assets/images/diagrams/ChildBank.svg"
+
+<ChildBankSVG title="Lingua Franca diagram: ChildBank" role="img" width="150" />
 
 In this program, the `Parent` reactor contains a bank of `Child` reactor instances
 with a width of 2. In the main reactor, a bank of `Parent` reactors is
@@ -275,7 +281,9 @@ import TS_ChildParentBank2 from '../assets/code/ts/src/ChildParentBank2.lf';
 
 <NoSelectorTargetCodeBlock c={C_ChildParentBank2} cpp={Cpp_ChildParentBank2} py={Py_ChildParentBank2} rs={"ChildParentBank2.lf missing for Rust"} ts={TS_ChildParentBank2} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/ChildParentBank2.svg" width="250"/>
+import ChildParentBank2SVG from "./../assets/images/diagrams/ChildParentBank2.svg"
+
+<ChildParentBank2SVG title="Lingua Franca diagram: ChildParentBank2" role="img" width="250" />
 
 Running this program will give something like the following:
 
@@ -323,7 +331,9 @@ import TS_MultiportToBank from '../assets/code/ts/src/MultiportToBank.lf';
 
 <NoSelectorTargetCodeBlock c={C_MultiportToBank} cpp={Cpp_MultiportToBank} py={Py_MultiportToBank} rs={Rs_MultiportToBank} ts={TS_MultiportToBank} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/MultiportToBank.svg" width="300"/>
+import MultiportToBankSVG from "./../assets/images/diagrams/MultiportToBank.svg"
+
+<MultiportToBankSVG title="Lingua Franca diagram: MultiportToBank" role="img" width="300" />
 
 The three outputs from the `Source` instance `a` will be sent, respectively, to each of three instances of `Destination`, `b[0]`, `b[1]`, and `b[2]`. The result of the program will be something like the following:
 
@@ -376,7 +386,9 @@ import Py_Interleaved from '../assets/code/py/src/Interleaved.lf';
 
 <NoSelectorTargetCodeBlock c={C_Interleaved} cpp={Cpp_Interleaved} py={Py_Interleaved} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Interleaved.svg" width="250"/>
+import InterleavedSVG from "./../assets/images/diagrams/Interleaved.svg"
+
+<InterleavedSVG title="Lingua Franca diagram: Interleaved" role="img" width="250" />
 
 In the above program, four instance of `Node` are created, and, at startup, each instance sends 42 to its second (index 1) output channel. The result is that the second bank member (`bank_index` 1) will receive the number 42 on each input channel of its multiport input. Running this program gives something like the following:
 
@@ -395,11 +407,11 @@ In bank index 1, the 0-th channel receives from `bank_index` 0, the 1-th channel
 
 This style of connection is accomplished using the new keyword $interleaved$ in the connection. Normally, a port reference such as `nodes.out` where `nodes` is a bank and `out` is a multiport, would list all the individual ports by first iterating over the banks and then, for each bank index, iterating over the ports. If we consider the tuple (b,p) to denote the index b within the bank and the index p within the multiport, then the following list is created: (0,0), (0,1), (0,2), (0,3), (1,0), (1,1), (1,2), (1,3), (2,0), (2,1), (2,2), (2,3), (3,0), (3,1), (3,2), (3,3). However, if we use $interleaved$`(nodes.out)` instead, the connection logic will iterate over the ports first and then the banks, creating the following list: (0,0), (1,0), (2,0), (3,0), (0,1), (1,1), (2,1), (3,1), (0,2), (1,2), (2,2), (3,2), (0,3), (1,3), (2,3), (3,3). By combining a normal port reference with a interleaved reference, we can construct a fully connected network. The figure below visualizes this how this pattern would look without banks or multiports:
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/AddressableDesugared.png" width="600"/>
+![Lingua Franca diagram: AddressableDesugared](../assets/images/diagrams/AddressableDesugared.png)
 
 If we were to use a normal connection `nodes.out -> nodes.in;` instead of the $interleaved$ connection, then the following pattern would be created:
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/AddressableNaiveDesugared.png" width="600"/>
+![Lingua Franca diagram: AddressableNaiveDesugared](../assets/images/diagrams/AddressableNaiveDesugared.png)
 
 Effectively, this connects each reactor instance to itself, which isn't very useful.
 

docs/writing-reactors/Reactions.mdx

@@ -71,7 +71,9 @@ import TS_Contained from '../assets/code/ts/src/Contained.lf';
 
 <NoSelectorTargetCodeBlock c={C_Contained} cpp={Cpp_Contained} py={Py_Contained} rs={Rs_Contained} ts={TS_Contained} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Contained.svg" width="300"/>
+import ContainedSVG from "./../assets/images/diagrams/Contained.svg"
+
+<ContainedSVG title="Lingua Franca diagram: Contained" role="img" width="300" />
 
 This instantiates the above `Overwriting` reactor and monitors its outputs.
 

docs/writing-reactors/Superdense Time.mdx

@@ -26,7 +26,9 @@ import TS_Microsteps from '../assets/code/ts/src/Microsteps.lf';
 
 <NoSelectorTargetCodeBlock c={C_Microsteps} cpp={Cpp_Microsteps} py={Py_Microsteps} rs={Rs_Microsteps} ts={TS_Microsteps} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Microsteps.svg" width="150"/>
+import MicrostepsSVG from "./../assets/images/diagrams/Microsteps.svg"
+
+<MicrostepsSVG title="Lingua Franca diagram: Microsteps" role="img" width="150" />
 
 Executing this program will yield something like this:
 
@@ -52,7 +54,9 @@ import TS_Simultaneous from '../assets/code/ts/src/Simultaneous.lf';
 
 <NoSelectorTargetCodeBlock c={C_Simultaneous} cpp={Cpp_Simultaneous} py={Py_Simultaneous} rs={Rs_Simultaneous} ts={TS_Simultaneous} lf />
 
-<img alt="Lingua Franca diagram" src="./../assets/images/diagrams/Simultaneous.svg" width="400"/>
+import SimultaneousSVG from "./../assets/images/diagrams/Simultaneous.svg"
+
+<SimultaneousSVG title="Lingua Franca diagram: Simultaneous" role="img" width="400" />
 
 The `Destination` reactor has two inputs, `x` and `y`, and it reports in a reaction to either input what is the logical time, the microstep, and which input is present. The main reactor reacts to $startup$ by sending data to the `x` input of `Destination`. It then schedules a `repeat` action with an `<offset>` of zero. The `repeat` reaction is invoked **strictly later**, one **microstep** later. The output printed, therefore, will look like this: