Plugin Idea: Breadcrumbs

[nickreese]

Hey all, a common SEO item that is needed is to add breadcrumbs to a site.

I've got a hacky implementation on all of my projects, but I think it is time to make a more official plugin. Below you'll see a high level overview of a "spec" along with implementation details.

Requests:

Upvote: If you'd like to see this made.
Comment: If you can test or are interested in helping development.

Overview:

Adding breadcrumbs to a site can impact your listing in the SERPs (search engine result page) and it can be important for having a great UX of your site.

Problem:

The core problem of breadcrumbs in a static site generator is understanding the relationship between routes. After several attempts at approaches... including colocating route relationships within the route.js files... I believe a plugin is best suited to offer this functionality.

Data structure

Given routes: home, levelOne, levelTwo, and levelThree the plugin should accept a data structure like so:

{
  home: {
    label: ({ request, settings, data, query }) => 'Home',
    children: {
      levelOne: {
        label: ({ request, settings, data, query }) => 'One Level Deep',
        children: {
          levelTwo: {
            label: ({ request, settings, data, query }) => 'Two Levels Deep',
            children: {
              levelThree: {
                label: ({ request, settings, data, query }) => 'Three Levels Deep',
                children: {},
              },
            },
          },
        },
      },
    },
  },
};

The plugin would then trace the hierarchy and offer a {{{breadcrumbs request=""/}}} shortcode.

Under the hook the plugin would trace the parents all the way up and output labels along with the permalink for the route.

Complexity

The hardest part of this entire process is making sure that the request object has all of the details required to make the permalinks for the parent pages.

This is a lot harder than you'd expect.

Example: Home -> State -> City

Given a plugin hierarchy that looks like:

{
  home: {
    label: ({ request, settings, data, query }) => 'Home',
    children: {
      state: {
        label: ({ request, settings, data, query }) => 'State',
        children: {
          city: {
            label: ({ request, settings, data, query }) => 'City',
            children: {},
          },
        },
      },
    },
  },
};

Things get complex when building the city's breadcrumbs because the city request must include all of the needed details to generate the state's permalink.

Easier with Dynamic Routing

This is much less of a problem with dynamic routing because assuming a URL structure of example.com/florida/miami/ it is pretty easy to extract the parameters of the route and know they should exist. Also since we know the permalink definition of the route, we can have two route definitions of equal priority (/:foo/:bar/ and /:one/:two) and not have problems.

Managing the Complexity

Given this complexity and that part of Elder.js' core is giving users full control over their URL structure, I believe we should allow the user of permalink functions and to specify a breadcrumbArray({ request, settings, data, query }) function where the user could specify the exact breadcrumbs that should be used by the plugin.

This is the approach I've used on my internal sites to manage complex issues and it works well.

Goals:

• [] Shortcode to generate breadcrumb output.
• [] Add a breadcrumbs array to the request object so that users can do with it as they please.
• [] Enable adding automatic generation of ld+json to the head.
• [] Ability to define separators of the breadcrumbs: /, >, and » should be supported.
• [] Usage of a function to define the label of a breadcrumb gives the user full control of that label text.

Non Goals:

-[] Styling should be left up to the user.

[timeshift92]

Hi,It is also often necessary to translate routes into the desired language,
I am ready to try to develop