Front End Gno.land realm embed frame #327
Description
As a poster on dither, I'd like my realm /r/my-realm to render an interactive dialog when linked from a dither post.
Example Realm Func
func RenderFrame(path string) string {} // returns json
Example source here:
https://github.com/allinbits/labs/blob/main/projects/gnoland/gno.land/r/frames000/frames.gno
"CDN" folder hosted on github https://github.com/allinbits/gnoserve/tree/frame/static
Assuming we would run our own service like https://cdn.gno.services - but will work just like https://cdn.jsdelivr.net/gh/allinbits/gnoserve@frame/static/
RenderFrame MUST return valid json.
The only required fields are gnomark and cdn - all other keys are app-specific
NOTE that this is a minimal example rendering only a link w/ some in a nested dialog in the post
{
"gnomark": "gno-frame",
"frame": {
"title": "Frames",
"description": "A simple frame example",
"logo": "logo.svg",
"icon": "favicon.ico",
"version": "0.1.0",
"name": "GnoFrame",
"iconUrl": "favicon-32x32.png",
"homeUrl": "https://gno.land",
"imageUrl": "android-chrome-512x512.png",
"buttonTitle": "GnoFrame",
"splashImageUrl": "",
"splashBackgroundColor": "#ffffff"
},
"cdn": { "static": "/gh/allinbits/gnoserve@frame/static/" }
}
References
For reference this feature would be similar to https://docs.farcaster.xyz/developers/frames/spec
Front end should make an Eval Call to gnoland to retrieve data by calling RenderForm
Example render - should be inside an Object or Iframe (some safe Html to nest inside dither UX)
// Define the HTML template
const htmlTemplate = `<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.title}}</title>
<body>
{{.OpenTag}} // derived from the gnomark type e.g. <gno-frame>
{{.Body}} // RenderFrame json def added here after being validated
{{.CloseTag}} // </gno-frame>
<script src="{{.Src}}{{.Name}}.js"></script>
</body>
</html>`
Example frame declaration
Notice above - the CDN path is provided by the Frame Author, but we will control loading by whitelisting various repos or via automated scanning /verification
Example "Mini App" - clicking the initial post brings up the authorization to 'add to farcaster'
We don't necessarily have to do that if we control the CDN sources - but we could put the onus on the user to approve.
