include caption on img

Author: guim4dev

src/components.d.ts

@@ -174,6 +174,7 @@ export namespace Components {
     'listenFor': string;
   }
   interface DocsZoomableImage {
+    'caption'?: string;
     'close': () => Promise<void>;
     'href': string;
     'open': () => Promise<void>;
@@ -641,6 +642,7 @@ declare namespace LocalJSX {
     'listenFor'?: string;
   }
   interface DocsZoomableImage {
+    'caption'?: string;
     'href'?: string;
   }
   interface FileTree {}

src/components/menu/templates/api.tsx

@@ -8,6 +8,8 @@ export default () => {
 const items = {
   'API Hub': {
     'Introdução': '/docs/api/apihub',
+    'Consumindo dados de uma Action': '/docs/api/apihub/consumindo',
+    'Fornecendo dados para uma Action': '/docs/api/apihub/fornecendo'
   },
   ...(menuData.apihub)
 }

src/components/zoomable-image/zoomable-image.css

@@ -5,6 +5,13 @@
   transition: 0.3s;
 }
 
+.notModalImgCaption {
+  text-align: left;
+  font-size: 0.8em;
+  line-height: 1.7;
+  font-style: italic;
+}
+
 .notModalImg:hover {opacity: 0.7;}
 
 /* The Modal (background) */

src/components/zoomable-image/zoomable-image.tsx

@@ -6,6 +6,7 @@ import { Component, Element, Prop, h, State, Listen, Method } from '@stencil/cor
 })
 export class ZoomableImage {
   @Prop() href: string
+  @Prop() caption?: string
   @State() isOpen = false
   @Element() element: HTMLElement;
   @Listen('click', { target: 'window' })
@@ -33,7 +34,10 @@ export class ZoomableImage {
 
     return (
       <div>
-        <img onClick={this.open.bind(this)} class="notModalImg" src={this.href} alt="Integrando sua Startup" />
+        <figure>
+          <img onClick={this.open.bind(this)} class="notModalImg" src={this.href} alt="Integrando sua Startup" />
+          <figcaption class="notModalImgCaption">{this.caption}</figcaption>
+        </figure>
         <div class={ this.isOpen ? "openModal" : "modal" }>
           <span onClick={this.close.bind(this)} class="close">&times;</span>
           <img class="modalImg" src={this.href} />

src/pages/api/apihub.md

@@ -11,8 +11,7 @@ O Layers API Hub é uma funcionalidade do ecossistema Layers que permite Apps co
 Para cada uma dessas actions, está disponível ao menos um App desenvolvido pela Layers que disponibiliza essas informações. Assim, Apps fornecedores podem se responsabilizar apenas em fornecer as informações requisitadas via actions e outros Apps consumidores se responsabilizam por expor essas informações da melhor maneira para os usuários da Layers.
 
 Para exemplificar, observe:
-<docs-zoomable-image href="/docs/assets/images/flow-erp.png"></docs-zoomable-image>
-O app mais a esquerda é o “Notas Acadêmicas” e irá representar apps que necessitam de requisitar dados (App consumidor). Já o app mais a direita é o “ERP Modelo” e irá representar os apps que podem prover dados para outros apps (App fornecedor).
+<docs-zoomable-image href="/docs/assets/images/flow-erp.png" caption="O app mais a esquerda é o “Notas Acadêmicas” e irá representar apps que necessitam de requisitar dados (App consumidor). Já o app mais a direita é o “ERP Modelo” e irá representar os apps que podem prover dados para outros apps (App fornecedor)."></docs-zoomable-image>
 ## Como funciona ?
 
 + <strong> 1 - App requisita informações </strong>