Upgrade to nick_site commit f981fa57, adds alerts and inactive sidebar option

[ndcode_site.git] / blog / index.html.jst

diff --git a/blog/index.html.jst b/blog/index.html.jst
index cacd4a1..fb8996a 100644 (file)
--- a/blog/index.html.jst
+++ b/blog/index.html.jst
@@ -16,29 +16,31 @@ return async env => {
         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')}`
                   }
                 }
               }