Hello, World!
✨ 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.
{
"store.home": {
"blocks": []
}
...
}
Vamos então usar o Rich Text em seu corpo:
{
"store.home": {
"blocks": [
"rich-text"
]
}
...
}
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.
{
"store.home": {
"blocks": [
"rich-text" <----- Aqui o bloco está sendo usado dentro de outro
]
},
"rich-text": { <----- Aqui está na raiz
}
}
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:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
}
}
}
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:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "Hello, World!"
}
}
}
Olhando a documentação do Markdown vemos que para deixar itálico basta colocar *
antes e depois do texto:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "*Hello, World!*"
}
}
}
Para posicioná-lo ao centro, podemos adicionar a prop textPosition
e atribuir a ela o valor CENTER
:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "*Hello, World!*",
"textPosition": "CENTER"
}
}
}
Atividade
Defina um Rich Text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.
ℹ️ Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.
🚫 Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.