Skip to content
This repository was archived by the owner on Oct 30, 2023. It is now read-only.

Commit 67b0970

Browse files
author
Alan Shaw
authored
chore: update ipfs dep (#267)
This PR updates ipfs to 0.37.0-rc.0. Due to the constructor changes in this version the examples have also been updated. This required an update of `react-live` to a version that supports async/await. Unfortunately in this new version styling for syntax highlighting is done by "theme" objects not CSS so there are a bunch of changes that are fallout from this. Notably, I've updated the `syntax-highlighter` component to use the same highlight method as `react-live` so that we can re-use the theme object and not also import the theme as a CSS file. I also switchied to using the `Prism` instance provided by `prism-react-renderer` that `react-live` uses instead of importing `prismjs`. This should reduce overall bundle size. License: MIT Signed-off-by: Alan Shaw <[email protected]>
1 parent 8c6ab55 commit 67b0970

File tree

11 files changed

+2231
-1051
lines changed

11 files changed

+2231
-1051
lines changed

‎package-lock.json‎

Lines changed: 2067 additions & 957 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,16 @@
3535
"gatsby-plugin-postcss": "^2.0.0",
3636
"gatsby-plugin-react-helmet": "^3.0.1",
3737
"intersection-observer": "~0.5.0",
38-
"ipfs": "~0.36.1",
38+
"ipfs": "~0.37.0",
3939
"normalize.css": "^8.0.0",
4040
"postcss-import": "^12.0.0",
4141
"postcss-preset-moxy": "^2.3.1",
42-
"prismjs": "^1.15.0",
4342
"prop-types": "^15.6.2",
4443
"react": "^16.5.1",
4544
"react-dom": "^16.5.1",
4645
"react-helmet": "^5.2.0",
4746
"react-intl": "^2.7.1",
48-
"react-live": "^1.12.0",
47+
"react-live": "^2.1.2",
4948
"react-markdown": "^4.0.3",
5049
"react-resize-detector": "^3.1.3",
5150
"react-scroll-to-component": "^1.0.2",

‎src/shared/components/getting-started-section/index.js‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -74,35 +74,38 @@ class GettingStarted extends Component {
7474
<ReactMarkdown className={ styles.sectionDescription } source={ messages.gettingStarted.sectionDesc } />
7575
<div className={ styles.panel } >
7676
<p className={ styles.liveSnippetTitle }>{ messages.gettingStarted.addDataToIPFS }</p>
77-
<LiveProvider key="add" className={ styles.liveSnippet } code={ codeAdd } scope={ this.scopeAdd } mountStylesheet={ false } transformCode={ transformCode }>
78-
<div className={ styles.liveSnippetEditorContainer }>
79-
<LiveEditor name="add" setRun={ this.handleSetRun } className={ 'language-js ' + styles.liveSnippetEditor }/>
80-
<button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('add') }>Run</button>
81-
</div>
82-
<div className={ styles.liveSnippetPreview } >
83-
<p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
84-
<pre>
85-
<code>{ outputAdd }</code>
86-
</pre>
87-
{ (ipfsLoaded && runAdd) && <LivePreview/> }
88-
{ ipfsLoaded && <LiveError/> }
77+
<LiveProvider key="add" code={ codeAdd } scope={ this.scopeAdd } mountStylesheet={ false } transformCode={ transformCode }>
78+
<div className={ styles.liveSnippet }>
79+
<div className={ styles.liveSnippetEditorContainer }>
80+
<LiveEditor name="add" setRun={ this.handleSetRun } language='js' />
81+
<button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('add') }>Run</button>
82+
</div>
83+
<div className={ styles.liveSnippetPreview } >
84+
<p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
85+
<pre>
86+
<code>{ outputAdd }</code>
87+
</pre>
88+
{ (ipfsLoaded && runAdd) && <LivePreview/> }
89+
{ ipfsLoaded && <LiveError/> }
90+
</div>
8991
</div>
9092
</LiveProvider>
9193
<p className={ styles.liveSnippetTitle }>{ messages.gettingStarted.getDataFromIPFS }</p>
9294
<p className={ styles.liveSnippetSubtitle }>{ messages.gettingStarted.usingJavascript }</p>
93-
<LiveProvider key="get" className={ styles.liveSnippet } code={ codeGet(cid) } scope={ this.scopeGet } mountStylesheet={ false } transformCode={ transformCode }>
94-
95-
<div className={ styles.liveSnippetEditorContainer }>
96-
<LiveEditor name="get" setRun={ this.handleSetRun } className={ 'language-js ' + styles.liveSnippetEditor }/>
97-
<button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('get') }>Run</button>
98-
</div>
99-
<div className={ styles.liveSnippetPreview } >
100-
<p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
101-
<pre>
102-
<code>{ outputGet }</code>
103-
</pre>
104-
{ (ipfsLoaded && runGet) && <LivePreview/> }
105-
{ ipfsLoaded && <LiveError/> }
95+
<LiveProvider key="get" code={ codeGet(cid) } scope={ this.scopeGet } mountStylesheet={ false } transformCode={ transformCode }>
96+
<div className={ styles.liveSnippet }>
97+
<div className={ styles.liveSnippetEditorContainer }>
98+
<LiveEditor name="get" setRun={ this.handleSetRun } language='js' />
99+
<button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('get') }>Run</button>
100+
</div>
101+
<div className={ styles.liveSnippetPreview } >
102+
<p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
103+
<pre>
104+
<code>{ outputGet }</code>
105+
</pre>
106+
{ (ipfsLoaded && runGet) && <LivePreview/> }
107+
{ ipfsLoaded && <LiveError/> }
108+
</div>
106109
</div>
107110
</LiveProvider>
108111
<p className={ styles.liveSnippetSubtitle }>{ messages.gettingStarted.usingCli }</p>

