From 70ca655c56bdea3674632edcc9dca40cb6e1cfcc Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 12 Sep 2016 12:23:55 -0700 Subject: [PATCH 1/6] added own file for markdown.module and added forRoot() method --- src/app/app.module.ts | 2 +- .../components/components.module.ts | 2 +- src/platform/markdown/index.ts | 22 +---------------- src/platform/markdown/markdown.module.ts | 24 +++++++++++++++++++ 4 files changed, 27 insertions(+), 23 deletions(-) create mode 100644 src/platform/markdown/markdown.module.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4aa402c02c..6d880a92df 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,7 +28,7 @@ import { CovalentChipsModule } from '../platform/chips'; CovalentCoreModule.forRoot(), CovalentFileModule.forRoot(), CovalentHighlightModule, - CovalentMarkdownModule, + CovalentMarkdownModule.forRoot(), CovalentJsonFormatterModule, CovalentChipsModule, appRoutes, diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts index b2c22f87fe..7897e7d13f 100644 --- a/src/app/components/components/components.module.ts +++ b/src/app/components/components/components.module.ts @@ -43,7 +43,7 @@ import { CovalentChipsModule } from '../../../platform/chips'; CovalentCoreModule.forRoot(), CovalentFileModule.forRoot(), CovalentHighlightModule, - CovalentMarkdownModule, + CovalentMarkdownModule.forRoot(), CovalentJsonFormatterModule, CovalentChipsModule, componentsRoutes, diff --git a/src/platform/markdown/index.ts b/src/platform/markdown/index.ts index cea83796ee..fdb415d4dd 100644 --- a/src/platform/markdown/index.ts +++ b/src/platform/markdown/index.ts @@ -1,22 +1,2 @@ export { TdMarkdownComponent } from './markdown.component'; -import { TdMarkdownComponent } from './markdown.component'; - -import { NgModule } from '@angular/core'; - -import { BrowserModule } from '@angular/platform-browser'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - imports: [ - BrowserModule, - CommonModule, - ], - declarations: [ - TdMarkdownComponent, - ], - exports: [ - TdMarkdownComponent, - ], -}) -export class CovalentMarkdownModule { -} +export { CovalentMarkdownModule } from './markdown.module'; diff --git a/src/platform/markdown/markdown.module.ts b/src/platform/markdown/markdown.module.ts new file mode 100644 index 0000000000..b9d3c71402 --- /dev/null +++ b/src/platform/markdown/markdown.module.ts @@ -0,0 +1,24 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TdMarkdownComponent } from './markdown.component'; + +@NgModule({ + imports: [ + CommonModule, + ], + declarations: [ + TdMarkdownComponent, + ], + exports: [ + TdMarkdownComponent, + ], +}) +export class CovalentMarkdownModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: CovalentMarkdownModule, + providers: [], + }; + } +} From a5c4e3a71cec08576dc00916f2ca37bf258661f5 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 12 Sep 2016 12:24:17 -0700 Subject: [PATCH 2/6] updated README.md --- src/platform/markdown/README.md | 50 ++++++++++++++++----------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/platform/markdown/README.md b/src/platform/markdown/README.md index 3b31293f59..882c9a6f82 100644 --- a/src/platform/markdown/README.md +++ b/src/platform/markdown/README.md @@ -6,11 +6,13 @@ ## Installation -### This component can be installed as npm package and can be included by importing from @covalent/markdown. +This component can be installed as npm package and can be included by importing from @covalent/markdown. -#### Steps -* `showdown.js` needs to be added as vendor (installed as a `markdown` dependency). -``` +## Setup + +`showdown.js` needs to be added as vendor (installed as a `markdown` dependency). + +```typescript module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ @@ -20,10 +22,26 @@ module.exports = function(defaults) { }); }; ``` -* Reference the script in the `index.html` file. -``` +Reference the script in the `index.html` file. + +```html ``` + +Then, import the [CovalentMarkdownModule] using the forRoot() method in your NgModule: + +```typescript +import { CovalentMarkdownModule } from '@covalent/markdown'; +@NgModule({ + imports: [ + CovalentMarkdownModule.forRoot(), + ... + ], + ... +}) +export class MyModule {} +``` + Markdown has been tested successfully with: * Chrome @@ -31,23 +49,11 @@ Markdown has been tested successfully with: * Safari ## Extended documentation -Check our [http://localhost:4200/components/markdown] for examples and a more in-depth documentation on usage. +Check our [demo](https://teradata.github.io/covalent/#/components/markdown) for examples and a more in-depth documentation on usage. ## Quick Example -```ts -import { TdMarkdownComponent } from '@covalent/markdown'; -... - directives: [ TdMarkdownComponent ] -}) -export class Demo { - -} -``` - -### html - ```html 

