Merge pull request #692 from xmtp/frames_docs

Frames Hackathon Update

docs/build/frames.md

@@ -7,7 +7,7 @@ description: Making Frames Interoperable
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-# Render Chat Frames with XMTP
+# Chat Frames with XMTP
 
 The XMTP community has been actively discussing and implementing ways to enhance user experience by supporting frames within XMTP applications. An effort in this direction is detailed in a community post [Supporting Frames in XMTP](https://community.xmtp.org/t/supporting-frames-in-xmtp/535).
 
@@ -17,7 +17,36 @@ Your browser does not support the video tag.
 
 _This video shows how its implemented in [xmtp.chat](https://xmtp.chat/inbox)_
 
-## Overview
+:::info Open Frames
+
+XMTP contributes to the Open Frames standard, fostering interoperability and open standards.
+
+- [**Open Frames Spec**](https://github.com/open-frames/standard/blob/v0.0.1/README.md): Make Farcaster Frames interoperable.
+- [**Awesome Open Frames**](https://github.com/open-frames/awesome-open-frames.git): Curated list of Open Frames compatible Frames.
+
+:::
+
+---
+
+## Third Party Tools
+
+These tools already provide integration support interoperable Frames.
+
+### Tooling
+
+Third party frameworks and tooling who have already integrated XMTP signing into their offerings:
+
+- [**OnChainKit**](https://onchainkit.xyz/xmtp/introduction): Discover how OnchainKit seamlessly incorporates XMTP payloads.
+- [**Frames.js**](https://framesjs.org/reference/js/xmtp): Learn about the integration of XMTP payloads within FrameJS.
+
+### Clients
+
+Some clients are fully XMTP compatible and can render Frames signing XMTP payloads:
+
+- [**Dev Inbox**](https://dev-inbox.chat/): Engage with Frames firsthand by trying them on web.
+- [**Converse**](https://converse.xyz): Converse is Frame compatible. Send your Frames through Converse.
+
+## Getting started
 
 These are the foundational tools that allow developers to create, sign, and manage Frames. The protocol libraries are essential for interacting with the XMTP network at a lower level, handling the creation of frames, signing payloads, and managing frame actions. Key aspects include:
 
@@ -26,14 +55,6 @@ These are the foundational tools that allow developers to create, sign, and mana
 - [**Validate incoming messages**](#validate-incoming-messages): Implements security measures to authenticate and secure frame actions, ensuring the integrity and origin of frame interactions.
 - [**Rendering Chat Frames in your application**](/docs/tutorials/render-frames): This tutorial covers the practical aspects of rendering these frames within an application.
 - [**Exploring Chat Frames Use Cases**](/docs/use-cases/frames): Dive into a comprehensive exploration of how Frames can be innovatively applied across different sectors for inspiration.
-- [**OnChainKit Documentation**](https://onchainkit.xyz/xmtp/introduction): Discover how OnchainKit seamlessly incorporates XMTP payloads.
-- [**Frames.js Documentation**](https://framesjs.org/reference/js/xmtp): Learn about the integration of XMTP payloads within FrameJS.
-- [**Experience XMTP on xmtp.chat**](https://xmtp.chat/): Engage with Frames firsthand by trying them on the official XMTP client platform.
-- [**Open Frames Initiative**](https://github.com/open-frames/standard/blob/v0.0.1/README.md): XMTP contributes to the Open Frames standard, fostering interoperability and open standards.
-
-## Getting started
-
-Welcome to the XMTP Frames guide. Here, you'll learn to integrate Frames into your apps for a richer chat experience. Discover how to manage and render Frames, ensuring secure and interactive communication.
 
 ### Protocol compatibility
 

docs/build/user-consent.md

@@ -1,5 +1,5 @@
 ---
-sidebar_label: Allow/Block
+sidebar_label: Allow/block
 sidebar_position: 5.5
 hide_table_of_contents: false
 ---
@@ -10,7 +10,7 @@ import requeststab from '/docs/build/img/requests-tab.png';
 import messagestab from '/docs/build/img/messages-tab.png';
 import consentlogic from '/docs/build/img/consent-state-logic.png';
 
-# Universal Allow/Block Prefs
+# Universal allow/block Prefs
 
 The allow/block feature enables your app to request and respect user consent preferences. With this feature, another blockchain account address registered on the XMTP network can have one of three consent preference values:
 

docs/hackathons.mdx

@@ -1,6 +1,6 @@
 ---
-sidebar_label: Hackathons
-sidebar_position: 50
+sidebar_label: Frameworks 🖼️
+sidebar_position: 3
 ---
 
 # Hackathons
@@ -13,60 +13,44 @@ The best and fastest way to get support will be the [**XMTP Discord**](https://d
 
 </div>
 
-### Introducing Chat Frames
+:::info Open Frames
 
-Make Frames interoperable and embed interactive experiences within your messaging apps:
+XMTP contributes to the Open Frames standard, fostering interoperability and open standards.
 
-**Ideas**:
+- [**Open Frames Spec**](https://github.com/open-frames/standard/blob/v0.0.1/README.md): Make Farcaster Frames interoperable.
+- [**Awesome Open Frames**](https://github.com/open-frames/awesome-open-frames.git): Curated list of Open Frames compatible Frames.
 
-- dApp integrations 🔌
-- Fun and Games 🕹️
-- Educational Tools 🛠
-- Tipping & Commerce 💰
-- [Rock Paper Scissors](https://github.com/Unshut-Labs/xmtp-frame-rock-paper-scissors)
-- [XMTP Polls](https://github.com/xmtp-labs/fc-polls)
-
-**Resources**:
-
-- [Documentation](/docs/build/frames)
-- [Use cases](/docs/use-cases/frames)
-- [OnChainKit Docs](https://onchainkit.xyz/xmtp/introduction)
-- [Frames.js Docs](https://framesjs.org/reference/js/xmtp)
-- [Try them on xmtp.chat](https://xmtp.chat/)
+:::
 
-### Build token gated group chat with XMTP
+---
 
-Exciting news! Token-gated group chats are now available on the Dev Network, ideal for NFT collections, ERC-20 token holders, and exclusive communities. These groups provide unique content and networking opportunities.
+## Third Party Tools
 
-**Getting Started:**
+These tools already provide integration support interoperable Frames.
 
-1. **Set Up Your Group Chat**: Quickly deploy your group chat using our CLI.
-2. **Add your logic**: Define your group's access logic.
-3. **Create a Group Link**: Easily share access to your group.
+### Tooling
 
-**Resources**:
+Third party frameworks and tooling who have already integrated XMTP signing into their offerings:
 
-- [Documentation](/docs/build/group-chat)
-- [Use cases](/docs/use-cases/groups)
-- [React Native Example App](https://github.com/xmtp-labs/xmtp-inbox-mobile)
-- [Tutorial: Building Token-Gated Group Chats](/docs/tutorials/token-gated-group-chat)
-- [React Native Quickstart](https://github.com/xmtp/xmtp-quickstart-reactnative)
+- [**OnChainKit**](https://onchainkit.xyz/xmtp/introduction): Discover how OnchainKit seamlessly incorporates XMTP payloads.
+- [**Frames.js**](https://framesjs.org/reference/js/xmtp): Learn about the integration of XMTP payloads within FrameJS.
 
-### Universal Allow/Block Prefs
+### Clients
 
-[XIP-42](https://community.xmtp.org/t/xip-42-universal-allow-and-block-preferences/544) establishes `allow` and `block` permission preferences, enabling users to explicitly specify which contacts should be able to reach them and which should be blocked across all inbox apps.
+Some clients are fully XMTP compatible and can render Frames signing XMTP payloads.
 
-**Tutorials**:
+- [**Dev Inbox**](https://dev-inbox.chat/): Engage with Frames firsthand by trying them on web.
+- [**Converse**](https://converse.xyz): Converse is Frame compatible. Send your Frames through Converse.
 
-- [Broadcast Tutorial](/docs/tutorials/portable-consent/broadcast)
-- [Subscribe Tutorial](/docs/tutorials/portable-consent/subscribe)
-- Building a request inbox in [JavaScript](/docs/tutorials/portable-consent/request-inbox) or [React Rative](/docs/tutorials/portable-consent/request-inbox-rn)
+## Getting started
 
-**Resources**:
+These are the foundational tools that allow developers to create, sign, and manage Frames. The protocol libraries are essential for interacting with the XMTP network at a lower level, handling the creation of frames, signing payloads, and managing frame actions. Key aspects include:
 
-- [Documentation](/docs/build/user-consent)
-- [Spam](/docs/build/spam)
-- [Warpcast Thread](https://warpcast.com/0xdesigner/0x52fa0e7d)
+- [**Declare Protocol Compatibility**](#protocol-compatibility): Ensure your application can interact with Frames by declaring protocol compatibility.
+- [**Manage requests**](#manage-requests): Checks if a URL in message content is suitable for frame processing.
+- [**Validate incoming messages**](#validate-incoming-messages): Implements security measures to authenticate and secure frame actions, ensuring the integrity and origin of frame interactions.
+- [**Rendering Chat Frames in your application**](/docs/tutorials/render-frames): This tutorial covers the practical aspects of rendering these frames within an application.
+- [**Exploring Chat Frames Use Cases**](/docs/use-cases/frames): Dive into a comprehensive exploration of how Frames can be innovatively applied across different sectors for inspiration.
 
 ### More Resources
 

docs/tutorials/portable-consent/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Allow / block",
+  "label": "Allow/block",
   "position": 11,
   "collapsible": true,
   "collapsed": true

docs/tutorials/render-frames.md

@@ -10,6 +10,8 @@ import TabItem from "@theme/TabItem";
 
 This part of the guide focuses on how to render Frames within your application, making the frames interactive and visually integrated. It includes:
 
+<div class=" rabbit  p-5 ">⌛️ <b>Want to race ahead?</b> Jump to the quick setup [xmtp-quickstart-chat-frames](https://github.com/xmtp/xmtp-quickstart-chat-frames).</div>
+
 <video controls src="https://github.com/xmtp/xmtp-quickstart-node/assets/1447073/7cc4fe16-3e2b-4d81-ade9-217095e52af2" width="100%" type="video/mp4">
 Your browser does not support the video tag.
 </video>

static/js/myjs.js

@@ -22,9 +22,10 @@ window.onload = function () {
   // Add class to nav items based on their text
   navItems.forEach((item) => {
     if (
-      item.innerText === "User consent" ||
       item.innerText === "Group chat" ||
-      item.innerText === "Spam"
+      item.innerText === "Token gated group chat" ||
+      item.innerText === "Allow/block" ||
+      item.innerText === "Chat Frames"
     ) {
       item.classList.add("new");
     }