‎src/shared/components/getting-started-section/index.module.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,6 @@
7474
border-radius: 2px;
7575
}
7676

77-
.liveSnippet pre[class*="language-"] {
78-
margin: 0;
79-
border-radius: 0;
80-
}
81-
8277
.liveSnippetTitle {
8378
color: var(--color-syntax-highlighter-background);
8479
font-size: 28px;
@@ -98,12 +93,6 @@
9893
margin-bottom: 75px;
9994
}
10095

101-
.liveSnippetEditor {
102-
position: relative;
103-
outline: none;
104-
background: var(--color-syntax-highlighter-background) !important;
105-
}
106-
10796
.liveSnippetPreview {
10897
min-height: 100px;
10998
padding: 1em;

‎src/shared/components/nav-bar/desktop/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class DesktopNavBar extends Component {
2121
<Link href="https://github.com/ipfs/js-ipfs/tree/master/examples#js-ipfs-examples-and-tutorials">
2222
{ messages.navBar.item2 }
2323
</Link>
24-
<Link href="https://github.com/ipfs/interface-ipfs-core/tree/master/SPEC">
24+
<Link href="https://github.com/ipfs/interface-js-ipfs-core/tree/master/SPEC">
2525
{ messages.navBar.item3 }
2626
</Link>
2727
<Link href="https://github.com/ipfs/js-ipfs">

‎src/shared/components/nav-bar/mobile/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class MobileNavBar extends Component {
4444
<ul className={ styles.menuList } ref={ this.handleMenuListRef } style={ { maxHeight: menuListHeight } } >
4545
<li><div className={ styles.menuLink } onClick={ this.handleGettingStartedClick }> { messages.navBar.item1 } </div> </li>
4646
<li><Link className={ styles.menuLink } href="https://github.com/ipfs/js-ipfs/tree/master/examples#js-ipfs-examples-and-tutorials"> { messages.navBar.item2 } </Link> </li>
47-
<li><Link className={ styles.menuLink } href="https://github.com/ipfs/interface-ipfs-core/tree/master/SPEC"> { messages.navBar.item3 } </Link> </li>
47+
<li><Link className={ styles.menuLink } href="https://github.com/ipfs/interface-js-ipfs-core/tree/master/SPEC"> { messages.navBar.item3 } </Link> </li>
4848
<li className={ styles.githubContributers }>
4949
<Link className={ styles.menuLink } href="https://github.com/ipfs/js-ipfs"> { messages.navBar.item4 } </Link>
5050
<iframe title="mobile-github-stars" src="https://ghbtns.com/github-btn.html?user=ipfs&repo=js-ipfs&type=star&count=true" frameBorder="0" scrolling="0"/>

‎src/shared/components/react-live/live-editor.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react'
22
import { withLive, Editor } from 'react-live'
3+
import okaidia from './okaidia'
34

45
class LiveEditor extends Component {
56
// static contextTypes = LiveProvider.childContextTypes
@@ -29,6 +30,8 @@ class LiveEditor extends Component {
2930

3031
return (
3132
<Editor
33+
theme={ okaidia }
34+
padding={ 15 }
3235
{ ...rest }
3336
code={ this.props.live.code }
3437
onChange={ (code) => {

‎src/shared/components/react-live/okaidia.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// This is prism-okaidia.css:
2+
// https://github.com/PrismJS/prism/blob/878ef2955671d8546bbcd3f9ce62c276a627f340/themes/prism-okaidia.css
3+
export default {
4+
plain: {
5+
color: '#f8f8f2',
6+
backgroundColor: '#0e204c',
7+
fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
8+
lineHeight: 1.5
9+
},
10+
styles: [
11+
{
12+
types: ['comment', 'prolog', 'doctype', 'cdata'],
13+
style: {
14+
color: 'slategray'
15+
}
16+
},
17+
{
18+
types: ['punctuation'],
19+
style: {
20+
color: '#f8f8f2'
21+
}
22+
},
23+
{
24+
types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
25+
style: {
26+
color: '#f92672'
27+
}
28+
},
29+
{
30+
types: ['boolean', 'number'],
31+
style: {
32+
color: '#ae81ff'
33+
}
34+
},
35+
{
36+
types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'],
37+
style: {
38+
color: '#a6e22e'
39+
}
40+
},
41+
{
42+
types: ['operator', 'entity', 'url', 'variable'],
43+
style: {
44+
color: '#f8f8f2'
45+
}
46+
},
47+
{
48+
types: ['atrule', 'attr-value', 'function', 'class-name'],
49+
style: {
50+
color: '#e6db74'
51+
}
52+
},
53+
{
54+
types: ['keyword'],
55+
style: {
56+
color: '#66d9ef'
57+
}
58+
},
59+
{
60+
types: ['regex', 'important'],
61+
style: {
62+
color: '#fd971f'
63+
}
64+
},
65+
{
66+
types: ['important', 'bold'],
67+
style: {
68+
fontWeight: 'bold'
69+
}
70+
},
71+
{
72+
types: ['italic'],
73+
style: {
74+
fontStyle: 'italic'
75+
}
76+
},
77+
{
78+
types: ['entity'],
79+
style: {
80+
cursor: 'help'
81+
}
82+
}
83+
]
84+
}

‎src/shared/components/syntax-highlighter/index.js‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import React from 'react'
2-
import Prism from 'prismjs'
32
import PropTypes from 'prop-types'
43
import classNames from 'classnames'
5-
6-
import 'prismjs/themes/prism-okaidia.css'
4+
import Highlight, { Prism } from 'prism-react-renderer'
75
import styles from './index.module.css'
6+
import okaidia from '../react-live/okaidia'
87

9-
const SyntaxHighlighter = ({ codeStr, language, className }) => {
10-
const htmlCode = Prism.highlight(codeStr, Prism.languages.js, language)
8+
const SyntaxHighlighter = ({ codeStr, language, className, theme }) => {
119
const preClasses = classNames(`language-${language}`, styles.preCustom)
1210

1311
return (
1412
<div className={ styles.gatsbyHighlight + ' ' + className } >
15-
<pre className={ preClasses }>
16-
<code dangerouslySetInnerHTML={ { __html: htmlCode } } />
17-
</pre>
13+
<Highlight Prism={ Prism } code={ codeStr } theme={ theme || okaidia } language={ language }>
14+
{ ({ tokens, getLineProps, getTokenProps, style }) => (
15+
<pre aria-hidden='true' style={ style } className={ preClasses }>
16+
{ tokens.map((line, i) => (
17+
// eslint-disable-next-line react/jsx-key
18+
<div { ...getLineProps({ line, key: i }) }>
19+
{ line.map((token, key) => (
20+
// eslint-disable-next-line react/jsx-key
21+
<span { ...getTokenProps({ token, key }) } />
22+
)) }
23+
</div>
24+
)) }
25+
</pre>
26+
) }
27+
</Highlight>
1828
</div>
1929
)
2030
}

‎src/shared/components/syntax-highlighter/index.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
.gatsbyHighlight .preCustom {
55
width: 75%;
66
margin: auto;
7+
padding: 15px;
78
outline: none;
8-
background: var(--color-syntax-highlighter-background);
99
border-radius: 2px;
10+
text-align: left;
1011
}
1112

1213
@media (--layout-lte-medium) {

0 commit comments

Comments
 (0)