feature(internal): added documentation-tools module for doc utiliti…

…es. * INTERNAL * (#281) * bugfix(highlight:) Remove only empty lines at the beggining and end of the content so content new lines arent removed * check indentention on first code line as a guide * remove `html` lang workaround so code parsing is more generic now * fixed indendation in demo * bugfix(highlight): Use Renderer to limit access to native DOM and DomSanitizer to prevent XSS issues. * feature(highlight): Added [content] input to td-highlight to load content dynamically. * load README.md in highlight docs * update README.md for highlight * remove info thats already in README.md * update docblock in markdown * polish README.md * move scss rules so we can apply any pre-built theme instead of the covalent-theme * update themeing in markdown and highlight * comment pre-built theme in theme.scss * feature(highlight): Mimicking VS Dark+ theme as closely as possible by default in covalent-highlight-theme * changed color for regexp and link * code-health(highlight): Added initial set of unit-tests. * wrong title in README.md * replace npm code block with bash * fix README.md in markdown * point to the main coveralls badge instead of develop branch * remove methods and use regexp to remove leading and trailing new empty lines * feature(markdown): Remove only empty lines at the beginning and end of code content only * fixed indentation * renamed components docs dir into views * fixed app.module and app.routes * was using a diff component by mistake * initial iteration on pretty-markdown (name not final) * created readme-loader and documentation-tools module for simpler docs * removed generic readme code from markdown and highlight and use `readme-loader` * changed back to `components` dir since this is better done in a separate PR * renamed so variable is not shadowed * PoC to add a new replacement easy (added MdCheckbox) + fixed sort * override checkbox disabled color in pretty-markdown * added `Td` preffix in the readme-loader.component * added IReplacerFunc and do generics the right way * polished code * theme `<code>` elements inside `markdown` like highlight in the pretty-markdown component * update(docs): latest theme imports * update(docs): bash instead of html for cli commands * update(docs): accurate route creation * update(highlight): tweak a couple colors * update(pretty-markdown): adjust first H2 title styles
Teradata · Jan 26, 2017 · 2570fa4 · 2570fa4
1 parent 3311d4a
commit 2570fa4
Show file tree

Hide file tree

Showing 19 changed files with 390 additions and 95 deletions.
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -31,6 +31,8 @@ import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentChartsModule } from '../../../platform/charts';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
 
+import { DocumentationToolsModule } from '../../documentation-tools';
+
 @NgModule({
   declarations: [
     ComponentsComponent,
@@ -63,6 +65,7 @@ import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
     CovalentMarkdownModule.forRoot(),
     CovalentChartsModule.forRoot(),
     CovalentDynamicFormsModule.forRoot(),
+    DocumentationToolsModule.forRoot(),
     componentsRoutes,
   ],
   entryComponents: [ DialogComponent ],

diff --git a/src/app/components/components/highlight/highlight.component.html b/src/app/components/components/highlight/highlight.component.html
@@ -67,9 +67,4 @@ <h1>hello world!</h1>
   </md-card-content>
 </md-card>
 
-<md-card>
-  <md-card-content>
-    <td-markdown [content]="content">
-    </td-markdown>
-  </md-card-content>
-</md-card>
+<td-readme-loader resourceUrl="platform/highlight/README.md"></td-readme-loader>
diff --git a/src/app/components/components/highlight/highlight.component.ts b/src/app/components/components/highlight/highlight.component.ts
@@ -1,5 +1,4 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Component, HostBinding } from '@angular/core';
 
 import { slideInDownAnimation } from '../../../app.animations';
 
@@ -9,26 +8,9 @@ import { slideInDownAnimation } from '../../../app.animations';
   templateUrl: './highlight.component.html',
   animations: [slideInDownAnimation],
 })
