diff --git a/ivette/src/dome/renderer/controls/displays.tsx b/ivette/src/dome/renderer/controls/displays.tsx
index 8bfbbb67fe8837ac78c2d188296bf453a9ca47a3..6967f5298aecf9af8b62b32f64d0c6496a4f1929 100644
--- a/ivette/src/dome/renderer/controls/displays.tsx
+++ b/ivette/src/dome/renderer/controls/displays.tsx
@@ -62,7 +62,7 @@ export function LCD(props: LabelProps): JSX.Element {
// --- Led
// --------------------------------------------------------------------------
-const LEDStatusList = [
+export const LEDStatusList = [
'active', 'inactive', 'positive', 'negative', 'warning'
] as const;
diff --git a/ivette/src/dome/renderer/controls/icons.tsx b/ivette/src/dome/renderer/controls/icons.tsx
index 66703eeed85bc351e4b371169b200f391949d2f1..ab8c24acde7abcead42327c0e934f23d0a8bfe87 100644
--- a/ivette/src/dome/renderer/controls/icons.tsx
+++ b/ivette/src/dome/renderer/controls/icons.tsx
@@ -95,7 +95,7 @@ export function SVG(props: SVGprops): null | JSX.Element {
// --- Icon Component
// --------------------------------------------------------------------------
-const iconKindList = [
+export const iconKindList = [
'disabled', 'selected', 'positive', 'negative', 'warning', 'default'
] as const;
diff --git a/ivette/src/dome/renderer/text/markdown.tsx b/ivette/src/dome/renderer/text/markdown.tsx
index 7d761255dc76960418ab329eb570bbcb4f9e2e52..9079eb18f49f654ceed4b7547d94c4d440ef5f02 100644
--- a/ivette/src/dome/renderer/text/markdown.tsx
+++ b/ivette/src/dome/renderer/text/markdown.tsx
@@ -26,11 +26,13 @@ import remarkCustomHeaderId from 'remark-custom-header-id';
import * as Themes from 'dome/themes';
import { classes } from 'dome/misc/utils';
-import { Icon, jIconKind } from 'dome/controls/icons';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Icon, jIconKind, IconKind } from 'dome/controls/icons';
import {
CodeBlock, atomOneDark, atomOneLight
} from "react-code-blocks";
-import { jLEDstatus, LED } from 'dome/controls/displays';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { jLEDstatus, LED, LEDstatus } from 'dome/controls/displays';
export interface Pattern {
pattern: RegExp,
@@ -38,39 +40,37 @@ export interface Pattern {
}
/**
- * iconTag allows you to replace the tag with an icon.
+ * iconTag allows you to replace the tag with an {@link Icon}.
*
- * The associated regex is `/(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g`.
+ * `[icon-<id>(-<kind | color>)?]` :
*
- * * first capture `[ex:]` (option): allows to write the second group without
- * applying a replacement if exist
- * * second capture : represents the icon with `ID` and `kind | color`
- * * capture 3 : the icon Id
- * * capture 4-5 (option): the kind or color of the icon
+ * * Id : case-insensitive, consult [Icon Gallery](../../doc/guides/icons.md)
+ * * kind : {@link IconKind}
+ * * color : Hexa or html
*
- * Exemple :
- * `[icon-TUNINGS-#FF0000]` this tag will be replaced by a red TUNINGS icon
+ * @example
+ * [icon-tunings-#FF0000] : this tag will be replaced by a red TUNINGS icon
*/
+
export const iconTag: Pattern = {
- pattern: /(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g,
+ pattern: /(\[icon-([^-\]]+)(-([^\]]+))?\])/g,
replace: (key: number, match?: RegExpExecArray) => {
if(!match) return null;
- const id = match[3];
- const kind = jIconKind(match[5]);
- const color = !kind ? match[5] : undefined;
- if(match[1] === "[ex:]") {
- return <span key={key}>{match[2]}</span>;
- }
- return <Icon key={key} id={id} kind={kind} fill={color}/>;
+ const kind = jIconKind(match[4]);
+ const color = !kind ? match[4] : undefined;
+ return <Icon key={key}
+ id={match[2].toUpperCase()}
+ kind={kind}
+ fill={color}
+ />;
}
};
/**
- * ledTag allows you to replace the tag with an LED.
- * The associated regex is `/\[led-([^\]]+)\]/g`.
+ * ledTag allows you to replace the tag with an {@link LED}.
*
- * The capture `([^\]]+)` represents the LEDStatus.
- */
+ * `[led-<status>]` : {@link LEDstatus}
+ * */
export const ledTag: Pattern = {
pattern: /\[led-([^\]]+)\]/g,
replace: (key: number, match?: RegExpExecArray) => {
diff --git a/ivette/src/dome/renderer/text/style.css b/ivette/src/dome/renderer/text/style.css
index 9ead4605dfe6a982f18f647427c8b56e291219b4..b11471622d669db0ac4170423c9a18626e91e9e4 100644
--- a/ivette/src/dome/renderer/text/style.css
+++ b/ivette/src/dome/renderer/text/style.css
@@ -72,7 +72,9 @@
.dome-pages li
{
-
+ &:has(.code-inline) {
+ margin: 5px 0;
+ }
}
.dome-pages a
diff --git a/ivette/src/frama-c/plugins/callgraph/callgraph.md b/ivette/src/frama-c/plugins/callgraph/callgraph.md
index a8f0a8ae39571d98725327188043e43ec36c5b0f..9657be94e2841c225a52a208b96b99a8b62ce49b 100644
--- a/ivette/src/frama-c/plugins/callgraph/callgraph.md
+++ b/ivette/src/frama-c/plugins/callgraph/callgraph.md
@@ -23,10 +23,10 @@ This component is divided into 4 parts, the [titlebar](#plugins-callgraph-titleb
The titlebar contains the name of the module on the left and the following buttons on the right:
-* [icon-TUNINGS] : Filter functions appearing in the graph. Ce filtre est synchronisé avec celui de la sidebar.
-* [icon-TARGET] : Move the camera to show each node after each render.
-* [icon-PIN] : Automatically select node of the function selected in AST.
-* [icon-HELP] : show this help modal.
+* [icon-tunings] : Filter functions appearing in the graph. Ce filtre est synchronisé avec celui de la sidebar.
+* [icon-target] : Move the camera to show each node after each render.
+* [icon-pin] : Automatically select node of the function selected in AST.
+* [icon-help] : show this help modal.
##Toolbar {#plugins-callgraph-toolbar}
@@ -42,7 +42,7 @@ On the left, there is a group of buttons for selecting the nodes that will appea
On the right:
* Horizontal and vertical distance management between graph nodes.
-* [icon-SIDEBAR] : Opens or closes the side panel.
+* [icon-sidebar] : Opens or closes the side panel.
## Panel {#callgraph-panel}
@@ -57,7 +57,7 @@ The graph is in 3D but is displayed as a tree. This type of display prevents cyc
If a cycle is detected :
-* In the case of a recursive function: The link is deleted and the [icon-REDO-orange] icon is added to the node.
+* In the case of a recursive function: The link is deleted and the [icon-redo-orange] icon is added to the node.
* In the case of a cycle on several functions: The cycles will be pre-selected and will appear in the selection button.
### Nodes
@@ -66,8 +66,8 @@ The nodes display the name of the function and the following elements:
* [led-warning] : The function contains unproven properties, a tooltip gives the quantity.
* [led-negative] : The function contains false properties, a tooltip gives the quantity.
-* [icon-REDO-orange] : The function is recursive.
-* [icon-DROP.FILLED-#882288][icon-DROP.FILLED-#73BBBB]: The function contains tainted properties.
+* [icon-redo-orange] : The function is recursive.
+* [icon-drop.filled-#882288][icon-drop.filled-#73BBBB]: The function contains tainted properties.
### Edges
diff --git a/ivette/src/sandbox/sandbox.md b/ivette/src/sandbox/sandbox.md
index 4913e44252baa99eedbb79fee101d97227ea1e41..39bec4de1a9006374d5f9e857325a2752f302317 100644
--- a/ivette/src/sandbox/sandbox.md
+++ b/ivette/src/sandbox/sandbox.md
@@ -100,9 +100,9 @@ You can used patterns to replace parts of the text by JSX Element.
There is one basic pattern to replace tags by an `Icon`, it name `iconTag` in markdown component .
-* [icon-TUNINGS] : [ex:][icon-TUNINGS]
-* [icon-TUNINGS-#ff0000] : [ex:][icon-TUNINGS-#ff0000]
-* [icon-TARGET] : [ex:][icon-TARGET]
-* [icon-PIN] : [ex:][icon-PIN]
+* [icon-tunings] : `[icon-tunings]`
+* [icon-tunings-#ff0000] : `[icon-tunings-#ff0000]`
+* [icon-target] : `[icon-target]`
+* [icon-pin] : `[icon-pin]`
-or inline [icon-TUNINGS], [icon-TARGET], [icon-PIN]
+or inline [icon-tunings], [icon-target], [icon-pin]