@@ -14,6 +14,7 @@
     "@ionic/cli-framework": "0.1.2",
     "@ionic/cli-utils": "1.19.0",
     "ansi-styles": "^3.2.0",
+    "ascii-tree": "^0.3.0",
     "escape-string-regexp": "^1.0.5",
     "ionic": "3.19.0",
     "strip-ansi": "^4.0.0",
 
@@ -2,14 +2,9 @@ import * as path from 'path';
 
 import { generateRootPlugin } from 'ionic';
 import { Command } from '@ionic/cli-framework';
-import { copyDirectory, fsMkdirp, fsStat, fsWriteFile } from '@ionic/cli-framework/utils/fs';
-
+import { copyDirectory, fsMkdirp, fsReadDir, fsStat, fsWriteFile } from '@ionic/cli-framework/utils/fs';
 import { generateIonicEnvironment } from '@ionic/cli-utils';
 
-import formatIndexPage from './pages/index';
-import formatConfiguringPage from './pages/configuring';
-import formatCommandsPage from './pages/commands';
-import formatStartersPage from './pages/starters';
 import { formatCommandDoc, generateFullName, getCommandList } from './pages/commands';
 
 export class DocsCommand extends Command {
@@ -24,24 +19,19 @@ export class DocsCommand extends Command {
     const plugin = await generateRootPlugin();
     const env = await generateIonicEnvironment(plugin, process.argv.slice(2), process.env);
 
-    const indexPath = path.resolve(__dirname, '..', '..', '..', '..', '..', 'docs', 'index.md');
-    const indexDoc = await formatIndexPage(env);
-
-    const commandsPath = path.resolve(__dirname, '..', '..', '..', '..', '..', 'docs', 'commands.md');
-    const commandsDoc = await formatCommandsPage(env);
-
-    const configuringPath = path.resolve(__dirname, '..', '..', '..', '..', '..', 'docs', 'configuring.md');
-    const configuringDoc = await formatConfiguringPage();
+    const mdPath = path.resolve(__dirname, '..', '..', '..', '..', '..', 'docs');
+    const pagesDir = path.resolve(__dirname, 'pages');
+    const pages = (await fsReadDir(pagesDir)).filter(f => path.extname(f) === '.js').map(f => path.resolve(pagesDir, f)); // dist/docs/pages/*.js
 
-    const startersPath = path.resolve(__dirname, '..', '..', '..', '..', '..', 'docs', 'starters.md');
-    const startersDoc = await formatStartersPage();
+    await fsMkdirp(mdPath);
 
-    await fsMkdirp(path.dirname(indexPath));
-
-    await fsWriteFile(indexPath, indexDoc, { encoding: 'utf8' });
-    await fsWriteFile(commandsPath, commandsDoc, { encoding: 'utf8' });
-    await fsWriteFile(configuringPath, configuringDoc, { encoding: 'utf8' });
-    await fsWriteFile(startersPath, startersDoc, { encoding: 'utf8' });
+    for (const p of pages) {
+      const name = path.basename(p).slice(0, -path.extname(p).length);
+      const render = require(p).default;
+      const pageMdPath = path.resolve(mdPath, `${name}.md`);
+      const renderedPage = await render(env);
+      await fsWriteFile(pageMdPath, renderedPage, { encoding: 'utf8' });
+    }
 
     const commands = await getCommandList(env);
     const commandPromises = commands.map(async cmd => {
 
@@ -19,7 +19,7 @@ export default async function(env: IonicEnvironment) {
 
   return `${formatPageHeader('Commands', 'cli-command-list')}
 
-This is a comprehensive list of CLI commands. The \`ionic --help\` command will show a more organized and accurate list of commands.
+This is a comprehensive list of CLI commands. Running \`ionic --help\` will also show a list of commands.
 
 Command | Description
 ------- | -----------
 
@@ -12,18 +12,15 @@ Configuration values are stored in JSON files.
 * Global config file (\`~/.ionic/config.json\`): for global CLI config and auth
 * Project config files (\`ionic.config.json\`): for Ionic project config
 
-The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See \`ionic config set --help\` and \`ionic config get --help\` for usage.
+The CLI provides the \`ionic config\` commands for setting and printing config values from project config files and the global CLI config file.
 
 ## Integrations
 
-Integrations such as Cordova are automatically activated when detected, but can be easily disabled.
+You can manage integrations with the \`ionic integrations\` commands.
 
-Integrations hook into CLI events. For example, when the Cordova integration is enabled, \`ionic cordova prepare\` will run after \`ionic build\` runs. See [Hooks](#hooks).
+Integrations may also be auto-activated, but can also be disabled easily. When integrations are enabled, the behavior of the CLI may change. For example, when the Cordova integration is enabled, \`ionic cordova prepare\` will run after \`ionic build\` runs.
 
-| integration | enabled when...                                       | disabled with...                                         |
-| ------------|-------------------------------------------------------|----------------------------------------------------------|
-| Cordova     | \`ionic cordova\` commands are run                    | \`ionic config set integrations.cordova.enabled false\`  |
-| Gulp        | \`gulp\` exists in your \`package.json\` dependencies | \`ionic config set integrations.gulp.enabled false\`     |
+* \`cordova\`: Provides integration with [Apache Cordova](https://cordova.apache.org/) to target Native iOS and Android.
 
 ## Environment Variables
 
@@ -34,6 +31,8 @@ The CLI will look for the following environment variables:
 * \`IONIC_TOKEN\`: For automatic login with an auth token.
 * \`IONIC_EMAIL\` / \`IONIC_PASSWORD\`: For automatic login with email & password.
 
+\`IONIC_TOKEN\` and \`IONIC_EMAIL\` / \`IONIC_PASSWORD\` both initiate a session, which means they write your token to the global CLI config file. When the CLI detects a change in these environment variables, a new session is used.
+
 ### Command Options
 
 You can express command options (normally set with \`--opt=value\` syntax) with environment variables. The naming of these environment variables follows a pattern: start with \`IONIC_CMDOPTS_\`, add the command name (replacing any spaces with underscores), add the option name (replacing any hyphens with underscores), and then uppercase everything. Boolean flags (command-line options that don't take a value) can be set to \`1\` or \`0\`. Strip the \`--no-\` prefix in boolean flags, if it exists (\`--no-open\` in \`ionic serve\` can be expressed with \`IONIC_CMDOPTS_SERVE_OPEN=0\`, for example).
@@ -57,6 +56,7 @@ CLI flags are global options that alter the behavior of a CLI command.
 * \`--verbose\`: Show all log messages for debugging purposes.
 * \`--quiet\`: Only show \`WARN\` and \`ERROR\` log messages.
 * \`--no-interactive\`: Turn off interactive prompts and fancy outputs. If a CI server is detected (we use [ci-info](https://www.npmjs.com/package/ci-info)), the CLI is automatically non-interactive.
+* \`--no-color\`: Turn off colors.
 * \`--confirm\`: Turn on auto-confirmation of confirmation prompts. *Careful*: the CLI prompts before doing something potentially harmful. Auto-confirming may have unintended results.
 
 ## Hooks
@@ -77,8 +77,6 @@ CLI hooks are how you can run scripts during CLI events, such as "watch" and "bu
   }
 \`\`\`
 
-*Note: If you use [gulp](https://gulpjs.com/), the CLI will run gulp tasks by the same name as the npm scripts above.*
-
 ## Service Proxies
 
 The CLI can add proxies to the HTTP server for "livereload" commands like \`ionic serve\` and \`ionic cordova run android -lc\`. These proxies are useful if you are developing in the browser and you need to make calls to an external API. With this feature you can proxy requests to the external API through the Ionic CLI, which prevents the \`No 'Access-Control-Allow-Origin' header is present on the requested resource\` error.
 
@@ -0,0 +1,100 @@
+import { generate as generateTree } from 'ascii-tree';
+
+import { formatPageHeader } from '../utils';
+
+export default async function() {
+  return `${formatPageHeader('Project Types', 'cli-projects')}
+
+{% include fluid/toc.html %}
+
+The Ionic CLI works with a variety of Ionic project types. The type of a project is stored in the project's \`ionic.config.json\` file as \`type\`. Here is a list of project type values:
+
+* \`ionic-angular\`: [Ionic Angular](#ionic-angular)
+* \`ionic1\`: [Ionic 1](#ionic-1)
+* \`custom\`: The CLI will not invoke anything for build or serve. See [Hooks](/docs/cli/configuring.html#hooks) to use \`ionic build\` and \`ionic serve\` with your own build process.
+
+## Ionic Angular
+
+Ionic Angular ([\`ionic-angular\`](https://www.npmjs.com/package/ionic-angular)) uses [Angular 5](https://angular.io/) and [\`@ionic/app-scripts\`](https://github.com/ionic-team/ionic-app-scripts) for tooling.
+
+You can start a new Ionic Angular app with the following command:
+
+\`\`\`bash
+$ ionic start --type=ionic-angular
+\`\`\`
+
+See [Starter Templates](/docs/cli/starters.html#ionic-angular) for a list of starters for Ionic Angular.
+
+Ionic Angular apps are written in [TypeScript](https://www.typescriptlang.org/) and [Sass](http://sass-lang.com/) and are compiled and built with [\`@ionic/app-scripts\`](https://github.com/ionic-team/ionic-app-scripts), which is a configurable build system optimized for Ionic Angular.
+
+\`ionic build\` and \`ionic serve\` use \`@ionic/app-scripts\` out of the box, so it doesn't need to be invoked directly. It also ships with good defaults, but can be configured in a variety of ways. See [\`README.md\`](https://github.com/ionic-team/ionic-app-scripts/blob/master/README.md) for configuration details.
+
+### Project Structure
+
+\`\`\`
+${generateTree(`
+*project/
+**ionic.config.json # Ionic project config file
+**package.json
+**src/
+***app/
+****app.component.ts # root component for your app
+****app.html # app component template
+****app.module.ts # NgModule for app component
+****app.scss # global SCSS
+****main.ts # bootstrap file
+***assets/ # put your images, etc. here
+***pages/ # contains the page components for your app
+***theme/
+****variables.scss # see https://ionicframework.com/docs/theming
+***index.html # main html file
+**www/ # build output directory
+`.trim())}
+\`\`\`
+## Ionic 1
+
+Ionic 1 ([\`ionic-v1\`](https://github.com/ionic-team/ionic-v1/)) uses [AngularJS](https://angularjs.org/).
+
+You can start a new Ionic 1 app with the following command:
+
+\`\`\`bash
+$ ionic start --type=ionic1
+\`\`\`
+
+See [Starter Templates](/docs/cli/starters.html#ionic-1) for a list of starters for Ionic 1.
+
+Out of the box, Ionic 1 apps have no build process. \`www/index.html\` includes the \`www/css/style.css\` file and the three provided JS files withing \`www/js/\`.
+
+### Project Structure
+
+\`\`\`
+${generateTree(`
+*project/
+**bower.json
+**gulpfile.js
+**ionic.config.json # Ionic project config file
+**package.json
+**scss/
+***ionic.app.scss # enable sass to use
+**www/
+***css/
+****style.css # vanilla CSS source file
+***js/
+****app.js # bootstrap file, contains \`.config()\`
+****controllers.js # https://docs.angularjs.org/guide/controller
+****services.js # https://docs.angularjs.org/guide/services
+***templates/ # AngularJS templates
+***index.html # main html file
+`.trim())}
+\`\`\`
+
+### Enabling Sass
+
+You can use [Sass](http://sass-lang.com/) by changing which CSS file \`www/index.html\` uses (\`css/style.css\` is the default, \`css/ionic.app.css\` is generated and includes both Ionic styles and your app's styles).
+
+The main Sass source file is located at \`scss/ionic.app.scss\`.
+
+If your \`gulpfile.js\` contains the \`sass\` task, the CLI will run it automatically during the \`ionic build\` and \`ionic serve\` commands.
+
+`;
+}
@@ -1,14 +1,44 @@
-import { StarterTemplate } from '@ionic/cli-utils';
+import { ProjectType, StarterTemplate } from '@ionic/cli-utils';
 import { STARTER_TEMPLATES } from '@ionic/cli-utils/lib/start';
 
 import { formatPageHeader } from '../utils';
 
 interface Starter {
-  type: string;
+  type: ProjectType;
   name: string;
+  description: string;
   starters: StarterTemplate[];
 }
 
+const STARTERS: Starter[] = [
+  // {
+  //   type: 'angular',
+  //   name: 'Ionic for Angular',
+  //   description: `
+// These starters are for Ionic for Angular (\`@ionic/angular\`), which uses the latest version of Angular and the [Angular CLI](https://github.com/angular/angular-cli) for tooling.
+// `.trim(),
+  //   starters: STARTER_TEMPLATES.filter(s => s.type === 'angular'),
+  // },
+  {
+    type: 'ionic-angular',
+    name: 'Ionic Angular',
+    description: `
+These starters are for Ionic Angular (\`ionic-angular\`), which uses Angular 5 and [\`@ionic/app-scripts\`](https://github.com/ionic-team/ionic-app-scripts) for tooling.
+`.trim(),
+    starters: STARTER_TEMPLATES.filter(s => s.type === 'ionic-angular'),
+  },
+  {
+    type: 'ionic1',
+    name: 'Ionic 1',
+    description: `
+These starters are for [Ionic 1](https://github.com/ionic-team/ionic-v1) and [AngularJS](https://angularjs.org/).
+
+For new apps, we recommend the latest version of [Ionic Angular](https://github.com/ionic-team/ionic).
+`.trim(),
+    starters: STARTER_TEMPLATES.filter(s => s.type === 'ionic1'),
+  },
+];
+
 export default async function() {
   const formatStarter = (t: StarterTemplate) => {
     return `\`${t.name}\` | ${t.description}\n`;
@@ -18,25 +48,14 @@ export default async function() {
     return `
 ### ${starterType.name}
 
+${starterType.description}
+
 Starter | Description
 --------|------------
 ${starterType.starters.map(formatStarter).join('')}
 `;
   };
 
-  const starters: Starter[] = [
-    {
-      type: 'ionic-angular',
-      name: 'Ionic Angular',
-      starters: STARTER_TEMPLATES.filter(s => s.type === 'ionic-angular'),
-    },
-    {
-      type: 'ionic1',
-      name: 'Ionic 1',
-      starters: STARTER_TEMPLATES.filter(s => s.type === 'ionic1'),
-    },
-  ];
-
   return `${formatPageHeader('Starter Templates', 'cli-starter-list')}
 
 {% include fluid/toc.html %}
@@ -45,7 +64,7 @@ This is list of official Ionic starter templates, which are ready-to-go starter
 
 ## Starter Types
 
-${starters.map(formatStartersTable).join('')}
+${STARTERS.map(formatStartersTable).join('')}
 
 ## How it Works
 
 
@@ -4,6 +4,7 @@
     "outDir": "./dist"
   },
   "include": [
+    "../../../types/ascii-tree.d.ts",
     "../../../types/cross-spawn.d.ts",
     "../../../types/superagent.d.ts",
     "src/**/*.ts"
 
@@ -0,0 +1,6 @@
+declare module 'ascii-tree' {
+  namespace asciitree {
+    function generate(input: string): string;
+  }
+  export = asciitree;
+}