-export class HighlightDemoComponent implements OnInit {
+export class HighlightDemoComponent {
 
   @HostBinding('@routeAnimation') routeAnimation: boolean = true;
   @HostBinding('class.td-route-animation') classAnimation: boolean = true;
 
-  content: string;
-
-  constructor(private _http: Http) {}
-
-  ngOnInit(): void {
-    let errorString: string = 'Warning: Resource could not be loaded.';
-    this._http.get('platform/highlight/README.md').subscribe((res: Response) => {
-      try {
-        this.content = res.text();
-      } catch (e) {
-        this.content = errorString;
-      }
-    }, (error: Error) => {
-      this.content = errorString;
-    });
-  }
-
 }
diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html
@@ -239,9 +239,4 @@ <h3>Dividers</h3>
   </md-card-content>
 </md-card>
 
-<md-card>
-  <md-card-content>
-    <td-markdown [content]="content">
-    </td-markdown>
-  </md-card-content>
-</md-card>
+<td-readme-loader resourceUrl="platform/markdown/README.md"></td-readme-loader>
diff --git a/src/app/components/components/markdown/markdown.component.ts b/src/app/components/components/markdown/markdown.component.ts
@@ -1,5 +1,4 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Component, HostBinding } from '@angular/core';
 
 import { slideInDownAnimation } from '../../../app.animations';
 
@@ -9,26 +8,9 @@ import { slideInDownAnimation } from '../../../app.animations';
   templateUrl: './markdown.component.html',
   animations: [slideInDownAnimation],
 })
-export class MarkdownDemoComponent implements OnInit {
+export class MarkdownDemoComponent {
 
   @HostBinding('@routeAnimation') routeAnimation: boolean = true;
   @HostBinding('class.td-route-animation') classAnimation: boolean = true;
 
-  content: string;
-
-  constructor(private _http: Http) {}
-
-  ngOnInit(): void {
-    let errorString: string = 'Warning: Resource could not be loaded.';
-    this._http.get('platform/markdown/README.md').subscribe((res: Response) => {
-      try {
-        this.content = res.text();
-      } catch (e) {
-        this.content = errorString;
-      }
-    }, (error: Error) => {
-      this.content = errorString;
-    });
-  }
-
 }
diff --git a/src/app/components/docs/build-tasks/build-tasks.component.html b/src/app/components/docs/build-tasks/build-tasks.component.html
@@ -8,14 +8,14 @@ <h4>Important: Make sure you have Node 4 or greater!</h4>
      <p>
        First install the CLI
      </p>
-     <td-highlight lang="html">
+     <td-highlight lang="bash">
        npm install -g angular-cli@latest
      </td-highlight>
      <h4>Local server</h4>
      <p>
        Serve your app locally by navingating to the directory and running:
      </p>
-     <td-highlight lang="html">
+     <td-highlight lang="bash">
        ng serve
      </td-highlight>
      <p>
@@ -25,7 +25,7 @@ <h4>Generating content</h4>
      <p>
        You can use the <code>ng generate</code> (or just <code>ng g</code>)
      </p>
-     <td-highlight lang="html">
+     <td-highlight lang="bash">
        ng g component my-new-component
      </td-highlight>
      <p>

diff --git a/src/app/components/docs/creating/creating.component.html b/src/app/components/docs/creating/creating.component.html
@@ -3,34 +3,47 @@
   <md-card-subtitle>Harness the power of the new Angular CLI</md-card-subtitle>
   <md-divider></md-divider>
   <md-card-content>
-     <h3>Generate Route</h3>
-     <p>Using the CLI, nagivate into the directory you want the new route, then simply:</p>
+     <h3>Generate Component</h3>
+     <p>Using the CLI, nagivate into the directory you want the new component, then simply:</p>
      <td-highlight lang="html">
-       ng generate route my-route
+       ng generate component new-view
       </td-highlight>
-      <p>The CLI will do the heavy lifting and:</p>
+      <p>The CLI will do the heavy lifting and create the following with corresponding names:</p>
       <ul>
-        <li>Generate the directory, css, html, spec.ts, component.ts &amp; index.ts</li>
-        <li>Add an @import and new route in the parent directory</li>
-        <li>Update system-config.ts for you!</li>
+        <li>directory (/new-view)</li>
+        <li>html template (/new-view/new-view.component.html)</li>
+        <li>scss file (/new-view/new-view.component.scss)</li>
+        <li>typescript file (/new-view/new-view.component.ts)</li>
+        <li>uint test (/new-view/new-view.component.spec.ts)</li>
       </ul>
       <p>
-        Basically it does all the irritating little things for you.
+        It will also attempt to update yoru app module file. Double check and make sure your new component is imported into app.module.ts:
       </p>
-      <p>
-        Now you simply creating your route html and logic for this new "view"!
-      </p>
-      <h3>Make sure you import any additional modules you want to use and declare any components you create in your main module.</h3>
-      <h3>for example in app.module.ts:</h3>
+      <p>for example in app.module.ts:</p>
       <td-highlight lang="typescript">
-        import {{'{'}} CovalentCoreModule } from '@covalent/core';
-        import {{'{'}} CustomComponent } from 'dir/to/component';
+        <![CDATA[
+          import { NewViewComponent } from './new-view/new-view.component';
+        ]]>
        </td-highlight>
