Skip to content

Commit 1bb4d8e

Browse files
author
Ives van Hoorne
committed
Example of inline embed
1 parent 336415a commit 1bb4d8e

File tree

4 files changed

+132
-101
lines changed

4 files changed

+132
-101
lines changed

‎content/docs/uncontrolled-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
1010

1111
For example, this code accepts a single name in an uncontrolled component:
1212

13-
[Try it on CodeSandbox.](source:examples/uncontrolled-components/src/index.js{11,20})
13+
[Run the example.](source:examples/uncontrolled-components/src/index.js{11,20}?editorsize=70)
1414

1515
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
1616

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"gatsby-plugin-sharp": "^1.6.2",
3939
"gatsby-plugin-twitter": "^1.0.10",
4040
"gatsby-remark-autolink-headers": "^1.4.4",
41-
"gatsby-remark-codesandbox": "^1.2.16",
41+
"gatsby-remark-codesandbox": "^1.2.20",
4242
"gatsby-remark-copy-linked-files": "^1.5.2",
4343
"gatsby-remark-images": "^1.5.11",
4444
"gatsby-remark-prismjs": "^1.2.1",

‎src/components/MarkdownPage/MarkdownPage.js

Lines changed: 127 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -19,108 +19,139 @@ import toCommaSeparatedList from 'utils/toCommaSeparatedList';
1919
import {sharedStyles} from 'theme';
2020
import createOgUrl from 'utils/createOgUrl';
2121

