move remaining docs over

Author: Matthew Phillips

docs2/public/images/issue-edit-mode.png

@@ -13,17 +13,29 @@ const activeItem = undefined;
       { title: "ACTIONS", id: "actions" }
     ],
     'GUIDES': [
-      { title: "QUICK_START", id: "quick-start" },
-      { title: "MIGRATION", id: "migration" },
-      { title: "BEST_PRACTICES", id: "best-practices" }
+      { title: "COMPOSITION", id: "composition", slug: "composition" },
+      { title: "NESTED_STATES", id: "nested-states", slug: "nested-states" },
+      { title: "ASYNC_EXECUTION", id: "awaiting-asynchronous-execution", slug: "awaiting-asynchronous-execution" },
+      { title: "VS_XSTATE", id: "comparison-with-xstate", slug: "comparison-with-xstate" }
     ],
     'INTEGRATIONS': [
-      { title: "REACT", id: "react" },
-      { title: "VUE", id: "vue" },
-      { title: "SVELTE", id: "svelte" }
+      { title: "REACT_ROBOT", id: "react-robot", slug: "react-robot" },
+      { title: "PREACT_ROBOT", id: "preact-robot", slug: "preact-robot" },
+      { title: "SVELTE_ROBOT", id: "svelte-robot-factory", slug: "svelte-robot-factory" },
+      { title: "LIT_ROBOT", id: "lit-robot", slug: "lit-robot" },
+      { title: "HAUNTED_ROBOT", id: "haunted-robot", slug: "haunted-robot" },
+      { title: "ROBOT_HOOKS", id: "robot-hooks", slug: "robot-hooks" }
     ],
     'API': [
-      { title: 'createMachine', id: 'create-machine', slug: 'createMachine' }
+      { title: 'createMachine', id: 'create-machine', slug: 'createMachine' },
+      { title: 'state', id: 'state', slug: 'state' },
+      { title: 'transition', id: 'transition', slug: 'transition' },
+      { title: 'guard', id: 'guard', slug: 'guard' },
+      { title: 'action', id: 'action', slug: 'action' },
+      { title: 'reduce', id: 'reduce', slug: 'reduce' },
+      { title: 'invoke', id: 'invoke', slug: 'invoke' },
+      { title: 'interpret', id: 'interpret', slug: 'interpret' },
+      { title: 'immediate', id: 'immediate', slug: 'immediate' }
     ]
   };
 ---

docs2/public/images/issue-view-mode.png

@@ -1,7 +1,7 @@
 <div class="group bg-gray-900 p-8 rounded-xl border-2 border-cyan-500 hover:border-pink-500 transition-colors relative overflow-hidden">
   <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-cyan-400 to-pink-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
   <div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
-    {Astro.props.icon}
+    <slot />
   </div>
   <h3 class="text-xl font-bold mb-2 font-mono text-cyan-400">{Astro.props.title}</h3>
   <p class="text-gray-400">{Astro.props.description}</p>

docs2/src/components/DocsSidebar.astro

@@ -4,17 +4,17 @@ import Heart from '../icons/Heart.astro';
 ---
 <footer class="border-t border-cyan-500/20 bg-gray-900/50 backdrop-blur-sm mt-16">
   <div class="container mx-auto px-4 py-8">
-    <div class="grid md:grid-cols-3 gap-8">
+    <div class="grid md:grid-cols-3 gap-8 text-center">
       <div>
         <h3 class="font-mono text-cyan-400 font-bold mb-4 text-sm">CONNECT</h3>
         <div class="space-y-2">
-          <a href="https://github.com" class="flex items-center gap-2 text-gray-200 hover:text-cyan-400 transition-colors">
+          <a href="https://github.com" class="flex items-center justify-center gap-2 text-gray-200 hover:text-cyan-400 transition-colors">
             <Github size={16} />
             <span>GitHub</span>
           </a>
         </div>
       </div>
-      
+
       <div>
         <h3 class="font-mono text-cyan-400 font-bold mb-4 text-sm">DOCS</h3>
         <div class="space-y-2">
@@ -23,7 +23,7 @@ import Heart from '../icons/Heart.astro';
           <a href="/docs/examples" class="block text-gray-200 hover:text-cyan-400 transition-colors">Examples</a>
         </div>
       </div>
-      
+
       <div>
         <h3 class="font-mono text-cyan-400 font-bold mb-4 text-sm">RESOURCES</h3>
         <div class="space-y-2">
@@ -34,7 +34,7 @@ import Heart from '../icons/Heart.astro';
 
     <div class="flex justify-center mt-8 pt-8 border-t border-cyan-500/20">
       <p class="text-gray-200 text-sm">
-        © 2024 Robot. Built with <Heart size={12} class="inline text-cyan-400" /> by developers.
+        © 2025 Robot. Built with 🔧 by developers.
       </p>
     </div>
   </div>

docs2/src/components/FeatureCard.astro

@@ -3,7 +3,13 @@ import { z, defineCollection } from 'astro:content';
 const docs = defineCollection({
   schema: z.object({
     title: z.string(),
-    tags: z.string()
+    tags: z.string(),
+    layout: z.string().optional(),
+    permalink: z.string().optional(),
+    shortTitle: z.string().optional(),
+    date: z.string().optional(),
+    id: z.string().optional(),
+    section: z.enum(['api', 'guides', 'integrations', 'core']).optional()
   })
 });
 

docs2/src/components/Footer.astro

@@ -0,0 +1,34 @@
+---
+title: action
+tags: api
+permalink: api/action.html
+section: api
+---
+
+# action
+
+__action__ takes a function that will be run during a [transition](/docs/transition/). The primary purpose of using action is to perform *side-effects*.
+
+This example triggers an event on an element when transitioning to the next state.
+
+```js
+import { createMachine, action, state, transition } from 'robot3';
+
+function dispatchOn(ctx) {
+  const { element } = ctx;
+  element.dispatchEvent(new CustomEvent('toggled'));
+}
+
+const machine = createMachine({
+  on: state(
+    transition('toggle', 'off')
+  ),
+  off: state(
+    transition('toggle', 'on',
+      action(dispatchOn)
+    )
+  )
+}, () => ({
+  element: document.querySelector('#toggler')
+}));
+```

docs2/src/content/config.ts

@@ -0,0 +1,32 @@
+---
+title: Awaiting asynchronous execution
+tags: guide
+permalink: guides/awaiting-asynchronous-execution.html
+section: guides
+---
+
+# Awaiting asynchronous execution
+
+In a scenario where it's necessary to `await` the machine to enter a `final`
+state (a state which has no transitions), the `onChange` callback (the second argument to `interpret`) can be used
+to resolve a promise. The promise can be externally awaited.
+
+```js
+let resolve;
+let promise = new Promise(_resolve => {
+  resolve = _resolve;
+})
+
+service = interpret(machine, () => {
+  if(machine.state.value.final) {
+    resolve();
+  }
+});
+
+await promise;
+// All done!
+```
+
+This is particularly useful for state machines which consist entirely
+of `immediate` and `invoke` states: these model execution flows which do
+not depend on external events for their execution and state transition.