Tip: Using the #withSort option for creating navigation menu

[pacav69]

Using the #withSort in handlebars

Using the #withSort option for creating navigation menu

Description

This will use the list of hbs files with the content of topTitle: Docs from the pages folder to sort using the sortOrder:XX for the navigation menu where XX is the number and replace the contents of title:.

Files used

in the partials/nav.hbs

<!-- .navhbs -->
{{#withSort pages "data.sortOrder"}}
    {{#is data.topTitle "Docs"}}
        <li {{#is ../../page.dest this.dest}} class="active"{{/is}}>
            href="{{relative ../../page.dest this.dest}}">{{data.title}}</a>
        </li>
    {{/is}}
{{/withSort}}
<!-- ./navhbs -->

option for descending order

add to the first line dir="desc" so it reads like this

{{#withSort pages "data.sortOrder" dir="desc"}}

in pages/doctitle1.hbs

---
title: doc title 1
sortOrder: 1
topTitle: Docs

---

in pages/doctitle2.hbs

---
title:  doc title 2
sortOrder: 2
topTitle: Docs

---

in pages/index.hbs

{{>navtoolbar }}

in partials/navtoolbar.hbs

{{> nav }} 

is rendered to dist/index.html

<!-- .navhbs -->
<li
<a href="doctitle1.html">doc title 1</a> 
</li>
<li
<a href="doctitle2.html">doc title 2</a> 
</li>
<!-- ./navhbs -->

---

Directory Structure

    project/

    ├── dist/
    │   └── index.html        
    ├── src/                 
    │   └── templates/        
    │       ├───pages/
    │       │   ├──doctitle1.hbs
    │       │   ├──doctitle2.hbs
    │       │   └──pages/index.hbs
    │       └──partials/
    │          ├──nav.hbs
    │          └──navtoolbar.hbs

[doowb]

Thanks @pacav69