feat(docs): add documentation images

Author: 32penkin

CONTRIBUTING.md

@@ -137,7 +137,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 
 ## <a name="run"></a> Run playground
 
-React-native-ui-kitten contains playground module which allows you to debug quickly your changes.
+react-native-ui-kitten contains playground module which allows you to debug quickly your changes.
 See the project in [playground directory](src/playground).
 To run it you should:
 * Clone this repo

README.md

@@ -7,7 +7,7 @@ We do what we did before but in a new way.
 
 ## What's new will you have:
 - TypeScript support
-- Full test coverage of framework
+- Full test coverage of the framework
 - Better code quality
 - Better development environment for contributors
 - Better theme system

docs/package-lock.json

@@ -86,19 +86,27 @@ export class NgdStructureService {
     });
   }
 
-  protected getComponents(item: any, preparedDocs) {
+  protected getComponents(item: any, preparedDocs: any) {
     return item.source
       .map(source => preparedDocs.classes.find((data) => data.name === source))
-      .map(component => this.prepareComponent(component));
+      .map(component => this.prepareComponent(component, item));
   }
 
-  protected prepareComponent(component: any) {
+  protected prepareComponent(component: any, structureItem?: any) {
     const textNodes = component.overview.filter(node => node.type === 'text');
     if (textNodes && textNodes.length) {
       textNodes[0].content = `## ${component.name}\n\n${textNodes[0].content}`; // TODO: this is bad
     }
+
+    let images: string[] = [];
+    if (structureItem && structureItem.overview) {
+      const imagesObj: any = structureItem.overview
+        .find((item: any) => item.name === component.name);
+      images = imagesObj ? imagesObj.images : [];
+    }
+
     return {
-      ... component,
+      ...component,
       slag: this.textService.createSlag(component.name),
       overview: component.overview.map((node: any) => {
         if (node.type === 'text') {
@@ -109,6 +117,7 @@ export class NgdStructureService {
         }
         return node;
       }),
+      images: images,
     };
   }
 
@@ -137,7 +146,7 @@ export class NgdStructureService {
     return {
       title: block.source.name,
       fragment: block.source.slag,
-    }
+    };
   }
 
   protected getTocForTabbed(block: any) {

docs/src/app/@theme/services/structure.service.ts

@@ -17,7 +17,12 @@ import {
       <nb-card-body>
         <ng-container class="description">
           <ng-container>
-            <div [innerHTML]="source.description"></div>
+            <div [innerHTML]="source.description"
+                 [ngStyle]="hasImage && {'margin-bottom': '16px'}"></div>
+            <img
+              *ngFor="let image of source.images"
+              src={{image}}
+            />
           </ng-container>
         </ng-container>
       </nb-card-body>
@@ -28,10 +33,18 @@ import {
 export class NgdOverviewBlockComponent {
 
   source: any;
+  hasImage: boolean;
 
   @Input('source')
   set setSource(source: any) {
-    this.source = source;
+    this.source = this.prepareDescription(source);
+    this.hasImage = this.source.images.length && this.source.images.length !== 0;
+  }
+
+  private prepareDescription(source): any {
+    source.description = source.description.replace('undefined', '');
+    source.images = source.images.map((image: string) => `../../../assets/images/overview/${image}`);
+    return source;
   }
 
 }

docs/src/app/blocks/components/overview-block/overview-block.component.ts

@@ -227,7 +227,10 @@
 
   @include media-breakpoint-up(md) {
     .middle-column ::ng-deep nb-card nb-card-body {
-      padding: 2rem 3rem 2rem 2rem;
+      padding: 2rem 2rem 2rem 2rem;
+    }
+    ::ng-deep nb-card nb-card-header {
+      padding: 1rem 2rem;
     }
   }