Add more yield machine docs

Author: RoyalIcing

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml,md}]
+indent_style = space
+
+[Makefile]
+indent_size = 2
+indent_style = tab

src/components/LeftSidebar/LeftSidebar.astro

@@ -7,7 +7,7 @@ const langCode = getLanguageFromURL(currentPage);
 
 const sidebarSections = [];
 
-for (const section of [SIDEBAR.parser, SIDEBAR.machines]) {
+for (const section of [SIDEBAR.machines, SIDEBAR.parser]) {
 	for (const item of section) {
 		if (item.header) {
 			sidebarSections.push({ ...item, children: [] });

src/config.ts

@@ -33,22 +33,30 @@ export const KNOWN_LANGUAGES = {
 // }
 
 export const SIDEBAR = {
-	parser: [
-		{ text: 'Parser', header: true },
-		{ text: 'Introduction', link: 'parser' },
-		{ text: 'Routes', link: 'parser/routes' },
-	],
 	machines: [
-		{ text: 'Machines', header: true },
+		{ text: 'YieldMachine', header: true },
 		{ text: 'Introduction', link: 'machines' },
+		{ text: 'Primitives', link: 'machines/primitives' },
+		{ text: 'Working with promises', link: 'machines/promises' },
+		{ text: 'Entry and exit callbacks', link: 'machines/entry-exit' },
+		{ text: 'Reading properties from the received event', link: 'machines/event-props' },
+		{ text: 'Listening to external events', link: 'machines/external-events' },
+		{ text: 'Nested machines', link: 'machines/nested-machines' },
+		{ text: 'Examples', link: 'machines/examples' },
 		{ text: 'Annotated source', link: 'machines/source' },
 	],
+	parser: [
+		{ text: 'YieldParser', header: true },
+		{ text: 'Introduction', link: 'parser' },
+		{ text: 'Routes', link: 'parser/routes' },
+		{ text: 'HTTP Helpers', link: 'parser/routes' },
+	],
 	en: [
 		{ text: 'Section Header', header: true },
 		{ text: 'Introduction', link: 'en/introduction' },
 		{ text: 'Page 2', link: 'en/page-2' },
 		{ text: 'Page 3', link: 'en/page-3' },
-		
+
 		{ text: 'Another Section', header: true },
 		{ text: 'Page 4', link: 'en/page-4' },
 	]

src/pages/machines/entry-exit.md

@@ -0,0 +1,5 @@
+---
+title: Entry & exit callbacks in YieldMachine
+description: Know when a state is entered or exited
+layout: ../../layouts/MainLayout.astro
+---

src/pages/machines/event-props.md

@@ -0,0 +1,75 @@
+---
+title: Listening to external events with YieldMachine
+description: Listening to external events
+layout: ../../layouts/MainLayout.astro
+---
+
+```js
+function KeyShortcutListener(el: HTMLElement) {
+  function isEscapeKey(readContext: ReadContextCallback) {
+    const event = readContext("event");
+    return event instanceof KeyboardEvent && event.key === "Escape";
+  }
+  function isEnterKey(readContext: ReadContextCallback) {
+    const event = readContext("event");
+    return event instanceof KeyboardEvent && event.key === "Enter";
+  }
+
+  const openChoiceKeydown = new Map([
+    [isEscapeKey, Closed],
+    [null, Open as any],
+  ]);
+  const closedChoiceKeydown = new Map([
+    [isEnterKey, Open],
+    [null, Closed as any],
+  ]);
+
+  function* Open() {
+    yield on("keydown", openChoiceKeydown);
+    yield listenTo(el, ["keydown"]);
+  }
+  function* Closed() {
+    yield on("keydown", closedChoiceKeydown);
+    yield listenTo(el, ["keydown"]);
+  }
+
+  return Closed;
+}
+
+const aborter = new AbortController();
+const input = document.createElement("input");
+const machine = start(KeyShortcutListener.bind(null, input), {
+  signal: aborter.signal,
+});
+machine.value.state; // "Closed"
+
+input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+expect(machine.value).toMatchObject({
+  state: "Open",
+  change: 1,
+});
+
+input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+expect(machine.value).toMatchObject({
+  state: "Open",
+  change: 1,
+});
+
+input.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));
+expect(machine.value).toMatchObject({
+  state: "Open",
+  change: 1,
+});
+
+input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+expect(machine.value).toMatchObject({
+  state: "Closed",
+  change: 2,
+});
+
+input.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));
+expect(machine.value).toMatchObject({
+  state: "Closed",
+  change: 2,
+});
+```