Repository files navigation

Conversor de arquivosmarkdown para componentesAngular utilizando recursos visuais das bibliotecasPO UI.

npm install md2poui -g

ou

npm install md2poui --save-dev

constmd2poui=require('md2poui');md2poui('C:/pathFromMdFiles','C:/pathToAngularFiles');

ou

md2poui C:/pathFromMdFiles C:/pathToAngularFiles

• Atualizado para para rodar com a versão 15 do po-ui e node 18.

• Removido suporte aoPortinari UI e adicionado suporte somente aoPO-UI.
• Removida a criação de âncoras, devido a limitação técnica doPO-UI.

• Inclusão do campo de filtro no menu da página inicial.

• Corrigida geração da página inicial ao usar nome de módulo com mais de uma palavra.
• Corrigida geração de componentes que possuem números no início do nome.

• Removido suporte aoTHF.
• Adicionada nova configuração:options.home.

  Mais informações disponíveis no itemoptions.

• Corrigido parâmetroparentRoutePath na versão CLI - por@laraujo0901.

• Melhoria na conversão das imagens para que as mesmas não gerem barra de rolagem horizontal para a página.
• Corrigidas configurações padrões.
• Corrigida geração de componentes onde a pasta contém números querepresentam sua ordem de criação.

• Adicionado suporte aoPortinariUI!
• Adicionadas novas configurações:options.portinariUi eoptions.parentRoutePath.

  Mais informações disponíveis no itemoptions.

• A partir desta versão, se definida a configuraçãooptions.flatDirs=false o menu será gerado de forma hierárquica obedecendo a estrutura dos arquivosmarkdown.
• Adicionado suporte a diretórios na lista de exclusões.
• Alterado nome do método que retorna os itens paragetMenuItems.
• O módulo de rotas agora possuifallback para caminhos inválidos.

• Adicionadas novas configurações:options.recursive eoptions.highlightClassName.

  Mais informações disponíveis no itemoptions.

• Adicionado suporte a arquivos no parâmetro de origem.

• Adicionado suporte à execução do md2poui "globalmente" via linha de comando.

• Corregidas dependências utilizadas pelo projeto.

• Adicionado suporte a ícones do padrão do GitHub.
  Exemplo::warning: será⚠️ - por@marcospds.
• Adicionadas novas configurações:options.createHelpers eoptions.copyExternalFiles.

  Mais informações disponíveis no itemoptions.

• Corrigida verificação das configurações padrões quando não era informadoexclusions.
• Adicionado suporte a links internos na geração dos componentes.
• Adicionado suporte à âncoras para títulos de até três níveis.

• Primeira versão!

functionmd2poui(srcPath:string,destDir:string,options?:Options):void{}

Caminho de origem dos arquivosmarkdown que serão convertidos. São considerados todos os arquivos com extensão.md encontrados na pasta raiz e nas subpastas do caminho informado.

Exemplo:C:/zoologico.

Diretório de destino dos arquivosAngular que serão criados a partir da conversão dos arquivosmarkdown.

Exemplo:C:/portal/src/app/zoologico.

Arquivos existentes no diretório de destino não são excluídos.

Opções de configurações e definições customizadas de conversão dos arquivos:

{exclusions:string[]=[],highlightClassName:string='highlight',flatDirs:boolean=false,recursive:boolean=true,createHelpers:boolean=true,home:boolean=true,moduleName:string='docs',parentRoutePath:string='{{moduleName}}',copyExternalFiles:boolean=true,resourceFolderName:string='assets',resourcePathName:string='app/{{moduleName}}/{{resourceFolderName}}'}

Lista com os arquivosmarkdown ou diretórios que serão desconsiderados da conversão. O caminho informado nesta lista pode ser relativo ou completo ao diretório informado no parâmetrosrcPath.

Valor padrão:[]
Exemplo:['C:/zoologico/onca/README.md', 'chimpanze/README.md'].

Nome da classeCSS que será utilizada nos elementos de códigos de exemplo.

Independente desta configuração, a classe contendo o nome da linguagem sempre é inserida.

Valor padrão:highlight.

Se verdadeiro, irá criar as pastas dos componentes na pasta raíz da pasta de destino informada no parâmetrodestDir, caso contrário irá obedecer a mesma estrutura encontrada na pasta de origem informada no parâmetrosrcPath.

Valor padrão:true

Exemplo:

srcPath

C:\└── zoologico\    └── animais\    │   └── leao\    │   |   ├── README.md    │   └── zebra\    │   |   ├── README.md    └── atracoes\    │   ├── README.md    ├── README.md

destDir comoptions.flatDirs=true

