Fix Vocs search issue with local imports

cspell.config.json

@@ -38,6 +38,7 @@
     "funder",
     "geoblocking",
     "groupname",
+    "groupstate",
     "hexlify",
     "hijklmn",
     "HMAC",

docs/pages/chat-apps/core-messaging/support-group-invite-links.mdx

@@ -1,3 +1,6 @@
+import Zoom from 'react-medium-image-zoom';
+import 'react-medium-image-zoom/dist/styles.css';
+
 # Support group chat invite links
 
 This document provides suggested paths you might take to provide XMTP group chat invite links in your app. These are just proposals and the actual implementation direction and details are specific to your app and your goals.
@@ -19,24 +22,30 @@ These diagrams help illustrate the sequence of interactions between users and pa
 
 #### Option 1: Automatic join via silent push notification to the link creator
 
-<img
-  src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Automatic-Join-via-Silent-Push-to-Link-Creator.png"
-  alt="Sequence diagram for Automatic join via silent push notification to the link creator"
-/>
+<Zoom>
+  <img
+    src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Automatic-Join-via-Silent-Push-to-Link-Creator.png"
+    alt="Sequence diagram for Automatic join via silent push notification to the link creator"
+  />
+</Zoom>
 
 #### Option 2: Automatic join via silent push notification to all group members
 
-<img
-  src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Automatic-Join-via-Silent-Push-to-All-Group-Members.png"
-  alt="Sequence diagram for Automatic join via silent push notification to all group members"
-/>
+<Zoom>
+  <img
+    src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Automatic-Join-via-Silent-Push-to-All-Group-Members.png"
+    alt="Sequence diagram for Automatic join via silent push notification to all group members"
+  />
+</Zoom>
 
 #### Option 3: Manual join via push notification to the link creator
 
-<img
-  src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Manual-Join-via-Push-Notification-to-Link-Creator.png"
-  alt="Sequence diagram for Manual join via push notification to the link creator"
-/>
+<Zoom>
+  <img
+    src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/Manual-Join-via-Push-Notification-to-Link-Creator.png"
+    alt="Sequence diagram for Manual join via push notification to the link creator"
+  />
+</Zoom>
 
 ## Create a group invite link
 

docs/pages/network/network-nodes.mdx

@@ -18,24 +18,9 @@ The following table lists the nodes currently registered to power the XMTP testn
 
 Here is a map of node locations:
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '56.25%',
-    height: 0,
-    overflow: 'hidden',
-  }}
->
+<div className="responsive-iframe-container">
   <iframe
     src="https://www.google.com/maps/d/embed?mid=18y4nFTXQKdgiSJCQbEGl5dojPoHL3LQ&ehbc=2E312F&noprof=1"
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      border: 0,
-    }}
     allowFullScreen=""
     loading="lazy"
   ></iframe>

docs/pages/protocol/cursors.mdx

@@ -1,3 +1,5 @@
+import Mermaid from '../../components/Mermaid';
+
 # Cursors with XMTP
 
 This document explains the concept of **cursors** as they relate to message synchronization on the XMTP network. Cursors are a fundamental part of how XMTP clients efficiently fetch new messages and maintain state, particularly with the `sync()` family of functions.
@@ -43,6 +45,28 @@ Each `sync()` function corresponds to a different type of cursor:
 
 For example, here is a sequence diagram illustrating how cursors operate with `conversation.sync()`:
 
-![Sequence diagram showing cursor flow during conversation.sync() operation, illustrating how cursors track message positions and enable incremental synchronization](https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/cursor-flow.png)
+<div className="diagram-white-bg">
+  <Mermaid
+    id="cursors"
+    chart={`
+      sequenceDiagram
+        participant Client as Client <br> (Stores cursor)
+        participant Network as Network <br> (Stores group topic)
+
+        Note over Client: No cursor for topic yet
+        Client ->> Network: Initial conversation.sync()
+        Network ->> Client: Returns all messages from topic <br> (Msg1, Msg2, Msg3)
+        Note over Client: Stores new cursor for topic
+        Client ->> Client: Cursor points after Msg3
+        Note over Network: New messages arrive on group topic
+        Network ->> Client: streamAllMessages() <br> (Msg4, Msg5, Msg6)
+        Note over Client: Cursor unaffected by stream
+        Client ->> Network: Subsequent conversation.sync() <br> (Sends stored cursor from after Msg3)
+        Network ->> Client: Returns messages that occurred after cursor <br> (Msg4, Msg5, Msg6)
+        Note over Client: Advances cursor for topic
+        Client ->> Client: Cursor points after Msg6
+    `}
+  />
+</div>
 
 By understanding cursors, you can better reason about the behavior of your app's synchronization logic and the data being transferred from the XMTP network.

docs/styles.css

@@ -603,6 +603,30 @@ li ol ~ p {
   text-align: center;
 }
 
+/* Responsive iframe container */
+.responsive-iframe-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+}
+
+.responsive-iframe-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* White background container for diagrams */
+.diagram-white-bg {
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+}
+
 /* styles/global.css or wherever you include global styles */
 .mermaid {
   max-width: 100%;

package.json

@@ -20,7 +20,7 @@
     "react-dom": "^19.0.0",
     "react-medium-image-zoom": "^5.2.14",
     "react-router": "^7.8.2",
-    "vocs": "^1.0.13"
+    "vocs": "https://github.com/sashaaldrick/vocs/releases/download/v1.0.13-search-fix-release/vocs-1.0.13-search-fix.tgz"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",