Grouped content

[stijns96]

Is your feature request related to a problem? Please describe

I'm creating a docs for a big scala of sections and snippets where I want to group variants together. E.g. a content section can have 70 variations, but other sections as well. I want them all to be accessible as ./components/sections/section-name-1 etc. Not like ./components/sections/section-group/section-name-1/ Mainly because of the content navigation.

Describe the solution you'd like

Actually the same behaviour of the Nuxt grouped pages solution.

The think is that I want to group sections into categories, but don't want them to be grouped in the fetched navigation.

[stijns96]

Maybe could be done with settings navigation to false for that folder?

[stijns96]

Some extra context, I want to have something like the following:

Of course this is possible to transform some data in the collectionNavigation, but it would be really nice if we could do something with folder syntax.

[AssetCEO]

This is a great idea, especially for blogs with a large number of articles. I also really need this feature.

However, the question that comes with it is: when users click on the link, such as "blog (3)" in the interface, what will they see? Do we need to create a separate article list UI for each group route? I don't have a perfect solution yet. @stijns96, do you have any thoughts on this?

[stijns96]

Hi @AssetCEO ,

For me it functions as a category filter. I modify my object so it contains a to object with some extra query settings etc. I can show it later on today.

To me it would be handy if that grouped folder is ignored or stripped out from the queryNavigation and queryCollection. Or at least add an extra property to the object. E.g. grouped: true. Like they do with page: boolean.

[stijns96]

Hi @AssetCEO,

So here is my code to fix it for my project:

/**
 * Get the content navigation for the current page.
 */
const { data: contentNavigation } = await useAsyncData(
  `${route.path}-navigation`,
  () => queryCollectionNavigation(componentType.value, ['meta']),
  {
    transform: (data) => data[0].children[0].children // Directly strip out unused folder items
  }
);

/**
 * Create the grouped content navigation items.
 */
const groupedContentNavigationItem = computed(() => {
  return contentNavigation.value
    .filter(({ folder }) => folder)
    .map((item) => {
      return {
        ...item,
        title: item.title,
        children: item.children.map(formatItem)
      };
    });
});

/**
 * Create the content navigation items.
 */
const contentNavigationItems = computed(() => {
  return contentNavigation.value
    .filter(({ folder }) => !folder)
    .map(formatItem);
});

I'm filtering this based on a value from the .navigation.yml that need to be the "grouped" folder

title: Title
folder: true

This results in:

The grouped items are at the top, while the flat items will be placed below the groups.

    <UPage>
      <template #left>
        <UPageAside>
          <template #top>
            <UNavigationMenu
              :items="componentsNavigation"
              orientation="vertical"
              variant="link"
            />
          </template>

          <USeparator type="dashed" :ui="{ root: 'mb-8' }" />

          <UContentNavigation
            :navigation="groupedContentNavigationItem"
            variant="link"
          />
          <UContentNavigation
            :navigation="contentNavigationItems"
            variant="link"
          />
        </UPageAside>
      </template>
    </UPage>