22-
const MarkdownPage = ({
23-
authors,
24-
createLink,
25-
date,
26-
enableScrollSync,
27-
ogDescription,
28-
location,
29-
markdownRemark,
30-
sectionList,
31-
titlePostfix = '',
32-
}) => {
33-
const hasAuthors = authors.length > 0;
34-
const titlePrefix = markdownRemark.frontmatter.title || '';
35-
36-
return (
37-
<Flex
38-
direction="column"
39-
grow="1"
40-
shrink="0"
41-
halign="stretch"
42-
css={{
43-
width: '100%',
44-
flex: '1 0 auto',
45-
position: 'relative',
46-
zIndex: 0,
47-
}}>
48-
<TitleAndMetaTags
49-
ogDescription={ogDescription}
50-
ogUrl={createOgUrl(markdownRemark.fields.slug)}
51-
title={`${titlePrefix}${titlePostfix}`}
52-
/>
53-
<div css={{flex: '1 0 auto'}}>
54-
<Container>
55-
<div css={sharedStyles.articleLayout.container}>
56-
<Flex type="article" direction="column" grow="1" halign="stretch">
57-
<MarkdownHeader title={titlePrefix} />
58-
59-
{(date || hasAuthors) && (
60-
<div css={{marginTop: 15}}>
61-
{date}{' '}
62-
{hasAuthors && (
63-
<span>
64-
by{' '}
65-
{toCommaSeparatedList(authors, author => (
66-
<a
67-
css={sharedStyles.link}
68-
href={author.frontmatter.url}
69-
key={author.frontmatter.name}>
70-
{author.frontmatter.name}
71-
</a>
72-
))}
73-
</span>
74-
)}
75-
</div>
76-
)}
22+
class MarkdownPage extends React.Component {
23+
componentDidMount() {
24+
const codeSandboxLinks = document.querySelectorAll(
25+
"a[href^='https://codesandbox.io']",
26+
);
7727

78-
<div css={sharedStyles.articleLayout.content}>
79-
<div
80-
css={[sharedStyles.markdown]}
81-
dangerouslySetInnerHTML={{__html: markdownRemark.html}}
82-
/>
28+
codeSandboxLinks.forEach(link => {
29+
link.onclick = e => {
30+
const [codeBlock] = Array.prototype.filter.call(
31+
link.parentNode.children,
32+
node => node.className === 'gatsby-highlight',
33+
);
34+
35+
if (codeBlock) {
36+
const [child] = codeBlock.children;
37+
if (child && child.tagName !== 'IFRAME') {
38+
e.preventDefault();
39+
40+
link.textContent = 'Open in CodeSandbox.';
41+
codeBlock.innerHTML = `<iframe src="${link.href}&fontsize=14&view=split" style="width: calc(100% + 28px); margin: 0 0 -7px -13px; height:${codeBlock.getBoundingClientRect()
42+
.height}px; border:0; border-radius: 12px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
43+
}
44+
}
45+
};
46+
});
47+
}
8348

84-
{markdownRemark.fields.path && (
85-
<div css={{marginTop: 80}}>
86-
<a
87-
css={sharedStyles.articleLayout.editLink}
88-
href={`https://github.com/reactjs/reactjs.org/tree/master/content/${markdownRemark
89-
.fields.path}`}>
90-
Edit this page
91-
</a>
49+
render() {
50+
const {
51+
authors,
52+
createLink,
53+
date,
54+
enableScrollSync,
55+
ogDescription,
56+
location,
57+
markdownRemark,
58+
sectionList,
59+
titlePostfix = '',
60+
} = this.props;
61+
62+
const hasAuthors = authors.length > 0;
63+
const titlePrefix = markdownRemark.frontmatter.title || '';
64+
65+
return (
66+
<Flex
67+
direction="column"
68+
grow="1"
69+
shrink="0"
70+
halign="stretch"
71+
css={{
72+
width: '100%',
73+
flex: '1 0 auto',
74+
position: 'relative',
75+
zIndex: 0,
76+
}}>
77+
<TitleAndMetaTags
78+
ogDescription={ogDescription}
79+
ogUrl={createOgUrl(markdownRemark.fields.slug)}
80+
title={`${titlePrefix}${titlePostfix}`}
81+
/>
82+
<div css={{flex: '1 0 auto'}}>
83+
<Container>
84+
<div css={sharedStyles.articleLayout.container}>
85+
<Flex type="article" direction="column" grow="1" halign="stretch">
86+
<MarkdownHeader title={titlePrefix} />
87+
88+
{(date || hasAuthors) && (
89+
<div css={{marginTop: 15}}>
90+
{date}{' '}
91+
{hasAuthors && (
92+
<span>
93+
by{' '}
94+
{toCommaSeparatedList(authors, author => (
95+
<a
96+
css={sharedStyles.link}
97+
href={author.frontmatter.url}
98+
key={author.frontmatter.name}>
99+
{author.frontmatter.name}
100+
</a>
101+
))}
102+
</span>
103+
)}
92104
</div>
93105
)}
106+
107+
<div css={sharedStyles.articleLayout.content}>
108+
<div
109+
css={[sharedStyles.markdown]}
110+
dangerouslySetInnerHTML={{__html: markdownRemark.html}}
111+
/>
112+
113+
{markdownRemark.fields.path && (
114+
<div css={{marginTop: 80}}>
115+
<a
116+
css={sharedStyles.articleLayout.editLink}
117+
href={`https://github.com/reactjs/reactjs.org/tree/master/content/${markdownRemark
118+
.fields.path}`}>
119+
Edit this page
120+
</a>
121+
</div>
122+
)}
123+
</div>
124+
</Flex>
125+
126+
<div css={sharedStyles.articleLayout.sidebar}>
127+
<StickyResponsiveSidebar
128+
enableScrollSync={enableScrollSync}
129+
createLink={createLink}
130+
defaultActiveSection={findSectionForPath(
131+
location.pathname,
132+
sectionList,
133+
)}
134+
location={location}
135+
sectionList={sectionList}
136+
/>
94137
</div>
95-
</Flex>
96-
97-
<div css={sharedStyles.articleLayout.sidebar}>
98-
<StickyResponsiveSidebar
99-
enableScrollSync={enableScrollSync}
100-
createLink={createLink}
101-
defaultActiveSection={findSectionForPath(
102-
location.pathname,
103-
sectionList,
104-
)}
105-
location={location}
106-
sectionList={sectionList}
107-
/>
108138
</div>
109-
</div>
110-
</Container>
111-
</div>
112-
113-
{/* TODO Read prev/next from index map, not this way */}
114-
{(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) && (
115-
<NavigationFooter
116-
location={location}
117-
next={markdownRemark.frontmatter.next}
118-
prev={markdownRemark.frontmatter.prev}
119-
/>
120-
)}
121-
</Flex>
122-
);
123-
};
139+
</Container>
140+
</div>
141+
142+
{/* TODO Read prev/next from index map, not this way */}
143+
{(markdownRemark.frontmatter.next ||
144+
markdownRemark.frontmatter.prev) && (
145+
<NavigationFooter
146+
location={location}
147+
next={markdownRemark.frontmatter.next}
148+
prev={markdownRemark.frontmatter.prev}
149+
/>
150+
)}
151+
</Flex>
152+
);
153+
}
154+
}
124155

125156
MarkdownPage.defaultProps = {
126157
authors: [],

‎yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3934,9 +3934,9 @@ gatsby-remark-autolink-headers@^1.4.4:
39343934
mdast-util-to-string "^1.0.2"
39353935
unist-util-visit "^1.1.1"
39363936

3937-
gatsby-remark-codesandbox@^1.2.16:
3938-
version "1.2.16"
3939-
resolved "https://registry.yarnpkg.com/gatsby-remark-codesandbox/-/gatsby-remark-codesandbox-1.2.16.tgz#0c8ae3b1666f2d50d25163c0e2f068b236a5e8c6"
3937+
gatsby-remark-codesandbox@^1.2.20:
3938+
version "1.2.20"
3939+
resolved "https://registry.yarnpkg.com/gatsby-remark-codesandbox/-/gatsby-remark-codesandbox-1.2.20.tgz#aad09fd6d5d97642a98a79461873fe6657b02096"
39403940
dependencies:
39413941
babel-runtime "^6.26.0"
39423942
git-branch "^1.0.0"

0 commit comments

Comments
 (0)