Hi all,
I am using Express, PugJs, and Prismic to create a blog article.
Prismic end-point returns a JSON body with "type" for each part of the article, i.e. it could be a paragraph, an image, a header, or a list.
I then use pugjs to case statement to handle each type the following way:
div(class='article-body')
- let ul_list = false
- let ol_list = false
each item in document.ik_article_content
case item.type
when 'paragraph'
- ol_list = false
- ul_list = false
p #{item.text}
when 'heading1'
h1 #{item.text}
when 'heading2'
h2 #{item.text}
when 'heading3'
h3 #{item.text}
when 'heading4'
h4 #{item.text}
when 'image'
img(class='article-body__image' src=`${item.url}`)
when 'hyperlink'
a(href=`${item.text}`)
when 'o-list-item'
if !ol_list
- ol_list = true
ol
li #{item.text}
else
li #{item.text}
when 'list-item'
if !ul_list
- ul_list = true
ul
li #{item.text}
else
default
p #{item.text}
Prismic returns to types: 'o-list-item' (ordered list) and 'list-item' (unordered list) but I don't know when a list ends / begins.
I need to interpret these types in order to create the opening and closing ol o ul tags.
The problem is that I am unsure how to do that especially with pugjs which auto closes tags and prismic doesn't need to have a way of telling me that a tag has opened or closed.
In the code above I tried to create a variable which indicates that a list has started, and then I try to set that variable to false if a list has ended. But that doesn't work.
How else could I handle dynamically create ordered and unordered lists with pugjs? Or is there something I am missing from Prismic?
Was hoping someone could help me.
Thank you!
Ivan