From 7c655a95058aa753355251eb78b83d31d44972ab Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 23 Aug 2022 14:07:20 +0200
Subject: Better navigation of related content

---
 scripts/lib/common.lua               | 34 ++++++++++------
 scripts/metadata.lua                 | 13 ++----
 scripts/page.lua                     | 11 +++++-
 templates/partials/gallery_card.html | 52 +++++++++++++++---------
 templates/partials/grid_card.html    | 76 +++++++++++++++++++-----------------
 templates/partials/list_card.html    | 16 ++------
 templates/partials/related.html      | 17 +-------
 7 files changed, 114 insertions(+), 105 deletions(-)

diff --git a/scripts/lib/common.lua b/scripts/lib/common.lua
index ee7c6aa..d3c6c44 100644
--- a/scripts/lib/common.lua
+++ b/scripts/lib/common.lua
@@ -1,15 +1,4 @@
-function dump(o)
-    if type(o) == 'table' then
-        local s = '{ '
-        for k, v in pairs(o) do
-            if type(k) ~= 'number' then k = '"' .. k .. '"' end
-            s = s .. '[' .. k .. '] = ' .. dump(v) .. ','
-        end
-        return s .. '} '
-    else
-        return tostring(o)
-    end
-end
+local utils = require 'pandoc.utils'
 
 function string.split(str, sep)
     sep = sep or '%s'
@@ -82,6 +71,25 @@ function pandoc.List:shuffle()
     return self
 end
 
+function dump(o)
+    if type(o) == 'table' then
+        local s = '{ '
+        for k, v in pairs(o) do
+            if type(k) ~= 'number' then k = '"' .. k .. '"' end
+            s = s .. '[' .. k .. '] = ' .. dump(v) .. ','
+        end
+        return s .. '} '
+    else
+        return tostring(o)
+    end
+end
+
+function prep_layout(layout)
+    layout = utils.stringify(layout)
+    return { id = layout, ["is_" .. layout] = true }
+end
+
 return {
-    dump = dump
+    dump = dump,
+    prep_layout = prep_layout
 }
diff --git a/scripts/metadata.lua b/scripts/metadata.lua
index 9c8a964..843ed3c 100644
--- a/scripts/metadata.lua
+++ b/scripts/metadata.lua
@@ -42,11 +42,6 @@ function resolve_layout(depth)
     return layout
 end
 
-function prep_layout(layout)
-    layout = utils.stringify(layout)
-    return { id = layout, ["is_" .. layout] = true }
-end
-
 function prep_namespace(namespace)
     namespace = utils.stringify(namespace)
 
@@ -138,11 +133,11 @@ function process_base(build, meta)
     meta.title = meta.title and utils.stringify(meta.title) or ""
     meta.slug = slug(meta.title)
     meta.schema_type = meta.schema_type or "CreativeWork"
-    meta.list_layout = prep_layout(meta.list_layout or "list")
+    meta.list_layout = common.prep_layout(meta.list_layout or "list")
     meta.list_order = meta.list_order and utils.stringify(meta.list_order)
     meta.position = meta.position and tonumber(utils.stringify(meta.position))
     meta.thumbnail = meta.thumbnail and make_absolute("thumbnail." .. utils.stringify(meta.thumbnail), meta.file_out)
-    meta.layout = prep_layout(meta.layout or (meta.redirect and "redirect") or resolve_layout(meta.depth))
+    meta.layout = common.prep_layout(meta.layout or (meta.redirect and "redirect") or resolve_layout(meta.depth))
 
     meta.show_date = meta.parent and meta.parent.list_order == "date_desc"
     meta.category = meta.parent and meta.parent.title
@@ -179,8 +174,8 @@ function find_pos(meta)
 
     if index == nil then return end
 
-    meta.prev = index >= 2 and pages[index - 1] or nil
-    meta.next = index <= #pages - 1 and pages[index + 1] or nil
+    meta.prev = index <= #pages - 1 and pages[index + 1] or nil
+    meta.next = index >= 2 and pages[index - 1] or nil
 end
 
 function Meta(meta)
diff --git a/scripts/page.lua b/scripts/page.lua
index 7378bfc..48eef6e 100644
--- a/scripts/page.lua
+++ b/scripts/page.lua
@@ -144,11 +144,20 @@ function generate_related(meta)
     meta.prev = meta.prev and d1_page_to_list_item(deref(meta.prev))
     meta.next = meta.next and d1_page_to_list_item(deref(meta.next))
 
+    if meta.prev then meta.prev.is_prev = true end
+    if meta.next then meta.next.is_next = true end
+
     if not meta.prev and not meta.next then return nil end
 
+    local layout = meta.parent.list_layout
+    local layout_id = utils.stringify(layout.id)
+    if layout_id ~= "grid-2" and layout_id ~= "gallery-2" then
+        layout = common.prep_layout("grid-2")
+    end
+
     return {
         url = meta.parent.url,
-        layout = meta.parent.list_layout,
+        layout = layout,
         prev = meta.prev,
         next = meta.next
     }
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index 38daa0e..6802faa 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -19,30 +19,47 @@
             />
         </div>
     </div>
+
     <div class="c-card__row l-media c-card__row--hidden">
         $if(it.indicator)$
             <div class="c-card__indicator l-media__block"></div>
         $endif$
