search

elboman / gatsby-remark-embedded-codesandbox

A Gatsby Remark plugin for embedding Codesandbox given a folder of files
MIT License
32 stars 8 forks source link

Feature: Allow customization of more URL parts (or full URL?) #10

Open karlhorky opened 5 years ago

karlhorky commented 5 years ago

At the moment, some parts of the url such as embed are hard coded:

https://github.com/elboman/gatsby-remark-embedded-codesandbox/blob/db82541c2977c3ec613d446c2908b5d8e64daaaa/src/index.js#L135

It would be nice if this was more customizable. I could imagine either:

  1. An option for each different possible parameter
  2. A getUrl or similar function to override the URL completely

Use Case

I am including links in the page instead of embedded sandboxes, and want to link to the full sandbox page.

Workaround

Manually .replace the necessary parts of the URL in getIframe:

options: {
  // ...
  // Remove all embed options because we're not currently using embeds
  embedOptions: {},
  // Customize the output of the plugin:
  // - Use a link instead of an iFrame
  // - Link to the full Sandbox URL instead of the embed version
  getIframe: url =>
    `<a
       href="${url.replace('embed=1&','',)}"
       target="_blank"
       rel="nofollow,noopener,noreferrer"
     >CodeSandbox</a>`,
},