TrailMap

TrailMap is a simple Functional Component to be used with @stencil/router within Stencil apps. It simplifies the process of grouping a set of routes and mapping URLs to a path where content can be found.

Getting Started

npm install @smore/trailmap

Add TrailMap to your <stencil-route-switch> definiton (most likely in app-root.) Under the hood, it will generate the necessary <stencil-route> and <stencil-router-redirect> elements.

import { TrailMap } from '@smore/trailmap';

/** More on this below */
const DocPaths = new Map<string, string>([
    ['hello-world', 'content/intro/hello-world.md']
])

...

<stencil-router>
    <stencil-route-switch scrollTopOffset={0}>
        <stencil-route url='/' component='page-home' exact={true} />
        <TrailMap base='/docs' component='page-docs' paths={DocPaths} />
        <stencil-route component='page-notfound' />
    </stencil-route-switch>
</stencil-router>

Rendering Content

The component you pass to component will be passed MatchResults with both name and path.

In order to render the content, you will likely need to do something like:

export class MyComponent {
    @Prop() match: MatchResults;

    componentDidLoad() {
        fetch(this.match.params.path)
            .then(res => res.text())
            .then(content => this.handleContent(content))
    }
}

If all of your content is an .md file contained in /content, then you might consider fetching using the paths value to store just the document path (intro/hello-world) and fetching content/${this.match.params.path}.md in the component

API

TrailMap Props

** base ** The base URL for this group of routes, for example /docs

** component ** The component that should be rendered when a route matches, for example page-docs.

** paths ** A Map<string, string> object containing all possible valid routes.

The key of each entry represents the url path, appended to base (for example, hello-world would become /docs/hello-world)

The value of each entry represents a path to the content, to be passed to the component as MatchResults.params.path (for example, /content/intro/hello-world.md)