@@ -72,9 +78,3 @@ Above examples should output...
     - [x] This task is done
     - [ ] This is still pending
    ```
-
-
-## Live DEMO
-
-Check a live Demo here http://localhost:4200/components/markdown
-

From 8b66cfa63a86cc3b1a47852f8ee2dbb64aa9eb60 Mon Sep 17 00:00:00 2001
From: Ed Morales 
Date: Mon, 12 Sep 2016 12:24:30 -0700
Subject: [PATCH 3/6] updated docs

---
 .../markdown/markdown.component.html          | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html
index 27924bee3b..4a11216804 100644
--- a/src/app/components/components/markdown/markdown.component.html
+++ b/src/app/components/components/markdown/markdown.component.html
@@ -115,11 +115,25 @@
   How to use this component
   
   
-     
]]>

-     
Use ]]> element to parse the markdown files

-     
Wrap your code snippets in ]]>

-     
Note: showdown.js needs to be added as vendor and referenced in `index.html`.

-     
+    
]]>

+    
Use ]]> element to parse the markdown files

+    
Wrap your code snippets in ]]>

+    
Example:

+    
HTML

+      
+        
+            

+            # Heading 
+            ## Sub Heading (H2)
+            ### Steps (H2)
+            

+          
+          ]]>
+      
+    
Setup:

+    
showdown.js needs to be added as vendor and referenced in `index.html`.

+    
       module.exports = function(defaults) {{'{'}}
         return new Angular2App(defaults, {{'{'}}
           vendorNpmFiles: [
@@ -129,36 +143,24 @@ 
]]>

         });
       };
     
-    and
+    
Reference the script in the `index.html` file.

     
       
       ]]>
     
-    
Example:

-    
HTML

-
+    
Then, import the [CovalentMarkdownModule] using the forRoot() method in your NgModule:

     
       
-          

-          # Heading 
-          ## Sub Heading (H2)
-          ### Steps (H2)
-          

-        
-         ]]>
-    
-    
Typescript:

-    
-      
     
   

From e730d6c1235bf2ecefba87b42eb7218f9d094ddd Mon Sep 17 00:00:00 2001
From: KL186023 
Date: Mon, 12 Sep 2016 17:01:28 -0500
Subject: [PATCH 4/6] update(markdown): remove bugs, better docs

---
 .../markdown/markdown.component.html          | 178 +++++++++++++-----
 1 file changed, 132 insertions(+), 46 deletions(-)

diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html
index 4a11216804..8e567ab39f 100644
--- a/src/app/components/components/markdown/markdown.component.html
+++ b/src/app/components/components/markdown/markdown.component.html
@@ -1,8 +1,12 @@
 
   Markdown
-  Parse markdown files
+  Parse markdown code
   
   
+    
+      
Imporant Note:
You must wrap all markdown in <pre><code></code></pre> and maintain whitespace.
+    
+    
Basic Markdown

     
       

 # Heading (H1) 
@@ -17,46 +21,86 @@
 * Two
 * Three
 
-## GH Flavored Block quotes & Tasklist
-
-#### Tasklists 
-- [ ] This is still pending
-- [x] This task is done
-
-#### Inline Code `Github`
-
 Emphasis, aka italics, with *asterisks* or _underscores_.
 
 Strong emphasis, aka bold, with **asterisks** or __underscores__.
 
 Combined emphasis with **asterisks and _underscores_**.
+      

+    
+    
+      
+          

+    # Heading (H1) 
+          
+    ## Sub Heading (H2)
+
+    ### Steps (H3)
+        
+    ###List Items
 
-Strikethrough uses two tildes. ~~Scratch this.~~
+    * One
+    * Two
+    * Three
 
-##Links
+    Emphasis, aka italics, with *asterisks* or _underscores_.
+
+    Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+    Combined emphasis with **asterisks and _underscores_**.
+          

+        
+      ]]>
+    
+    
Links & Images

+    
There are two ways to create links. Inline & reference:

+    
+      

+[I'm an inline-style link](https://teradata.github.io/)
 
-
There are two ways to create links.

+[I'm a reference-style link case does not matter][Teradata Github Landing]
 
-[I'm an inline-style link](https://www.google.com)
+[teradata github Landing]: https://teradata.github.io/
 
-##Images
+Inline image
+![alt text here](app/assets/icons/teradata.svg)
 
-Reference-style:
+Reference-style image:
 ![alt text][logo]
 
-[logo]: http://www.teradata.com/images/Homepage2015/teradata-logo-2x.png "Teradata Labs"
-

+[logo]: app/assets/icons/teradata.svg "Teradata Labs"
+
+ + + + 

+    [I'm an inline-style link](https://teradata.github.io/)
 
-
Here's our logo (hover to see the title text):

+    [I'm a reference-style link case does not matter][Teradata Github Landing]
 
-
Inline `code` has `back-ticks` around it.
-

+    [teradata github Landing]: https://teradata.github.io/
 
-
Inline code has back-ticks around it.

+    Inline image
+    ![alt text here](app/assets/icons/teradata.svg)
 
-
Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

+    Reference-style image:
+    ![alt text][logo]
 
-
```javascript
+    [logo]: app/assets/icons/teradata.svg "Teradata Labs"
+          

