ld-navigation

Routing-like element for the modern Web

ld-navigation

A set of Web Components for data-driven Linked Data REST client in the browser.

With ld-navigation you let actual Linked Data be the router of your application.

You then simply GET and decide what to display based on the data returned. No more client-side routing.

<ld-navigator>

Control current resource in relation to document path Maintain browser history with HTML history API Set up base resource URL and base client path to tweak routing

<ld-link>

Initiate transition between application states

Demos

Demos and sort-of documentation.

ld-navigation also plays nice with location.hash history.

Installation

Run yarn add ld-navigation

In your code

// main element, required
import 'ld-navigation/ld-navigator'
// optionally, to wrap links
import 'ld-navigation/ld-link'
// optionally, to initiate navigation manually
import fireNavigation from 'ld-navigation/fireNavigation'

No external dependencies

Usage

Let's assume that:

• Your website is at http://www.my.app/.
• Your Linked Data API is at http://api.my.app/.

<!-- navigator exposes a resourceUrl property, see below -->
<ld-navigator></ld-navigator>

<!-- ld-link replaces or wraps anchor -->
<ld-link resource-url="http://api.my.app/people">get people</ld-link>
<ld-link resource-url="http://api.my.app/projects">
    <a>get projects</a>
</ld-link>

<script>
var navigator = document.querySelector('ld-navigator')
navigator.addEventListener('resource-url-changed', function(e) {
    // same url sits in e.detail.resourceUrl
    var nextUrl = navigator.resourceUrl;

    // no go ahead and $.get or window.fetch your data from nextUrl
    window.fetch(nextUrl).then(bindDataWithPage);
  });
</script>

With the above code, when you click the first link, the browser moves to http://www.my.app/http://api.my.app/people and the resource-url-changed event is fired.

Base URL

Obviously an URL like http://www.my.app/http://api.my.app/people is ugly (and, well, invalid). It is possible to get rid of the API domain by adding an attribute to the <ld-navigator> tag:

<ld-navigator base="http://api.my.app"></ld-navigator>

This way the API domain is stripped out from the browser address bar and http://www.my.app/people remains. This is where client-side routing becomes virtually obsolete.

Polymer

ld-navigation will also play nice with Polymer - see the demos above.

Tests

Tests are written with @open-wc/testing.

yarn install
yarn test:local

Links

• View on NPM
• View on GitHub

Compatibility