-       <h3>And define those declarations/imports in @NgModule:</h3>
+       <p>And define those declarations/imports in @NgModule:</p>
        <td-highlight lang="typescript">
-         declarations: [ CustomComponent ],
-         imports: [ CovalentCoreModule.forRoot() ]
+         <![CDATA[
+          imports: [ NewViewComponent ]
+          ]]>
         </td-highlight>
+        <p>next we'll need to create a route for this component, edit app.routes.ts:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+          import { NewViewComponent } from './new-view/new-view.component';
+          ]]>
+       </td-highlight>
+       <p>and add a new path with the url you desire for this route:</p>
+       <td-highlight lang="typescript">
+         <![CDATA[
+          { path: 'new-view', component: NewViewComponent },
+        ]]>
+       </td-highlight>
+       <p>Now you can use this new route in your main nav or wherever you like!</p>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>

diff --git a/src/app/components/docs/mock-data/mock-data.component.html b/src/app/components/docs/mock-data/mock-data.component.html
@@ -11,7 +11,7 @@
         npm run start-api
       </td-highlight>
       <p>You should see the server running starting with:</p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         INFO[0000] ################################################################## 
         INFO[0000] ########                                                  ######## 
         INFO[0000] ######## Teradata Covalent Atomic Data mock API server    ######## 
@@ -28,7 +28,7 @@
       <h3>Customizing Mock Data Schema</h3>
       <p>You can easily modify or create new schemas for mock data in the <code>/mock-api/schemas/</code> directory.</p>
       <p>For example to modify the mock users , edit <code>mock-api/schemas/users.yaml</code></p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         # this is a sample schema file for a user object.
 
         ---
@@ -45,7 +45,7 @@ <h3>Customizing Mock Data Schema</h3>
       <h3>Modifying Mock Data</h3>
       <p>Dynamic data is wrapped in _underscores_ that match up to text files in <code>/mock-api/datum/</code>.</p>
       <p>For example the <code>_firstname_</code> in the yaml above just looks for <code>/mock-api/datum/firstname.txt</code>, and each value is on a single line:</p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         Aaron
         Benjamin
         Carl

diff --git a/src/app/components/docs/overview/overview.component.html b/src/app/components/docs/overview/overview.component.html
@@ -6,24 +6,24 @@
      <h3>Covalent Quickstart</h3>
      <h4>Create a new repo based on the covalent-quickstart</h4>
      <p>Clone the covalent-quickstart into a new project folder (e.g. my-product).</p>
-     <td-highlight lang="html">
+     <td-highlight lang="bash">
        git clone https://github.com/Teradata/covalent-quickstart.git my-product
        cd my-product
       </td-highlight>
       <p>Remove the git directory to start clean</p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         rm -rf .git
       </td-highlight>
       <h3>Create a new Git repository for your product</h3>
       <p>You could start writing code now and throw it all away when you're done. If you'd rather preserve your work under source control, consider taking the following steps.</p>
       <p>Initialize this project as a local git repo and make the first commit:</p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         git init
         git add .
         git commit -m "Initial commit"
       </td-highlight>
       <p>Create a remote repository for this project on the service of your choice.</p>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         git remote add origin
         git push -u origin master
       </td-highlight>
