Skip to content

Commit 7cc99a8

Browse files
ethansharethanshar
committed
Use Layout plugin for general layout of the site
1 parent 6db3ab4 commit 7cc99a8

File tree

7 files changed

+103
-46
lines changed

7 files changed

+103
-46
lines changed

‎uilib-docs/configurations/plugins.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,19 @@ const imagesPlugin = [
4646
`gatsby-plugin-sharp`
4747
];
4848

49+
const layoutPlugin = [
50+
{
51+
resolve: `gatsby-plugin-layout`,
52+
options: {
53+
component: require.resolve(`${__dirname}/../src/components/layout.js`)
54+
}
55+
}
56+
];
57+
4958
module.exports = {
5059
manifestPlugin,
5160
markdownPagesPlugin,
5261
componentsDocgenPlugin,
53-
imagesPlugin
62+
imagesPlugin,
63+
layoutPlugin
5464
};

‎uilib-docs/gatsby-config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, imagesPlugin} = require('./configurations/plugins');
1+
const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, imagesPlugin, layoutPlugin} = require('./configurations/plugins');
22

33
module.exports = {
44
pathPrefix: '/react-native-ui-lib',
@@ -13,7 +13,8 @@ module.exports = {
1313
...markdownPagesPlugin,
1414
...componentsDocgenPlugin,
1515
...imagesPlugin,
16-
...manifestPlugin
16+
...manifestPlugin,
17+
...layoutPlugin
1718
// this (optional) plugin enables Progressive Web App + Offline functionality
1819
// To learn more, visit: https://gatsby.dev/offline
1920
// 'gatsby-plugin-offline',

‎uilib-docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"classnames": "^2.2.6",
99
"gatsby": "2.23.22-static-query-template.8",
1010
"gatsby-image": "^2.0.34",
11+
"gatsby-plugin-layout": "^1.3.10",
1112
"gatsby-plugin-manifest": "^2.0.24",
1213
"gatsby-plugin-offline": "^2.0.25",
1314
"gatsby-plugin-react-helmet": "^3.0.10",

‎uilib-docs/src/components/layout.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import Helmet from 'react-helmet';
4+
import _ from 'lodash';
45

56
import Header from './header';
67
import Navbar from '../components/navbar';
78
import './layout.scss';
89

9-
const Layout = ({children, showSidebar}) => {
10+
const pathPrefix = '/react-native-ui-lib';
11+
12+
const Layout = ({children, location}) => {
13+
const {pathname} = location;
14+
const showSidebar = _.replace(pathname, pathPrefix, '') !== '/';
1015
return (
1116
<div className="layout">
1217
<Helmet>

‎uilib-docs/src/pages/index.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import Link from 'gatsby-link';
33

44
import './index.scss';
5-
import Layout from '../components/layout';
65
import mainLogo from '../images/logo_big.png';
76
import datePicker from '../images/examples/datepicker.png';
87
import actionSheet from '../images/examples/actionSheet.png';
@@ -11,7 +10,6 @@ import accessibility from '../images/examples/accessibility.gif';
1110

1211
const IndexPage = props => {
1312
return (
14-
<Layout {...props} showSidebar={false}>
1513
<div className="main-page">
1614
<div className="main-section">
1715
<div className="logo-box">
@@ -41,7 +39,6 @@ const IndexPage = props => {
4139
<NativeSection/>
4240
<OthersSection/>
4341
</div>
44-
</Layout>
4542
);
4643
};
4744

‎uilib-docs/src/templates/component.js

Lines changed: 77 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import _ from 'lodash';
44
import Link from 'gatsby-link';
5-
import Layout from '../components/layout';
65

76
import './components.scss';
87

@@ -49,31 +48,55 @@ export default class ComponentTemplate extends Component {
4948
return _.map(extendedComponents, (component, index) => {
5049
const isLast = index === _.size(extendedComponents) - 1;
5150
const text = <b>{`${component}${!isLast ? ', ' : ''}`}</b>;
52-
const extendedComponent = _.find(allComponents, c => c.node.displayName.trim() === component.trim());
53-
const path = !extendedComponent && componentInfo.extendsLink ? componentInfo.extendsLink : `/docs/${component}`;
51+
const extendedComponent = _.find(
52+
allComponents,
53+
c => c.node.displayName.trim() === component.trim()
54+
);
55+
const path =
56+
!extendedComponent && componentInfo.extendsLink
57+
? componentInfo.extendsLink
58+
: `/docs/${component}`;
5459

5560
return (
5661
<span className="inline" key={component}>
5762
{!extendedComponent && componentInfo.extendsLink ? (
58-
<a href={componentInfo.extendsLink} rel="noopener noreferrer" target="_blank">
63+
<a
64+
href={componentInfo.extendsLink}
65+
rel="noopener noreferrer"
66+
target="_blank"
67+
>
5968
{text}
6069
</a>
6170
) : (
6271
<Link to={path}>{text}</Link>
6372
)}
6473
{componentInfo.extendsnotes}
65-
<br/>
74+
<br />
6675
</span>
6776
);
6877
});
6978
}
7079

7180
renderImage(image, index) {
72-
return <img key={index} alt={''} src={image} style={{marginRight: 20, width: 320, border: '1px solid black'}}/>;
81+
return (
82+
<img
83+
key={index}
84+
alt={''}
85+
src={image}
86+
style={{marginRight: 20, width: 320, border: '1px solid black'}}
87+
/>
88+
);
7389
}
7490

7591
renderGif(image, index) {
76-
return <img key={index} alt={''} src={image} style={{marginRight: 20, width: 320}}/>;
92+
return (
93+
<img
94+
key={index}
95+
alt={''}
96+
src={image}
97+
style={{marginRight: 20, width: 320}}
98+
/>
99+
);
77100
}
78101

79102
renderImages(images, type) {
@@ -88,9 +111,14 @@ export default class ComponentTemplate extends Component {
88111
renderImportant(componentInfo) {
89112
return (
90113
<div alt={''} style={{marginBottom: 10}}>
91-
<span style={{fontWeight: '700'}}>IMPORTANT: </span> {componentInfo.important} &nbsp;
114+
<span style={{fontWeight: '700'}}>IMPORTANT: </span>{' '}
115+
{componentInfo.important} &nbsp;
92116
{componentInfo.importantLink && (
93-
<a target="_blank" rel="noopener noreferrer" href={componentInfo.importantLink}>
117+
<a
118+
target="_blank"
119+
rel="noopener noreferrer"
120+
href={componentInfo.importantLink}
121+
>
94122
here
95123
</a>
96124
)}
@@ -114,10 +142,16 @@ export default class ComponentTemplate extends Component {
114142
const {pageContext} = this.props;
115143
const selectedComponent = pageContext.componentNode;
116144
const componentInfo = this.extractComponentsInfo(selectedComponent);
117-
const componentProps = _.orderBy(_.get(selectedComponent, 'props'), prop => prop.name.toLowerCase());
145+
const componentProps = _.orderBy(_.get(selectedComponent, 'props'), prop =>
146+
prop.name.toLowerCase()
147+
);
118148
const gifs = componentInfo.gif ? componentInfo.gif.split(',') : undefined;
119-
const imgs = componentInfo.image ? componentInfo.image.split(',') : undefined;
120-
const notes = componentInfo.notes ? componentInfo.notes.split(';') : undefined;
149+
const imgs = componentInfo.image
150+
? componentInfo.image.split(',')
151+
: undefined;
152+
const notes = componentInfo.notes
153+
? componentInfo.notes.split(';')
154+
: undefined;
121155

122156
return (
123157
<div className="docs-page">
@@ -126,7 +160,12 @@ export default class ComponentTemplate extends Component {
126160
{componentInfo.example && (
127161
<span className="code-example">
128162
(
129-
<a className="inline" target="_blank" rel="noopener noreferrer" href={componentInfo.example}>
163+
<a
164+
className="inline"
165+
target="_blank"
166+
rel="noopener noreferrer"
167+
href={componentInfo.example}
168+
>
130169
code example
131170
</a>
132171
)
@@ -137,14 +176,17 @@ export default class ComponentTemplate extends Component {
137176
{componentInfo.extends && (
138177
<div>
139178
Extends: {this.renderLink(componentInfo)}
140-
<div>(meaning you can pass the super component's props as well).</div>
179+
<div>
180+
(meaning you can pass the super component's props as well).
181+
</div>
141182
</div>
142183
)}
143184
{componentInfo.modifiers && (
144185
<div>
145186
<p>
146-
Supported modifiers: <b>{componentInfo.modifiers}</b>. <br/>
147-
Read more about modifiers <Link to="/foundation/modifiers">here</Link>.
187+
Supported modifiers: <b>{componentInfo.modifiers}</b>. <br />
188+
Read more about modifiers{' '}
189+
<Link to="/foundation/modifiers">here</Link>.
148190
</p>
149191
</div>
150192
)}
@@ -155,19 +197,23 @@ export default class ComponentTemplate extends Component {
155197
{this.renderNotes(notes)}
156198
</div>
157199
)}
158-
{componentInfo.important && <div>{this.renderImportant(componentInfo)}</div>}
200+
{componentInfo.important && (
201+
<div>{this.renderImportant(componentInfo)}</div>
202+
)}
159203
{componentProps.length > 0 && (
160204
<div>
161205
<h3>PROPS</h3>
162-
<Props props={componentProps}/>
206+
<Props props={componentProps} />
163207
</div>
164208
)}
165209

166210
{imgs && (
167211
<div className="container">
168212
<h3>EXAMPLE</h3>
169213
<div className="row">
170-
<div className="col-sm-12 text-center">{this.renderImages(imgs, IMAGE_TYPES.PNG)}</div>
214+
<div className="col-sm-12 text-center">
215+
{this.renderImages(imgs, IMAGE_TYPES.PNG)}
216+
</div>
171217
</div>
172218
</div>
173219
)}
@@ -176,7 +222,9 @@ export default class ComponentTemplate extends Component {
176222
<div className="container">
177223
<h3>LIVE EXAMPLE</h3>
178224
<div className="row">
179-
<div className="col-sm-12 text-center">{this.renderImages(gifs, IMAGE_TYPES.GIF)}</div>
225+
<div className="col-sm-12 text-center">
226+
{this.renderImages(gifs, IMAGE_TYPES.GIF)}
227+
</div>
180228
</div>
181229
</div>
182230
)}
@@ -188,19 +236,17 @@ export default class ComponentTemplate extends Component {
188236
render() {
189237
const isIntro = !_.get(this.props, 'pageContext.componentNode');
190238
return (
191-
<Layout {...this.props} showSidebar>
192-
<div>
193-
{isIntro && (
194-
<div className="docs-page">
195-
<div className="docs-page__content">
196-
<div>Select a component from the left sidebar</div>
197-
</div>
239+
<div>
240+
{isIntro && (
241+
<div className="docs-page">
242+
<div className="docs-page__content">
243+
<div>Select a component from the left sidebar</div>
198244
</div>
199-
)}
245+
</div>
246+
)}
200247

201-
{!isIntro && this.renderComponentPage()}
202-
</div>
203-
</Layout>
248+
{!isIntro && this.renderComponentPage()}
249+
</div>
204250
);
205251
}
206252
}

‎uilib-docs/src/templates/markdownTemplate.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,19 @@ import React from 'react';
22
import {graphql} from 'gatsby';
33

44
import './markdown.scss';
5-
import Layout from '../components/layout';
65

76
export default function Template({data}) {
87
const {
98
html,
109
frontmatter: {title}
1110
} = data.markdownRemark;
1211
return (
13-
<Layout showSidebar>
14-
<div className="markdown">
15-
<div className="markdown-content">
16-
<h1 className="title">{title}</h1>
17-
<div dangerouslySetInnerHTML={{__html: html}}/>
18-
</div>
12+
<div className="markdown">
13+
<div className="markdown-content">
14+
<h1 className="title">{title}</h1>
15+
<div dangerouslySetInnerHTML={{__html: html}} />
1916
</div>
20-
</Layout>
17+
</div>
2118
);
2219
}
2320

0 commit comments

Comments
 (0)