Skip to content

Commit 0d4636c

Browse files
skipjackskipjack
authored
Merge pull request #474 from webpack/feature/organization-refactoring
Refactoring the Organization Page
2 parents bbc5626 + 1d39d7f commit 0d4636c

File tree

15 files changed

+472
-164
lines changed

15 files changed

+472
-164
lines changed

‎antwar.config.js

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ module.exports = {
3737
);
3838
}
3939
),
40+
4041
'get-started': section(
4142
'Get-Started',
4243
function() {
@@ -47,6 +48,7 @@ module.exports = {
4748
)
4849
}
4950
),
51+
5052
concepts: section(
5153
'Concepts',
5254
function() {
@@ -57,6 +59,7 @@ module.exports = {
5759
);
5860
}
5961
),
62+
6063
guides: section(
6164
'Guides',
6265
function() {
@@ -67,6 +70,7 @@ module.exports = {
6770
);
6871
}
6972
),
73+
7074
configuration: section(
7175
'Configuration',
7276
function() {
@@ -77,6 +81,7 @@ module.exports = {
7781
);
7882
}
7983
),
84+
8085
api: section(
8186
'API',
8287
function() {
@@ -87,6 +92,7 @@ module.exports = {
8792
);
8893
}
8994
),
95+
9096
pluginsapi: section(
9197
'Plugins API',
9298
function() {
@@ -97,6 +103,7 @@ module.exports = {
97103
);
98104
}
99105
),
106+
100107
loaders: section(
101108
'Loaders',
102109
function() {
@@ -107,6 +114,7 @@ module.exports = {
107114
);
108115
}
109116
),
117+
110118
plugins: section(
111119
'Plugins',
112120
function() {
@@ -117,14 +125,30 @@ module.exports = {
117125
);
118126
}
119127
),
120-
vote: voteList(
121-
'Voting',
122-
{
123-
index: true,
124-
feedback: true,
125-
moneyDistribution: true,
128+
129+
vote: {
130+
path() {
131+
return require('./components/vote/list.jsx').default
132+
}
133+
},
134+
135+
'vote/feedback': {
136+
path() {
137+
return require('./components/vote/list.jsx').default
138+
}
139+
},
140+
141+
'vote/moneyDistribution': {
142+
path() {
143+
return require('./components/vote/list.jsx').default
126144
}
127-
)
145+
},
146+
147+
organization: {
148+
path() {
149+
return require('./components/organization/organization.jsx').default
150+
}
151+
}
128152
}
129153
};
130154

@@ -185,45 +209,3 @@ function processPage() {
185209
}
186210
};
187211
}
188-
189-
function voteList(title, lists) {
190-
return {
191-
title: title,
192-
path: function() {
193-
function context(request) {
194-
var name = /^\.\/(.*)\.md$/.exec(request)[1];
195-
return {
196-
name: name,
197-
__content: '' // make antwar happy
198-
};
199-
}
200-
context.keys = function() {
201-
return Object.keys(lists).map(k => './' + k + '.md');
202-
};
203-
return context;
204-
},
205-
processPage: {
206-
url: function(o) {
207-
return 'vote/' + o.file.name;
208-
},
209-
name: function(o) {
210-
return o.file.name;
211-
},
212-
anchors: function(o) {
213-
return [];
214-
},
215-
content: function(o) {
216-
return '';
217-
}
218-
},
219-
layouts: {
220-
index: function() {
221-
return require('./components/vote/list.jsx').default
222-
},
223-
page: function() {
224-
return require('./components/vote/list.jsx').default
225-
}
226-
},
227-
redirects: {} // <from>: <to>
228-
};
229-
}

