Prototype embed blocks

[nerik]

Adds an <Embed /> block that instantiate an iframe for the use case described here.

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	6662edb
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/64d4aa3ec212c700082ce63c
😎 Deploy Preview	https://deploy-preview-602--veda-ui.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[danielfdsilva]

@nerik This is definitely a great enhancement to shorten the gap between dashboard and other tools.

I think maybe we should maintain the block/figure structure to have more control and consistency. This would result in a behavior like the Map. What do you think?

<Block>
  <Figure>
    <Embed />
  </Figure>
</Block>

I also tried very quickly to add a window frame (<BrowserFrame> component) to contain the embed, and I think it looks kind of nice. Thoughts?

[nerik]

@danielfdsilva Excellent suggestions, thanks 👍

While using a BrowserFrame is definitely an improvement, I think this could use a specifically designed wrapper, maybe showing the original URL (with a link to access on another tab, maybe a title and author)

Thoughts @ricardoduplos ?

[danielfdsilva]

@nerik I like that idea. Maybe instead of making the url fully visible, we can just offer a way to open in a new tab? Otherwise it may look to much like a browser inside a page.

[hanbyul-here]

Wah it looks so nice 👏 and this will encourage editors to bring in their own content. But I have an open-ended question about how much content should go to iframe vs staying in mdx.

I somehow thought iframe would be strictly about the map, and all other text-based contents will be in mdx. So in the fire example discovery, the text contents such as

Recent fires
Showing large fires that were burning when the fire atlas was last updated. Only includes fires with an area greater than 2.

You can learn more about how to access [this data](https://firenrt.delta-backend.com/collections/public.eis_fire_snapshot_perimeter_nrt) directly in [this VEDA documentation page](https://nasa-impact.github.io/veda-docs/notebooks/tutorials/mapping-fires.html).

will be in mdx file, not in iframed contents. I was thinking in this way so editors don't need to think about making the fonts rights etc. This also means that we eventually need to be 'the editorial desk' to give suggestions for editing iframe contents... which I am unsure is a good idea. 🤔

[nerik]

@hanbyul-here Thanks. Good catch. We discussed with @jsignell and she removed the text content from the iframe, which I integrated into the story itself - see NASA-IMPACT/veda-config#295

@danielfdsilva Also added a link to open in a new tab.

already reviewed by @hanbyul-here