Skip to content

Commit ba2a629

Browse files
skipjackskipjack
authored
Merge pull request #335 from webpack/feature/structure-n-navigation
Navigation and Structure
2 parents ddca85d + 698a08f commit ba2a629

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+300
-117
lines changed

‎antwar.config.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,22 +57,22 @@ module.exports = {
5757
);
5858
}
5959
),
60-
configuration: section(
61-
'Configuration',
60+
guides: section(
61+
'Guides',
6262
function() {
6363
return require.context(
64-
'json-loader!yaml-frontmatter-loader!./content/configuration',
65-
false,
64+
'json-loader!yaml-frontmatter-loader!./content/guides',
65+
true,
6666
/^\.\/.*\.md$/
6767
);
6868
}
6969
),
70-
'how-to': section(
71-
'How to',
70+
configuration: section(
71+
'Configuration',
7272
function() {
7373
return require.context(
74-
'json-loader!yaml-frontmatter-loader!./content/how-to',
75-
true,
74+
'json-loader!yaml-frontmatter-loader!./content/configuration',
75+
false,
7676
/^\.\/.*\.md$/
7777
);
7878
}

‎components/navigation/navigation-style.scss

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -178,44 +178,22 @@
178178
}
179179
}
180180

181-
.algolia-autocomplete {
182-
display: flex !important;
183-
184-
.ds-dropdown-menu {
185-
box-shadow:none;
186-
187-
&:before {
188-
content:none;
189-
}
190-
191-
[class^=ds-dataset-] {
192-
border-color:map-get($colors, alto);
193-
border-radius:3px;
194-
}
195-
}
196-
197-
.algolia-docsearch-suggestion--category-header {
198-
border-color:map-get($colors, alto);
199-
}
200-
201-
.algolia-docsearch-suggestion--highlight {
202-
color:map-get($colors, denim);
203-
background:rgba(map-get($colors, malibu), .2);
204-
}
205-
206-
.ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
207-
background:rgba(map-get($colors, dusty-grey), .15)!important;
208-
}
181+
.navigation__bottom {
182+
background:map-get($colors, emperor);
183+
}
209184

210-
.algolia-docsearch-suggestion--subcategory-column {
211-
color:map-get($colors, dove-grey);
212-
}
185+
.navigation__child {
186+
font-size: getFontSize(-1);
187+
margin:0.5em 1em 0.6em;
188+
color:map-get($colors, dusty-grey);
189+
text-transform: uppercase;
213190

214-
.algolia-docsearch-suggestion--category-header {
215-
color:map-get($colors, mine-shaft);
191+
&:first-of-type {
192+
margin-left: 0;
216193
}
217194

218-
.algolia-docsearch-suggestion--title {
219-
color:map-get($colors, mine-shaft);
195+
&:hover,
196+
&--active {
197+
color:map-get($colors, white);
220198
}
221199
}

‎components/navigation/navigation.jsx

Lines changed: 73 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,32 @@ import Link from '../link/link';
33
import Container from '../container/container';
44
import Logo from '../logo/logo';
55
import './navigation-style';
6+
import './search-style';
7+
8+
let Sections = [
9+
{
10+
title: 'Concepts',
11+
url: 'concepts'
12+
},
13+
{
14+
title: 'Guides',
15+
url: 'guides'
16+
},
17+
{
18+
title: 'Documentation',
19+
url: 'configuration',
20+
children: [
21+
{ title: 'API', url: 'api' },
22+
{ title: 'Configuration', url: 'configuration' },
23+
{ title: 'Loaders', url: 'loaders' },
24+
{ title: 'Plugins', url: 'plugins' }
25+
]
26+
},
27+
{
28+
title: 'Donate',
29+
url: '//opencollective.com/webpack'
30+
}
31+
];
632

733
export default class Navigation extends React.Component {
834
render() {
@@ -23,24 +49,20 @@ export default class Navigation extends React.Component {
2349

2450
<nav className="navigation__links">
2551
{
26-
sections.filter(section => ['Other', 'Get-Started'].indexOf(section.title) === -1).map((link, i) => {
27-
let active = pageUrl.includes(`${link.url}/`);
28-
let activeClass = active ? 'navigation__link--active' : '';
52+
Sections.map(section => {
53+
let active = this._isActive(section);
54+
let activeMod = active ? 'navigation__link--active' : '';
2955

3056
return (
3157
<Link
32-
key={ `navigation__link${i}` }
33-
className={ `navigation__link ${activeClass}` }
34-
to={ `/${link.url}` }>
35-
{ link.title }
58+
key={ `navigation__link-${section.title}` }
59+
className={ `navigation__link ${activeMod}` }
60+
to={ `/${section.url}` }>
61+
{ section.title }
3662
</Link>
3763
);
3864
})
3965
}
40-
41-
<Link className="navigation__link" to="//opencollective.com/webpack">
42-
Donate
43-
</Link>
4466
</nav>
4567

4668
<div className="navigation__search">
@@ -55,20 +77,43 @@ export default class Navigation extends React.Component {
5577
</button>
5678
</div>
5779
</Container>
80+
81+
{
82+
Sections.filter(section => this._isActive(section) && section.children).map(section => {
83+
return (
84+
<div className="navigation__bottom" key={ section.title }>
85+
<Container className="navigation__inner">
86+
{
87+
section.children.map(child => {
88+
let activeMod = this._isActive(child) ? 'navigation__child--active' : '';
89+
90+
return (
91+
<Link
92+
key={ `navigation__child-${child.title}` }
93+
className={ `navigation__child ${activeMod}` }
94+
to={ `/${child.url}` }>
95+
{ child.title }
96+
</Link>
97+
);
98+
})
99+
}
100+
</Container>
101+
</div>
102+
);
103+
})
104+
}
58105
</header>
59106
);
60107
}
61108

62109
componentDidMount() {
63110
if (typeof window !== 'undefined') {
64-
// Initialize DocSearch/Algolia
65111
window.docsearch({
66112
apiKey: 'fac401d1a5f68bc41f01fb6261661490',
67113
indexName: 'webpack-js-org',
68114
inputSelector: '.navigation__search-input'
69115
});
70116

71-
// Open the search on tabbing for usability
72117
window.addEventListener('keyup', e => {
73118
if (e.which === 9 && e.target.classList.contains('navigation__search-input')) {
74119
this._openSearch();
@@ -77,6 +122,21 @@ export default class Navigation extends React.Component {
77122
}
78123
}
79124

125+
/**
126+
* Check if section is active
127+
*
128+
* @param {object} section - An object describing the section
129+
* @return {bool} - Whether or not the given section is active
130+
*/
131+
_isActive(section) {
132+
let { pageUrl } = this.props;
133+
134+
if (section.children) {
135+
return section.children.some(child => pageUrl.includes(`${child.url}/`));
136+
137+
} else return pageUrl.includes(`${section.url}/`);
138+
}
139+
80140
/**
81141
* Toggle the SidebarMobile component
82142
*

‎components/navigation/search-style.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import 'vars';
2+
3+
.algolia-autocomplete {
4+
display: flex !important;
5+
6+
.ds-dropdown-menu {
7+
box-shadow: none;
8+
9+
&:before {
10+
content: none;
11+
}
12+
13+
[class^=ds-dataset-] {
14+
border-color: map-get($colors, alto);
15+
border-radius: 3px;
16+
}
17+
}
18+
19+
.algolia-docsearch-suggestion--category-header {
20+
border-color:map-get($colors, alto);
21+
}
22+
23+
.algolia-docsearch-suggestion--highlight {
24+
color:map-get($colors, denim);
25+
background:rgba(map-get($colors, malibu), 0.2);
26+
}
27+
28+
.ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
29+
background:rgba(map-get($colors, dusty-grey), 0.15) !important;
30+
}
31+
32+
.algolia-docsearch-suggestion--subcategory-column {
33+
color:map-get($colors, dove-grey);
34+
}
35+
36+
.algolia-docsearch-suggestion--category-header {
37+
color:map-get($colors, mine-shaft);
38+
}
39+
40+
.algolia-docsearch-suggestion--title {
41+
color:map-get($colors, mine-shaft);
42+
}
43+
}

‎components/sidebar-item/sidebar-item.js renamed to ‎components/sidebar-item/sidebar-item.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default class SidebarItem extends React.Component {
1313

1414
render() {
1515
let { index, url, title, anchors = [], currentPage } = this.props;
16+
1617
let emptyMod = !anchors.length ? 'sidebar-item--empty' : '';
1718
let active = `/${currentPage}` === url;
1819
let openMod = (active || this.state.open) ? 'sidebar-item--open' : '';

‎components/sidecar/sidecar-style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@include break(large) {
88
display: block;
99
position: fixed;
10-
top: 75px;
10+
top: 100px;
1111
right: 0;
1212
z-index: 100;
1313
}

‎content/api/cli.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: CLI
2+
title: Command Line Interface
3+
sort: 2
34
---
4-
## Overview
55

66
webpack provides a Command Line Interface (CLI) to configure and interact with your build. This is mostly useful in case of early prototyping, profiling, writing npm scripts or personal customization of the build.
77

‎content/api/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: API
3+
sort: 1
34
---
45

5-
TODO
6-
6+
> TODO

‎content/api/loaders.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
22
title: Loader API
3+
sort: 4
34
---
45

6+
> TODO

‎content/api/node.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
---
22
title: Node.js API
3+
sort: 3
34
contributors:
45
- sallar
56
---
7+
68
webpack provides a Node.js API which can be used directly in Node.js runtime.
79

810
The Node.js API is useful in scenarios in which you need to customize the build or development process since all the reporting and error handling must be done manually and webpack only does the compiling part.

0 commit comments

Comments
 (0)