ComboStrap UI - Page Explorer

A page-explorer is a navigational component that creates a navigation pane in the form of:

• a list
• or a collapsible tree (ie clickable levels of folder hierarchy)

This component is mostly used in a side slot or sidekick slot

A default page-explorer list pane can be asked with this minimal markup (the ns (namespace) and width options are just cosmetic and could be deleted)

<page-explorer ns=":release" width="300px"></page-explorer>

and will look like this where the label for each page is the page name

• Release
• Home
• Archive
• Beta
• Deprecated
• Release 1.18
• Release 1.19
• Release 1.20
• Release 1.21
• Release 1.22
• Release 1.23
• Release 1.24
• Latest
• Update

A page-explorer tree does not need any template definition.

• with a minimal markup (The ns option is a cosmetic and can be deleted)

<page-explorer tree ns=":docs:layout"></page-explorer>

• a page-explorer tree will look like this:

<page-explorer color="blue" height="250px" width="400" scroll="toggle">
    <parent>[[$path|<icon name="arrow-left-box"/> ... <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</parent>
    <page>[[$path|<icon name="file"/> <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</page>
</page-explorer>

where the page template is composed of:

• an icon
• a link without underline
• and a pipeline to modify the heading 1 of the page.

• Navigation
• … Documentation
• Backlink
• Breadcrumb
• Hierarchical Breadcrumb
• Historical Breadcrumb
• Outline
• Page explorer
• Related
• Toc

Example:

<page-explorer tree ns=":docs:layout">
    <home>[[$path|<icon name="home" color="#0000004d" width="20"/> Overview]]</home>
    <ns><pipeline>"$h1" | cut("-","2-") | trim() </pipeline></ns>
    <page>[[$path|<icon name="file" color="#0000004d" width="20"/>  <pipeline>"$h1" | cut("-","2-") | trim() </pipeline>]]</page>
</page-explorer>

where the page template is composed of:

• an icon
• a link
• and a pipeline to modify the heading 1 of the page.

It produces:

<page-explorer type ns="namespacePath">
  <page>template</page>
  <namespace>template</namespace>
  <home>template</home>
  <parent>template</parent>
</page-explorer>

where:

• the attributes are:
  • type that defines the layout and may be one of this two value:
    • list to create a list navigation pane (the default)
    • tree to create a tree navigation pane
  • ns that defines the namespace. The default value is the namespace of:
    • the rendered page for a list
    • the physical page for a tree.
• the sub-elements page,namespace, home and parent define templates for each page-explorer node.

page-explorer, home, page, parent and namespace are all superset HTML component.

The templates define the output of each node in the list or tree layout:

• page defines a template for each page in the namespace
• home defines a template for the home page of the namespace
• namespace defines a template for each child namespace of the actual namespace
• parent defines a template for the parent namespace of the actual namespace (used only in the list layout)

The below image shows you the mapping between the tag and their location in a list layout.

The below image shows you the mapping between the tag and their location in a tree layout.

• if the page tag is is not defined, the below default page template is used

[[$path|$name]]

• if the namespace tag is not defined, a default namespace template is used

<!-- For a list -->
[[$path|<icon name="mdi:folder"/> $name]]
<!-- For a tree -->
$name</pipeline>

• if the parent tag is not defined, a default parent template is used

[[$path|<icon name="icons8:level-up"/> $name]]

• if the home tag is is not defined, the page template is used

The page-explorer tree is recreated when:

• a primary metadata (title, name, description) is modified (primary meta dependency)
• a page is added or deleted (page system dependency)

If your tree has a lot of pages, it may seems slow:

• while editing
• or for the first viewer