Adding a new DuneDashboard component to let you embed a Dune dashboard to a blog post. Well, technically any embedding. Example:

---
slug: my-blog-post
title: Introducing Dune Dashboards
authors: [flashbots]
---

import DuneDashboard from '@site/src/components/DuneDashboard/DuneDashboard'

If you'd like to embed a Dune dashboard to your post, just use this:

<DuneDashboard
  source="https://dune.com/embeds/3295088/5516700"
  label={<>You can add <code>HTML</code> labels!</>}
  aspectRatio="16/9" />

The component gives you control over:

Source: The URL for the embedded element
Label: Explanatory text added to the bottom of the embedding; Accepts HTML
Aspect Ratio: Control the proportions of the element

Instructions

Follow these steps to use the component in your post:

Import the component Add the following line to your blog post file after all the headers, as shown in the example above:
```
import DuneDashboard from '@site/src/components/DuneDashboard/DuneDashboard'
```
Get the embedded URL from Dune When viewing a dashboard you can click the "Share" button to see the option to "Embed Iframe". What we want is the src property from the provided iframe. Select and copy that URL to use with the component.
Add a component to your blog post Add a DuneDashboard component to your post using the URL you just copied as the source parameter:
```
<DuneDashboard source="https://dune.com/embeds/3295088/5516700"/>
```
Add a label - optional If you'd like to provide some context on what the dashboard is showing, you can add a label option to the component. The label can be plain text or HTML.

HTML labels need to be surrounded by {<>…</>}

The label is optional. If you omit it, the dashboard will still appear.
```
<DuneDashboard source="…" label="This is a plain text label"/>

<DuneDashboard source="…" label={<>This label is <code>HTML</code></>}/>
```
Customize the proportions - optional All dashboards are the same width but you can control how tall it is using the aspectRatio option.

By default all dashboards have a squareish 16/13 aspect ratio and you can make it taller or shorter by altering that ratio. For instance, a 16/5 aspect ratio would make for a shorter dashboard, while a 16/18 ratio would mean a taller one.

The custom aspect ratio is optional. If you omit it, the component will default to 16/13.
```
<DuneDashboard source="…" label="16/5 aspect ratio. Very short!" aspectRatio="16/5" />
<DuneDashboard source="…" label="16/18 aspect ratio. Very tall!" aspectRatio="16/18" />
```

Note on mobile view

The embedded dashboards will adapt to narrow phone screens to some extent, but Dune's support for it isn't great. The legend might overlap with the graph, or disappear entirely if there's not enough space.

It is strongly recommended that you test how the page looks on a phone screen and tweak the aspect ratio for any given dashboard accordingly. Sometimes it helps. Sometimes it doesn't. But it's important to keep that in mind.

If all else fails, a good label will get you very far:

As a last tip, you can use your browser's Dev Tools to mess with the page's dimensions, to simulate a phone screen! In Chrome, on Mac, you can hit ⌘+⌥+i to open Dev Tools, then ⌘+⇧+m to turn on the mobile view simulator.

flashbots / flashbots-writings-website

Add new DuneDashboard component #138

Instructions

Note on mobile view