@@ -38,28 +38,28 @@ <h4>Prerequisites</h4>
         <li>TSLint (for code style)</li>
       </ul>
       <h4>If you don't have the Angular CLI, install:</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         npm i -g angular-cli@latest
       </td-highlight>
       <h4>Install Typescript 2.0:</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         npm install -g [email protected]
       </td-highlight>
       <h4>To install Protractor & TSLint for testing:</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         npm install -g protractor
         npm install -g tslint
       </td-highlight>
       <h4>Then update the webdriver manager:</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         webdriver-manager update
       </td-highlight>
       <h4>Install Node packages</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         npm i
       </td-highlight>
       <h4>Run the Angular-CLI local server</h4>
-      <td-highlight lang="html">
+      <td-highlight lang="bash">
         ng serve
       </td-highlight>
       <div layout="row" class="push-top">

diff --git a/src/app/components/docs/testing/testing.component.html b/src/app/components/docs/testing/testing.component.html
@@ -5,7 +5,7 @@
   <md-card-content>
     <h3>Install TSLint for TypeScript</h3>
      <p>First ensure you have Protractor and TSLint installed, setup for TypeScript and updated Webdriver</p>
-    <td-highlight>
+    <td-highlight lang="bash">
       npm install -g tslint typescript
       npm install -g protractor
       webdriver-manager update
@@ -17,7 +17,7 @@ <h3>Running unit tests</h3>
      <p>
       You can run tests a single time via --watch=false, and turn off building of the app via --build=false (useful for running it at the same time as ng serve).
     </p>
-    <td-highlight>
+    <td-highlight lang="bash">
       ng test
     </td-highlight>
     <h3>Running end-to-end tests</h3>
@@ -27,13 +27,13 @@ <h3>Running end-to-end tests</h3>
       End-to-end tests are ran via Protractor.
     </p>
 
-    <td-highlight>
+    <td-highlight lang="bash">
       ng e2e
     </td-highlight>
     <h3>Linting and formatting code</h3>
     <p>You can lint your app code by running ng lint. This will use the lint npm script that in generated projects uses tslint.
     </p>
-    <td-highlight>
+    <td-highlight lang="bash">
       ng lint
     </td-highlight>
   </md-card-content>

diff --git a/src/app/components/docs/theme/theme.component.html b/src/app/components/docs/theme/theme.component.html
@@ -13,6 +13,9 @@ <h3>SCSS Variables</h3>
     <td-highlight lang="scss">
       @import '~@angular/material/core/theming/all-theme';
       @import '~@covalent/core/theming/all-theme';
+      @import '~@covalent/markdown/markdown-theme';
+      @import '~@covalent/charts/charts-theme';
+      @import '~@covalent/highlight/highlight-theme';
       // Plus imports for other components in your app.
 
       // Include the base styles for Angular Material core. We include this here so that you only
@@ -22,11 +25,11 @@ <h3>SCSS Variables</h3>
       // Define the palettes for your theme using the Material Design palettes available in palette.scss
       // (imported above). For each palette, you can optionally specify a default, lighter, and darker
       // hue.
-      $primary: md-palette($md-orange, 800);
-      $accent:  md-palette($md-light-blue, 600, A100, A400);
+      $primary: md-palette($md-blue, 700);
+      $accent:  md-palette($md-orange, 800, A100, A400);
 
       // The warn palette is optional (defaults to red).
-      $warn:    md-palette($md-red);
+      $warn:    md-palette($md-red, 600);
 
       // Create the theme object (a Sass map containing all of the palettes).
       $theme: md-light-theme($primary, $accent, $warn);
@@ -36,6 +39,9 @@ <h3>SCSS Variables</h3>
       // that you are using.
       @include angular-material-theme($theme);
       @include covalent-theme($theme);
+      @include covalent-markdown-theme($theme);
+      @include covalent-charts-theme($theme);
+      @include covalent-highlight-theme();
     </td-highlight>
     <p>
       Color palettes and hues follow the official <a href="https://material.google.com/style/color.html" target="_blank">Material Design Spec</a>.