-        $if(it.icon)$
+        $if(it.is_prev)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-left"></use>
+            </svg>
+        $elseif(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#blank"></use>
+            </svg>
+        $elseif(it.icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.icon$"></use>
             </svg>
         $endif$
         <div class="l-media__block l-media__block--main">
-            $if(it.subtitle)$
+            $if(it.is_prev)$
+                <small class="u-d-block">Previous</small>
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+            $elseif(it.is_next)$
+                <small class="u-d-block">Next</small>
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+            $elseif(it.subtitle)$
                 <div>
                     <strong class="p-name" itemprop="name headline">$it.title$</strong>
                     $if(it.draft)$
                         <span class="o-badge u-ml-100">Draft</span>
                     $endif$
                 </div>
-                <small class="u-d-block">
-                    $it.subtitle$
-                </small>
+                <small class="u-d-block">$it.subtitle$</small>
             $elseif(it.category)$
-                <small class="u-d-block">
-                    $it.category$
-                </small>
+                <small class="u-d-block">$it.category$</small>
                 <div>
                     <strong class="p-name" itemprop="name headline">
                         $it.title$
@@ -59,20 +76,19 @@
                 </small>
                 <div>
                     <strong class="p-name" itemprop="name headline">$it.title$</strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
             $else$
-                <span class="p-name" itemprop="name headline">
-                    $it.title$
-                </span>
-                $if(it.draft)$
-                    <span class="o-badge u-ml-100">Draft</span>
-                $endif$
+                <span class="p-name" itemprop="name headline">$it.title$</span>
+                $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
             $endif$
         </div>
-        $if(it.post_icon)$
+        $if(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-right"></use>
+            </svg>
+        $elseif(it.is_prev)$
+        $elseif(it.post_icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.post_icon$"></use>
             </svg>
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 9a0b06e..e75fa51 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -9,38 +9,45 @@
     $endif$
 >
     <div class="c-card__row l-media">
-        $if(it.indicator)$
-            <div class="c-card__indicator l-media__block"></div>
-        $endif$
-        $if(it.icon)$
+        $if(it.is_prev)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-left"></use>
+            </svg>
+        $elseif(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#blank"></use>
+            </svg>
+        $elseif(it.icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.icon$"></use>
             </svg>
+        $elseif(it.indicator)$
+            <div class="c-card__indicator l-media__block"></div>
         $endif$
         <div class="l-media__block l-media__block--main">
-            $if(it.subtitle)$
+            $if(it.is_prev)$
+                <small class="u-d-block">Previous</small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
-                <small class="u-d-block">
-                    $it.subtitle$
-                </small>
+            $elseif(it.is_next)$
+                <small class="u-d-block">Next</small>
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+            $elseif(it.subtitle)$
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+                <small class="u-d-block">$it.subtitle$</small>
             $elseif(it.category)$
-                <small class="u-d-block">
-                    $it.category$
-                </small>
+                <small class="u-d-block">$it.category$</small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
             $elseif(it.show_date)$
                 <small class="u-d-block">
@@ -49,23 +56,20 @@
                     </time>
                 </small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
             $else$
-                <span class="p-name" itemprop="name headline">
-                    $it.title$
-                </span>
-                $if(it.draft)$
-                    <span class="o-badge u-ml-100">Draft</span>
-                $endif$
+                <span class="p-name" itemprop="name headline">$it.title$</span>
+                $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
             $endif$
         </div>
-        $if(it.post_icon)$
+        $if(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-right"></use>
+            </svg>
+        $elseif(it.is_prev)$
+        $elseif(it.post_icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.post_icon$"></use>
             </svg>
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index e12f62f..713919a 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -18,21 +18,13 @@
             </svg>
         $endif$
         <div class="l-media__block l-media__block--main">
-            <span class="p-name" itemprop="name headline">
-                $it.title$
-            </span>
-            $if(it.draft)$
-                <span class="o-badge u-ml-100">Draft</span>
-            $endif$
+            <span class="p-name" itemprop="name headline">$it.title$</span>
+            $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
         </div>
         $if(it.subtitle)$
-            <small class="l-media__block u-d-none@sm-lo">
-                $it.subtitle$
-            </small>
+            <small class="l-media__block u-d-none@sm-lo">$it.subtitle$</small>
         $elseif(it.category)$
-            <small class="l-media__block u-d-none@sm-lo">
-                $it.category$
-            </small>
+            <small class="l-media__block u-d-none@sm-lo">$it.category$</small>
         $elseif(it.show_date)$
             <small class="l-media__block u-d-none@sm-lo">
                 <time datetime="$it.last_update.yyyy_mm_dd$" class="dt-updated" itemprop="dateModified">
diff --git a/templates/partials/related.html b/templates/partials/related.html
index 7d29c7a..3097866 100644
--- a/templates/partials/related.html
+++ b/templates/partials/related.html
@@ -16,24 +16,9 @@ $if(related)$
                 $if(related.layout.is_grid-2)$
                     $related.prev:partials/grid_card()$
                     $related.next:partials/grid_card()$
-                $elseif(related.layout.is_grid-3)$
-                    $related.prev:partials/grid_card()$
-                    $related.next:partials/grid_card()$
-                $elseif(related.layout.is_gallery-2)$
-                    $related.prev:partials/gallery_card()$
-                    $related.next:partials/gallery_card()$
-                $elseif(related.layout.is_gallery-3)$
+                $else$
                     $related.prev:partials/gallery_card()$
                     $related.next:partials/gallery_card()$
-                $else$
-                    <div class="u-d-contents u-d-none@sm-lo">
-                        $related.prev:partials/list_card()$
-                        $related.next:partials/list_card()$
-                    </div>
-                    <div class="u-d-contents u-d-none@sm-hi">
-                        $related.prev:partials/grid_card()$
-                        $related.next:partials/grid_card()$
-                    </div>
                 $endif$
             </div>
         </div>
-- 
cgit v1.2.3-70-g09d2