Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::x::x::x::x::x:
:white_check_mark: Getting the file
:x: There's something wrong with your blocks.jsonc
file
:x: There's no rich text in your home block
:x: There's no rich text declaration in your blocks.jsonc
file
:x: Your text is not bold
:x: Your text is not positioned at right
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Define the rich text in the home block :white_check_mark: Make a rich text declaration :white_check_mark: Define bold Hello, World! :white_check_mark: Hello, World! positioned right
Hello, World!
:sparkles: Branch: helloworld
Introdução
Começamos nossa jornada pelo clássico "Hello, World!". Para criar algo do tipo, precisamos conhecer os blocos do Store Framework e usar um que nos possibilite a criação de textos. Este bloco se chama Rich Text.
Rich Text
O Rich Text é somente um das dezenas de blocos disponíveis no Store Framework. É um bloco que parece simples, mas que possibilita uma série de customizações para criar textos. Para começar, todo texto escrito no Rich Text suporta linguagem Markdown, isso faz com que a estilização do texto seja muito mais fácil.
Olhando a documentação do bloco é possível encontrar a especificação técnica. Uma das seções presentes é a de Blocks API nela é vista toda a lista de propriedades (props) que o Rich Text possui. As propriedades são o principal ponto de customização de um bloco, são elas que garantem que um mesmo bloco possa ter visual e comportamento completamente diferente, dependendo de como for configurado.
Começando
Vamos então começar a personalizar a home page. No seu tema é possível encontrar um arquivo chamado
home.jsonc
na pasta/store/blocks
. Neste arquivo é determinada a organização dos blocos que se deseja usar. A linguagem para composição do layout é simples e baseada em JSON.No
home.jsonc
se ver um bloco que é padrão em todos os temas:store.home
. Este bloco determina os blocos filhos que estarão expostos na home page.Vamos então usar o Rich Text em seu corpo:
Dessa forma, o
store.home
agora sabe que precisará renderizar um Rich Text. Todavia, ainda não especificamos qual o visual desse Rich Text. Para isso, precisamos fazer uma definição de bloco.Definição de blocos
A definição de blocos deve ser sempre feita fora de qualquer outro bloco, no nível da raiz do arquivo JSON.
Na definição é possível determinar o comportamento e visual de um bloco. Para tal devem ser usados pontos de customização, começaremos usando as
props
do Rich Text:Observe novamente a documentação do Rich Text e vamos, então, definir as props que usaremos para customizá-lo.
Queremos fazer um simples "Hello, World!", olhando nas props vemos uma que se chama:
text
(Text written in markdown language to be displayed). Essa é, então, a prop que determinará qual o texto que será exibido.Incluindo essa prop temos, então:
Olhando a documentação do Markdown vemos que para deixar itálico basta colocar
*
antes e depois do texto:Para posicioná-lo ao centro, podemos adicionar a prop
textPosition
e atribuir a ela o valorCENTER
:Atividade
Defina um Rich Text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.
:information_source: Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.