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

Commit

Permalink
Image block is working
Browse files Browse the repository at this point in the history
  • Loading branch information
uppal101 committed Sep 7, 2017
1 parent eb3dc84 commit 0c4c197
Show file tree
Hide file tree
Showing 12 changed files with 276 additions and 212 deletions.
2 changes: 2 additions & 0 deletions legacy-stuff/magic/image.jade
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@
img(src=image.image[0] alt=image.caption)
if image.caption
figcaption!= marked(image.caption)


71 changes: 70 additions & 1 deletion packages/api-explorer-ui/lib/create-docs.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,78 @@ module.exports = (oas, apiSetting) => {
body: `
[block:textarea]
{
"text": "This is an API header block"
"text": "This is text area"
}
[/block]
[block:html]
{
"html": "<p>This is an html</p>"
}
[/block]
[block:api-header]
{
"title": "This is cool header",
"sidebar": true
}
[/block]
[block:callout]
{
"type": "info",
"title": "Callout"
}
[/block]
[block:image]
{
"images": [
{
"image": [
"https://files.readme.io/924824e-fullsizeoutput_314.jpeg",
"fullsizeoutput_314.jpeg",
640,
1136,
"#c8b396"
]
}
]
}
[/block]
[block:code]
{
"codes": [
{
"code": "Code sample",
"language": "text",
"name": null
}
]
}
[/block]
[block:parameters]
{
"data": {
"h-0": "Table"
},
"cols": 3,
"rows": 1
}
[/block]
[block:embed]
{
"html": "<iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FjYjDqzZ4gjY%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjYjDqzZ4gjY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FjYjDqzZ4gjY%2Fhqdefault.jpg&key=f2aa6fc3595946d0afc3d76cbbd25dc3&type=text%2Fhtml&schema=youtube\\" width=\\"640\\" height=\\"480\\" scrolling=\\"no\\" frameborder=\\"0\\" allowfullscreen></iframe>",
"url": "https://www.youtube.com/watch?v=jYjDqzZ4gjY",
"title": "White kids Watch me whip school Chorus - chorus white kids singing Watch me whip",
"favicon": "https://s.ytimg.com/yts/img/ringo/img/favicon-vfl8qSV2F.ico",
"image": "https://i.ytimg.com/vi/jYjDqzZ4gjY/hqdefault.jpg",
"sidebar": true
}
[/block]
`,
});
}
Expand Down
13 changes: 13 additions & 0 deletions packages/api-explorer-ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/api-explorer-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"marked": "github:readmeio/marked",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-jsonschema-form": "^0.49.0"
"react-jsonschema-form": "^0.49.0",
"uslug": "^1.0.4"
},
"scripts": {
"lint": "eslint -f unix . --ext js --ext jsx",
Expand Down
5 changes: 3 additions & 2 deletions packages/api-explorer-ui/src/block-types/api-header.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import uslug from 'uslug';
const React = require('react');

const ApiHeader = ({block}) => {
return (
Expand All @@ -11,15 +12,15 @@ const ApiHeader = ({block}) => {
{
(block.data.type && block.data.type !== 'basic') && (
<span className={`pg-type-big pg-type type-${uslug(block.data.type)}`}>
{block.data.title}
</span>
)
}
{block.data.title}
<a className="fa fa-anchor" href={`#section-${uslug(block.data.title)}`}>
</a>
</h1>
</div>
)
);
};

module.exports = ApiHeader;
72 changes: 35 additions & 37 deletions packages/api-explorer-ui/src/block-types/callout.jsx
Original file line number Diff line number Diff line change
@@ -1,75 +1,73 @@
const React = require('react');
import Marked from '../lib/marked';

const CallOut = ({block}) => {
const c = block.data.title ? '' : 'no-title';

return (
<div className={`magic-block-callout type-${block.data/type} ${c} `}>
<div className={`magic-block-callout type-${block.data.type} ${c} `}>
{
(block.data.title) && (
<h3>
{
(block.data.type === 'info') && (
<i className="fa fa-info-circle" title="Info"></i>
<i className="fa fa-info-circle" title="Info"/>
)
}

{
(block.data.type ==='warning') && (
<i className="fa fa-exclamation-circle" title="Warning"></i>
<i className="fa fa-exclamation-circle" title="Warning"/>
)
}

{
(block.data.type ==='danger') && (
<i className="fa fa-exclamation-triangle" title="Danger"></i>
<i className="fa fa-exclamation-triangle" title="Danger"/>
)
}

{
(block.data.type ==='success') && (
<i className="fa fa-check-square" title="Success"></i>
<i className="fa fa-check-square" title="Success"/>
)
}

{block.data.title}
</h3>

(!block.data.title) && (
<span className="noTitleIcon">
{
(block.data.type ==='info') && (
<i className="fa fa-info-circle" title="Info"></i>
)
}

{
(block.data.type ==='warning') && (
<i className="fa fa-exclamation-circle" title="Warning"></i>
)
}

{
(block.data.type ==='danger') && (
<i className="fa fa-exclamation-triangle" title="Danger"></i>
)
}
(!block.data.title) && (
<span className="noTitleIcon">
{
(block.data.type ==='info') && (
<i className="fa fa-info-circle" title="Info"/>
)
}

{
(block.data.type ==='success') && (
<i className="fa fa-check-square" title="Success"></i>
)
}
{
(block.data.type ==='warning') && (
<i className="fa fa-exclamation-circle" title="Warning"/>
)
}

</span>
)
{
(block.data.type ==='danger') && (
<i className="fa fa-exclamation-triangle" title="Danger"/>
)
}

(block.data && block.data.body) && (
<div className="callout-body" dangerouslySetInnerHTML={Marked(block.data.body)}></div>
)
}
{
(block.data.type ==='success') && (
<i className="fa fa-check-square" title="Success"/>
)
}
</span>
)
(block.data && block.data.body) && (
<div className="callout-body"> {block.data.body}</div>
)
)}
</div>
)
);
};

