Building a navigation / menu

[sagikazarmark]

I'm trying to replicate something similar to Hugo's menu feature.

I got started by writing a menu in shared data:

menu:
  - title: Page
    url: /page
  - title: Foo
    url: https://domain.com

I'm having trouble figuring out the current page. I know I can hack around with the url variable, but that's kinda hacky.

I also tried using the search plugin, but I can't seem to find a way to search a page by a URL.

Are there any examples out there?

[sagikazarmark]

For the record:

I tried comparing URLs, but that's not 100% accurate solution (eg. trailing slashes can cause trouble).

[sagikazarmark]

Okay, here is the latest version:

menu:
  - page: now
  - title: Slides
    url: https://slides.sagikazarmark.hu

                {{- for entry of menu }}
                    {{- if entry.page }}
                        {{ set page = search.page("basename="+entry.page) }}

                        <a href="{{ page.url |> url(true) }}" class="text-gray-600 hover:text-gray-900 {{ if page.url == url }} font-semibold{{ else }} font-medium{{ /if }}" {{ if page.url == url }} aria-current="page"{{ /if }}>
                            {{ entry.title || page.title }}
                        </a>
                    {{ else }}
                        <a href="{{ entry.url }}" class="text-gray-600 hover:text-gray-900 font-medium">
                            {{ entry.title }}
                        </a>
                    {{ /if }}
                {{ /for }}

Basically, I can search pages based on basename and compare those URLs to the current URL.

[oscarotero]

That's a good solution, but it is possible two pages to have the same basename. For example /now/ and /company/now/.
Some Lume plugins use the id variable to identificate pages, instead of urls. This is useful specially if your page can have different versions (thinking of multilanguage pages).

For example, in your "now" page:

---
id: now
title: Now
---

And you can print the menu as in your latest version but searching by id instead of basename.

[sagikazarmark]

Thanks for the suggestion!

I wonder if it would make sense to share some of these "practices" somewhere. I was looking for a solution on the website and the issue tracker, but I couldn't.

I'm pretty new to Lume, and it seems like a "no strong opinions held" kind of solution which I actually like. At the same time, having some examples of common tasks would be nice. Just a thought.

[oscarotero]

You have a list of all meaningful variables here: https://lume.land/docs/advanced/the-data-model/#data-conventions
Some of them (like type or id) are used only by some plugins, but it's a good idea to adopt them, because it will be easier if you decide to use these plugins later.

But it's a good idea to create a section with best practices. I'll work on that.

[sagikazarmark]

@oscarotero any ideas how I could make this work for paginated pages?

[oscarotero]

For pagination, you have to create a *.page.ts file and use the search and paginate helpers. More info at: https://lume.land/docs/core/searching/#pagination

[sagikazarmark]

I probably should have clarified it better: any ideas how to detect the current page?

From what I can tell, that doesn't work on the Lume blog either:

• https://lume.land/blog/archive/
• https://lume.land/blog/archive/2/

(Note the active state of "Archive").

I guess I could check the path prefix, but that feels hacky and isn't universal either.

I wonder if it would make sense to introduce an "active" state for pages to indicate if the page rendered is the same as a page from a search result. That would certainly make cases like this easier, though I have no idea how much extra complexity it brings.

[oscarotero]

You can create a variable like menu_active_option: "archive", and use this variable in the template that renders the menu to highlight the current option.

This variable can be assigned in the pagination. The lume blog doesn't do that, but it could be easy to implement here: https://github.com/lumeland/theme-simple-blog/blob/main/src/archive.page.js