Repository files navigation

NextPage allows dense webpages to share important points of information to users through an interface without the users needing to leave the current webpage.

NextPage helps users avoidtab hopping, keeping them focused on understanding information in the desired context.

Webpages can become NextPage-enabled by definingNextPage nodes directly in the HTML. This ensures that only publicly available information is accessible and enables querying other NextPage-enabled pages for relevant content.

This quick start guide will walk you through creating your first NextPage Node and understanding the overview of all the components and how they work together.

To make a webpage NextPage-enabled at the minimum requires defining2 NextPage meta tags in the head of your html document:

<metaname="np:title"content="..."><metaname="np:description"content="...">

Meta tags defined in the head are called"fallbacks" and will be used to"patch" anyfields not defined in a queriednode.

Nodes represents the object that is returned from a query. To create a node you must define thenp-node attribute inside an element in the body of the html.

<articlenp-node="primary"><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1><p>      John Mayer is a Grammy-winning singer-songwriter and guitarist known for his soulful music and exceptional guitar skills. With 7 Grammy Awards and numerous chart-topping albums, he's captivated audiences worldwide with hits like "Gravity" and "Slow Dancing in a Burning Room."</p></article>

The"primary" value defined innp-node denotes thelevel of granularity the node represents.

Field attributes represents the information the node will contain. These fields will be used in the different sections of the interface shown to the client.

Field attributes can be defined in 2 ways,explicitly andimplicitly. This example shows usingexplicitly defined field propertiesnp-title andnp-description where the value of the attribute will be used.

<articlenp-node="primary"np-title="John Mayer: Grammy-Winning Music Icon"np-description="John Mayer, a Grammy-winning guitarist and singer, is known for soulful hits like “Gravity” and “Slow Dancing in a Burning Room."><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1><p>          John Mayer is a Grammy-winning singer-songwriter and guitarist known for his soulful music and exceptional guitar skills. With 7 Grammy Awards and numerous chart-topping albums, he's captivated audiences worldwide with hits like "Gravity" and "Slow Dancing in a Burning Room."</p></article>

Views describe how the node should be shown to the client. Depending on the view, it will also required usingspecific Field attributes and can be definedimplicitly orexplicitly.

In this example we willexplicitly define the most basic view called"basic" using thenp-view attribute, that only requires definingnp-title andnp-description field attribute.

<articlenp-node="primary"np-view="basic"np-title="John Mayer: Grammy-Winning Music Icon"np-description="John Mayer, a Grammy-winning guitarist and singer, is known for soulful hits like “Gravity” and “Slow Dancing in a Burning Room."><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1><p>          John Mayer is a Grammy-winning singer-songwriter and guitarist known for his soulful music and exceptional guitar skills. With 7 Grammy Awards and numerous chart-topping albums, he's captivated audiences worldwide with hits like "Gravity" and "Slow Dancing in a Burning Room."</p></article>

Congratulations, You've created your first NextPage-enabled webpage. Now when you query the webpage using theNextPage Client from another page it will display abasic view with your settitle anddescription.

Fields represents the different data a node can contain and are used in the different sections of the interface shown to the client.

When defining fields as fallbacks within the head tag, it should be appended with thenp: namespace.

<metaname="np:{field}"content="up to 48 characters"><!-- ie --><metaname="np:title"content="up to 48 characters">

When defining fields as part of a node it is declared by appending"np-" to the field name as a attribute.

<articlenp-node="primary"np-title="John Mayer: Grammy-Winning Music Icon"><!-- np-{field} -->    ...</article>

Fallbacks allow you to definedefault values for fields that can be used asfallbacks for when nodes don't define specific field.

These fallbacks are also used to build adefault node for when a node is queried and not found.

You can use fallbacks to define a "global default node" for the whole page, this will be used as thelast resort node or when a NextPage-enabled webpage is queried without defining a node.

<metaname="np:title"content="..."><metaname="np:description"content=" ..."><metaname="np:action"content=" 'label' > 'url'">

Nodes represents the objects that are returned from a query. To create a node you must define thenp-node attribute inside an element in the body of the html.

<articlenp-node="primary">    ...</article>

np-node can declare one of 5predefined values that describe the importance of the data the node represents.

• primary: The core information about the subject of the page.

• secondary: Nuanced or extended information about the subject of the page.

• tertiary: Loosely related or adjacent information about the subject.

• important: Represents an important note on the data, but not necessarily the data itself. This is usually temporary data and will revert to"primary" if queried but not explicitly defined.

• warning: Describes cautionary messages, such as warnings and errors related to the subject of the page. This is typically a temporary node and will result innull if queried but not explicitly defined.

You can also define your own node values which will act as IDs that then can be queried by clients the same way as the predefined values.

If a client queries a custom node and it's not found, NextPage will look for theprimary node and if theprimary node is not found, the client will use the fallback default node.

Explicitly defined field attribute use the values within its definition as the values for the field. This allows nodes to contain different or more curated data for the node than what shows up on the webpage, allowing for more control.

<articlenp-node="primary"><h1np-title="John Mayer: Grammy-Winning Music Icon">John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1>    ...</article><!-- Both declarations are valid --><articlenp-node="primary"np-title="John Mayer: Grammy-Winning Music Icon"><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1>    ...</article>

Implicit definitions will use the values within theinnertext of the element it's declared in as its value. This can be used for data consistency, but keep in mind the character limits of thefields you decide to use.

<articlenp-node="primary"><h1np-title>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1>    ...</article>

Some Implicitly defined field properties only work with specific elements:

View Types represent the type of view the node appears as to the client and is declared using thenp-view attribute when defined in a node andnp:view when defined as a fallback.

NextPage has the ability to detect the view type by the Field Properties defined in the node.

By defining at least onenp-image field attribute within the node, NextPage will know to define the node view asgallery.

<articlenp-node="primary"np-title="John Mayer: Grammy-Winning Music Icon"np-description="John Mayer, a Grammy-winning guitarist and singer, is known for soulful hits like “Gravity” and “Slow Dancing in a Burning Room."><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1><p>          John Mayer is a Grammy-winning singer-songwriter and guitarist known for his soulful music and exceptional guitar skills. With 7 Grammy Awards and numerous chart-topping albums, he's captivated audiences worldwide with hits like "Gravity" and "Slow Dancing in a Burning Room."</p><imgnp-imagesrc="john-mayer.jpg"alt="John Mayer performing live"/><!-- implicitly defining an image --><imgnp-imagesrc="john-mayer-grammy.jpg"alt="John Mayer holding grammy"/><!-- implicitly defining an image --></article>

Explicit view types allow you to better control the type of view the node should display.

When defining a node explicitly asbasic, even if a node defined the field propertynp-img it will be ignored.

<articlenp-node="primary"np-view="basic"np-title="John Mayer: Grammy-Winning Music Icon"np-description="John Mayer, a Grammy-winning guitarist and singer, is known for soulful hits like “Gravity” and “Slow Dancing in a Burning Room."><h1>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1><p>          John Mayer is a Grammy-winning singer-songwriter and guitarist known for his soulful music and exceptional guitar skills. With 7 Grammy Awards and numerous chart-topping albums, he's captivated audiences worldwide with hits like "Gravity" and "Slow Dancing in a Burning Room."</p><imgnp-imagesrc="john-mayer.jpg"alt="John Mayer performing live"/><!-- ignored --><imgnp-imagesrc="john-mayer-grammy.jpg"alt="John Mayer holding grammy"/><!-- ignored --></article>

A standardizedNextPage client implementation is available and demonstrates how to query NextPage-enabled webpages from the client side.