C:\portal\src\app\└── zoologico/    └── leao/    │   ├── leao.component.ts    └── zebra/    │   ├── zebra.component.ts    └── atracoes/    │   ├── atracoes.component.ts    ├── zoologico.component.ts    ├── zoologico.module.ts    ├── zoologico.service.ts    ├── zoologico-routing.module.ts

destDir comoptions.flatDirs=false

C:\portal\src\app\└── zoologico/    └── animais/    │   └── leao/    │   |   ├── leao.component.ts    │   └── zebra/    │   |   ├── zebra.component.ts    └── atracoes/    │   ├── atracoes.component.ts    ├── zoologico.component.ts    ├── zoologico.module.ts    ├── zoologico.service.ts    ├── zoologico-routing.module.ts

Se verdadeiro, irá ler recursivamente todas as pastas abaixo da pasta de origem informada no parâmetrosrcPath.

Valor padrão:true.

Se verdadeiro, irá criar os arquivos auxiliares de módulo, rotas e serviço.

Valor padrão:true.

Se verdadeiro, irá criar uma página inicial já com menu para os componentes criados.

Valor padrão:true.

Nome do móduloAngular que será criado para agrupar os componentes gerados a partir da conversão dos arquivosmarkdown.

Valor padrão:docs.

O nome do módulo deve ser informado emkebab-case.

Caminho da rota pai que será utilizado para as rotas dos componentes.

Valor padrão:{{options.moduleName}}.

Exemplo:

options.parentRoutePath='zoo/animais'

{label:"Leão",link:"zoo/animais/leao"}

Se verdadeiro, irá copiar os arquivos externos referenciados nos arquivosmarkdown para a pasta de recursos.

Valor padrão:true.

Nome da pasta de recursos que será criada para armazenar os arquivos externos referenciados nos arquivosmarkdown.

Os arquivos encontrados na conversão são copiados para dentro desta pasta com um nome único gerado automaticamente para não haver conflitos e as referências são alteradas para apontar para o arquivo copiado.

Valor padrão:assets.

Esta pasta deve ser incluída comoasset da aplicaçãoAngular.

Geralmente estes arquivos são imagens referenciadas pela marcaçãomarkdown ouHTML, como nos exemplos abaixo:
>![Minha Imagem](imagens/minhaImagem.png) ou
><img alt="Minha Imagem" src="imagens/minhaImagem.png" />

Caminho que será utilizado para referenciar os arquivos externos copiados durante a conversão dos arquivosmarkdown.

Padrão:src/app/{{options.moduleName}}/{{options.resourceFolderName}}.

Este caminho deve ser acessível pela aplicaçãoAngular.

Além da conversão e criação dos componentesAngular são criados mais três arquivos auxiliares: módulo, rotas e serviço.

O arquivo de módulo agrega todos os componentes criados e o roteamento destes componentes - com o uso do arquivo de roteamento.

Já o arquivo de serviço possui facilitadores para retornar a lista das rotas dos componentes no formato esperado pelo menu doPO-UI.

Module

import{NgModule}from'@angular/core';import{PoModule}from'@po-ui/ng-components';import{WikiRoutingModule}from'./wiki-routing.module';import{WikiService}from'./wiki.service';import{SampleComponent}from'./sample/sample.component';@NgModule({declarations:[SampleComponent],imports:[PoModule,WikiRoutingModule],providers:[WikiService]})exportclassWikiModule{}

Routing

import{NgModule}from'@angular/core';import{Routes,RouterModule}from'@angular/router';import{SampleComponent}from'./sample/sample.component';constroutes:Routes=[{path:'sample',component:SampleComponent}];@NgModule({imports:[RouterModule.forChild(routes)],exports:[RouterModule]})exportclassWikiRoutingModule{}

Service

import{Injectable}from'@angular/core';import{PoMenuItem}from'@po-ui/ng-components';@Injectable({providedIn:'root'})exportclassWikiService{constructor(){}publicgetWikiMenuItems():PoMenuItem[]{return[{label:'Sample Component',link:'wiki/sample'}];}}

Os arquivos externos referenciados nos arquivosmarkdown são copiados para a pasta de recursos (conforme parâmetrosoptions.copyExternalFiles eoptions.resourceFolderName) com outro nome gerado dinâmicamente.

Para que seja possível a visualização dos arquivos desta pasta pela aplicaçãoAngular é necessário adicionar a pasta de recursos comoasset alterando o arquivoangular.json da aplicação:

{"assets": ["src/favicon.ico","src/assets","src/app/zoologico/resources"  ]}

Toda a área de documentação do portalTOTVS Java Framework foi desenvolvida utilizando omd2poui.