Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Make progress on rendering custom samples over predefined samples
Browse files Browse the repository at this point in the history
  • Loading branch information
uppal101 committed Mar 8, 2018
1 parent 5f19a79 commit 310f039
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 42 deletions.
16 changes: 15 additions & 1 deletion packages/api-explorer/lib/create-docs.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,21 @@ module.exports = (oas, apiSetting) => {
slug: tag,
type: 'endpoint',
category: { apiSetting },
api: { method },
api: {
method,
examples: {
codes: [
{
language: 'javascript',
code: 'console.log(1);',
},
{
language: 'curl',
code: 'curl http://example.com',
},
],
},
},
swagger: { path },
// Uncomment this if you want some body content blocks
// body,
Expand Down
143 changes: 102 additions & 41 deletions packages/api-explorer/src/CodeSample.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,61 +5,122 @@ const Oas = require('./lib/Oas');

const { Operation } = Oas;

const syntaxHighlighter = require('@readme/syntax-highlighter');

const generateCodeSnippet = require('./lib/generate-code-snippet');

function CodeSample({ oas, setLanguage, operation, formData, language }) {
return (
<div className="code-sample tabber-parent">
{(() => {
if (!oas[extensions.SAMPLES_ENABLED]) {
return <div className="hub-no-code">No code samples available</div>;
}
class CodeSample extends React.Component {
constructor(props) {
super(props);
this.state = {
customCodeSampleTab: 0,
};
this.setCustomCodeSampleTab = this.setCustomCodeSampleTab.bind(this);
}
setCustomCodeSampleTab(index) {
this.setState({ customCodeSampleTab: index });
}

render() {
const { oas, setLanguage, operation, formData, language, customCodeSamples } = this.props;

const snippet = generateCodeSnippet(oas, operation, formData, language);
return (
<div className="code-sample tabber-parent">
{(() => {
if (!oas[extensions.SAMPLES_ENABLED]) {
return <div className="hub-no-code">No code samples available</div>;
}

return (
<div>
<ul className="code-sample-tabs">
{// TODO add `is-lang-${lang}` class, to body?
oas[extensions.SAMPLES_LANGUAGES].map(lang => (
<li key={lang}>
{
// eslint-disable-next-line jsx-a11y/href-no-hash
<a
href="#"
className={`hub-lang-switch-${lang}`}
onClick={e => {
e.preventDefault();
setLanguage(lang);
}}
>
{generateCodeSnippet.getLangName(lang)}
</a>
}
</li>
))}
</ul>
const snippet = generateCodeSnippet(oas, operation, formData, language);

<div className="hub-code-auto">
<pre
className={`tomorrow-night hub-lang hub-lang-${language}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: snippet }}
/>
if (customCodeSamples.length) {
return (
<div>
<ul className="code-sample-tabs">
{customCodeSamples.map(example => (
<li key={example.language}>
{
// eslint-disable-next-line jsx-a11y/href-no-hash
<a
href="#"
className={`hub-lang-switch-${example.language}`}
onClick={e => {
e.preventDefault();
setLanguage(example.language);
}}
>
{generateCodeSnippet.getLangName(example.language)}
</a>
}
</li>
))}
</ul>
<div className="code-sample-body">
{customCodeSamples.map((example, index) => {
return (
<pre
className="tomorrow-night tabber-body"
style={{ display: index === this.state.customCodeSampleTab ? 'block' : '' }}
key={index} // eslint-disable-line react/no-array-index-key
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: syntaxHighlighter(example.code, example.language, true),
}}
/>
);
})}
</div>
</div>
);
}
return (
<div>
<ul className="code-sample-tabs">
{// TODO add `is-lang-${lang}` class, to body?
oas[extensions.SAMPLES_LANGUAGES].map(lang => (
<li key={lang}>
{
// eslint-disable-next-line jsx-a11y/href-no-hash
<a
href="#"
className={`hub-lang-switch-${lang}`}
onClick={e => {
e.preventDefault();
setLanguage(lang);
}}
>
{generateCodeSnippet.getLangName(lang)}
</a>
}
</li>
))}
</ul>

<div className="hub-code-auto">
<pre
className={`tomorrow-night hub-lang hub-lang-${language}`}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: snippet }}
/>
</div>
</div>
</div>
);
})()}
</div>
);
);
})()}
</div>
);
}
}

CodeSample.propTypes = {
oas: PropTypes.instanceOf(Oas).isRequired,
setLanguage: PropTypes.func.isRequired,
operation: PropTypes.instanceOf(Operation).isRequired,
formData: PropTypes.shape({}).isRequired,
customCodeSamples: PropTypes.shape([]),
language: PropTypes.string.isRequired,
};

CodeSample.defaultProps = {
customCodeSamples: [],
};
module.exports = CodeSample;
4 changes: 4 additions & 0 deletions packages/api-explorer/src/Doc.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ class Doc extends React.Component {
operation={this.getOperation()}
formData={this.state.formData}
language={this.props.language}
customCodeSamples={this.props.doc.api.examples.codes}
/>
);
}
Expand Down Expand Up @@ -306,6 +307,9 @@ Doc.propTypes = {
type: PropTypes.string.isRequired,
api: PropTypes.shape({
method: PropTypes.string.isRequired,
examples: PropTypes.shape({
codes: PropTypes.arrayOf(PropTypes.shape({})),
}),
}),
swagger: PropTypes.shape({
path: PropTypes.string.isRequired,
Expand Down

0 comments on commit 310f039

Please sign in to comment.