Reordering files + Tina CMS | Astro Lounge | Page 1

tawdry garden May 15, 2023, 11:24 AM

#

Hi, I'm building a site with Astro and Tina CMS. I have a pages collection where the user can create markdown pages on the site, the routes for the pages are added to the main navigation. I have this all working nicely.

My main issue now is I want to be able to set the order that the page links appear in the main navigation. I'm not sure of the best way to do this, one option is numbering each page in the frontmatter but I think this could get messy as numbers would need to be unique. Another option is storing a list of routes in a file which can be read by Tina as a single page collection, then the order of the list can be changed by dragging and dropping the order in Tina. I have a working draft of this using a manually created list in the frontmatter of a markdown file.

But this could be a bit of a pain to manage, having to manually add the pages to the list. So I'm wondering if I can generate a list by reading all the pages in my collection. So, each time a new page is created, the page would be added to the list.

Sorry, really quite tricky to explain, hope it makes sense. I'm totally open to other options if there is a better way to achieve this.

Any suggestions would be greatly appreciated 👍
Thanks!

storm leafBOT May 15, 2023, 12:30 PM

#

Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

hallow dome May 15, 2023, 12:52 PM

#

Hi Magneze

#

Typically you'd want to have an object or array that contains all the urls and menu item labels in order.

#

const menu = [
  {
    url: '/my-page',
    label: 'My Page'
  },
....
]

#

then you can render the menu in the order of the array

tawdry garden May 15, 2023, 1:08 PM

#

HI, thanks, that's really helpful. Do you think it would be possible to create this array from the page collection?

hallow dome May 15, 2023, 1:34 PM

#

Do you want every single page in the menu?

#

Either way you might be able to do what you want using Astro.glob https://docs.astro.build/en/reference/api-reference/

storm leafBOT May 15, 2023, 1:36 PM

#

Reference: API Reference - Astro global #astroglob

Astro.glob() is a way to load many local files into your static site setup.
Copied!
.glob() only takes one parameter: a relative URL glob of which local files you’d like to import. It’s asynchronous, and returns an array of the exports from matching files.
.glob() can’t take variables or strings that interpolate them, as they aren’t statically analyzable. (See the troubleshooting guide for a workaround.) This is because Astro.glob() is a wrapper of Vite’s import.meta.glob().
Note
You can also use import.meta.glob() itself in your Astro project. You may want to do this when:
You need this feature in a file that isn’t .astro, like an API route. Astro.glob() is only available in .astro files, while import.meta.glob() is available anywhere in the project.
You don’t want to load each file immediately. import.meta.glob() can return functions that import the file content, rather than returning the content itself.
You want access to each file’s path. import.meta.glob() returns a map of a file’s path to its content, while Astro.glob() returns a list of content.
You want to pass multiple patterns; for example, you want to add a “negative pattern” that filters out certain files. import.meta.glob() can optionally take an array of glob strings, rather than a single string.
Read more in the Vite documentation.

#Reordering files + Tina CMS