Starter Kits

.gitignore

@@ -4,4 +4,5 @@ build
 generated
 components/support/support-backers.json
 components/support/support-sponsors.json
+components/starter-kits/starter-kits-data.json
 .antwar

antwar.config.js

@@ -73,6 +73,13 @@ module.exports = {
       }
     ),
 
+    'guides/starter-kits': {
+      title: 'Starter Kits',
+      path() {
+        return require('./components/starter-kits/starter-kits.jsx').default;
+      }
+    },
+
     development: section(
       'Development',
       function() {

components/starter-kits/starter-kits-style.scss

@@ -0,0 +1,4 @@
+.starter-kits {
+  flex: 1 1 auto;
+  padding: 1.5em;
+}

components/starter-kits/starter-kits.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Container from '../container/container';
+import Link from '../link/link';
+import Kits from './starter-kits-data.json';
+import './starter-kits-style';
+
+// NOTE: The table classes used in this component correspond to
+// those used in the markdown utility. Ideally we will soon create
+// a table component that both the markdown utility and this page
+// can use. This component could even use something like griddle
+// to allow sorting and such.
+
+export default props => (
+  <Container className="starter-kits page__content">
+    <h1>Starter Kits</h1>
+
+    <p>
+      The following table contains a curated list of starter kits that can&nbsp;
+      be used as a jumping off point for webpack-based projects. To add a new&nbsp;
+      kit to the list please visit&nbsp;
+      <Link to="https://github.com/ahfarmer/tool-list">this repository</Link>&nbsp;
+      and submit a PR against this file:&nbsp;
+      <code>generator/starterProjectUrls.js</code>.
+    </p>
+
+    <div className="table">
+      <div className="table-wrap">
+        <div className="table-header">
+          <div className="table-tr">
+            <div className="table-th">Project Name</div>
+            <div className="table-th">Maintainer</div>
+            <div className="table-th">Tags</div>
+          </div>
+        </div>
+        <div className="table-body">
+          { Kits.map((kit, i) => (
+            <div className="table-tr" key={ i }>
+              <div className="table-td">
+                <div className="table-td-title">Project Name</div>
+                <div className="table-td-content">
+                  <Link to={ kit.githubUrl }>{ kit.githubRepoName }</Link>
+                </div>
+              </div>
+              <div className="table-td">
+                <div className="table-td-title">Maintainer</div>
+                <div className="table-td-content">{ kit.githubUserName }</div>
+              </div>
+              <div className="table-td">
+                <div className="table-td-title">Tags</div>
+                <div className="table-td-content">{ kit.tags.join(' | ') }</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </Container>
+);

package.json

@@ -104,6 +104,7 @@
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-router": "^2.8.1",
+    "tool-list": "^0.9.1",
     "whatwg-fetch": "^2.0.1"
   }
 }

scripts/fetch.sh

@@ -18,3 +18,6 @@ cp -rf ./content/plugins/ ./generated/plugins
 
 # Fetch sponsors and backers from opencollective
 ./scripts/fetch_supporters.js
+
+# Fetch starter kits
+./scripts/fetch_starter_kits.js

scripts/fetch_starter_kits.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const toolList = require('tool-list');
+
+const data = toolList.startersWithTag('webpack');
+const body = JSON.stringify(data);
+
+fs.writeFile('./components/starter-kits/starter-kits-data.json', body, err => {
+  if (err) {
+    console.error('Failed to write starter kits file: ', err);
+
+  } else console.log('Fetched 1 file: starter-kits-data.json')
+});

scripts/fetch_supporters.js

@@ -7,7 +7,10 @@ request('https://opencollective.com/webpack/sponsors.json?requireActive=false',
     console.error('Failed to fetch sponsors: ', err);
 
   } fs.writeFile('./components/support/support-sponsors.json', body, err => {
-    if (err) console.error('Failed to write sponsors file: ', err);
+    if (err) {
+      console.error('Failed to write sponsors file: ', err);
+
+    } else console.log('Fetched 1 file: support-sponsors.json')
   });
 });
 
@@ -16,6 +19,9 @@ request('https://opencollective.com/webpack/backers.json?requireActive=false', (
     console.error('Failed to fetch backers: ', err);
 
   } fs.writeFile('./components/support/support-backers.json', body, err => {
-    if (err) console.error('Failed to write backers file: ', err);
+    if (err) {
+      console.error('Failed to write backers file: ', err);
+
+    } else console.log('Fetched 1 file: support-backers.json')
   });
 });