.gov.br: Temas para IDG
.. contents:: Conteúdo :depth: 2
Este pacote provê 2 temas (Diazo) modelo do Governo Federal para uso em sites Plone do Governo da República Federativa do Brasil.
O desenvolvimento deste pacote foi feito como parte da iniciativa Portal Padrão <http://portalpadrao.plone.org.br> da comunidade PloneGov.Br <http://www.softwarelivre.gov.br/plone>.
Tema Padrão ^^^^^^^^^^^
.. image:: https://raw.githubusercontent.com/plonegovbr/brasil.gov.temas/master/webpack/app/padrao/preview.png :height: 214px :width: 400px
Tema Branco ^^^^^^^^^^^
.. image:: https://raw.githubusercontent.com/plonegovbr/brasil.gov.temas/master/webpack/app/branco/preview.png :height: 150px :width: 200px
O brasil.gov.temas conta testes automatizados e, a cada alteração em seu
código os testes são executados pelo serviço Travis <https://travis-ci.org/>_.
O estado atual dos testes, a cobertura de código e o número de downloads deste pacote podem ser vistos nas imagens a seguir:
.. image:: http://img.shields.io/pypi/v/brasil.gov.temas.svg :target: https://pypi.python.org/pypi/brasil.gov.temas
.. image:: https://img.shields.io/travis/plonegovbr/brasil.gov.temas/master.svg :target: http://travis-ci.org/plonegovbr/brasil.gov.temas
.. image:: https://img.shields.io/coveralls/plonegovbr/brasil.gov.temas/master.svg :target: https://coveralls.io/r/plonegovbr/brasil.gov.temas
.. image:: https://img.shields.io/codacy/grade/ec7cc947f31640b39078c4e153098d36.svg :target: https://www.codacy.com/project/plonegovbr/brasil.gov.temas/dashboard
Para habilitar a instalação deste produto em um ambiente que utilize o buildout:
brasil.gov.temas à lista de eggs da instalação:.. code-block:: ini
[buildout]
...
eggs =
brasil.gov.temasApós alterar o arquivo de configuração é necessário executar ''bin/buildout'', que atualizará sua instalação.
Reinicie o Plone
Acesse o painel de controle e na opção Temas você verá os temas providos por este pacote listados.
Passo a passo ^^^^^^^^^^^^^
Abrir um terminal, entrar na pasta do projeto, rodar buildout e iniciar a instancia;
Abrir outro terminal, entrar na pasta do projeto, iniciar o comando bin/watch-brasilgovtemas;
Alterar os arquivos na pasta webpack.
Mais detalhes ^^^^^^^^^^^^^
Utilizamos webpack <https://webpack.js.org/>_ para gerenciar o conteúdo estático do tema,
tomando vantagem das diversas ferramentas e plugins disponíveis para suprir nossas necessidades.
Utilizamos a receita de buildout sc.recipe.staticresources <https://github.com/simplesconsultoria/sc.recipe.staticresources> para integrar o webpack no Plone.
Ao desenvolver os temas iniciamos o watcher do webpack e trabalhamos somente na pasta "webpack" alterando os arquivos;
o webpack se encarrega de processar e gerar os arquivos em seu endereço final.
Segue uma lista dos principais arquivos:
.. code-block:: console
$ tree webpack/app
webpack/app
├── brasilgovtemas.js
├── favicons
│ └── Lista de imagens para o Favicon
├── fonts
│ └── Lista de Fontes utilizadas no site
├── index.html
├── js
│ └── Lista de módulos Javascript
├── rules.xml
├── scss
│ └── Lista de módulos Scss
├── tema-1
│ ├── brasilgovtemas.scss
│ ├── favicons
│ │ ├── browserconfig.xml
│ │ └── manifest.json
│ ├── img
│ │ └── sprite.png
│ ├── manifest.cfg
│ ├── preview.png
│ ├── sprite
│ │ └── Lista de Imagens para criação do sprite
│ └── _sprite.scss
├── tema-2
│ └── Arquivos do tema 2
└── tema-3
└── Arquivos do tema 3Na estrutura atual, existem alguns arquivos comuns a todos os temas e alguns arquivos diferentes para cada tema.
Os arquivos globais ficam na pasta webpack/app enquanto os demais arquivos ficam dentro da pasta de cada tema.
Foi adotada a estratégia pouco comum ao Plone de não registrar os arquivos CSS e JS no portal_css e portal_javascripts;
Ao invés disso, deixamos o trabalho de gerar um novo nome desses arquivos para o webpack_.
O arquivo brasilgovtemas.js é escrito em ES6 e, ao processar,
cria um arquivo brasilgovtemas-[hash].js transformado em ES5 através do compilador Babel <https://babeljs.io/>_,
e é criada uma cópia por tema desse arquivo.
Na pasta favicons existem as imagens necessárias para incluir o favicon do site para todas as plataformas.
Na pasta fonts possui as web fontes utilizadas nos temas deste pacote.
O arquivo index.html da pasta do Diazo não está no controlador de versões.
Ao invés disso, existe um index.html na pasta "webpack" que é processado a cada execução do buildout ou do webpack_,
e gera arquivos JS, CSS e index.html na pasta do Diazo.
Os arquivos JS e CSS possuem nomes especiais com um hash que é renovados a cada execução do buildout.
O arquivo rules.xml é copiado para cada tema, e a princípio é igual para todos os temas.
Na pasta scss existem os arquivos de estilos propriamente dito,
é la que devemos alterar alguma estrutura de CSS compartilhada por todos os temas,
e uma alteração nessa pasta repercurte em alteração me todos os temas após execução do webpack_.
Existe um arquivo brasilgovtemas.scss para cada tema;
nele existem definições de variáveis do que muda em cada tema, fontes, tamanhos e cores,
e importa os arquivos da pasta "scss" para processar cada tema.
Esse arquivo é transformado em brasilgovtemas-[hash].css após processamento.
Na pasta favicons dentro do tema possui arquivos de configuração relacionados ao favicon para algumas plataformas.
Estes arquivos foram criados um para cada tema pois precisam ser alterados em cada tema.
Existem ainda os arquivos manifest.cfg e preview.png que são únicos para cada tema, e são necessários pelo Diazo.
Cada tema ainda possui uma pasta "sprite", onde são adicionados os ícones utilizados no tema.
Esses ícones são processados gerando os arquivos _sprite.scss e img/sprite.png no tema.
O primeiro arquivo cria mixins utilizados no tema para facilitar a inserção de regras do sprite,
e o segundo arquivo é o sprite propriamente dito, que junta todas as imagens existens na pasta "sprite".
Foi adicionado um plugin para remover os arquivos antigos gerados com hash, para não acumular arquivos CSS e JS na pasta.
Este pacote adiciona os seguintes comandos na pasta bin do buildout para processar automaticamente os recursos estáticos:
.. code-block:: console
$ bin/env-brasilgovtemasEste comando adiciona no terminal o node do buildout no PATH do sistema, dessa forma voce pode trabalhar com webpack conforme a documentação oficial.
.. code-block:: console
$ bin/watch-brasilgovtemasEste comando instrui ao Webpack para esperar por qualquer mudança nos arquivos SASS e gera a versão minificada do CSS para a aplicação.
.. code-block:: console
$ bin/debug-brasilgovtemasEste comando faz o mesmo que o comando watch, mas não minifica o CSS final. Utilizado para debugar a geração do CSS.
.. code-block:: console
$ bin/build-brasilgovtemasEste comando cria o CSS minificado, mas não espera por mudanças.
Hoje nos arquivos CSS existem regras para mostrar links de línguas,
como as classes language-en e language-es.
Para adicionar links dessas línguas sem precisar customizar o tema,
adicione em site_actions actions com esse mesmo id e as regras do Diazo pegarão os links renderizados das actions posicionando corretamente na lista de línguas no tema.
Os recursos estáticos do pacote são gerados usando o webpack <https://webpack.js.org/> e não são inclusos no VCS.
Se você está fazendo release usando o zest.releaser, você precisa fazer upload manual dos arquivos no PyPI <https://github.com/zestsoftware/zest.releaser/issues/261> ou você vai criar uma distribuição quebrada:
longtest, como de costumefullrelease, como de costume, respondendo "não" a pergunta "Check out the tag?" para evitar o upload ao PyPIbin/build-brasilgovtemas para criar os recursos estáticospython setup.py sdist bdist_wheel, como de costumetwine upload dist/*Em caso de erro você terá que criar um novo release pois o PyPI Warehouse não permite reutilizar um nome de arquivo <https://upload.pypi.org/help/#file-name-reuse>_.