Skip to content

Commit 9b8f0f8

Browse files
prasanna1211prasanna1211
authored
Merge pull request #4 from Codebrahma/site-generation
Site generation WIP
2 parents 8313f1d + e571348 commit 9b8f0f8

File tree

22 files changed

+803
-31
lines changed

22 files changed

+803
-31
lines changed

‎.eslintignore

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,4 @@ dist/
22
node_modules/
33
webpack.config.js
44

5-
docs/node_modules
6-
docs/public
7-
docs/.babelrc
8-
docs/index.js
9-
docs/package.json
10-
docs/server.js
11-
docs/webpack.config.development.js
5+
docs/

‎docs/client/App.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,19 @@ import { Route } from 'react-router-dom';
44
import HomePage from './components/HomePage';
55
import GettingStartedPage from './components/GettingStartedPage';
66
import ComponentsPage from './components/ComponentsPage';
7+
import PlaygroundPage from './components/PlaygroundPage';
78
import AppNavbar from './components/AppNavbar';
9+
import styles from './styles.scss';
810

911
const App = () => (
10-
<div>
12+
<div className={styles['app-wrapper']}>
1113
<AppNavbar />
12-
<Route exact path="/home" component={HomePage} />
13-
<Route exact path="/getting-started" component={GettingStartedPage} />
14-
<Route exact path="/components" component={ComponentsPage} />
14+
<div className="content-wrapper">
15+
<Route exact path="/" component={HomePage} />
16+
<Route exact path="/install" component={GettingStartedPage} />
17+
<Route exact path="/playground" component={PlaygroundPage} />
18+
<Route exact path="/components" component={ComponentsPage} />
19+
</div>
1520
</div>
1621
);
1722

‎docs/client/components/AppNavbar/index.js

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,77 @@
11
import React from 'react';
2+
import { Row, Col } from 'react-flexbox-grid';
3+
import { Link } from 'react-router-dom';
4+
25
import styles from './styles.scss';
36

4-
const AppBar = () => (
5-
<div className={styles.navbar}>
6-
Navbar
7-
</div>
8-
);
7+
class Navbar extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
activeLink: '',
12+
};
13+
this.handleNavClick = this.handleNavClick.bind(this);
14+
}
15+
16+
handleNavClick(activeLink) {
17+
this.setState({
18+
activeLink,
19+
});
20+
}
21+
22+
render() {
23+
const {
24+
activeLink,
25+
} = this.state;
26+
27+
return (
28+
<div className={styles.navbar}>
29+
<Row className="full-height parent-row">
30+
<Col xs={3} sm={2} md={1} lg={1}>
31+
<div className="nav-wrapper logo full-height">
32+
<img
33+
alt="Codebrahma"
34+
src="https://codebrahma.com/wp-content/themes/codebrahma/public/img/cb_logo_small.png"
35+
/>
36+
</div>
37+
</Col>
38+
<Col xs={6} sm={4} md={3} lg={6} className="title">
39+
<div className="nav-wrapper title full-height">
40+
React Lite UI
41+
</div>
42+
</Col>
43+
<Col xs={12} sm={6} mdOffset={1} md={5} lg={4} lgOffset={1}>
44+
<Row className="nav-wrapper nav-link full-height">
45+
<Col xs={3} sm={3}className="center-align">
46+
<Link
47+
to="/install"
48+
onClick={() => { this.handleNavClick('install') }}
49+
>
50+
<span className={`${activeLink === 'install' && 'active'}`}> Install </span>
51+
</Link>
52+
</Col>
53+
<Col xs={5} sm={6} className={`center-align ${activeLink === 'playground' && 'active'}`}>
54+
<Link
55+
to="/playground"
56+
onClick={() => { this.handleNavClick('playground') }}
57+
>
58+
<span className={`${activeLink === 'playground' && 'active'}`}> Playground </span>
59+
</Link>
60+
</Col>
61+
<Col xs={2} sm={2} className={`center-align ${activeLink === 'components' && 'active'}`}>
62+
<Link
63+
to="/components"
64+
onClick={() => { this.handleNavClick('components') }}
65+
>
66+
<span className={`${activeLink === 'components' && 'active'}`}>API</span>
67+
</Link>
68+
</Col>
69+
</Row>
70+
</Col>
71+
</Row>
72+
</div>
73+
);
74+
}
75+
}
976

10-
export default AppBar;
77+
export default Navbar;

‎docs/client/components/AppNavbar/styles.scss

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1+
@import '../common/styles.scss';
2+
3+
body {
4+
margin: 0;
5+
line-height: 1.5;
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7+
}
8+
19
:local(.navbar) {
10+
position: fixed;
11+
min-height: 75px;
12+
width: 100%;
13+
background-color: $primary-blue;
14+
margin: 0;
15+
color: $primary-white;
216
font-size: 20px;
3-
}
17+
font-weight: bold;
18+
.full-height {
19+
height: 100%;
20+
}
21+
.center-align {
22+
text-align: center;
23+
}
24+
.parent-row {
25+
min-height: 75px;
26+
}
27+
28+
.nav-wrapper {
29+
display: flex;
30+
align-items: center;
31+
&.logo {
32+
padding-left: 15px;
33+
}
34+
&.title {
35+
margin-left: 10px;
36+
font-size: 30px;
37+
}
38+
&.nav-link {
39+
font-size: 22px;
40+
a {
41+
color: $primary-white;
42+
text-decoration: none;
43+
&:focus, &:hover, &:visited, &:link, &:active {
44+
text-decoration: none;
45+
}
46+
display: block;
47+
min-height: 35px;
48+
span {
49+
&.active {
50+
border-bottom: 4px solid $primary-yellow;
51+
}
52+
}
53+
}
54+
}
55+
}
56+
}
57+

