Merge pull request patternfly#54 from seanforyou23/readme

chore(readme): update readme with helpful information

README.md

@@ -1,6 +1,10 @@
 # Patternfly Seed
 
-Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly.
+Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.
+
+Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.
+
+<img width="1014" alt="Screen Shot 2019-07-09 at 9 55 45 AM" src="https://user-images.githubusercontent.com/5942899/60894024-eaebdf00-a22f-11e9-84bc-8e7e370b5f94.png">
 
 ## Quick-start
 ```bash
@@ -37,24 +41,32 @@ Launch a tool to inspect the bundle size
 * [Jest Config](./jest.config.js)
 * [Editor Config](./.editorconfig)
 
-## Image Support
+## Raster Image Support
 
-To use an image asset that's shipped with patternfly core, you'll prefix the paths with `@assets`. `@assets` is an alias for the patternfly assets directory in node_modules.
+To use an image asset that's shipped with patternfly core, you'll prefix the paths with "@assets". `@assets` is an alias for the patternfly assets directory in node_modules.
 
-`import imgSrc from '@assets/images/g_sizing.png';`
-Then you can use it like:
-`<img src={imgSrc} alt="Some image" />`
+For example:
+```js
+import imgSrc from '@assets/images/g_sizing.png';
+<img src={imgSrc} alt="Some image" />
+```
 
-You can use a similar technique to import assets from your local app, just prefix the paths with. `@app`.
-`import loader from '@app/assets/images/loader.gif';`
-`<img src={loader} alt="Content loading />`
+You can use a similar technique to import assets from your local app, just prefix the paths with "@app". `@app` is an alias for the main src/app directory.
 
+```js
+import loader from '@app/assets/images/loader.gif';
+<img src={loader} alt="Content loading />
+```
+
+## Vector Image Support
 Inlining SVG in the app's markup is also possible.
-`import logo from '@app/assets/images/logo.svg';`
-Then you can use it like:
-`<span dangerouslySetInnerHTML={{__html: logo}} />`
 
-You can also use SVG to apply background images with CSS. To do this, your svg's must live under a `bgimages` directory. This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.
+```js
+import logo from '@app/assets/images/logo.svg';
+<span dangerouslySetInnerHTML={{__html: logo}} />
+```
+
+You can also use SVG when applying background images with CSS. To do this, your SVG's must live under a `bgimages` directory (this directory name is configurable in [webpack.common.js](./webpack.common.js#L5)). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.
 ```css
 body {
   background: url(./assets/bgimages/img_avatar.svg);

webpack.common.js

@@ -2,6 +2,8 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
+const BG_IMAGES_DIRNAME = 'bgimages';
+
 module.exports = {
   entry: {
     app: './src/index.tsx'
@@ -63,7 +65,7 @@ module.exports = {
         test: /\.svg$/,
         // only process SVG modules with this loader if they live under a 'bgimages' directory
         // this is primarily useful when applying a CSS background using an SVG
-        include: input => input.indexOf('bgimages') > -1,
+        include: input => input.indexOf(BG_IMAGES_DIRNAME) > -1,
         use: {
           loader: 'svg-url-loader',
           options: {}
@@ -74,7 +76,7 @@ module.exports = {
         // only process SVG modules with this loader when they don't live under a 'bgimages',
         // 'fonts', or 'pficon' directory, those are handled with other loaders
         include: input => (
-          (input.indexOf('bgimages') === -1) &&
+          (input.indexOf(BG_IMAGES_DIRNAME) === -1) &&
           (input.indexOf('fonts') === -1) &&
           (input.indexOf('background-filter') === -1) &&
           (input.indexOf('pficon') === -1)