Skip to content

chore: use gatsby-remark-embedder fully to transform all embeds in docs #5658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 13, 2021
Merged

chore: use gatsby-remark-embedder fully to transform all embeds in docs #5658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/common/src/components/Preview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -625,7 +625,7 @@ class BasePreview extends React.PureComponent<Props, State> {
<StyledFrame
key="PREVIEW"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
src={this.state.url}
ref={this.setIframeElement}
title={getSandboxName(sandbox)}
Expand Down
10 changes: 5 additions & 5 deletions packages/homepage/content/docs/2-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ URL to the file hosted externally. For example:

#### Folders

You can create folders by naming the file with a `/` in the name, allowing you to
structure your application how you want:
You can create folders by naming the file with a `/` in the name, allowing you
to structure your application how you want:

```json
{
Expand Down Expand Up @@ -130,7 +130,7 @@ const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${paramet

#### Example Sandbox

<iframe src="https://codesandbox.io/embed/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1

### POST Form

Expand All @@ -139,7 +139,7 @@ show a form. With a POST request you can create bigger sandboxes.

#### Example Sandbox

<iframe src="https://codesandbox.io/embed/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1

### Define without render

Expand All @@ -160,7 +160,7 @@ Both `get` and `post` requests are supported.
You can also create a sandbox using an XHR request, like using `fetch`. An
example sandbox of that is here:

<iframe src="https://codesandbox.io/embed/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1

## Import Single Components

Expand Down
12 changes: 8 additions & 4 deletions packages/homepage/content/docs/2-embedding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ These are some examples of embeds, based on their properties.

This embed is focused on being as light as possible:

`https://codesandbox.io/embed/new?codemirror=1`
```md
https://codesandbox.io/embed/new?codemirror=1
```

Use this code to embed:

Expand All @@ -79,14 +81,16 @@ Use this code to embed:

That will give to a result like this:

<iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/new?codemirror=1

### Code Example Embed

You can also use CodeSandbox to show code examples, with highlighted lines. This
is only supported with the CodeMirror editor currently:

`https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14`
```md
https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14
```

Use this code to embed:

Expand All @@ -101,4 +105,4 @@ Use this code to embed:

That will give to a result like this:

<iframe src="https://codesandbox.io/embed/new?codemirror=1&highlights=6,7,8,9" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/new?codemirror=1&highlights=6,7,8,9
6 changes: 3 additions & 3 deletions packages/homepage/content/docs/2-importing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${paramet

#### Example Sandbox

<iframe src="https://codesandbox.io/embed/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1

### POST Form

Expand All @@ -207,7 +207,7 @@ show a form. With a POST request you can create bigger sandboxes.

#### Example Sandbox

<iframe src="https://codesandbox.io/embed/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1

### Define without render

Expand All @@ -228,7 +228,7 @@ Both `get` and `post` requests are supported.
You can also create a sandbox using an XHR request, like using `fetch`. An
example sandbox of that is here:

<iframe src="https://codesandbox.io/embed/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1

## Import Single Components

Expand Down
2 changes: 1 addition & 1 deletion packages/homepage/content/docs/2-tests.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,4 @@ And will also show squiggles in the editor:

Here's a failing Jest test running in a sandbox:

<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
https://codesandbox.io/s/n9m2w9q8x0?view=preview
8 changes: 1 addition & 7 deletions packages/homepage/content/docs/5-secrets.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,7 @@ the example above, we can read the API key from
secrets in your server-side code (though obviously you wouldn't want to share a
secret like this, it justs illustrates how to access them).

<iframe
src="https://codesandbox.io/embed/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="broken-resonance-35lyl"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
https://codesandbox.io/s/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark

## Editing secrets

Expand Down