‎docs/client/components/HomePage/index.js

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,51 @@
11
import React from 'react';
2+
import { Row, Col } from 'react-flexbox-grid';
3+
import styles from './styles.scss';
24

35
const HomePage = () => (
4-
<div>
5-
Home Page
6+
<div className={styles['home-page']}>
7+
<div className="title">
8+
React Lite UI
9+
</div>
10+
<div className="about">
11+
<p>
12+
React Lite UI is a set of highly customizable, light weight React components.
13+
</p>
14+
<p>
15+
We at Codebrahma use this components to build our React Applications.
16+
</p>
17+
<p>
18+
Try these components in playground to see the instant results.
19+
</p>
20+
</div>
21+
<div className="advantage-section">
22+
<Row>
23+
<Col xsOffset={1} xs={3} className="advantage">
24+
<div className="header">
25+
10+ UI components
26+
</div>
27+
<div className="content">
28+
The collection has more than 10+ UI components which we use regularly
29+
</div>
30+
</Col>
31+
<Col xsOffset={1} xs={3} className="advantage">
32+
<div className="header">
33+
Light Weight
34+
</div>
35+
<div className="content">
36+
Total gzipped size is 20KB.
37+
</div>
38+
</Col>
39+
<Col xsOffset={1} xs={3} className="advantage">
40+
<div className="header">
41+
Highly Themeable
42+
</div>
43+
<div className="content">
44+
You can literally customize anything
45+
</div>
46+
</Col>
47+
</Row>
48+
</div>
649
</div>
750
);
851

‎docs/client/components/HomePage/styles.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../common/styles.scss';
2+
3+
:local(.home-page) {
4+
.title {
5+
width: 300px;
6+
margin: 0 auto;
7+
font-weight: bold;
8+
font-size: 45px;
9+
color: $primary-grey;
10+
}
11+
.about {
12+
margin: 40px auto;
13+
width: 60%;
14+
font-size: 20px;
15+
color: $primary-dark-font;
16+
}
17+
.advantage-section {
18+
margin: 30px auto;
19+
width: 90%;
20+
.advantage {
21+
padding: 10px;
22+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
23+
border-radius: 5px;
24+
25+
.header {
26+
font-weight: bold;
27+
text-align: center;
28+
padding-top: 5px;
29+
font-size: 20px;
30+
}
31+
32+
.content {
33+
margin-top: 20px;
34+
font-size: 15px;
35+
text-align: center;
36+
}
37+
}
38+
}
39+
}

‎docs/client/components/PlaygroundPage/ComponentBar/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import map from 'lodash/map';
3+
import { componentList } from '../../common/componentList';
4+
5+
import styles from './styles.scss';
6+
7+
const ComponentBarPage = ({ children, onClickComponent }) => (
8+
<div className={styles['component-bar']}>
9+
<aside className="component-sidebar">
10+
{map(componentList, component => (
11+
<div
12+
className="each-component-item"
13+
key={component.name}
14+
onClick={() => { onClickComponent(component.name) }}
15+
>
16+
{component.name}
17+
</div>
18+
))}
19+
</aside>
20+
<div className="playground-content">
21+
{children}
22+
</div>
23+
</div>
24+
);
25+
26+
export default ComponentBarPage;

‎docs/client/components/PlaygroundPage/ComponentBar/styles.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import '../../common/styles.scss';
2+
3+
:local(.component-bar) {
4+
.component-sidebar {
5+
position: fixed;
6+
top: 76px;
7+
bottom: 0;
8+
width: 160px;
9+
padding-top: 25px;
10+
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
11+
.each-component-item {
12+
color: $primary-dark-font;
13+
padding: 15px 5px 15px 15px;
14+
font-weight: bold;
15+
&:hover {
16+
background-color: $primary-grey;
17+
cursor: pointer;
18+
}
19+
}
20+
}
21+
.playground-content {
22+
padding-left: 170px;
23+
}
24+
}

‎docs/client/components/PlaygroundPage/Documentation/index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import cx from 'classnames';
3+
import styles from './styles.scss';
4+
5+
const DocumentationPage = ({
6+
isDocumentationOn,
7+
expandDocumentation,
8+
}) => {
9+
const docStatusClass = isDocumentationOn ? 'active' : '';
10+
return isDocumentationOn ? (
11+
<div className={cx(styles.documentation, docStatusClass)}>
12+
<div className="header">
13+
Documentation
14+
</div>
15+
<button
16+
onClick={expandDocumentation}
17+
> Let me try!!! </button>
18+
</div>
19+
) : (
20+
<div className={cx(styles.documentation, docStatusClass)}>
21+
<button
22+
onClick={expandDocumentation}
23+
> Props </button>
24+
</div>
25+
)
26+
}
27+
28+
29+
export default DocumentationPage;

‎docs/client/components/PlaygroundPage/Documentation/styles.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:local(.documentation) {
2+
position: fixed;
3+
right: 0%;
4+
top: 78px;
5+
height: 100%;
6+
width: 5%;
7+
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
8+
background: #ffffff;
9+
.header {
10+
font-size: 24px;
11+
font-weight: bold;
12+
padding: 10px;
13+
}
14+
button {
15+
border-radius: 50%;
16+
padding: 30px 25px;
17+
position: absolute;
18+
left: -45px;
19+
top: 40%;
20+
}
21+
&.active {
22+
width: 50%;
23+
button {
24+
left: -55px;
25+
}
26+
}
27+
28+
}

0 commit comments

Comments
 (0)