"Breadcrumbs" and accessing parent pageContext and config

[davenquinn]

Hi all,

I have been trying to solve a problem that I feel is likely achievable using the current capabilities of Vike, but I am not quite sure of the right way to go about it, or how it fits with the current +config model and override approach.

The need is essentially for a list of "breadcrumbs" that can be consumed by the page layouts that map onto the filesystem routing. Basically, each page context needs access to a list of values that collectively represent path items that are "above" the current page, e.g.,

breadcrumbs = [{ path: "/", name: "Home"}, {path: "/docs", name: "Docs"}, {path: "/docs/gettings-tarted", name: "Getting started"}]

I can already do the basic version of this by processing the routeParams object and either inferring the name from the page slug or merging with a globally maintained sitemap that maps paths to names.

My question arises if I want to use a configuration value for each page to locally define how that page's entry should be named. I can almost do this by creating a new cumulative +pageName configuration (avoiding +title because that is already set as non-cumulative by vike-react). However, in order to have a 1:1 relationship with path name, that value would have to be evaluated at every page. If I define +pageName at the root level as some function, like

export function pageName(pageContext) {
  const { title } = pageContext.config;
  if (title != null) {
    return title;
  }
  // would potentially override for potential data logic here...
  const parts = pageContext.urlPathname.split("/");
  return parts[parts.length-1]
}

I only get one entry in the cumulative pageName config representing this function evaluated for the current page context.

Is there a recommended way to get a config value evaluated at each level of the nested route hierarchy, beyond defining the config value explicitly at every level? Would be curious to hear how others would/have solved this.

Thanks!

[brillout]

See https://vike.dev/markdown#metadata — the bottom line is that it's important to realize that the implementation depends on whether you want the page metadata to be available to all pages (global) or only to the page (local).

Is there a recommended way to get a config value evaluated at each level of the nested route hierarchy, beyond defining the config value explicitly at every level?

I ain't sure what you mean. In principle, with +meta you can do whatever you want, but if you can elaborate on how your design idea would concretely implement your breadcrumbs use case, I'll be able to assist further.

I updated the +meta docs (f1a64ce).