To show the cards, we can listen to an event called oncardschanged. This event is dispatched when the reader navigates to the landing page. The event details contain the information needed to generate the layout.

Check if we're on a landing page as opposed to a custom page. (You could also implement the same thing on a custom page if needed)

event.detail.docs is an array of objects representing the available card grouping strategy. Each object (variable card here) has a title and a link. This represents a category in our documentation. We'll create a card of each one of them, then create an H4 which will contain the link to the title.

Each object also has details, which again is an array of objects containing titles and links. This represents a page in our documentation. We'll create a link for each object and place it in the card.

The rest of the code is using bootstrap classes to make two nice columns and adding the cards to them. There is a "Show All" button which takes the main link of the card.

The last function window.applyClickHandlersOnLinks() tells the renderer to make the links that were just added using javascript into single page application links. Without this call, clicking on a link makes the whole page refresh. Always remember to call it after all links are added.