Order nav items

[bradfrost]

We need to set an order and have the ability to order nav items appropriately

[QuincyGow]

Ok. This provides an example of where I tend to get frustrated. There is no simple html list with the items. So I'm digging around trying to figure out where a list is, when, if it was an html, this would be simple. So I end up looking at every single type of file containing c-tree-nav or header nav just looking for a simple list of the items to no real avail.

[QuincyGow]

Add an order property to all the markdown files.

Space them out by 10. Order 10, order 20, etc...

Eleventy is a reference -custom ordering

[QuincyGow]

Update: I feel like I'm super close with this one.

-Step 1: I downloaded the plug-in via npm install @11ty/eleventy-navigation --save-dev

-Step 2: Added the following to eleventy.js under Import filters: const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')

Added under Plugins: config.addPlugin(eleventyNavigationPlugin);

-Step 3: Then, in an attempt to follow the directions more closely, I added the following to a few of the files to try and get it to work:

---
title: Installing Pattern Lab
tags:
  - docs
category: getting-started
eleventyNavigation:
  key: Install
  parent: getting-started
order: 10
---

Still not working. May be that I'm getting the key and parent wrong? Not sure. Try again tomorrow.

---

Saturday status: Following the instructions on the eleventy site I added the eleventy nav plug-in npm install @11ty/eleventy-navigation --save-dev along with the js code:

const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
};

Then, for example, I added the property as so...

---
title: Upgrading Pattern Lab
tags:
  - demo-content
  - blog
  - media
category: getting-started
eleventyNavigation:
  order: 10
---

But it wouldn't work. Try again tomorrow.

[QuincyGow]

Dirty solution: Copying each .md and adding them in reverse order. The most recent add always goes to the top of the list. Of course, if you want to add something in the middle of the list you'd have to go through the whole list again, which would be a pain.

Continuing to try and get this to work.

[QuincyGow]

In order to test out different solutions I created a nav item navtest with two subnavs one and two trying basically to just switch them around.

I've followed the direction on the 11ty site to no avail.

There are a couple potential problems here.

• I didn't add the njk code in the right spot. Seen here: {% set navPages = collections.all | eleventyNavigation %} {{ navPages | dump | safe }}I've tried in navigation, tree-nav and tree-subnav. Maybe I'm missing something here but these are the relevant files as far as I can tell.
• From to the 11ty site the directions have the list items build on top of .md files. Because of the structure in this page the parent elements are not .md files. This may be causing issues with the build. The confusing thing is that it won't even recognize parent elements in the list.

• The parent list items may need to be .md files in order to get it to work.

  The big question, is do you want to restructure everything?

[bradfrost]

@frostyweather I posted to the Eleventy project about ordering the nav items, and this is what people came back with: https://github.com/11ty/eleventy/issues/981

It seems like this navigation plugin would be the best to implement since it provides exactly this kind of functionality: https://github.com/11ty/eleventy-navigation

[bradfrost]

This logic is in here, all we need to do is add the order frontmatter to each doc file.