let children = await p.get('children')
let menu = await p.get_json('menu')
- ul.nav.flex-column {
+ nav {
for (let i = 0; i < menu.length; ++i) {
let name = menu[i]
let q = await children.get(name)
+ let images = await q.get_json('images')
- li.nav-item {
- a.nav-link(href=`${name}/index.html`) {
- table.icon-and-text {
- tr {
- td {
- img(
- src=`${name}/${await q.get_json('thumbnail') || 'thumbnail.jpg'}`
- ) {}
- }
- td {
- span.h2{
- `${await q.get_json('title')}`
- }
- br {}
- span.h4{
- `${await q.get_json('description')}—by ${await q.get_json('author')}`
- }
- }
+ // we can use higher resolution images when lower not available
+ while (images.length < 3)
+ images.push(images[images.length - 1])
+
+ // note: make the row a link to show hover background at edges
+ // (similar to the grid-gutter-background class I use elsewhere)
+ // note: position: relative sets the target for stretched link
+ div.row.flex-nowrap.align-items-center.nav-link-outer.position-relative {
+ div.col.col-icon256 {
+ img.img-fluid.py-3(src=`${name}/${images[2]}`) {}
+ }
+ div.col.col-text {
+ a.nav-link-inner.stretched-link(href=`${name}/index.html`) {
+ span.h2{
+ `${await q.get_json('title')}`
+ }
+ br {}
+ span.h4{
+ `${await q.get_json('description')}—by ${await q.get_json('author')}`
}
}
}