module.exports = CallOut;
67 changes: 33 additions & 34 deletions packages/api-explorer-ui/src/block-types/code.jsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,59 @@
const syntaxHighlighter = require('../../../readme-syntax-highlighter');
const getLangName = require('../lib/generate-code-snippets');

const BlockCode = ({data, opts}) => {
(!data || !data.codes || data.codes.length === 0 || data.codes[0].code === '' || data.codes[0].code ==='{}') && (
opts = opts || {};
opts = opts || {})

(opts.label) && (
<label>
{opts.label}
</label>
)

<div className="magic-block-code">
(<div className="magic-block-code">
(!opts.hideHeaderOnOne || data.codes.length > 1) && (
<ul className="block-code-header">
for (code, i in data.codes) {
<li>
<a href="" onClick={`showCode${i}`} style={`active: ${i === 'tab'} `}>
{ (() => {
switch(code) {
case code.status : return (
<span className={`status-icon status-icon-${statusCodes(code.status)[2]}`}>
data.codes.map((code, i) => {
<li>
<a href="" onClick={`showCode${i}`} style={`active: ${i === 'tab'} `}>
{ (() => {
switch(code) {
case code.status : return (
<div>
<span className={`status-icon status-icon-${statusCodes(code.status)[2]}`}>
(!statusCodes(code.status)[3]) && (
{statusCodes (code.status)[0]}
)
</span>
<em>
{code.name ? code.name : statusCodes(code.status)[1]}
</em>
)
default: return (
switch(code) {
case code.name : return (
{code.name}
)
default: return (

)
}
{statusCodes (code.status)[0]}
)
</span>
<em>
{code.name ? code.name : statusCodes(code.status)[1]}
</em>
</div>
)
default: return
switch(code) {
case code.name : return
{code.name}
default: return
{getLangName(code.language)}
}
}) ()
}
</a>
</li>
}
}
}) ()}
</a>
</li>
})
</ul>
)

<div className="block-code-code">
for (code, i in data.codes) {
data.codes.map((code, i)=> {
<pre>
<code dangerouslySetInnerHTML={syntaxHighlighter(code.code, code.language, opts.dark)}></code>
<code>{syntaxHighlighter(code.code, code.language, opts.dark)}</code>
</pre>
}
</div>
</div>
)
</div>)
};

module.exports = BlockCode;
Loading

0 comments on commit 0c4c197

Please sign in to comment.