Exploring the power behind rich text

[github-learning-lab[bot]]

Explorando el poder de rich text

:sparkles: Branch: richtextmarkdown

Introducción

Como hemos visto, Markdown es un lenguaje de marcado amigable que se puede convertir fácilmente a HTML. En esta lección, veremos cómo puede usar este lenguaje en nuestro bloque Rich Text para crear textos interesantes.

Rich Text con Markdown

Para incluir textos en el bloque de rich-text, es necesario utilizar la prop text:

  "rich-text#home1": {
    "props": {
      "text": "Mi texto",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }

La prop text acepta el formato de markdown. Por lo tanto, si usted desea escribir su texto utilizando este lenguaje, su código debería quedar semejante a este:

```json
  "rich-text#home1": {
    "props": {
      "text": "# Meu título h1 \n Escreva aqui um parágrafo \n ## Meu título h2 \n Escreva aqui seu segundo parágrafo \n Inclua aqui uma lista \n - Item 1 \n - Item 2 \n - Item3",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }

CONSEJO: Utilice siempre el comando \n para saltar líneas al utilizar markdown en la prop text .

Otras propiedades del componente rich-text pueden encontrase en la documentación oficial del Store Framework.

Actividad

1. Dentro del archivo about-us.jsonc, cambie el texto de tab-list.item#home1 para que aparezca un "Sobre" en la primera pestaña.

2. En el contenido rich-text asociado a esta pestaña, utilice el siguiente texto:

   # Nossa História \n ### Nascemos de uma hackathon interna da VTEX! \n Isso mesmo. A primeira Hackatheme (hackathon de temas de loja) da VTEX teve 3 finalistas. Um deles foi a FlatFlat, essa loja que vocês estão acessando agora. A FlatFlat foi criada pelos engenheiros Afonso Praça e Sávio Muniz, pelos designers Lucas Falcão e Augusto Barbosa, e pelo diretor de novos negócios Maurício Baum. Como a loja foi criada por profissionais com os mais diversos backgrounds, o resultado ficou óbvio: foram finalistas com o layout mais legal dentre os participantes.

3. Coloque el título y el subtítulo en negrita.

Resultado esperado:

:information_source: Recuerde acceder a la documentación del Rich Text si tiene alguna duda durante la actividad.

---

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar el siguiente enlace:

https://github.com/jairandresdiazp/store-framework/issues/2

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::x::white_check_mark::x::white_check_mark::x::x::x::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark::x::x::x:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :x: You havent declared vtex.menu@2.x:submenu#major on your menu-item#major-appliances :x: You havent declared vtex.menu@2.x:submenu#small on your menu-item#small-appliances :x: You havent declared vtex.menu@2.x:submenu#electronics on your menu-item#electronics :white_check_mark: Main Category Menu must be stated :x: You havent declared the children menu-item#major-appliances, menu-item#small-appliances, menu-item#electronics on vtex.menu@2.x:menu#categories :white_check_mark: Main Category Menu must be on horizontal orientation :x: You havent declared vtex.menu@2.x:menu#major on your menu.jsonc file :x: You havent declared the children menu-item#refrigerators, menu-item#ovens, menu-item#washers on vtex.menu@2.x:menu#major :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#major :x: You havent declared vtex.menu@2.x:menu#small on your menu.jsonc file :x: You havent declared the children menu-item#mixers, menu-item#toasters, menu-item#coffee on vtex.menu@2.x:menu#small :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#small :x: You havent declared vtex.menu@2.x:menu#electronics on your menu.jsonc file :x: You havent declared the children menu-item#cameras, menu-item#laptops, menu-item#tvs on vtex.menu@2.x:menu#electronics :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#electronics :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :x: You havent declared vtex.menu@2.x:menu#major as children of vtex.menu@2.x:submenu#major :x: You havent declared vtex.menu@2.x:menu#small as children of vtex.menu@2.x:submenu#small :x: You havent declared vtex.menu@2.x:menu#electronics as children of vtex.menu@2.x:submenu#electronics

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::x::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :x: You havent declared vtex.menu@2.x:submenu#major on your menu-item#major-appliances :x: You havent declared vtex.menu@2.x:submenu#small on your menu-item#small-appliances :x: You havent declared vtex.menu@2.x:submenu#electronics on your menu-item#electronics :white_check_mark: Main Category Menu must be stated :x: You havent declared the children menu-item#major-appliances, menu-item#small-appliances, menu-item#electronics on vtex.menu@2.x:menu#categories :white_check_mark: Main Category Menu must be on horizontal orientation :white_check_mark: Major Appliances Menu must be stated :white_check_mark: Major Appliances must have correct children :white_check_mark: Major Appliances Menu must be on vertical orientation :x: You havent declared vtex.menu@2.x:menu#small on your menu.jsonc file :x: You havent declared the children menu-item#mixers, menu-item#toasters, menu-item#coffee on vtex.menu@2.x:menu#small :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#small :x: You havent declared vtex.menu@2.x:menu#electronics on your menu.jsonc file :x: You havent declared the children menu-item#cameras, menu-item#laptops, menu-item#tvs on vtex.menu@2.x:menu#electronics :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#electronics :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :x: You havent declared vtex.menu@2.x:menu#small as children of vtex.menu@2.x:submenu#small :x: You havent declared vtex.menu@2.x:menu#electronics as children of vtex.menu@2.x:submenu#electronics

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Major Appliances Menu item must contain correct submenu :white_check_mark: Small Appliances Menu item must contain correct submenu :white_check_mark: Electronics Menu item must contain correct submenu :white_check_mark: Main Category Menu must be stated :x: You havent declared the children menu-item#major-appliances, menu-item#small-appliances, menu-item#electronics on vtex.menu@2.x:menu#categories :white_check_mark: Main Category Menu must be on horizontal orientation :white_check_mark: Major Appliances Menu must be stated :white_check_mark: Major Appliances must have correct children :white_check_mark: Major Appliances Menu must be on vertical orientation :white_check_mark: Small Appliances Menu must be stated :x: You havent declared the children menu-item#mixers, menu-item#toasters, menu-item#coffee on vtex.menu@2.x:menu#small :white_check_mark: Small Appliances Menu must be on vertical orientation :white_check_mark: Electronics Menu must be stated :x: You havent declared the children menu-item#cameras, menu-item#laptops, menu-item#tvs on vtex.menu@2.x:menu#electronics :white_check_mark: Electronics Menu must be on vertical orientation :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :white_check_mark: Small Submenu must have small menu as children :white_check_mark: Electronics Submenu must have electronics menu as children

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Major Appliances Menu item must contain correct submenu :white_check_mark: Small Appliances Menu item must contain correct submenu :white_check_mark: Electronics Menu item must contain correct submenu :white_check_mark: Main Category Menu must be stated :x: You havent declared the children menu-item#major-appliances, menu-item#small-appliances, menu-item#electronics on vtex.menu@2.x:menu#categories :white_check_mark: Main Category Menu must be on horizontal orientation :white_check_mark: Major Appliances Menu must be stated :white_check_mark: Major Appliances must have correct children :white_check_mark: Major Appliances Menu must be on vertical orientation :white_check_mark: Small Appliances Menu must be stated :white_check_mark: Small Appliances must have correct children :white_check_mark: Small Appliances Menu must be on vertical orientation :white_check_mark: Electronics Menu must be stated :white_check_mark: Electronics Menu must have correct children :white_check_mark: Electronics Menu must be on vertical orientation :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :white_check_mark: Small Submenu must have small menu as children :white_check_mark: Electronics Submenu must have electronics menu as children

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Major Appliances Menu item must contain correct submenu :white_check_mark: Small Appliances Menu item must contain correct submenu :white_check_mark: Electronics Menu item must contain correct submenu :white_check_mark: Main Category Menu must be stated :white_check_mark: Main Category Menu must have correct children :white_check_mark: Main Category Menu must be on horizontal orientation :white_check_mark: Major Appliances Menu must be stated :white_check_mark: Major Appliances must have correct children :white_check_mark: Major Appliances Menu must be on vertical orientation :white_check_mark: Small Appliances Menu must be stated :white_check_mark: Small Appliances must have correct children :white_check_mark: Small Appliances Menu must be on vertical orientation :white_check_mark: Electronics Menu must be stated :white_check_mark: Electronics Menu must have correct children :white_check_mark: Electronics Menu must be on vertical orientation :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :white_check_mark: Small Submenu must have small menu as children :white_check_mark: Electronics Submenu must have electronics menu as children

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!