‎components/contributors/contributors.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ export default ({contributors}) => {
88

99
return (
1010
<div className="contributors">
11-
<hr />
12-
<h3>Contributors</h3>
1311
<div className="contributors__list">
1412
{
1513
contributors.map(contributor => (

‎components/footer/footer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (props) => {
1010
<Container className="footer__inner">
1111
<section className="footer__left">
1212
<Link className="footer__link" to="/get-started">Get Started</Link>
13-
<Link className="footer__link" to="/analyze">Analyze</Link>
13+
<Link className="footer__link" to="/organization">Organization</Link>
1414
<Link className="footer__link" to="/contribute">Contribute</Link>
1515
<Link className="footer__link" to="/get-started/why-webpack#comparison">Comparison</Link>
1616
</section>

‎components/navigation/navigation.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ let Sections = [
3232
// TODO: Move back to using state once we can handle algolia on our own
3333
export default class Navigation extends React.Component {
3434
render() {
35-
let { pageUrl, sections } = this.props;
36-
35+
let { pageUrl = '' } = this.props;
36+
3737
return (
3838
<header className="navigation">
3939
<Container className="navigation__inner">
@@ -129,7 +129,7 @@ export default class Navigation extends React.Component {
129129
* @return {bool} - Whether or not the given section is active
130130
*/
131131
_isActive(section) {
132-
let { pageUrl } = this.props;
132+
let { pageUrl = '' } = this.props;
133133

134134
if (section.children) {
135135
return section.children.some(child => pageUrl.includes(`${child.url}/`));

‎components/organization/organization-style.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@import 'functions';
2+
@import 'mixins';
3+
4+
.organization {
5+
padding: 1.5em;
6+
}
7+
8+
.organization__projects {
9+
display: flex;
10+
flex-wrap: wrap;
11+
justify-content: center;
12+
13+
@include break {
14+
justify-content: flex-start;
15+
}
16+
}
17+
18+
.organization__project {
19+
width: 280px;
20+
height: 420px;
21+
margin-right: 1em;
22+
margin-bottom: 1em;
23+
padding: 1em;
24+
border-radius: 2px;
25+
box-shadow: 0 0 1px getColor(dove-grey);
26+
overflow: hidden;
27+
background: getColor(concrete);
28+
transition: all 250ms;
29+
30+
&:hover {
31+
box-shadow: 0 0 5px getColor(emperor);
32+
background: white;
33+
}
34+
}

‎components/organization/organization.jsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import Container from '../container/container';
3+
import Contributors from '../contributors/contributors';
4+
import Link from '../link/link';
5+
import Items from './projects.json';
6+
import './organization-style';
7+
8+
let Shield = props => (
9+
<img src={
10+
`//img.shields.io/${props.content}.svg?label=${props.label}&style=flat-square&maxAge=3600`
11+
} />
12+
);
13+
14+
export default props => {
15+
return (
16+
<Container className="organization page__content">
17+
<h1>The Organization</h1>
18+
19+
<p>The list below provides a brief overview of all commonly used projects in the webpack ecosystem.</p>
20+
21+
<div className="organization__projects">
22+
{
23+
Items.map(org => (
24+
<div className="organization__project" key={ org.repo }>
25+
<a className="organization__title" href={ `https://github.com/${org.repo}` }>
26+
<h4>{ org.repo }</h4>
27+
</a>
28+
29+
<p>{ org.description }</p>
30+
31+
<h6>Downloads and Stars</h6>
32+
<Shield content={ `npm/dm/${org.npm}`} label="npm" />
33+
&nbsp;
34+
<Shield content={ `github/stars/${org.repo}` } label="&#10029;" />
35+
36+
<h6>Activity</h6>
37+
<Shield
38+
content={ `github/commits-since/${org.repo}/${encodeURIComponent("master@{6 months ago}")}` }
39+
label="6m" />
40+
&nbsp;
41+
<Shield
42+
content={ `github/commits-since/${org.repo}/${encodeURIComponent("master@{3 months ago}")}` }
43+
label="3m" />
44+
&nbsp;
45+
<Shield
46+
content={ `github/commits-since/${org.repo}/${encodeURIComponent("master@{1 month ago}")}` }
47+
label="1m" />
48+
&nbsp;
49+
<Shield
50+
content={ `github/commits-since/${org.repo}/${encodeURIComponent("master@{1 week ago}")}` }
51+
label="1w" />
52+
53+
<h6>Issues and PRs</h6>
54+
<Shield content={ `github/issues-raw/${org.repo}` } label="issues" />
55+
&nbsp;
56+
<Shield content={ `github/issues-pr-raw/${org.repo}` } label="prs" />
57+
58+
<h6>Maintainers</h6>
59+
{
60+
(() => {
61+
if (org.maintainer) {
62+
return <Contributors contributors={[ org.maintainer ]} />;
63+
64+
} else return <Link to="https://github.com/webpack/webpack/issues/2734">Maintainer needed...</Link>;
65+
})()
66+
}
67+
68+
</div>
69+
))
70+
}
71+
</div>
72+
</Container>
73+
);
74+
};

0 commit comments

Comments
 (0)