Add new DuneDashboard component

[gkoscky]

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:

1. 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'

2. 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.

3. 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"/>

4. 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></>}/>

5. 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flashbots-writings-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2023 5:15pm

[deadpine]

Looks great! Good job @gkoscky! I'd just change the background color for a more subtle one.