added notes

gallery/notes.typ

@@ -0,0 +1,114 @@
+#import "/src/lib.typ" as chronos: *
+
+#set page(width: auto, height: auto)
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("a", "b", comment: [hello])
+  _note("left", [this is a first note])
+
+  _seq("b", "a", comment: [ok])
+  _note("right", [this is another note])
+
+  _seq("b", "b", comment: [I am thinking])
+  _note("left", [a note\ can also be defined\ on several lines])
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("left", [This is displayed\ left of Alice.], pos: "a", color: rgb("#00FFFF"))
+  _note("right", [This is displayed right of Alice.], pos: "a")
+  _note("over", [This is displayed over Alice.], pos: "a")
+  _note("over", [This is displayed\ over Bob and Alice.], pos: ("a", "b"), color: rgb("#FFAAAA"))
+  _note("over", [This is yet another\ example of\ a long note.], pos: ("a", "b"))
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("caller")
+  _par("server")
+
+  _seq("caller", "server", comment: [conReq])
+  _note("over", [idle], pos: "caller", shape: "hex")
+  _seq("server", "caller", comment: [conConf])
+  _note("over", ["r" as rectangle\ "h" as hexagon], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "caller", shape: "hex")
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+  _par("c", display-name: "Charlie")
+
+  _seq("a", "b", comment: [m1])
+  _seq("b", "c", comment: [m2])
+
+  _note("over", [Old method for note over all part. with:\ `note over FirstPart, LastPart`.], pos: ("a", "c"))
+  _note("across", [New method with:\ `note across`.])
+
+  _seq("b", "a")
+
+  _note("across", [Note across all part.], shape: "hex")
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob], pos: "b")
+  _seq("b", "a", comment: [hello])
+})
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob], pos: "b", aligned: true)
+  _seq("b", "a", comment: [hello])
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: [Alice])
+  _par("b", display-name: [The *Famous* Bob])
+
+  _seq("a", "b", comment: [hello #strike([there])])
+
+  _gap()
+  _seq("b", "a", comment: [ok])
+  _note("left", [
+    This is *bold*\
+    This is _italics_\
+    This is `monospaced`\
+    This is #strike([stroked])\
+    This is #underline([underlined])\
+    This is #underline([waved])\
+  ])
+
+  _seq("a", "b", comment: [A _well formatted_ message])
+  _note("right", [
+    This is #box(text([displayed], size: 18pt), fill: rgb("#5F9EA0"))\
+    #underline([left of]) Alice.
+  ], pos: "a")
+  _note("left", [
+    #underline([This], stroke: red) is #text([displayed], fill: rgb("#118888"))\
+    *#text([left of], fill: rgb("#800080")) #strike([Alice], stroke: red) Bob.*
+  ], pos: "b")
+  _note("over", [
+    #underline([This is hosted], stroke: rgb("#FF33FF")) by #box(baseline: 50%, image("gitea.png", width: 1cm, height: 1cm, fit: "contain"))
+  ], pos: ("a", "b"))
+})