Merge branch 'frames' into staging

docs/src/.vuepress/theme/configs/default_sidebar_config.js

@@ -104,15 +104,6 @@ module.exports = [
         title: "Release Notes",
         path: "/gateways/ar-io-node/release-notes",
       },
-      {
-        title: "Experimental",
-        children: [
-          {
-            title: "Farcaster Frames",
-            path: "/gateways/ar-io-node/experimental/frames",
-          },
-        ],
-      },
     ],
   },
   // {
@@ -193,6 +184,10 @@ module.exports = [
             title: "AO ANT",
             path: "/experimental/ao-ant",
           },
+          {
+            title: "Farcaster Frames",
+            path: "/gateways/ar-io-node/experimental/frames",
+          },
         ],
       },
       // {

docs/src/gateways/ar-io-node/experimental/frames.md

@@ -6,12 +6,27 @@ permalink: '/experimental/frames'
 
 ## Overview
 
-[Frames by Farcaster](https://docs.farcaster.xyz/learn/what-is-farcaster/frames) is a standard for apps built with [OpenGraph](https://ogp.me/) that allows them to be interactive and easily authenticated. Because the standard relies on HTML Meta tags, they can easily be integrated into dApps hosted permanently on Arweave. Until recently, the full capabilities of Frames hosted on Arweave were not accessible through ar.io gateways. This is because a specific type of interaction between the frame and the hosting server, a `POST`, is needed to facilitate interactivity, and ar.io gateways did not support this interaction type.
+[Frames by Farcaster](https://docs.farcaster.xyz/learn/what-is-farcaster/frames) is a standard for posts, or "casts", that allows them to be interactive and easily authenticated self contained apps. Because the standard relies on HTML Meta tags, they can easily be integrated into dApps hosted permanently on Arweave. Until recently, the full capabilities of Frames hosted on Arweave were not accessible through ar.io gateways. This is because a specific type of interaction between the frame and the hosting server, a `POST`, is needed to facilitate interactivity, and ar.io gateways did not support this interaction type.
 
 ## Experimental Gateway Support
 
 With [Release 9](../release-notes.md#release-9---2024-04-10) of the ar.io gateways, a new experimental endpoint was added that supports the `POST` requests needed by frames. The `/local` endpoint on a gateway is used to facilitate experimental new features, as well as features which may be specific to an individual gateway. Operators and users should be fully aware that all endpoints stemming from `/local` are experimental, and may not always perform exactly as expected.
 
-### Frames
+## Using Frames
 
-The full path for accessing a frame hosted on Arweave is `<gateway>/local/farcaster/frame/<ID>` where `<gateway>` represents any ar.io gateway using release 9 or higher, and `<ID>` represents the txId of the frame on Arweave. 
+The full path for accessing a frame hosted on Arweave is `https://<gateway>/local/farcaster/frame/<ID>` where `<gateway>` represents any ar.io gateway using release 9 or higher, and `<ID>` represents the txId of the frame on Arweave. Since frames require full, absolute url paths, you will need to choose specific, supported gateway when you are embedding the frame in your cast. 
+
+Beyond that, simply embed the url for a frame in a cast and farcaster will be able to render it.
+
+## Example
+
+Arweave community member K, who is a pioneer in permaweb frames, created the below frame to demonstrate how permaweb frames can be interactive when embedded from ar.io gateways.
+
+The ID for the frame he uploaded to Arweave is `JFfYkpW5--I5UOxnJTYHhY9-F8X6WrvDsXQv8jYr0WE`. Using this, He made a Farcaster cast with the embedded url `https://erl5reuvxh56eokq5rtsknqhqwhx4f6f7jnlxq5roqx7enrl2fqq.ar-io.dev/local/farcaster/frame/JFfYkpW5--I5UOxnJTYHhY9-F8X6WrvDsXQv8jYr0WE/`. This full url includes the [sandbox](../../../concepts/sandboxing.md) prefix generated by an ar.io gateway when serving content.
+
+When embedding this full url in a cast, farcaster will render the content into a frame:
+
+<center><img :src='$withBase("/images/frame.png")'></center>
+
+
+View the original post [here](https://warpcast.com/fllstck/0x3d5fb763) to experience the interactivity first hand.