refactor(pwa): rename components and move code to /src (#1490)

Rename component directories, files and stylesheets. Move app specific 
code to a `/src` directory. Update all location dependent scripts. Resolve
some linting issues -- it seems most of our content actually wasn't picked
up by alex prior to these changes. This commit fixes/ignores the new 
warnings that cropped up.

Author: pierreneter

.alexrc

@@ -2,23 +2,28 @@
   "allow": [
     "bigger",
     "color",
-    "lies",
+    "colors",
+    "crash",
+    "dead",
+    "dive",
     "execute",
     "executed",
     "execution",
-    "host-hostess",
+    "dirty",
     "disabled",
-    "crash",
+    "failed",
     "failure",
-    "period",
+    "fire",
     "hook",
-    "dirty",
     "host-hostess",
-    "fire",
-    "remains",
+    "hosts",
     "jade",
-    "failed",
-    "white",
-    "colors"
+    "laid",
+    "lies",
+    "period",
+    "pros",
+    "reject",
+    "remains",
+    "white"
   ]
 }

.gitignore

@@ -2,7 +2,7 @@ node_modules
 npm-debug.log
 build
 generated
-components/support/support-backers.json
-components/support/support-sponsors.json
-components/starter-kits/starter-kits-data.json
+src/components/Support/support-backers.json
+src/components/Support/support-sponsors.json
+src/components/StarterKits/starter-kits-data.json
 .antwar

.travis.yml

@@ -6,7 +6,7 @@ language: node_js
 node_js:
   - "6"
 script:
-  - bash ./scripts/deploy.sh
+  - bash ./src/scripts/deploy.sh
 sudo: required
 install:
   - npm install --global yarn

antwar.config.js

@@ -1,8 +1,8 @@
 var _ = require('lodash');
 var path = require('path');
 var prevnextPlugin = require('antwar-prevnext-plugin');