+        
+      ]]>
+    
+    
Inline Code & Snippets

+    
Inline has `back-ticks` around it.

+    
Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. 

+    
+      

+`this is an inline code snippet`
+
+```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);
 ```
@@ -65,34 +109,56 @@
 s = "Python syntax highlighting"
 print s
 ```
-

-
-

-Blockquotes
-
-
> Blockquotes are very handy in email to emulate reply text.
+      

+    
+    
+      
+          

+    `this is an inline code snippet`
+
+    ```javascript
+    var s = "JavaScript syntax highlighting";
+    alert(s);
+    ```
+
+    ```python
+    s = "Python syntax highlighting"
+    print s
+    ```
+          

+        
+      ]]>
+    
+    
Blockquotes

+    
+      

+> Blockquotes are very handy in email to emulate reply text.
 > This line is part of the same quote.
 
 Quote break.
 
 > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
-

-
-

-
Blockquotes are very handy in email to emulate reply text.
-This line is part of the same quote.

-

-
-
Quote break.

-
-

-
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

-

-
-
Inline HTML
+
+ + + + 

+    > Blockquotes are very handy in email to emulate reply text.
+    > This line is part of the same quote.
 
+    Quote break.
 
-
Three or more...
+    > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
+          

+        
+      ]]>
+    
+    
Dividers

+    
+      

+Three or more...
 
 ---
 
@@ -105,9 +171,29 @@
 ___
 
 Underscores
-

+
+ + + + 

+    Three or more...
+
+    ---
+
+    Hyphens
 
-
+    ***
+
+    Asterisks
+
+    ___
+
+    Underscores
+
+ + ]]> + From 8bbda50b5774f8e6d187e42b4626fff099e9beea Mon Sep 17 00:00:00 2001 From: KL186023 Date: Mon, 12 Sep 2016 17:01:48 -0500 Subject: [PATCH 5/6] update(components): more accurate markdown desc --- src/app/components/components/components.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index 8824d94764..a051d179f5 100644 --- a/src/app/components/components/components.component.ts +++ b/src/app/components/components/components.component.ts @@ -49,7 +49,7 @@ export class ComponentsComponent { route: 'json-formatter', title: 'JSON Formatter', }, { - description: 'Parse markdown files.', + description: 'Parse markdown code', icon: 'chrome_reader_mode', route: 'markdown', title: 'Markdown', From ed1eb617233b033e8cb1187e299d41bbb0555f4e Mon Sep 17 00:00:00 2001 From: KL186023 Date: Mon, 12 Sep 2016 17:06:36 -0500 Subject: [PATCH 6/6] update(markdown): proper blockquotes --- .../components/markdown/markdown.component.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html index 8e567ab39f..f660c62eda 100644 --- a/src/app/components/components/markdown/markdown.component.html +++ b/src/app/components/components/markdown/markdown.component.html @@ -133,24 +133,24 @@

Inline Code & Snippets

Blockquotes


-> Blockquotes are very handy in email to emulate reply text.
-> This line is part of the same quote.
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
 
 Quote break.
 
-> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
       

-    > Blockquotes are very handy in email to emulate reply text.
-    > This line is part of the same quote.
+    > Blockquotes are very handy in email to emulate reply text.
+    > This line is part of the same quote.
 
     Quote break.
 
-    > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
+    > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
]]>