Skip to content

Commit 21ed82b

Browse files
kirbykkirbyk
committed
Merge branch 'kk-docs-stuff'
2 parents 1ea64d3 + 95fa616 commit 21ed82b

27 files changed

+25174
-2331
lines changed

‎themes/mongodb-tutorials/Gulpfile.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@ gulp.task('sass:build', function() {
2626
.pipe(gulp.dest('./static/css/'))
2727
})
2828

29+
gulp.task('sass:build-navbar', function() {
30+
gulp.src('./src/styles/navbar.scss')
31+
.pipe(rename({suffix: '.min'}))
32+
.pipe(plumber())
33+
.pipe(sourcemaps.init())
34+
.pipe(sass({
35+
outputStyle: 'compressed',
36+
}))
37+
.pipe(autoprefixer())
38+
.pipe(sourcemaps.write())
39+
.pipe(gulp.dest('./static/css/'))
40+
})
41+
2942
gulp.task('sass', ['sass:lint', 'sass:build'])
3043

3144
gulp.task('js:build-home', function() {
@@ -74,6 +87,29 @@ gulp.task('js:build-single', function() {
7487
.pipe(gulp.dest('./static/js/'))
7588
})
7689

90+
gulp.task('js:build-navbar', function() {
91+
gulp.src('./src/navbar-docs.js')
92+
.pipe(webpack({
93+
output: {
94+
filename: 'navbar-docs.js'
95+
},
96+
devtool: 'source-maps',
97+
module: {
98+
loaders: [
99+
{
100+
test: /\.js$/,
101+
loader: 'babel-loader',
102+
query: {
103+
presets: ['es2015', 'react'],
104+
plugins: ['transform-class-properties']
105+
}
106+
}
107+
]
108+
}
109+
}))
110+
.pipe(gulp.dest('./static/js/'))
111+
})
112+
77113
gulp.task('js', ['js:build-home', 'js:build-single'])
78114

79115
gulp.task('watch', function() {

‎themes/mongodb-tutorials/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"license": "ISC",
1212
"dependencies": {
1313
"classnames": "^2.2.5",
14+
"dynamics.js": "^1.1.5",
1415
"lodash.capitalize": "^4.2.1",
1516
"lunr": "i80and/lunr.js#19a85e62ae8103a48ce5a1fad507f758cf6016d9",
1617
"react": "^15.4.2",

‎themes/mongodb-tutorials/src/menu.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
3+
4+
const Menu = (props) => {
5+
return (
6+
<ul className="menu">
7+
{ props.children }
8+
</ul>
9+
)
10+
}
11+
12+
export default Menu

‎themes/mongodb-tutorials/src/navbar-docs.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import Navbar from './navbar.js'
5+
6+
const baseURL = 'http://localhost:8000'
7+
8+
class NavbarDocs extends React.Component {
9+
constructor (props) {
10+
super(props)
11+
}
12+
13+
render () {
14+
return (
15+
<Navbar baseURL={baseURL} assetsPrefix="/_static">
16+
<input type="search" className="navbar-search" placeholder="Search" />
17+
</Navbar>
18+
)
19+
}
20+
}
21+
22+
ReactDOM.render(<NavbarDocs />, document.getElementById('navbar-docs'))

‎themes/mongodb-tutorials/src/navbar-dropdown.js

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react'
22
import classNames from 'classnames'
33

4+
import Menu from './menu.js'
5+
import Submenu from './submenu.js'
6+
47
class NavbarDropdown extends React.Component {
58
constructor (props) {
69
super(props)
@@ -23,22 +26,59 @@ class NavbarDropdown extends React.Component {
2326

2427
const menuClass = classNames({
2528
'navbar-dropdown__menu': true,
26-
'navbar-dropdown__menu--open': this.state.open,
29+
'navbar-dropdown__menu--hidden': !this.state.open,
30+
'navbar-dropdown__menu--shown': this.state.open,
2731
})
2832

2933
return (
3034
<div className={ dropDownClass }>
3135
<span onClick={ this.toggle }>Documentation</span>
3236

33-
<ul className={ menuClass }>
34-
<li className="navbar-dropdown__menu__item navbar-dropdown__menu__item--menu">Documentation</li>
35-
<li className="navbar-dropdown__menu__item navbar-dropdown__menu__item--menu">Company</li>
36-
<li className="navbar-dropdown__menu__item navbar-dropdown__menu__item--menu">University</li>
37-
<li className="navbar-dropdown__menu__item">Community</li>
38-
<li className="navbar-dropdown__menu__item">What is MongoDB</li>
39-
<li className="navbar-dropdown__menu__item navbar-dropdown__menu__item--secondary">Download MongoDB</li>
40-
<li className="navbar-dropdown__menu__item navbar-dropdown__menu__item--secondary">Contact Us</li>
41-
</ul>
37+
<div className={ menuClass }>
38+
<Menu>
39+
<li className="menu__item">
40+
<Submenu title="Documentation">
41+
<li className="submenu__item">
42+
Server
43+
</li>
44+
<li className="submenu__item">
45+
<Submenu title="Drivers">
46+
<li className="submenu__item">C</li>
47+
<li className="submenu__item">C++11</li>
48+
<li className="submenu__item">C#</li>
49+
<li className="submenu__item">Java</li>
50+
<li className="submenu__item">Node.js</li>
51+
<li className="submenu__item">Perl</li>
52+
<li className="submenu__item">PHP</li>
53+
<li className="submenu__item">Python</li>
54+
<li className="submenu__item">Motor</li>
55+
<li className="submenu__item">Ruby</li>
56+
<li className="submenu__item">Scala</li>
57+
</Submenu>
58+
</li>
59+
<li className="submenu__item submenu__item--nested">
60+
<Submenu title="Cloud">
61+
<li className="submenu__item">MongoDB Atlas</li>
62+
<li className="submenu__item">MongoDB Cloud Manager</li>
63+
<li className="submenu__item">MongoDB Ops Manager</li>
64+
</Submenu>
65+
</li>
66+
<li className="submenu__item submenu__item--nested">
67+
Tools
68+
</li>
69+
<li className="submenu__item">
70+
Tutorials
71+
</li>
72+
</Submenu>
73+
</li>
74+
<li className="menu__item">Company</li>
75+
<li className="menu__item">University</li>
76+
<li className="menu__item">Community</li>
77+
<li className="menu__item">What is MongoDB</li>
78+
<li className="menu__item menu__item--secondary">Download MongoDB</li>
79+
<li className="menu__item menu__item--secondary">Contact Us</li>
80+
</Menu>
81+
</div>
4282
</div>
4383
)
4484
}

‎themes/mongodb-tutorials/src/navbar.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react'
22

33
import NavbarDropdown from './navbar-dropdown.js'
4-
import Search from './search.js'
54

65
const Navbar = (props) => {
6+
var assetsPrefix = props.assetsPrefix || '';
7+
78
return (
89
<nav className="navbar">
910
<div className="navbar__left">
1011
<a href={ props.baseURL } >
11-
<img src={ props.baseURL + '/images/mongodb-logo.svg' } className="navbar-brand" alt="MongoDB Logo" />
12+
<img src={ props.baseURL + assetsPrefix + '/images/mongodb-logo.svg' } className="navbar-brand" alt="MongoDB Logo" />
1213
</a>
1314

1415
<span className="navbar-seperator"></span>
@@ -18,19 +19,19 @@ const Navbar = (props) => {
1819

1920
<div className="navbar__right">
2021
<div className="navbar-links">
21-
<a href="#" className="navbar-links__item">Server</a>
22+
<a href={ props.baseURL } className="navbar-links__item navbar-links__item--active">Server</a>
2223
<a href="#" className="navbar-links__item">Drivers</a>
2324
<a href="#" className="navbar-links__item">Cloud</a>
2425
<a href="#" className="navbar-links__item">Tools</a>
25-
<a href={ props.baseURL } className="navbar-links__item navbar-links__item--active">Tutorials</a>
26+
<a href="#" className="navbar-links__item">Tutorials</a>
2627
</div>
2728

2829
<div className="navbar-download">
2930
<a href="https://www.mongodb.com/download-center?jmp=tutorials" className="navbar-download__text">Download MongoDB</a>
30-
<img className="navbar-download__icon" src={ props.baseURL + '/images/download-icon.svg' } alt="Download Icon" />
31+
<img className="navbar-download__icon" src={ props.baseURL + assetsPrefix + '/images/download-icon.svg' } alt="Download Icon" />
3132
</div>
3233

33-
<Search baseURL={props.baseURL} onResults={props.onResults} />
34+
{ props.children }
3435
</div>
3536
</nav>
3637
)

‎themes/mongodb-tutorials/src/single.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
33

4+
import Menu from './menu.js'
45
import Navbar from './navbar.js'
6+
import Search from './search.js'
7+
import Submenu from './submenu.js'
58

69
const baseURL = window.__baseURL__
710

@@ -72,22 +75,24 @@ class Single extends React.Component {
7275
render () {
7376
const sections = this._getSections().map((section, i) => {
7477
return (
75-
<li key={i} className="toc__item"><a href={section.link} className="toc__link">{section.name}</a></li>
78+
<li key={i} className="menu__item"><a href={section.link} className="menu__link">{section.name}</a></li>
7679
)
7780
})
7881

7982
return (
8083
<div>
81-
<Navbar baseURL={baseURL} onResults={this.onResults} />
84+
<Navbar baseURL={baseURL}>
85+
<Search baseURL={baseURL} onResults={this.onResults} />
86+
</Navbar>
8287

8388
<div className="main">
8489
<aside className="main__sidebar main__sidebar--single">
8590
<div className="main__sidebar__header">
8691
MongoDB Manual Sections:
8792
</div>
88-
<ul className="toc">
93+
<Menu>
8994
{ sections }
90-
</ul>
95+
</Menu>
9196
</aside>
9297
</div>
9398
</div>

‎themes/mongodb-tutorials/src/styles/animations.scss

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// .animated {
2+
// animation-duration: .4s;
3+
// animation-fill-mode: both;
4+
// }
5+
//
6+
// @keyframes fadeInDown {
7+
// from {
8+
// opacity: 0;
9+
// transform: translate3d(0, -100%, 0);
10+
// }
11+
//
12+
// to {
13+
// opacity: 1;
14+
// transform: none;
15+
// }
16+
// }
17+
//
18+
// .fadeInDown {
19+
// animation-name: fadeInDown;
20+
// }
21+
//
22+
// @keyframes fadeOutUp {
23+
// from {
24+
// opacity: 1;
25+
// }
26+
//
27+
// to {
28+
// opacity: 0;
29+
// transform: translate3d(0, -100%, 0);
30+
// }
31+
// }
32+
//
33+
// .fadeOutUp {
34+
// animation-name: fadeOutUp;
35+
// }
36+
37+
// .animated {
38+
// -webkit-animation-duration: 1s;
39+
// animation-duration: 1s;
40+
// -webkit-animation-fill-mode: both;
41+
// animation-fill-mode: both;
42+
// -webkit-animation-timing-function: cubic-bezier(.51, .01, .37, .98);
43+
// animation-timing-function: cubic-bezier(.51, .01, .37, .98);
44+
// }
45+
//
46+
// @-webkit-keyframes fadeInUp {
47+
// from {
48+
// opacity: 0;
49+
// -webkit-transform: translate3d(0, 5rem, 0);
50+
// transform: translate3d(0, 5rem, 0);
51+
// }
52+
//
53+
// to {
54+
// opacity: 1;
55+
// -webkit-transform: none;
56+
// transform: none;
57+
// }
58+
// }
59+
//
60+
// @keyframes fadeInUp {
61+
// from {
62+
// opacity: 0;
63+
// -webkit-transform: translate3d(0, 5rem, 0);
64+
// transform: translate3d(0, 5rem, 0);
65+
// }
66+
//
67+
// to {
68+
// opacity: 1;
69+
// -webkit-transform: none;
70+
// transform: none;
71+
// }
72+
// }
73+
// .fadeInUp {
74+
// -webkit-animation-name: fadeInUp;
75+
// animation-name: fadeInUp;
76+
// }
77+
//
78+
// @-webkit-keyframes fadeIn {
79+
// from {
80+
// opacity: 0;
81+
// }
82+
//
83+
// to {
84+
// opacity: 1;
85+
// }
86+
// }
87+
//
88+
// @keyframes fadeIn {
89+
// from {
90+
// opacity: 0;
91+
// }
92+
//
93+
// to {
94+
// opacity: 1;
95+
// }
96+
// }
97+
//
98+
// .fadeIn {
99+
// -webkit-animation-name: fadeIn;
100+
// animation-name: fadeIn;
101+
// -webkit-animation-delay: .4s;
102+
// animation-delay: .4s;
103+
// }

‎themes/mongodb-tutorials/src/styles/app.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import 'fonts';
2+
@import 'animations';
23
@import 'base';
34
@import 'bem-components';

‎themes/mongodb-tutorials/src/styles/bem-components.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,6 @@
1818

1919
@import 'bem-components/single';
2020
@import 'bem-components/toc';
21+
22+
@import 'bem-components/menu';
23+
@import 'bem-components/submenu';

0 commit comments

Comments
 (0)