-var markdown = require('./utilities/markdown');
-var highlight = require('./utilities/highlight');
+var markdown = require('./src/utilities/markdown');
+var highlight = require('./src/utilities/highlight');
 
 module.exports = {
   template: {
@@ -26,13 +26,13 @@ module.exports = {
     prevnextPlugin()
   ],
   layout: function() {
-    return require('./components/site/site.jsx').default
+    return require('./src/components/Site/Site.jsx').default
   },
   paths: {
     '/': root(
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content',
+          'json-loader!yaml-frontmatter-loader!./src/content',
           false,
           /^\.\/.*\.md$/
         );
@@ -51,7 +51,7 @@ module.exports = {
       'Concepts',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/concepts',
+          'json-loader!yaml-frontmatter-loader!./src/content/concepts',
           false,
           /^\.\/.*\.md$/
         );
@@ -62,7 +62,7 @@ module.exports = {
       'Guides',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/guides',
+          'json-loader!yaml-frontmatter-loader!./src/content/guides',
           true,
           /^\.\/.*\.md$/
         );
@@ -80,15 +80,15 @@ module.exports = {
     'guides/starter-kits': {
       title: 'Starter Kits',
       path() {
-        return require('./components/starter-kits/starter-kits.jsx').default;
+        return require('./src/components/StarterKits/StarterKits.jsx').default;
       }
     },
 
     development: section(
       'Development',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/development',
+          'json-loader!yaml-frontmatter-loader!./src/content/development',
           true,
           /^\.\/.*\.md$/
         );
@@ -99,7 +99,7 @@ module.exports = {
       'Configuration',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/configuration',
+          'json-loader!yaml-frontmatter-loader!./src/content/configuration',
           false,
           /^\.\/.*\.md$/
         );
@@ -112,7 +112,7 @@ module.exports = {
       'API',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/api',
+          'json-loader!yaml-frontmatter-loader!./src/content/api',
           false,
           /^\.\/.*\.md$/
         );
@@ -125,7 +125,7 @@ module.exports = {
       'API',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/api/plugins',
+          'json-loader!yaml-frontmatter-loader!./src/content/api/plugins',
           false,
           /^\.\/.*\.md$/
         );
@@ -144,7 +144,7 @@ module.exports = {
       'Loaders',
       function() {
         const content = require.context(
-          'json-loader!yaml-frontmatter-loader!./content/loaders',
+          'json-loader!yaml-frontmatter-loader!./src/content/loaders',
           false,
           /^\.\/.*\.md$/
         );
@@ -161,7 +161,7 @@ module.exports = {
       'Plugins',
       function() {
         const content = require.context(
-          'json-loader!yaml-frontmatter-loader!./content/plugins',
+          'json-loader!yaml-frontmatter-loader!./src/content/plugins',
           false,
           /^\.\/.*\.md$/
         );
@@ -178,7 +178,7 @@ module.exports = {
       'Support',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/support',
+          'json-loader!yaml-frontmatter-loader!./src/content/support',
           false,
           /^\.\/.*\.md$/
         );
@@ -187,25 +187,25 @@ module.exports = {
 
     vote: {
       path() {
-        return require('./components/vote/list.jsx').default
+        return require('./src/components/Vote/List.jsx').default
       }
     },
 
     'vote/feedback': {
       path() {
-        return require('./components/vote/list.jsx').default
+        return require('./src/components/Vote/List.jsx').default
       }
     },
 
     'vote/moneyDistribution': {
       path() {
-        return require('./components/vote/list.jsx').default
+        return require('./src/components/Vote/List.jsx').default
       }
     },
 
     organization: {
       path() {
-        return require('./components/organization/organization.jsx').default
+        return require('./src/components/Organization/Organization.jsx').default
       }
     }
   }
@@ -220,10 +220,10 @@ function root(contentCb) {
     processPage: processPage(), // Process individual page (url, content)
     layouts: { // Layouts (page/section)
       index: function() {
-        return require('./components/splash/splash.jsx').default
+        return require('./src/components/Splash/Splash.jsx').default
       },
       page: function() {
-        return require('./components/page/page.jsx').default
+        return require('./src/components/Page/Page.jsx').default
       }
     },
     redirects: {} // Redirects <from>: <to>
@@ -242,10 +242,10 @@ function section(title, contentCb, redirects = {}) {
     processPage: processPage(),
     layouts: {
       index: function() {
-        return require('./components/page/page.jsx').default
+        return require('./src/components/Page/Page.jsx').default
       },
       page: function() {
-        return require('./components/page/page.jsx').default
+        return require('./src/components/Page/Page.jsx').default
       }
     },
     redirects: redirects // <from>: <to>

package.json

@@ -28,14 +28,14 @@
     "build": "npm run init:generated && npm run fetch && rm -rf build/ && node ./bootstrap.js && npm run sitemap && echo webpack.js.org > build/CNAME",
     "build-test": "npm run build && http-server build/",
     "deploy": "gh-pages -d build",
-    "fetch": "scripts/fetch.sh",
+    "fetch": "bash src/scripts/fetch.sh",
     "init:generated": "mkdirp ./generated/loaders && mkdirp ./generated/plugins ",
     "lint": "run-s lint:*",
-    "lint:links": "hyperlink -r build/index.html --canonicalroot https://webpack.js.org/ | ./scripts/check-links.js",
+    "lint:links": "hyperlink -r build/index.html --canonicalroot https://webpack.js.org/ | node ./src/scripts/check-links.js",
     "lint:js": "eslint . --ext .js --ext .jsx",
-    "lint:markdown": "markdownlint --config ./.markdownlint.json *.md ./content/**/*.md",
+    "lint:markdown": "markdownlint --config ./.markdownlint.json *.md ./src/content/**/*.md",
     "lint:social": "alex ./**/*.md",
-    "lint:prose": "cp .proselintrc ~/ && proselint content",
+    "lint:prose": "cp .proselintrc ~/ && proselint src/content",
     "test": "npm run lint",
     "sitemap": "cd build && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml"
   },

scripts/fetch.sh

@@ -1,5 +1,5 @@
 import React from 'react';
-import './contributors-style';
+import './Contributors.scss';
 
 export default ({contributors}) => {
   if (!contributors.length) {

assets/ag-grid-logo.png src/assets/ag-grid-logo.png

@@ -1,10 +1,10 @@
 import React from 'react';
-import Link from '../link/link';
-import Container from '../container/container';
+import Link from '../Link/Link';
+import Container from '../Container/Container';
 import Icon from '../../assets/icon-square-small.svg';
 import CC from '../../assets/cc.svg';
 import BY from '../../assets/by.svg';
-import './footer-style';
+import './Footer.scss';
 
 export default (props) => {
   return (

assets/awesome-badge.svg src/assets/awesome-badge.svg

@@ -1,8 +1,8 @@
 import React from 'react';
-import Link from '../link/link';
-import Container from '../container/container';
-import Logo from '../logo/logo';
-import Dropdown from '../dropdown/dropdown';
+import Link from '../Link/Link';
+import Container from '../Container/Container';
+import Logo from '../Logo/Logo';
+import Dropdown from '../Dropdown/Dropdown';
 
 // TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
 let Sections = [

assets/by.svg src/assets/by.svg

@@ -1,5 +1,5 @@
 import React from 'react';
-import Container from '../container/container';
+import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 
 const version = '1';

assets/cc.svg src/assets/cc.svg

@@ -1,10 +1,10 @@
 import React from 'react';
-import Container from '../container/container';
-import Contributors from '../contributors/contributors';
-import Link from '../link/link';
-import Shield from '../shield/shield';
+import Container from '../Container/Container';
+import Contributors from '../Contributors/Contributors';
+import Link from '../Link/Link';
+import Shield from '../Shield/Shield';
 import Items from './projects.json';
-import './organization-style';
+import './Organization.scss';
 
 export default props => {
   return (

assets/favicon.ico src/assets/favicon.ico

@@ -1,23 +1,23 @@
 import React from 'react';
 import Interactive from 'antwar-interactive';
-import Container from '../container/container';
-import Sidebar from '../sidebar/sidebar';
-import PageLinks from '../page-links/page-links';
-import Gitter from '../gitter/gitter';
-import Contributors from '../contributors/contributors';
-import Sponsors from '../sponsors/sponsors';
-import './page-style';
-import '../sidebar/sidebar-style';
-import '../sponsors/sponsors-style';
-import '../gitter/gitter-style';
+import Container from '../Container/Container';
+import Sidebar from '../Sidebar/Sidebar';
+import PageLinks from '../PageLinks/PageLinks';
+import Gitter from '../Gitter/Gitter';
+import Contributors from '../Contributors/Contributors';
+import Sponsors from '../Sponsors/Sponsors';
+import './Page.scss';
+import '../Sidebar/Sidebar.scss';
+import '../Sponsors/Sponsors.scss';
+import '../Gitter/Gitter.scss';
 
 export default ({ section, page }) => (
   <Container className="page">
 
     <Sponsors />
 
     <Interactive
-      id="components/sidebar/sidebar.jsx"
+      id="src/components/Sidebar/Sidebar.jsx"
       component={ Sidebar }
       sectionName={ section.name }
       pages={ section.pages().map(page => ({
@@ -65,7 +65,7 @@ export default ({ section, page }) => (
       ) : null }
 
       <Interactive
-        id="components/gitter/gitter.jsx"
+        id="src/components/Gitter/Gitter.jsx"
         component={ Gitter } />
     </section>
   </Container>

assets/geomanist-medium.woff src/assets/geomanist-medium.woff

@@ -1,12 +1,12 @@
 import React from 'react';
 import TrimEnd from 'lodash/trimEnd';
-import './page-links-style';
+import './PageLinks.scss';
 
 export default ({
   section = '',
   page = {}
 }) => {
-  let baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/content';
+  let baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/src/content';
   let indexPath = page.type === 'index' ? '/index' : '';
   let mainPath = page.url.startsWith('/') ? page.url : `/${page.url}`;
   let editLink = page.edit || baseURL + TrimEnd(mainPath, '/') + indexPath + '.md';

assets/geomanist-medium.woff2 src/assets/geomanist-medium.woff2

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Shield from '../shield/shield';
-import SidebarItem from '../sidebar-item/sidebar-item';
+import Shield from '../Shield/Shield';
+import SidebarItem from '../SidebarItem/SidebarItem';
 
 export default class Sidebar extends Component {
   constructor(props) {